(String, int, int) getPerson(Map<String, dynamic> json) {
  return (
    json['name'],
    json['age'],
    json['height'],
  );
}

final person = getPerson(json);
print(person.$1); // 'Andrea'
print(person.$2); // 38
print(person.$3); // 184

또한, 레코드는 디스트럭처링을 지원합니다. 디스트럭처링을 사용하여 반환된 값을 이렇게 분해할 수 있습니다:

final (name, age, height) = getPerson(json);
print(name); // 'Andrea'
print(age); // 38
print(height); // 184

향상된 switch와 if-case 문장

Dart 3는 switch 표현식을 도입하였습니다. 예를 들어, 이전에 switch문을 사용하여 작성했던 코드는 다음과 같이 간결하게 재작성할 수 있습니다:

enum Move {
  up,
  down,
  left,
  right;

  Offset get offset => switch (this) {
        up => const Offset(0.0, 1.0),
        down => const Offset(0.0, -1.0),
        left => const Offset(-1.0, 0.0),
        right => const Offset(1.0, 0.0),
      };
}

Sealed classes 및 기타 클래스 수정자

Sealed classes는 모든 가능한 경우를 처리할 수 있도록 도와줍니다. 예를 들어, 백엔드에서 반환될 수 있는 모든 인증 예외를 정의하기 위해 Sealed classe를 사용할 수 있습니다:

sealed class AuthException implements Exception {}

class EmailAlreadyInUseException extends AuthException {
  EmailAlreadyInUseException(this.email);
  final String email;
}

class WeakPasswordException extends AuthException {}

class WrongPasswordException extends AuthException {}

class UserNotFoundException extends AuthException {}

String describe(AuthException exception) {
  return switch (exception) {
    EmailAlreadyInUseException(email: final email) =>
      'Email already in use: $email',
    WeakPasswordException() => 'Password is too weak',
    WrongPasswordException() => 'Wrong password',
    UserNotFoundException() => 'User not found',
  };
}

클래스 키워드

fianl로 클래스 선언: extends, implement, 또는 mixin으로 사용이 불가능합니다. but 같은 파일에서는 가능합니다.

final class Person{
    final String name;
    final int age;

    Person({
        required this.name,
        required this.age,
    });
}

base로 클래스 선언: base로 선언하면 extends는 가능하지만 implement는 불가능합니다. base, sealed, final로 선언된 클래스만 extend가 가능합니다.

base class Person{
    final String name;
    final int age;

    Person({
        required this.name,
        required this.age,
    });
}

interface로 선언하면 implement만 가능하다.

interface class Person{
    final String name;
    final int age;

    Person({
        required this.name,
        required this.age,
    });
}

Sealed class 는 abstract이면서 final이다. 패턴매칭을 사용할 수 있도록 해준다.

sealed class Person{};

class Idol extends Person{};
class Engineer extends Person{};
class Chef extends Person {} //아래 스위치 문에서 에러 발생

String whoIsHe(Person person) => switch(person){
    Idol i => '아이돌',
       Engineer e => '엔지니어',
    _ => '나머지' // 이런식으로 패턴을 매칭 시켜줘야된다.
};

mixin class

1) mixin은 extends나 with을 사용 할 수 없다. 그렇기 떄문에 mixin class 도 마찬가지로 사용불가능하다 2) 클래스는 on 키워드를 사용 할 수 없다. 그렇기 때문에 mixin class도 on 키워드를 사용 할 수 없다.

mixin class AnimalMixin{
    String bark(){
        return '멍멍';
    }
};

flutter pub run flutter_native_splash:create

즉, AOT 컴파일된 언어는 프로그램이 실행되기 전에 미리 컴파일되어 기계어로 번역되므로 실행 속도가 매우 빠르고, 높은 안정성과 안전성을 제공합니다. 이러한 특징 때문에 AOT 컴파일된 언어는 보안에 민감한 애플리케이션 및 모바일 장치에서 많이 사용됩니다. 예를 들어, C, C++ 등이 AOT 컴파일된 언어입니다.

Flutter에서 const와 final은 모두 불변(immutable) 변수를 선언하는 키워드입니다. 그러나 둘 사이에는 몇 가지 중요한 차이점이 있습니다.

const: const 키워드로 선언된 변수는 컴파일 타임 상수(compile-time constant)입니다. 즉, 변수가 선언될 때 해당 값이 결정되며, 이후에는 값을 변경할 수 없습니다. const로 선언된 변수는 반드시 리터럴(literal) 값을 가져야 합니다.

