chaesunbak 님의 블로그
github: @https://github.com/chaesunbak
Next.js의 이중환경Next.js에서 작성된 코드는 서버(Node.js)와 브라우저라는 두 가지 다른 환경에서 실행됩니다. SSR(또는 SSG)단계에서는 Node.js 환경에서 코드가 실행되고, CSR단계에서는 브라우저 환경에서 코드가 실행됩니다. 따라서, alert()나 localStorage같은 브라우저 전용 API는 브라우저 환경에서만, fs같은 Node.js 전용 API는 서버환경에서만 호출 가능합니다.MSWMock Service Worker는 자바스크립트 API 모킹 라이브러리입니다. 모킹 API를 이용하면 API가 준비되지 않은 상태에서도 프론트 엔드 개발이 가능하기 때문에 실제 개발에서 유용합니다. 다른 모킹 라이브러리리들은 주로 코드 레벨에서 요청을 가로채는 반면 MSW는 브라우저 전용..
배경CORS 관련 이슈나, 성능, 보안 등의 이유로 로컬 개발 서버에서도 HTTPS가 필요할 수 있습니다. 다음과 같이 Next.js에서 HTTPS로 로컬 개발 서버를 열 수 있습니다. 준비물Next.js 최신버전 npm i next@latest 명령어를 통해 Next.js 최신 버전을 준비해주세요. 아직 프로젝트를 시작하지 않았았다면 npx create-next-app@latest 명령어를 통해 시작할 수 있습니다.실행하기npx next dev --experimental-https동작 원리프로젝트에 certificates 폴더가 생기고 자체 서명된 SSL 인증서가 추가됩니다. 해당 인증서는 mkcert 프로그램을 이용하여 발급됩니다. 이는 보안상 타인과 공유 되면 안되므로 .gitignore 파일에 ..
문제상황Next.js에서 페이지 인증 인가 기능 구현을 위해 미들웨어에서 jsonwebtoken 모듈을 사용하려고 했다.Error: The edge runtime does not support Node.js 'crypto' module.Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime원인Next.js 에서 미들웨어는 Node.js환경이 아닌 엣지 런타임 환경에서 돌아간다. 엣지 런타임 환경이란 Next.js에서 제공하는 경량화된 실행 환경이며, 일부 Node.js API만을 지원한다. 이는 미들웨어가 모든 요청을 가로채고 처리하는 만큼, 가능한 빠르고 가벼워야 함을 고려한 것이다.jsonwebtoken 모듈은 Node.js의..
