전체 글

Server-Side Rendering 각 요청마다 페이지 HTML이 서버에서 생성된다. 클라이언트에서는 React에서 JSON 데이터와 자바스크립트 코드를 사용하여 컴포넌트를 인터랙티브하게 만드는 동안 (예를 들어서, 버튼에 이벤트 핸들러를 붙이는 것 등) 빠르게 인터랙티브하지 않은 페이지를 보여주는데, 이때 서버에서 생성된 HTML이 사용된다. 인터렉티브하게 만드는 과정을 hydration이라고 부른다. Static Site Generation HTML이 서버에 생성되지만, SSR과 달리 요청마다 생성하는 것이 아니라 빌드타입에 한 번만 생성되며, HTML 이 CDN에 저장되어 매 요청시에 재사용된다. Next.js의 Network Next.js 어플리케이션의 경우, next.js 의 코드는 orig..

코드내부에서 SVG 파일을 import해서 쓰려면, svg파일이 컴파일러가 이해할 수 있는 코드로 변환이 필요하다. 그것을 도와주는 `@svgr/webpack` 을 설치하면 된다. 설치 npm i -D @svgr/webpack or yarn add -D @svgr/webpack next.config.js 수정 // next.config.js module.exports = { // ... 생략 webpack: (config) => { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; 결과 import Logo from 'assets/logo.svg'; // .svg 확장자도 써줘야합니다. co..

https://velog.io/@leehyunho2001/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%BA%90%EC%8B%9C https://velog.io/@jay/it-is-nothing-but-static-file-cache https://toss.tech/article/smart-web-service-cache 서비스를 개발하던 도중, 이런 이슈가 있었다. 여느 때와 같이, 기능을 신규개발해서 운영계에 배포하던 후 였다. 분명히 개발계/스테이징계 에서 해당 기능이 제대로 동작했음을 검증을 하고 올렸다. 하지만, 배포 후 간헐적으로 몇몇의 사용자가 운영계에서 이거.. 안되는데요? 라는 이슈가 나온 것이다. 그외의 사용자들은 잘 동작했다. 왜이런 이슈가 발생했을까? 왜인지..

Cache-Control 캐시의 유효기간(생명주기)를 명시하는 응답 헤더 파라미터 종류 여러 파라미터를 열거 가능 파라미터 설명 `max-age` 캐시 유효시간, 초 단위 `no-cache` 데이터는 캐시해도 되지만, 항상 Origin Server 에 검증 후 사용 `no-store` 데이터에 민감한 정보가 포함되어 있어 저장 불가 or 최대한 빨리 삭제 `public` public 캐시(프록시 캐시 서버)에 저장 가능 `private` 저장불가 `s-maxage` 프록시 캐시 서버에 적용되는 max-age `Age` Orgin Server의 응답이 프록시 캐시 서버에 머문 시간(초) `must-revalidate` 캐시 만료 후 최초 조회시 Origin Server에 검증 출처 https://inpa...