글을 쓰게 된 계기
여지껏 팀 프로젝트를 진행하면서 prettierrc.cjs 파일 형식으로 진행을 하였는데 이번 새로운 팀 프로젝트를 들어가기 전, 팀원들과 소통을 하다 prettierrc.cjs 와 prettierrc.js 의 차이점을 이야기 하게 되었다.
✨ prettierrc.js
prettierrc.js 파일은 Prettier 코드 포멧터의 구성 파일이다. Prettier는 Javascript 코드를 자동으로 포맷팅하여 일관된 스타일을 유지하는 데 도움을 주는 도구다. 일반적으로 파일은 Javascript로 작성되며 Prettier 에 대한 구성 옵션을 정의한다. Prettier가 코드를 포멧팅하는 방식을 사용자가 지정할 수 있다.
📌사용목적
Prettierrc.js 파일은 Pretteir에 대한 구성 옵션을 정의하여 코드 포멧팅을 지정한다. 코드의 일관된 스타일을 유지하고 개발자 간의 스타일 차이를 줄이는 데 목적이 있다.
✨ prettierrc.cjs
'cjs' 는 파일 확장자가 아니라 CommonJS 모듈 시스템을 나타내는 약어이다. CommonJs는 JavaScript의 모듈 시스템 중 하나로, 서버 측 JavaScript 환경에서 주로 사용된다. CommonJS 의 명세가 현재 node의 표준이 되어있다.
'require'함수를 사용하여 모듈을 가져오고, 'module.exports' 또는 'exports' 객체를 사용하여 모듈을 내보낸다.
📌 module.exports 와 exports 의 차이
본래 module.exports 인데 shortcut으로 exports가 만들어졌다.
하지만 착각하고 섞어서 쓰면 안된다.
exports와 module.exports 가 동일한 하나의 객체를 바라고 있다는 소리다. 그래서 최종적으로 return 되는 것은 무조건 module.exports의 값이 되고, exports는 무시된다. 아래와 같은 2가지 규칙 이외 특별한 상황이 아니라면 module.exports를 사용하 는 것이 권장된다.
- 여러 개의 객체를 내보낼 경우, exports 변수의 속성으로 할당한다.
- 딱 하나의 객체를 내보낼 경우, module.exports 변수 자체에 할당한다.
🤔 그렇다면 prettierrc.js 와 prettierrc.cjs 의 차이점이 도대체 뭘까?
Prettier는 prettierrc.js와 prettierrc.cjs 두 가지 파일 형식을 모두 지원한다. Prettier는 CommonJS 모듈 시스템에서도 구성 파일을 사용할 수 있도록 지원하고 있기 때문에 동일한 목적과 기능을 가지고 있다. prettierrc.js는 JavaScript 파일로 해석되고, .prettierrc.cjs는 CommonJS 모듈로 해석된다.
실제로 두 파일 형식을 사용하여 Prettier를 구성하는 방법에는 차이가 없다. 사용자는 프로젝트에 맞게 파일 형식을 선택하여 사용하면 된다. 보통 프로젝트가 CommonJS 모듈 시스템을 사용하는 경우 .prettierrc.cjs를 선택하고, 일반적인 JavaScript 프로젝트의 경우 .prettierrc.js를 선택합니다.
출처
https://velog.io/@leobit/CommonJS
https://d2.naver.com/helloworld/12864
