Next.js 프로젝트에서 .js와 .jsx 파일 확장자 사용에 관한 글입니다. 결론부터 말씀드리자면 Next.js는 .js와 .jsx 모두를 지원하므로, 어느 쪽을 사용해도 코드 실행에는 직접적인 영향이 없습니다. 그러나 아래 언급 될 이점들을 고려하여 적절한 확장자를 선택하는 것이 좋습니다.
권장사항
-
JSX를 포함하는 파일:
.jsx확장자 사용 -
순수 JavaScript 파일:
.js확장자 사용
.jsx 사용의 이점
-
코드 가독성 향상: 파일에 React 컴포넌트가 포함되어 있음을 명확히 표시합니다.
-
개발 도구 지원 개선: IDE와 에디터의 JSX 관련 기능이 자동으로 활성화됩니다.
-
린터 및 포맷터 설정 최적화: JSX 관련 규칙이 자동으로 적용됩니다.
-
빌드 최적화 가능성: JSX 관련 최적화가 더 쉽게 적용될 수 있습니다.
-
팀 컨벤션 유지: 일관성 있는 코드 베이스를 유지할 수 있습니다.
-
향후 호환성 보장: 파일 확장자 기반 처리에 대비할 수 있습니다.
.js 사용 시 잠재적 문제점
-
파일 내용 파악의 어려움
-
IDE의 JSX 지원 기능 자동 활성화 실패 가능성
-
린터/포맷터의 JSX 규칙 미적용 가능성
-
빌드 도구의 JSX 최적화 누락 가능성
-
팀 컨벤션 불일치
-
향후 도구/프레임워크 업데이트와의 호환성 문제
결론
-
JSX를 포함하는 파일에는
.jsx확장자 사용을 강력히 권장합니다. -
순수 JavaScript 로직만 포함된 파일에는
.js확장자를 사용합니다. -
팀 내에서 일관성 있게 사용하는 것이 가장 중요합니다.
추가 고려사항
-
프로젝트의 복잡성과 규모에 따라 파일 확장자 선택 전략을 조정할 수 있습니다.
-
기존 프로젝트에서 확장자를 변경할 경우, 빌드 설정 및 임포트 구문을 함께 수정해야 할 수 있습니다.
-
TypeScript를 사용하는 경우,
.tsx와.ts확장자에도 동일한 원칙을 적용할 수 있습니다.