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

sihyeon982님의 프로필 이미지

작성한 질문수

한 입 크기로 잘라먹는 Next.js(15+)

8.1) 패럴렐 라우트

components 폴더 내 파일명 관련 질문 드립니다!

해결된 질문

24.09.02 22:37 작성

·

77

0

안녕하세요. 강사님!
강의에서는 폴더에 상관없이 파일명을 모두 소문자로 하셨는데 이게 혹시 next에서 관례인가요?
제가 components 폴더 내 컴포넌트들 이름을 그동안 리액트에선 파스칼 케이스를 따라서 습관적으로 최근 next 과제에도 그렇게 제출했는데 이게 모던하지(?)않은 방식이었나 싶어서요!!
스타일의 차이인지 아니면 더 유용한 쪽이 있는지 궁금합니다.🧐

답변 2

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

2024. 09. 02. 22:48

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

음 .. 사실 네이밍 컨벤션은 워낙 팀마다 그리고 회사마다 천차만별인지라 어떤것이 모던하다 라고 할 수 있는지는 저도 잘 모르겠습니다.

다만 강의에서 소문자위주로 마치 케밥 케이스처럼 파일명을 작성한 이유는 Next.js App Router 버전에서부터 제공되는 특수 파일의 이름이 모두 소문자로 예약 되어 있기 때문입니다. 이를 테면 loading.tsx나 error.tsx 그리고 not-found.tsx가 그것입니다. 따라서 이런 특수 파일들의 이름과 컨벤션을 맞추기 위해 되도록이면 저는 케밥케이스로 작명을 하는 편입니다.

(사실 저도 Next.js 없이 React.js 로만 개발 하는 경우에는 카멜 케이스를 더 선호합니다 ㅎㅎ...)

sihyeon982님의 프로필 이미지
sihyeon982
질문자

2024. 09. 03. 17:59

감사합니다!

0

인프런 AI 인턴님의 프로필 이미지

2024. 09. 02. 22:41

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

sihyeon982님의 질문에 관한 답변으로, 질문 내용과 밀접하게 연관된 내용이 있습니다. 질문자님이 궁금해하신 ‘파일명을 모두 소문자로 하는 것이 Next.js에서의 관례인지 아닌지’에 대한 부분에 대해, 다음 링크에서 유용한 정보를 찾으실 수 있습니다.

  • “컴포넌트를 만들 때 화살표 함수를 쓰지 않는 이유”에서 알 수 있듯, 파일명을 대문자로 하지 않는 이유는 Next.js 프레임워크의 규칙 때문입니다. 지식공유자는 Next.js에서 loading뿐만 아니라 error, not-found 등 모두 소문자를 강제하고 있음을 언급하며, 따라서 다른 컴포넌트 파일명도 모두 소문자로 사용하는 편임을 알려줍니다.

이 정보는 질문자님이 궁금해하신 파일명 규칙의 배경에 대해 해석할 수 있는 통찰을 제공합니다. Next.js의 경우 특정 시스템 파일명에 대해 소문자 사용을 강제하며, 이를 일반적인 컴포넌트 파일명에도 적용하는 경우가 많습니다. 하지만 개인의 선호나 프로젝트의 규칙에 따라 파스칼 케이스(PascalCase)를 사용할 수도 있으며, 이는 개발자 간 또는 팀 내의 합의에 따라 다를 수 있습니다.

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