JayHoon의 세상 모든 지식

CRA에서 eject란? craco로 대체하는 이유1. CRA(Create React App)란? 리액트 앱을 빠르게 시작할 수 있도록 Webpack, Babel 등의 설정을 숨긴 템플릿. ✔ 장점: 설정 없이 바로 개발 가능 ❌ 단점: 내부 설정(Webpack, Babel 등)을 수정하려면 제약 존재2. npm run eject란? CRA 내부의 숨겨진 설정(Webpack, Babel 등)을 프로젝트 디렉토리로 꺼내오는 명령어. $ npm run eject eject 후에는 config/와 scripts/ 디렉토리가 생성되어 전체 설정 파일을 직접 수정 가능.3. eject의 단점 ❌ 되돌릴 수 없음: 한 번 eject하면 undo 불가 ❌ 설정 책임 100%: CRA의 유지보..

Nextjs14의 캐싱 메커니즘1. 요청 메모화(Request Memoization) 함수 반환값에 대해 서버에서, React Component tree의 재사용 데이터에 대해, req의 생명주기 동안 동작2. 데이터 캐시(Data Cache) 데이터에 대해 서버에서, 사용자 요청 및 배포 간 데이터 저장, 지속적으로 동작하며 재검증 가능3. 전체 경로 캐시(Full Route Cache) HTML, RSC 페이로드에 대해 서버에서, 렌더링 비용 절감 및 성능향상을 위해, 지속적으로 동작하며 재검증 가능4. 라우터 캐시(Router Cache) RSC 페이로드에 대해 클라이언트에서 네비게이션 시 서버 요청 감소를 위해 사용자 세션 또는 일정 시간 동안 유지.캐시 트리거 1) 경로가 정적으..

Request Life-Cycle클라이언트에서 서버로 요청이 들어오고, 그 요청이 처리되어 응답으로 돌아갈 때까지의 과정Request Lifecycle의 일반적인 흐름1. 클라이언트 요청 (Request Initiation)다음의 정보를 포함해서, 웹 브라우저나 클라이언트에서 HTTP 요청을 보냄. - URL : 요청할 리소스의 경로 ex) /api/users, /products - HTTP 메서드 : GET, POST, PUT, DELETE 등 - Headers : 요청에 대한 추가 정보 ex) 인증 토큰, Content-Type 등 - Body : 데이터 전송 시 사용(POST, PUT 요청에서 주로 사용됨).2. 서버 수신 (Server Receives Request)클라이언트가 요청을 보내면 서버..