Rewrites request Path를 다른 destination path로 매핑시켜주는 것 클라이언트사이드에서 프록시요청이 필요할 때 react-proxy 이런거 대신 사용하기 위한 옵션 Case 1. Request URL에 숨기고 싶은 정보가 있을 때, 블로그에 가장 많이 소개되는 예제인데 API Key를 request url param으로 같이 던지는 경우가 있는데 이를 브라우저단에서 표시하지 않게하기 위해 사용한다. Case 2. COR proxy 도메인이 다른 서버로부터 Set 쿠키도 되는지는 확인이 안되는데, 예제가 있는 것으로 보아 ,, 백엔드에서 응답하는 응답 헤더의 Set-Cookie 은 domain 이라는 속성을 갖는데, 여기에 기술된 도메인의 요청에만 쿠키를 set할 수 있다. 명시..

fs error in storybook 발생 npm run storybook 실행 시 Module not found: Error: Can't resolve 'components/SomeComponent' in '/Users/css/Desktop/Project/styles' 등 module 에러 발생 ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/css/Desktop/Project/node_modules/next-i18next/dist/esm/config' - fs module 참조에[러 runtime에 fileSystem 모듈을 찾을 수 없다. ..

i18n setting with Next 다국어 설정을 위한 Setting 설치 npm i next-i18next 필요한 설정파일 next.config.js const { i18n } = require("./next-i18next.config"); module.exports = { i18n, }; next-i18next.config.js const path = require("path"); module.exports = { i18n: { locales: ["en", "ko"], defaultLocale: "ko", }, }; public/locales en/[file].json ko/[file].json Wrap app component import { appWithTranslation } from "n..

Next.js는 React Framework 💪 SEO를 위한, SSR을 해주는 프레임워크라고만 알고있었다. 서버에서 미리 렌더링하는 것, 클라이언트에서 렌더링하는 것의 속도차이를 먼저 영상으로 확인해보고 글을 진행합니다. pre-render 유무의 따른 속도차이비교 클라이언트 렌더링 서버 pre-rendering 깜빡거리는건 새로고침입니다. 👏 Next.js가 해주는 것들 React에서 고려했어야할 것들을 해준다. 웹팩과 같은 번들러로 코드를 번들 바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드를 문법에 맞도록 트랜스파일링) 코드스플리팅으로 production 최적화 성능 또는 SEO를 위한 Pre render (SSR, CSR을 사용) 추가로, Next.js는 다음과 같은 ..