Front-end/React.js

32. Prettier - 리액트 입문 | 벨로퍼트

AGAL 2020. 7. 9. 22:16
반응형

 

이번에는 리액트 개발을 할 때 사용하면 편리한 도구들에 대하여 알아보도록 하겠습니다. 이번에 다루게 되는 도구들은 모두 VS Code 와 연동해서 사용하는 도구들인데요, 이 도구들은 VS Code 만 지원 하는 것이 아니라 WebStorm, Atom 등의 에디터에서도 사용이 가능하니, 만약 VS Code 가 아닌 에디터를 사용하고 계신 경우 따로 검색해서 적용해보시길 바랍니다.

 

Prettier

Prettier 는 자동으로 코드의 스타일을 관리해주는 도구입니다. 가령, 문자열을 사용 할 때 ' 를 쓸지 " 를 쓸지, 또는 세미콜론 (;) 를 코드 뒤에 붙일지 말지, 들여쓰기는 얼마나 할지, 이런 것들을 관리해줄 수 있습니다. 이 도구는 CLI 를 통해 명령어를 입력하여 사용 할 수도 있고, 다양한 에디터와 연동해서 사용 할 수도 있습니다.

이 도구의 특징은, 코드의 스타일을 여러분의 마음대로 쉽게 커스터마이징 할 수 있다는 점입니다.

이 도구는 자바스크립트 뿐만 아니라, HTML, CSS 코드의 코드 스타일을 관리 할 수도 있고, React, Angular, Vue 등의 라이브러리도 지원 해주고 플러그인을 통하여 다른 언어도 관리해줄 수 있습니다.

 

가장 기본적인 사용 방법은 명령어를 사용하여 쓰는 것이고, Git을 통해 commit 할 때마다 자동으로 실행되도록 설정을 해줄 수도 있습니다.

 

제가 권장드리는 방법은 에디터와 연동해서 사용하는 것 입니다 (정말 편합니다!).

 

적용방법은 굉장히 간단한데요, 일단 CRA 를 사용하여 새 프로젝트를 만들어봅시다.

$ npx create-react-app useful-tools

 

그리고 해당 디렉터리를 에디터로 열어주세요.

그리고 루트 디렉터리 (최상위 디렉터리)에 .prettierrc 파일을 만드세요.

/prettierrc.js :

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

이는 Prettier 의 기본 설정인데요 여기에서 확인 할 수도 있습니다.

 

위 설정에 대해서 설명을 드리자면

 

trailingComma

"none", "es5", "all" 으로 설정을 할 수 있는데, 객체 또는 배열이 여러줄로 구성되어 있으면 다음과 같이 맨 마지막 줄에 쉼표를 붙여줍니다.

const object = {
  a: 1,
  b: 2,
};

"none" 이면 쉼표를 붙이지 않고, "es5" 이면 객체, 배열을 사용하게 될 떄 쉼표를 붙이고, "all" 이면 함수를 사용 할 때 인자를 전달 할 때도 쉼표를 붙입니다.

 

tabWidth

들여쓰기의 크기를 정합니다. 저는 개인적으로 2칸을 선호합니다. 여러분이 4칸이 좋다면 4로 설정을 하셔도 됩니다.

 

semi

세미콜론 (;) 을 쓸지 말지 정합니다. 저는 개인적으로 사용하는것을 선호합니다. 사용하고 싶다면 true 로 설정하세요.

 

singleQuote

문자열을 입력 할 때 " 를 쓸지 ' 를 쓸지 정합니다. 저는 ' 를 사용하는것을 선호합니다. 만약에 " 만 쓰고 싶다면 false 로 설정하세요.

 

이 외에도 다른 옵션들이 많은데 여기서 참고 할 수 있습니다.

 

참고로 저는 앞으로 이 설정으로 사용을 합니다

/prettierrc.js :

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

파일을 만드셨으면, 에디터에서 Prettier 익스텐션을 설치하세요.

그 다음에는 ⌘ + , (윈도우/리눅스에서는 Ctrl + ,) 키를 눌러서 VS Code 환경 설정을 열은 뒤 Format On Save 검색 후 를 체크하시면 앞으로 저장 할 때마다 설정한 코딩 스타일에 따라 자동으로 코드가 변형됩니다.

만약에 저장 할 때 마다 코드를 변형하지 않고 수동으로 해주고 싶다면 F1 키 또는 ⌘ + ⇧ + P (윈도우는 Ctrl + Shift + P) 를 눌러서 Format Document 를 입력해보세요. 그러면 이 명령을 위한 단축키도 나타날 것입니다.

설정이 끝났다면 App.js 를 열어서 코드를 다음과 같이 수정해보시고 저장을 해보세요.

 

코드를 엉망진창으로 작성하고 저장을 하면 자동으로 코드의 스타일이 우리가 .prettierrc 에서 지정한대로 고쳐집니다.

반응형