Jerry

리액트에 대해서 공부하는 사람이라면 대부분 듣거나 알고 있을 개념인 Props Drilling에 대해서 공부하는 도중..Props Drilling에 대한 해결책으로 여러 라이브러리나 리액트 내부 기능이 존재했다. 리액트에서 제공하는 상태 관리 기능은 Context API이 존재하고,상태 관리 라이브러리에는 Redux, Zustand, Recoil, Jotai 같은 것들이 대표적으로 있다.거의 모든 상태관리 라이브러리들은 이 api를 기반으로 개발되었다고 한다. 먼저, Props Drilling에 대해 알아보았다.기존에 상태 관리하는 기능이나 라이브러리가 없었던 시절(?), 컴포넌트 간에 상태를 공유하기 위해 Prop을 여러 계층을 통해 전달하는 것이 일반적이었다. 즉, Props Drilling은  상위..

캐싱: 캐싱은 자주 사용하는 데이터나 연산 결과를 임시 저장소(Cache)에 저장해, 동일한 요청이 들어왔을 때 저장된 값을 반환하여 성능을 향상시키는 기법 특징주로 디스크 I/O, 네트워크 요청, DB 조회 등과 같은 비싼 연산 비용을 줄이기 위해 사용됨캐시 계층(Cache Layer) 를 두어 속도가 빠른 저장소(RAM, SSD 등)에 데이터를 저장일반적으로 범용적인 데이터 저장소로 활용됨 예시 웹 브라우저 캐시: 방문한 웹사이트의 이미지, CSS, JavaScript 파일을 저장하여 다시 방문할 때 빠르게 로드데이터베이스 캐시: Redis나 Memcached 같은 인메모리 캐시를 사용하여 데이터베이스 조회 부담을 줄임CPU 캐시: 프로세서가 자주 사용하는 데이터를 L1, L2, L3 캐시에 저장하여..

#페이지라우팅- 경로에 따라 알맞은 페이지를 렌더링 하는 과정- /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..