Front-End Developer
개발 2023.03 ~ 2023.04
🔗 Links
Github https://github.com/Wonny-ing/wonny11-blog
나만의 기록을 남길 수 있는 블로그 입니다.
위 서비스에서 제공하는 핵심 기능은 2가지입니다.
해당 프로젝트에서는 Next.js 13버전을 사용하였습니다. 13 버전을 선택한 이유는 페이지 간의 컴포넌트 재사용성과 코드 유지보수성을 개선하고, 조금 더 복잡한 페이지 처리를 쉽게 구현할 수 있기 때문입니다.
Next.js 12 버전에서는 파일 기반 라우팅과 중첩 라우팅을 활용하여 페이지를 구성할 수 있습니다. pages 폴더 안에 원하는 파일을 생성하면 해당 파일이 페이지처럼 라우팅되며, 중첩된 경로를 원하는 경우 폴더와 index.tsx 파일을 생성하여 페이지 컴포넌트를 구성할 수 있었습니다.
하지만 Next.js 12 버전에서는 페이지 간에 재사용하고 싶은 컴포넌트가 있는 경우 문제가 발생할 수 있었습니다. 예를 들어, products 페이지 내에서 항상 유지되는 sidebar와 같은 공통 컴포넌트를 사용하고자 할 때, 경로를 변경하면 모든 페이지가 변경되어 버리는 한계점이 있었습니다.
Next.js 13 버전에서는 이러한 문제점을 해결하기 위해 app 폴더가 도입되었는데 이를 통해 pages 폴더 내에서 변경사항을 입력할 필요 없이, app 폴더 내에서 페이지별로 컴포넌트를 생성하고 관리할 수 있었습니다.