sliver__

redux도 context, useReducer와 같은 전역 상태 관리 toolkit이다.@reduxjs/toolkit, react-redux를 설치한다.npm i @reduxjs/toolkit react-reduxcontext와 동일하게 전역으로 사용될 initialState, reducer를 slice에 정의한다.reducer의 action type은 PayLoadAction이다.정의한 slice를 store에 연결한다.state, dispatch에 대한 type을 store의 state, dispatch typeof로 역추론하여 정의해서 쓴다. dispatch, selector hook을 역추론하여 정의한 type으로 다시 지정한다.import { TypedUseSelectorHook, useDis..

State 관리를 위해서 가장 상단에 State를 두고 props drilling을 했었다.Props drilling을 없애기 위해 전역적으로 state에 접근 가능한 context api를 사용한다.createContext를 사용해 context를 생성한다.TimersContextProvider를 만들어 하위 컴포넌트에서 사용 가능하게 한다. React.ReactNode로 children을 props으로 사용한다.생성한 context를 전역적으로 사용가능하려면 useReducer를 정의해야한다.intialState를 선언하고 reducer function을 구현한다.reducer function은 action을 정의해서 action별로 동작을 정의한다.생성한 context를 null check과 함께 ..

DecoratorECMAScript 표준과는 다른 형식으로 정의한다.decorator function을 만들면 원하는 곳에 사용 가능해 보인다.decorator factory pattern은 생성한 decorator를 반환하는 패턴이다.Logger 예시로 들면 logString 파라미터를 사용 가능하게 만들어 여러 곳에서 원하는 용도로 사용가능하다.function Logger(logString: string) { return function (constructor: Function) { console.log(logString); console.log(constructor); };}@Logger("PERSONAL - LOGGING")class Person { name = "Max"; co..

Decoratorclass, function, field, setter, getter decorator가 있다.target class에 context를 설정하는 느낌이다.tsconfig.json의 compilerOptions에 모듈 설정을 ES2022 이하로 설정해야 node로 js 실행이 가능하다.esnext로 tsc 빌드할 경우 @logger decorator가 js 파일에 남는다. 하지만 js에서는 아직 decorator를 지원하지 않는다.그래서 ES2022이하로 설정하고 빌드하면 decorator가 js가 실행할 수 있는 형식에 맞게 변환된다.function logger(target: any, ctx: ClassDecoratorContext) { console.log("logger decorat..

Classtypescript에 class를 쓸 수 있다.java와 대부분 동일하다.차이점은 setter, getter function이다.set, get keyword를 붙여 사용한다.외부에서 set, get을 함수처럼 부르는게 아니라 대입하여 사용한다.set, get이 없으면 할당이 불가능하다. private니깐class User { private _firstName = ""; private _lastName = ""; set firstName(name: string) { this._firstName = name; } set lastName(name: string) { this._lastName = name; } get fullName() { return this._firs..

var & letvar는 {} block 내부에서 선언해도 전역적으로 사용가능하다.let은 {} block 내부에서 선언하면 밖에서는 접근 불가능하다{ var age = 30;}console.log(age);{ let age2 = 20;}console.log(age2); // error arrow function{}를 사용하는 명시적 반환 없이, 간단하게 정의할 수 있다.파라미터 / 반환 타입을 지정할 수 있다.const add: (a: number, b: number) => number = (a, b) => a + b;const printOutput: (a: number | string) => void = (output) => console.log(output); Default function p..