본문 바로가기

FE/next2

[Next.js] Next.js 14에서 private route처리하기 (middleware.ts) 리액트에서 private route를 처리할 때 HOC를 사용해오곤 했는데 next에서는 다르게 처리할 것 같아 찾아보니 middleware로 제어하는 방식을 알게되었다. 공식문서의 middleware파트에서도 middleware의 다양한 활용 중 대표적인 사례로 페이지 요청 전 인증 확인 작업을 통한 페이지 접근 제한 방식을 소개하고 있다.  Authentication and Authorization: Ensure user identity and check session cookies before granting access to specific pages or API routes.   Middleware 넥스트 미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있다. 그런 다음 들어오는 요.. 2024. 8. 18.
[Next.js] 직접 Next.js 개발환경 구축하기 본 글은 도서의 내용을 바탕으로 작성되었습니다. create-react-app과 create-next-app은 각각 리액트와 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI도구이다. 애플리케이션 구축에 필요한 대부분의 작업을 대신 해주기 때문에 편하고 빠르게 앱을 만들 수 있겠지만 공부에는 도움되지 않는다. 또한 23년 1월, 리액트팀이 cra는 리액트 어플리케이션을 만드는 보일러플레이트 CLI가 아니라 여러 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이라고 밝힌 만큼, 직접 개발환경을 구축해보는 것도 좋은 경험이 될 것이다. create-next-app 없이 하나씩 구축하기 모든 Node.js 프로젝트와 마찬가지로 가장 먼저 할 일은 package.json을 만드는 것이다. package.. 2024. 2. 25.