[Next.js 13] 폴더 구조 + 이쁜 잡기술

• Next.js 13에서는 폴더 내에 'page.js'나 'page.tsx'와 같은 네이밍을 작성하면 해당 폴더의 네이밍에 따라 라우팅이 생성되는데, 이로 인해 페이지와 다른 폴더들을 구별하기 어려운 문제가 발생한다.

• 이를 해결하기 위해 Next.js 13에서는 Route group과 private folder를 제공하는데, Route group은 페이지들을 하나의 그룹으로 묶어 구분을 쉽게 해주고, private folder는 '_folder'와 같이 작성하면 해당 폴더는 라우트로 생성되지 않아 불필요한 라우트 생성을 방지한다.

• route group을 이용해 route들을 묶고 private 처리를 해주었지만, `material icon` 때문에 폴더 색이 회색으로 변해 보기 어려워진 문제가 발생했다.

• 이를 해결하기 위해 `material icon`을 custom하게 설정하였고, 이를 통해 프로젝트를 clone한 모든 사용자가 동일한 아이콘을 볼 수 있도록 `.vscode` 폴더 내 `settings.json` 파일을 수정하였다.