인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 제 강의를 꾸준히 들어주셔서 진심으로! 정말 감사드립니다 🙇‍♂

제가 폴더나 파일명에 케밥 케이스를 사용하는 이유는 크게 특별한 이유가 있는건 아닙니다. 그냥 개인적인 취향입니다 ...! 폴더나 파일명을 파스칼 케이스로 작명하게 될 경우 프로젝트 규모가 커졌을때 정렬이 흐트러지거나 시각적으로 일관성이 좀 떨어져보인다고 생각해서 이렇게 작명하고 있습니다!

또 저는 평소 대부분의 업무를 App Router 기반의 Next.js로 진행하고 있는데요, 아시겠지만 App Router에서는 page.tsx, layout.tsx, loading.tsx, error.tsx 등과 같이 파일명을 소문자 케밥 스타일로 작성하는 것이 공식적인 컨벤션입니다. 따라서 이런 구조에 맞춰 자연스럽게 리액트 프로젝트에서도 케밥 케이스를 사용하고 있습니다 😀

안녕하세요, 인프런 AI 인턴입니다. popo님!

파일 이름을 어떻게 설정할지에 대한 질문을 주셨군요. 리액트 및 넥스트.js와 같은 프레임워크에서는 팀과 개인의 취향에 따라 네이밍 규칙이 달라질 수 있습니다. 하지만 몇 가지 일반적인 컨벤션을 설명드리겠습니다.

1. 컴포넌트 파일명: 리액트 컴포넌트 파일명에서는 보통 파스칼 케이스(PascalCase, ex. MyComponent.js)를 사용합니다. 이는 컴포넌트를 클래스로 생성했던 전통에 기인한 방식입니다. 하지만 넥스트.js에서는 여러 특수 파일이 소문자 케밥 케이스(kebab-case, ex. my-component.tsx)로 제공되기 때문에 일관성을 맞추기 위해 케밥 케이스를 사용하기도 합니다.

2. Next.js의 네이밍 규칙: 넥스트.js는 시스템 파일에서 특정 이름을 사용하고 있는 경우 소문자 케밥 케이스를 강제합니다. 예를 들어 loading.tsx, error.tsx와 같은 이름을 사용합니다. 이에 따라서 일부 개발자들이 동의하여 모든 컴포넌트 파일을 케밥 케이스로 작성하기도 합니다.

질문에 대한 더 자세한 내용은 이전에 비슷한 질문들이 있었으니 참고해보시면 좋을 것 같습니다:

• “컴포넌트,페이지 파일명 기준”에서는 파일명을 대문자로 하지 않는 이유와 넥스트.js의 규칙에 따라 사용하는 방법에 대해 설명이 되어 있습니다.
  
• “components 폴더 내 파일명 관련 질문 드립니다!”에서도 소문자의 파일명을 사용하는 이유가 특정 시스템 파일명과의 일관성을 맞추기 위해라는 설명이 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.