알아두면 쓸모있는 FE 환경설정

매번 코드리뷰를 받을 때마다 크루들이 환경설정 관련하여 받는 질문들이 있었는데, 답변한 후에 금방 잊는 것 같아 생각나는 내용 몇 가지를 정리한다.
추가로 떠오를 때마다 업데이트할 예정!

.eslintrc.js, .eslintrc.json, .eslintrc 등의 차이는 무엇일까요?

• 확장자가 없는 .eslintrc는 json이나 yaml 로 해석될 수 있으며 2015년에 deprecated 됐다.
• ESlint는 여러 형식(js, cjs, yaml, yml, json)의 설정 파일을 지원한다. ESlint는 설정 파일을 찾기 위해 .eslintrc.*라는 이름으로 시작하며 위 확장자들을 갖춘 파일과 package.json 파일들을 찾는다. 이러한 설정 파일이 같은 디렉토리에 있다면, ESLint는 오직 하나의 설정 파일만 사용하며 채택 우선순위는 다음과 같다.

1. .eslintrc.js
2. .eslintrc.cjs
3. .eslintrc.yaml
4. .eslintrc.yml
5. .eslintrc.json
6. package.json

   참고
   .eslintrc without file extension is deprecated - DEV.to
   Configuration Files - ESLint

.gitignore에서 설정한 /.pnp는 무엇일까요?

• CRA 기본 설정이다. file-extension.info/format/pnp POP3 프로토콜이랑 관련 있는거 같은데, 기본 설정으로 들어간 이유는 pnp파일이 설정 파일이므로 노출되면 안 되어야 하거나 노드모듈처럼 용량이 커지는 문제 때문인 것 같다.
• PnP(Plug'n'Play)는 yarn berry와 관련되어 있다. yarn berry는 node_modules의 단점을 해결하고자 사용한다.

  참고
  node_modules로부터 우리를 구원해 줄 Yarn Berry - toss tech

.prettierrc.json에서"trailingComma": "all" 설정한 이유

• prettier 2.0에서 trailingComma의 기본값이 none에서 es5로 변경되었다. es5나 all로 설정하면 git diff를 깨끗하게 유지할 수 있다. 다만, es5는 es5의 문법까지만 적용되므로, 이후 문법도 모두 적용하고 함수 파라미터 포함하여 trailingComma가 가능한 모든 경우에 적용하기 위해 all로 설정했다. 특히, 코드리뷰 시에 all로 해두어야 편한다.

manifest.json 파일의 역할은 무엇인가요?

• manifest.json은 PWA(Progressive Web App)의 설치와 구성 정보를 담고 있는 설정 파일이다. 아이콘이나 앱 이름 등의 정보를 담고 있다. PWA 앱에서만 쓰일 뿐만 아니라 기본적으로 브라우저에서 앱의 정보를 갖고 있다.

  참고
  Manifest - MDN

robots.txt는 무엇이고 왜 필요한가요?

• 크롤러 등의 프로그램이 페이지 접근 가능 여부를 설정하는 파일이다. Disallow에 폴더 경로를 써서 해당 폴더는 크롤링 하지 못하도록 막을 수 있다.

  참고
  구글 robots.txt 설정 안내
  네이버 robots.txt 설정 안내
  airbnb의 robots.txt

storybook의 main.js에서 "../src/*/.stories.@(js|jsx|ts|tsx)"의 @는 무엇을 의미할까요?

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"

• @()는 괄호 안에 있는 확장자만을 허용하는 기호이다
• 반면, * 는 모든 폴더명이나 파일명을 허용하는 기호이다.