final: final 키워드로 선언된 변수는 런타임 상수(runtime constant)입니다. 즉, 변수가 초기화될 때 결정되며, 이후에는 값을 변경할 수 없습니다. final로 선언된 변수는 리터럴 값을 가져야 할 필요는 없으며, 다른 변수나 표현식의 결과를 할당할 수 있습니다.

또한, const는 클래스, 메서드, 생성자 및 변수에서 사용할 수 있지만, final은 변수, 클래스 멤버 변수 및 로컬 변수에서만 사용할 수 있습니다.

예를 들어, 다음과 같이 const와 final을 사용하여 변수를 선언할 수 있습니다.

const pi = 3.14; // const 변수 선언
final currentTime = DateTime.now(); // final 변수 선언

위 코드에서 pi는 컴파일 타임 상수이므로, 다른 값으로 재할당할 수 없습니다. 반면에, currentTime은 런타임 상수이므로 초기화할 때 결정되며, 이후에는 값을 변경할 수 없습니다.

따라서, const와 final은 모두 불변 변수를 선언하는 키워드이지만, 상수의 값을 결정하는 시점이나 변수를 사용할 수 있는 범위 등에서 차이점이 있습니다.

https://ko.docs.klaytn.foundation/content/dapp/json-rpc/api-references/personal#personal_sign

모바일 메타마스크 앱에서 인앱 브라우저를 열때 지정한 링크로 바로 열 수 있는가

• 결론 : 현재까지의 리서치 및 테스트 결과로는 메타마스크 앱을 여는 것까지만 가능했다. 우리 사이트로 이동 시키러면 다시 메타마스크 앱의 브라우저를 열어서 url을 입력 하게해야한다.

ArrayBuffer ArrayBuffer는 바이트로 구성된 배열로, 다른 언어에서는 종종 "바이트 배열"이라고 부릅니다. ArrayBuffer에 담긴 정보를 직접 수정하는 것은 불가능하지만, 대신 형식화 배열이나 DataView 객체를 통해 버퍼를 특정 형식으로 나타내고, 이를 통해 버퍼의 내용을 읽거나 쓸 수 있습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

데이터를 넣을때 ArrayBuffer 형태로 넣어야한다. return값도 ArrayBuffer로 나온다. key는 받아서 CryptoKey형태로 넣어야된다.

function str2ab(str: any) {
    const buf = new ArrayBuffer(str.length);
    const bufView = new Uint8Array(buf);
    for (let i = 0, strLen = str.length; i < strLen; i++) {
      bufView[i] = str.charCodeAt(i);
    }
    return buf;
  }

  const pemEncodedKey = `-----BEGIN PUBLIC KEY-----
  -----END PUBLIC KEY-----`;

  function importRsaKey(pem: any) {
    // fetch the part of the PEM string between header and footer
    const pemHeader = "-----BEGIN PUBLIC KEY-----";
    const pemFooter = "-----END PUBLIC KEY-----";
    const pemContents = pem.substring(
      pemHeader.length,
      pem.length - pemFooter.length
    );
    // base64 decode the string to get the binary data
    const binaryDerString = window.atob(pemContents);
    // convert from a binary string to an ArrayBuffer
    const binaryDer = str2ab(binaryDerString);

    return window.crypto.subtle.importKey(
      "spki",
      binaryDer,
      {
        name: "RSA-OAEP",
        hash: "SHA-1",
      },
      true,
      ["encrypt"]
    );
  }

  async function encryptMessage(publicKey: any) {
    const data = str2ab(jsonData);
    const ciphertext = await importRsaKey(publicKey);
    return window.crypto.subtle.encrypt(
      {
        name: "RSA-OAEP",
      },
      ciphertext,
      data
    );
  }
   const encryptData = await encryptMessage(pemEncodedKey);

  function importPrivateRsaKey(pem: any) {
    // fetch the part of the PEM string between header and footer
    const pemHeader = "-----BEGIN PRIVATE KEY-----";
    const pemFooter = "-----END PRIVATE KEY-----";
    const pemContents = pem.substring(
      pemHeader.length,
      pem.length - pemFooter.length
    );
    // base64 decode the string to get the binary data
    const binaryDerString = window.atob(pemContents);
    // convert from a binary string to an ArrayBuffer
    const binaryDer = str2ab(binaryDerString);

    return window.crypto.subtle.importKey(
      "pkcs8",
      binaryDer,
      {
        name: "RSA-OAEP",
        hash: "SHA-1",
      },
      true,
      ["decrypt"]
    );
  }
  const privateKey = `-----BEGIN PRIVATE KEY-----
  -----END PRIVATE KEY-----`;
  async function decryptMessage(ciphertext: any) {
    const pk = await importPrivateRsaKey(privateKey);
    return window.crypto.subtle.decrypt(
      {
        name: "RSA-OAEP",
      },
      pk,
      ciphertext
    );
  }
  const decryptData = await decryptMessage(encryptData); 

