TaskSprints 프로젝트 진행 중 프론트 파트에서 흥미로운 주제가 생겨서 이에 대해서 간단하게 정리하려고 합니다.
파일 이름 명명은 어떤 형식을 따라야할까?
파스칼 케이스 vs 케밥 케이스 중에 많은 고민이 있습니다.
ts 공식 문서 상으로는 케밥 케이스를 따르도록 추천이 되어있고,
react 쪽 공식 문서 상에 tsx는 파스칼 케이스를 따르도록 추천이 되어 있습니다.
이 말을 간단하게 말하자면, ts를 통해서 만드는 부분은 kebab-case 처럼 파이프 라인으로 구분하고
tsx 를 통해 구성하는 부분은 PascalCase 처럼 단어의 첫문자를 대문자로써 표기하는 것이 좋다는 의미입니다.
파이프 라인으로 구분하는 케밥케이스가 타입스크립트에 친화적인 형태라고 이해하시면 좋을 것 같습니다. 컴포넌트를 구성해야하는 tsx 파일 특성상 필연적으로 PascalCase를 사용하는 것이라고 생각하면 좋을 것 같습니다.
파일 명명 규칙이 여러개라면 오히려 난해해보이지 않을까?
오히려 다양한 컨벤션을 적용하면 난해함이라는 문제를 만날 수 있다고 생각했다. 하지만, 반대로 이를 통해 순수 ts를 통한 기능의 구현과 React라이브러이에 의존적인 Component에 대한 부분을 직관적으로 분리하여 확인할 수 있다고 생각이 되었습니다.
물론 해당 명명 규칙에 대한 명확한 약속이 있는 것은 아닙니다. 하지만, ts나 js 개발자라면 기본적인 "~.ts", "~.js" 의 파일이 파스칼 케이스로 명명 되는 것을 본적은 드물 것이라고 생각이 됩니다.
React를 직접 초기 셋팅을 하게 되면, 해당 기본 셋팅에서 조차, 2가지 컨벤션을 모두 사용합니다. 이러한 구조는 잘못된 것이 아닌 어떤 부분에 의존적인 기능인지에 대한 확실한 구분점을 나타낼 수 있습니다.
