Jerry

#페이지라우팅- 경로에 따라 알맞은 페이지를 렌더링 하는 과정- /new -> new 페이지 렌더링Multi Page Application (MPA)- 애초에 서버가 여러 개의 페이지를 가지고 있음- 많은 서비스가 사용하는 전통적인 방식서버 사이드 렌더링 vs MPA- 서비가 여러 개의 페이지를 가지고 있는 것이 후자- 브라우저가 페이지 요청을 했을 때, 해당 페이지를 응답해주는 것이 전자But, 리액트는 이 방식을 따르지 않음- 페이지 이동이 매끄럽지 않고 비 효율적임- 다수의 사용자 접속 시, 서버의 부하가 심해 짐-SPA(Single Page Application)- 페이지 이동이 매끄럽고 효율적임- 다수의 사용자가 접속해도 크게 상관 없음- 필요한 요소만 교체동적 경로(Dynamic Segment..

#useReducer- 컴포넌트 내부에 새로운 State를 생성하는 React Hook- 모든 useState는 useReducer로 대체 가능- 상태 관리 코드를 컴포넌트 외부로 분리할 수 있음   #최적화- 웹 서비스의 성능을 개선하는 모든 행위를 일컫음- 아주 단순한 것부터 아주 어려운 방법까지 매우 다양함일반적인 웹 서비스 최적화 방법- 서버의 응답속도 개선- 이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선- 불필요한 네트워크 요청 줄임- ...React App 내부의 최적화 방법- 컴포넌트 내부의 불 필요한 연산 방지- 컴포넌트 내부의 불 필요한 함수 재생성 방지- 컴포넌트의 불 필요한 리렌더링 방지     #useMemo- "메모이제이션" 기법을 기반으로 불 필요한 연산을 최적화 하는 리..

npm에서 특정 라이브러리가 타입스크립트 지원 여부 확인 index.d.ts : 타입 정의들만 들어있다 (구현부x) package.json > "types 또는 typings": "index.d.ts"가 가장 중요한 타입핑 파일 package.json > "main": 자바스크립트 프로젝트에서 가장 중요한 파일 대부분은 TS나 DT가 붙어있어서 가져다 사용할 수 있지만 그렇지 않은 경우에는 직접 기여하여 타입핑(타입선언) 해야 한다. *DT - 추가로 @types/jquery 같은 오픈소스를 같이 사용해야 함 다만, 틀릴 수 있는 점이 있을 수 있음

infer 타입 분석 임의의 함수에 대해서 해당 파라미터와 리턴값을 자유자재로 뜯어올 수 있다. parameters 유틸리티 function zip(x: number, y:string, z: boolean): { x: number, y: string, z: boolean } { return { x, y, z }; } type Params = Parameters; // Params는 튜플 형식 type First = Params[0]; type Second = Params[1]; type Third = Params[2]; parameters 직접 만들기 function zip(x: number, y:string, z: boolean): { x: number, y: string, z: boolean } { ..

Required, Record, NonNullable 타입 분석 interface Profile { readonly name?: string, readonly age?: number, readonly married?: false, } type R = { [key in keyof T]-?: T[key] // -는 옵셔널 빼기 -readonly[key in keyof T]-?: T[key] // readonly와 옵셔널을 빼고 가져와라 } const zerocho: R = { name: 'zerocho', age: 29, married: false, zerocho.name = 'nero'; // 만약 수정 못 하게 하려면 Readonly const zerocho: Readonly = { name: 'zero..

Omit, Exclude, Extract 타입 분석 Omit 직접 만들기 exclude를 먼저 알아야 함, 여러 개의 유틸을 조합해서 사용할 수 있음 interface Profile { name: string, age: number, married: boolean } const zerocho: Profile = { name: 'zerocho', age: 29, married: false, } type A = Exclude extends key of any가 오는 이유는 아무값이나 오면 안 되니깐; any일 경우 string | number | symbol만 올 수 있음 (제약조건 추가) 즉, S extends keyof any -> S는 string | number | symbol type O = Pic..

Pick 타입 분석 Partial은 모든 속성 옵셔널하게 바꿔주기에 유연성이 떨어짐 그렇기에 pick or omit 유틸리티를 사용 interface Profile { name: string, age: number, married: boolean } const newZeroCho: Pick = { // name이나 age를 가져온다 name: 'zerocho', age: 29, } const newZeroCho: Omit = { // married를 뺀다 name: 'zerocho', age: 29, } Pick 직접 만들기 제네릭의 제한조건을 먼저 붙여주는 것을 우선적으로 생각하자! type P = { [key in S]: T[key] } const newZeroCho: P = { name: 'zero..

Partial 타입 분석 아래와 같은 코드가 있다. Profile이란 객체 타입과 해당 타입인 객체 변수가 존재한다. interface Profile { name: string, age: number, married: boolean } const zerocho: Profile = { name: 'zerocho', age: 29, married: false, } 해당 객체 타입을 잘 쓰다 어느날 해당 속성 중 married 속성이 필요 없어도 된다고 했을 경우, 아래처럼 새로 객체를 만들거나 const newZeroCho: Profile = { name: 'zerocho', age: 29, } 새롭게 인터페이스를 정의를 추가해 사용할 수 있지만, 중복되는 코드가 발생 interface NewProfile ..