참고 https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto

MDN은 신이다

회원가입 플로우 회원 정보 -> 휴대폰 인증-> 회원가입 완료.

문제점. 회원 정보를 받은뒤 휴대폰인증을 할때 nice본인인증을하고 난 뒤에 돌아오면 vuex가 초기화되면서 처음에 받은 회원정보가 날아가는 문제가 존재함.

시도 1. 잠시동안 로컬스토리지에 저장. 로컬스토리지에 저장하는일은 절대없다.

해결책 1. 회원정보를 nice쪽에 보내놓는다. 인증이 끝나면 인증정보와 같이 다시 받아온다.

해결책 2. 팝업창을 띄워서 처리를 한뒤에 원래 페이지로 데이터와 함께 넘어온다.

 <!-- <a-form-item>
          <input
            type="checkbox"
            id="all-box"
            value="isAllowAllchecked"
            v-model="checkAll"
            @change="onCheckAllChange"
          />
          <label for="all-box">전체 동의</label>

          <input
            type="checkbox"
            id="box1"
            value="isAllowTermsOfService"
            v-model="checkedList"
          />
          <label for="box1">[필수] 이용약관 동의</label>

          <input
            type="checkbox"
            id="box2"
            value="isAllowPersonalCreditInformation"
            v-model="checkedList"
          />
          <label for="box2">[필수] 개인 신용 정보 수집 이용 동의.</label>

          <input
            type="checkbox"
            id="box3"
            value="isAllowPersonalCreditInformation-3rd"
            v-model="checkedList"
          />
          <label for="box3">[필수] 개인 신용 정보 제3자 제공 동의.</label>

          <input
            type="checkbox"
            id="box4"
            value="isAllowMarketing"
            v-model="checkedList"
          />
          <label for="box4">[선택] 투자정보 수신 동의.</label>
          {{ checkedList }}
        </a-form-item> -->

const plainOptions = [
  "isAllowTermsOfService",
  "isAllowPersonalCreditInformation",
  "isAllowPersonalCreditInformation-3rd",
  "isAllowMarketing",
];

const state = reactive({
      indeterminate: false,
      checkAll: false,
      checkedList: [],
    });

    const onCheckAllChange = (e: any) => {
      Object.assign(state, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
      });
    };
    watch(
      () => state.checkedList,
      (val) => {
        state.indeterminate = !!val.length && val.length < plainOptions.length;
        state.checkAll = val.length === plainOptions.length;
      }
    );

       return {
      onFinish,
      onFinishFailed,
      loginForm,
      loading,
      login,
      ...toRefs(state),
      plainOptions,
      onCheckAllChange,
    };

version 0.0.0

메이저 버전 - 마이너 버전 - 버그픽스 마이너버전이 99가되면 메이저버전 +1

cd .ssh

ls id_rsa id_rsa.pub

cat id_rsa

cat id_rsa.pub

1. 사용자가 사용자 인터페이스에 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다
2. 브라우저 엔진은 자료 저장소에서 URI에 해당하는 자료를 찾고, 해당 자료를 쿠키로 저장했다면 그 자료를 렌더링 엔진에 전달한다
3. 렌더링 엔진은 브라우저 엔진에서 가져온 자료(HTML, CSS, image 등)를 분석한다. 동시에 URI 데이터를 통신, 자바스크립트 해석기, UI 백엔드로 전파한다 또한 렌더링 엔진은 통신 레이어에 URI에 대한 추가 데이터(있다면)를 요청하고 응답할 때까지 기다린다
4. 응답받은 데이터에서 HTML, CSS는 렌더링 엔진이 파싱한다
5. 응답받은 데이터에서 JavaScript는 JavaScript 해석기가 파싱한다
6. JavaScript 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 3번과 5번에서 파싱한 HTML의 결과인 DOM tree을 조작한다
7. 조작이 완료된 DOM node(DOM tree 구성요소)는 render object(render tree 구성요소)로 변한다
8. UI 벡엔드는 render object를 브라우저 렌더링 화면에 띄워준다

출처- https://www.youtube.com/watch?v=5W72UHb-9iI

양방향 바인딩이란? model-view 에서 view가 바뀌면 model이 바뀌는것. 단방향 바인딩이란? model-view 에서 view가 바뀌어도 model이 바뀌지않음. 추가적인 코드가 필요.