Null Safety는 개발자가 null 값을 참조할 수 없게 하는 것입니다. 다음 코드를 봅시다. bool isEmpty(String string) => string.length == 0; main(){ // [오류] isEmpty(🚫null); } 다음과 같은 코드는 어떻게 실행될까요? 정답은 NoSuchMethodError를 실행합니다. 왜 이렇게 실행될까요? 바로 String을 보내야 할 곳에 null을 보냈기 때문입니다. null 에는 length 라는 속성이 없기 때문이기도 합니다. 이와 같은 에러는 컴파일러에서 잡을 수 있는 에러가 아닙니다. 이런 상황이 발생하지 않도록 null 를 삭제하기에는 null 값은 유용합니다. 그럼 어떻게 null 값을 참조하는 것을 dart는 어떻게 보호할까요?..

Dart에서 변수 사용 방법에 대해 알아보겠습니다. 변수를 만드는 2가지 방법 dart에서는 변수를 var 키워드 또는 명시적으로 변수의 타입을 지정해서 사용합니다. 다른 타입의 변수는 서로 대입할 수 없습니다. // 방법 1 void main() { var name = "car"; name = "bus"; // [오류] 🚫 name = 1; } // 방법 2 void main() { String name = "car"; name = "bus"; } var를 사용하는 게 dart 스타일가이드의 권장 방식입니다. 함수나 메소드 내부에 지역변수를 선언할 때는 var를 사용하고 class에서 변수나 property를 선언할 때는 타입을 지정해 줍니다. Dynamic 타입 여러 가지 타입을 가질 수 있는 변수에..

Dart 란 Dart는 모든 플랫폼에서 빠른 앱을 위한 클라이언트 최적화 언어입니다. UI 최적화용 사용자 인터페이스 생성 요구에 특화된 프로그래밍 언어로 개발합니다. 생산적인 개발 핫 리로드를 사용하여 실행 중인 앱에서 즉시 결과 확인 가능합니다. 모든 플랫폼에서 빠름 모바일, 데스크톱 및 백엔드용 ARM 및 x64 머신 코드로 컴파일합니다. 또는 웹용 JavaScript로 컴파일합니다. Why Dart Dart 의 컴파일러 기술을 사용하면 다양한 방식으로 코드를 실행할 수 있습니다. 기본 플랫폼(Dart Native): 모바일 및 데스크톱 장치를 대상으로 하는 앱의 경우 Dart 에는 JIT(Just-In-Time) 컴파일 기능이 있는 Dart VM과 기계 코드 생성을 위한 AOT(Ahead-of-T..

JavaScript 파일에서 TypeScript처럼 코드를 보호받을 수 있도록 하는 방법에 대해 알아보겠습니다. @ts-check JavaScript 파일에서 오류를 활성화하려면 // @ts-check를 .js 파일의 첫 번째 줄에 추가하여 TypeScript가 오류를 발생시키도록 합니다. TypeScript는 여러 오류를 제공할 수 있습니다. 아래 코드는 TypeScript와 같이 함수 파라미터에 정의가 되어 있지 않아 오류가 발생합니다. // @ts-check // [오류] export function init(🚫 config) { return true; } // [오류] export function exit(🚫 code) { return code + 1; } 이러한 오류를 무시하고 싶다면 // @t..

NextJS, Create React App(CRA)를 사용하지 않고 초기 프로젝트에 TypeScript를 설치하고 설정하는 방법에 대해 알아보겠습니다. 프로젝트 시작 프로젝트 디렉터리를 생성합니다. $ mkdir typescripttest $ cd typescripttest 다음 명령어를 실행하여 package.json을 초기화합니다. $ npm init -y TypeScript 설치 다음 명령어를 실행하여 TypeScript를 설치합니다. $ npm i -D typescript tsconfig.json 설정 TypeScript 설정은 tsconfig.json 파일에서 합니다. 디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 TypeScript 프로젝트의 루트임을 나타냅니다. tsco..

TypeScript에서 인터페이스(Interface)를 생성하고 사용하는 방법에 대해 알아보겠습니다. Interfaces 객체의 모양을 특정해 주기 위해 사용합니다. 여기서는 firstName 및 lastName 필드가 있는 객체를 설명하는 인터페이스를 사용합니다. interface Person { firstName: string; lastName: string; } 다른 인터페이스를 상속 받아 사용할 수 있습니다. interface User { name: string; } interface Player extends User {} const eden: Player = { name: 'eden', }; 인터페이스 이름이 같도록 3번 각각 만들어도 타입스크립트는 알아서 하나로 합쳐줍니다. Type과 차이점..

TypeScript에서 클래스(Class)를 생성하고 사용하는 방법에 대해 알아보겠습니다. 클래스(Class) 가장 기본적인 클래스입니다. class Player {} 필드를 선언해서 사용 가능합니다. class Player { firstname: string; lastname: string; } const eden = new Player(); eden.firstname = 'ko'; eden.lastname = 'eden'; 생성자에 매개변수를 추가해서 선언할 수 있습니다. class Player { constructor( private firstname: string, private lastname: string, public nickname: string ) {} } const eden = new ..

다형성(Polymorphism) 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미합니다. poly: many, serveral, much, multi 등과 같은 뜻 morphos: form, structure 등과 같은 뜻 polymorphos = poly + morphos: 여러 다른 구조 예시 type SuperPrint = { (arr: T[]): T; }; const superPrint: SuperPrint = (arr) => { return arr[0]; }; const a = superPrint([1, 2, 3]); const b = superPrint([true, false, true]); const c = superPrint(['a', 'b']); const d = su..

Function Overloads 동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만드는 것을 말합니다. TypeScript에서는 오버로드 signatures을 작성하여 "다양한 방식으로 호출할 수 있는 함수"를 지정할 수 있습니다. 사용 예제 매개변수의 데이터 타입이 다른 경우 매개변수의 데이터 타입이 다른 경우 예외 처리를 합니다. type Add = { (a: number, b: number): number; (a: number, b: string): number; }; const add: Add = (a, b) => { if (typeof b === 'string') return a; return a + b; }; add(1, '2'); add(1, 2); 매..

타입스크립트란? TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor 와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다. TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다. TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다. Types(기본) ✅ 배열: 자료형[] ✅ 숫자: number ✅ 문자열: string ✅ 논리: boolean type Player = { name: string; age: number; weapons: string[];..