[개발상식]설정 파일 정리

Vue 개발 새롭게 시작하려는 중에 무료 template에서 가지고 있는 설정 파일중 모르는것들이 있어서 한번 정리해볼겸 포스팅 합니다.

해당 템플릿에서 사용하고 있는 모든 설정파일을 정리해볼생각입니다.(대체로 node.js환경에서 사용되는 파일들만 정리합니다.)

사용법 위주 보다는 간단히 어떠한 용도로 사용하는 파일인지 정도만 정리할 생각입니다.

저도 잘 모르는 내용이 많아서 검색 후 정리하는 내용이라 틀린내용도 있을 수 있으니 참고 바랍니다.

0. package.json

- node.js와 관련해 거의 모든것을 설정하는 파일입니다.

1. .editorconfig 파일

- 에디터에서 사용하는 config 파일 입니다.

- 다양한 에디터를 쓰는경우 여러가지 설정들을 맞춰주는 파일입니다.

- 저 같은 경우에는 VS Code에서 사용하고 있고, 이 외에도  Vim, Emacs, TextMate, Visual Studio, IntelliJ, Notepad++, jEdit, WebStorm, AppCode 등 다양하게 지원하는것 같습니다.

2. .env 파일

- node.js 에서 사용하는 환경설정 파일입니다.

- 해당 파일을 사용하기 위해서 dotenv 모듈의 설치를 필요로 합니다.

- 프로젝트의 루트 디렉토리에 있어야 합니다.

- 해당 파일에서 선언한 변수를 읽어오기 위해서는 process.env.변수명 형태로 불러옵니다.

3. .eslintrc.js 파일

- 자바스크립트의 문법을 검토해주는 용도 입니다.

- eslint의 모듈이 설치되어 있어야 합니다.

- 예외 폴더나 파일은 .eslintignore 파일에서 설정 가능합니다.

4. .travis.yml 파일

- CI(지속적인 통합)를 위한 파일입니다.

5. jest.config.js 파일

- TEST 환경을 구축하기 위한 파일입니다.

6. babel.config.js 파일

- 바벨 설정을 위한 파일입니다.

- 기본적으로 바벨은 ES6/ES7 코드를 ECMAScript5 코드로 transpiling 하기 위한 도구입니다.

7. jsconfig.json 파일

- VS Code에서 에디터 관련 설정과 Javascript에 대한 설정을 조작하기 위한 파일입니다.

- webpack등에서 경로에대한 별명을 설정해두었을 시 이를 에디터에 알려줘서 자동완성 기능들을 사용 가능하게 합니다.

8. plopfile.js

- plop 를 사용하기 위한 설정 파일입니다.

- 코드를 일관성 있게 작성하기 위해 사용하는 프레임워크 정도로 보입니다.

9. postcss.config.js

- CSS 내에서 변수, 믹스인등을 사용하거나 코드 스타일 제한, 미지원 구문들을 트랜스해주는 등 다양한 역할로 사용하는 도구입니다.