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

풀스택개발자님의 프로필 이미지

작성한 질문수

Next.js 시작하기

코드 정리 및 파일 폴더 기반 페이지 라우팅 방식 소개

파일명 명명 규칙에 대해서 묻고 싶습니다

해결된 질문

24.07.19 11:42 작성

·

218

1

안녕하세요 강의 잘 보고 있습니다.

Layout.jsx 에서는 대문자를 사용하고,

pages 안에 파일들은 carts.jsx 소문자로 사용하는것 같은데

관례상 그런건지 규칙이 있는건지 궁금합니다.

감사합니다.

답변 2

1

eungah님의 프로필 이미지

2024. 07. 20. 16:47

댓글이없어 부족하지만 답변 달아봅니다!

  1. 대문자로 시작하는 이유는 해당 파일을 컴포넌트로 인식시키기 위해서 입니다.

    ... React 컴포넌트의 이름은 항상 대문자로 시작해야 하고 ... (출처 : https://ko.react.dev/learn)

  2. pages 내 파일들은 파일 명이 곧 경로가 되기 때문에 소문자로 작성하는것 같습니다

    예를들면 pages 폴더 내 login 파일이 있다면
    http://localhost:3000/login 이런 식으로 페이지명을 사용해서 해당 페이지로 접근하게 되거든요!

풀스택개발자님의 프로필 이미지

2024. 07. 25. 10:19

친절한 답변 감사합니다.

추가로 질문을 드리면, pages 안에 그럼 파일명들중에 의미가 두가지 이상이면 하이픈을 넣어서 구분하는게 seo에 유리한가요?

예를들어 meber-info

eungah님의 프로필 이미지

2024. 07. 25. 14:36

제가 아는 한도 내에서 답변을 드려보자면

SEO는 검색엔진(컴퓨터)이 해당 페이지를 읽어서(크롤링) 원하는 검색 결과(상위)에 노출시킬 수 있도록 최적화하는 것이다 보니 경로와는 큰 상관이 없는 것으로 알고 있습니다.

경로에 대한 부분은 다른 관점에서, 어떤 방식이 개발자 혹은 사용자 측에서 경로를 통해 해당 페이지의 성격을 좀 더 명확하고 쉽게 파악할 수 있느냐에 의미를 두는 것이 좋을 것 같고,
그런 의미에서 경로를 포함하는 URL은 대소문자 구분이 없이 소문자로 표시되기 때문에 memberinfo 보다는 member-info가 좀 더 잘 읽히는 것 같습니다.

저도 배우는 입장이다 보니 100% 맞는 의견은 절대 아니니 여러 방면에서 검색이나 도움을 구해보시는 것을 추천드립니다!

0

장기효(캡틴판교)님의 프로필 이미지

2024. 08. 18. 17:04

안녕하세요, 제가 답변이 넘 늦었네요 🙂 이미 eungah님이 답변을 너무 잘해주신거 같아요. 저도 첨언을 드리자면 리액트 컴포넌트 파일명은 대개 AppHeader.jsx와 같이 파스칼 케이스로 작성합니다.

그리고 Next.js의 페이지 컴포넌트는 소문자로 작성할 것을 권고하고 있어요. SEO 관련해서도 URL의 네이밍 컨벤션이 검색 엔진 최적화에 크게 영향을 주지 않습니다. SEO 관련해서는 아래 페이지 참고해 보세요 🙂

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko