sliver__

대 AI 시대에 나는 거꾸로간다 !아예 기초 지식이 없어 react natvie 스터디를 시작하려고 한다.흠.. 앱 개발 공부하고 원하는 주제로 만들어보는게 목표다.요새 개발을 직접하지 않으니 코드 볼 일이 줄고, 코드 볼 일이 줄어드니 점점 퇴화되고 있다는 걸 느낀다.감을 살리고 싶은데 굳이 해야하나 싶고, 안하자니 멍청해지는 것 같고.. 과도기다.그래도 시작해보자..!프로젝트를 새로 만들었다.expo, react native cli 두 가지 방법으로 만들 수 있다.expo는 지원해주는게 많아 react native cli 보다 간단하게 개발이 가능한 것 같다.추후에 expo -> react native로 변경이 가능하다고 하니 expo로 선택했다. https://reactnative.dev/docs/..

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..