cache

서비스를 구현할 때, 성능을 최대한으로 끌어올리기 위해 캐시를 흔히 사용한다.여러 종류의 캐시가 있지만, 여기서는 HTTP Cache에 대해 알아보려고 한다. Cache-Control 헤더 브라우저가 HTML, CSS, JS, 이미지, 비디오 파일 등 서버에 처음 요청할 때, 브라우저와 서버는 완전한 HTTP 요청/응답을 주고받는다.이 때, Cache-Control 헤더 응답 값에 따라서 처음 요청한 리소스의 캐싱 방식이 결정되게 된다. max-age 예를 들어 Cache-Control 헤더 값으로 max-age=10 을 설정하면, 리소스에 대한 캐시의 유효한 시간은 10초가 된다.  예를 들어 위와 같은 요청에서 완전한 HTTP 요청/응답을 주고받고 status 200이 반환된 것을 확인할 수 있다. ..

프론트 단에서 데이터를 효율적으로 관리하는 것은 매우 중요하다.이를 위해 Cache를 흔히 활용한다. 이번에는 Next 에서 Cache를 효율적으로 활용하기 위해 공부해보자. Request Memoization 공식문서에 따르면 요청 url과 options가 같은 fetch api 에 대해서 자동으로 기억(memoize) 한다고 나와있다.   즉, 위 그림처럼 동일한 endpoint로의 API fetch가 여러 컴포넌트에서 수행된다면 Request memoization이 동작한다.따라서 API fetch 결과를 props drilling 하지 않고, 각 컴포넌트에서 fetch를 진행해도 실제 API 요청은 최초 1번만 시행된다. 다만, memoization은 서버에서 호출되는 GET 요청에 한해서 적용되..

브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)"이라는 해결 방법을 사용해야 했다. 보통 리액트 등의 프론트 프로젝트를 시작 시 웹펙(webpack) 으로 번들링을 진행한다. 콜드 스타트 방식으로 개발 서버를 구동할 때, 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만이 실제 페이지를 제공할 수 있다. * 콜드 스타트(Cold Start): 최초로 실행되어 이전에 캐싱한 데이터가 없는 경우를 의미 위의 그림처럼 번들링 후에야 개발 서버를 구동할 수 있으므로 개발 서버를..