React Query 사용하기 먼저 react-query 라이브러리를 프로젝트에 설치해야 합니다. npm install react-query yarn add react-query 그 후에, queryClient를 생성합니다. client는 쿼리와 캐시를 관리합니다 QueryClientProvider를 적용합니다. React Query의 캐시와 client 설정을 자식 컴포넌트들이 사용할 수 있도록 합니다. queryClient를 props로 받습니다. useQuery를 실행합니다 useQuery는 서버로부터 데이터를 fetch하는 hook입니다. App.jsx [코드 1-2] React Query 세팅 react-query 라이브러리로 부터 QueryClient와 QueryClientProvider를 i..
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'..
