React Query (Server State Management for React) state vs props state와 props는 모두 자바스크립트의 순수한 객체입니다. 렌더링에 영향을 미치는 정보를 담고 있기 때문에 React는 state나 props의 값이 변경되면 화면에 렌더링해야 할 데이터가 바뀌었기 때문에 리렌더링을 하게 됩니다. 이들은 중요한 차이점이 있습니다. state는 컴포넌트 내부에서 관리가 됩니다 (함수 내부에서 선언 된 지역변수와 비슷합니다). props는 컴포넌트로 전달됩니다 (함수에 매개변수를 전달하는 것과 비슷합니다). Client State vs Server State Client State 브라우저 세션과 관련된 정보, 즉 클라이언트가 제어하고 소유하는 데이터입니다...
함수 표현식에 타입을 넣을 때 2가지 방식 const printSomething = (thing: string): void ⇒ console.log(thing); const printSomething: (thing:string) ⇒ void = thing ⇒ console.log(thing); Class Class는 es5로 컴파일하면 생성자 함수, 프로토타입 스타일로 바뀐다. class Department { // private id: string; // private name: string; private employees: string[] = []; constructor(private readonly id: string, public name: string) {} describe(this: Depa..
never 타입 // 이 함수는 반환값을 void로 추론하지만 never을 사용할 수 있다. // 에러를 출력하거나 절대 반환값이 없다는 의미 function generateError(message: string, code: number): never{ throw {message, errorCode: code}; } generateError('An error occured', 500); tsc --watch tsc -W 타입스크립트 파일을 지켜보면서(watch) 소스코드에 변화가 생기면 컴파일한다. tsc --init으로 tsconfig.json을 생성후에 tsc, tsc --watch, tsc -W 명령어로 폴더의 모든 타입스크립트 파일을 컴파일한다. tsconfig.json exclude : 컴파일에..
enum 타입 const ADMIN = 0; const READ_ONLY = 1; const AUTHOR = 2; // JavaScript에선 이런식으로 role을 작성한다. // 상수를 따로 관리해줘야 하는 불편함 const person = { name: 'yu', age: 26, hobbies: ['game', 'sports'], role: ADMIN } enum 타입을 이용해서 작성하면 enum Role { ADMIN, READ_ONLY, AUTHOR } // ADMIN = 1, READ_ONLY = 2, AUTHOR = 3 // enum Role { ADMIN = 5, READ_ONLY = 10 } const person = { name: 'yu', age: 26, hobbies: ['game',..
자바스크립트는 런타입에 타입이 결정되는 동적 타입 타입스크립트는 런타임전에 개발 단계에서 타입이 결정되는 정적 타입 브라우저는 자바스크립트만 이해할 수 있기 때문에 타입스크립트를 실행하려면 자바스크립트로 컴파일을 해야한다. 타입 추론(type reference) 타입스크립트는 스스로 타입을 추론한다. const number1 = 5; // number1의 타입은 5 let number2 = 2.5; // number2의 타입은 number // 따로 타입을 지정해 줄 필요가 없다, 하지만 변수를 먼저 선언하고 // 나중에 값을 할당하는 경우에는 지정하기도 한다. let number3: number; number3 = 5; 타입스크립트는 타입을 잘못 사용하고 있는지 확인하고 에러를 통해 알려준다. cons..
XHTML5 표기법 // 1. 속성값(attribute)를 작성할 때 축약없이 전체를 입력합니다. // required = "required" // 2. 단독으로 사용하는 태그에 slash를 작성합니다. HTML5 표기법 // 1. 속성값(attribute)를 작성할 때 축약할 수 있습니다. // required // 2. 단독으로 사용하는 태그를 그대로 작성합니다.
기본적인 사용법 외에 템플릿 리터럴을 사용하는 방식을 설명하고자 합니다. Nesting Templates 템플릿 리터럴을 중첩하는 방식입니다, 삼항 조건 연산자의 예시로 확인 해 보겠습니다. function isLoveTS() { return true; } function isLoveJS() { return true; } const classes = `자바스크립트${ isLoveJS() ? `${isLoveTS() ? '와 타입스크립트를 사랑힙니다.' : '만 사랑합니다'}` : '를 싫어합니다.' }`; console.log(classes); // 자바스크립트와 타입스크립트를 사랑합니다. Tagged Templates 템플릿 리터럴을 함수의 인수로 넣는 방식입니다. const city = 'Seoul'..
npm(node package manger)을 이용하여 패키지를 설치할 때 사용할 수 있는 옵션들이 있습니다. --save 예전 자료들을 보면 종종 볼 수 있습니다. Node의 예전 버전에서는 --save 옵션을 주지 않고 패키지를 설치하게 되면 package.json의 dependencies에 추가되지 않고 node_modules에만 설치가 되었습니다. 이렇게 되면 Github과 같은 원격 저장소에 node_modules 폴더는 제외하고 올리기 때문에 다른 개발자가 설치한 패키지를 직접 설치해야 합니다. --save 옵션을 주고 패키지를 설치하게 되면 다른 개발자도 파일을 받고 npm i 명령어를 통하여 한번에 패키지를 설치할 수 있게 됩니다. npm 버전 5부터는 --save가 기본값으로 적용이 되어..
