Prettier는 코드 형식을 자동으로 정리해주는 도구로, React 프로젝트에서 코드의 일관성을 유지하고 가독성을 높이는 데 도움을 줍니다. 이번 블로그에서는 React 프로젝트에서 Prettier를 설정하는 방법을 살펴보겠습니다.

Prettier란 무엇인가요?

Prettier는 다양한 프로그래밍 언어에서 사용할 수 있는 코드 포맷터이며, 코드의 들여쓰기, 스타일, 공백 등을 일관되게 정리해줍니다. 이를 통해 개발자는 코드 스타일을 신경 쓰지 않고도 코드를 작성할 수 있습니다.

React 프로젝트에 Prettier 설정하기

우선 React 프로젝트의 루트 디렉토리에 .prettierrc 또는 prettier.config.js 파일을 생성합니다.

JSON 파일을 사용하는 경우

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2
}

JavaScript 파일을 사용하는 경우

module.exports = {
  singleQuote: true,
  semi: false,
  tabWidth: 2
};

설정 파일에는 Prettier가 코드를 어떻게 포맷해야 하는지에 대한 규칙을 포함하고 있습니다.

Prettier 설치하기

npm install --save-dev prettier

또는

yarn add --dev prettier

Prettier 스크립트 추가하기

package.json 파일의 스크립트 부분에 다음과 같이 "format" 스크립트를 추가합니다.

{
  "scripts": {
    "format": "prettier --write 'src/**/*.js'"
  }
}

이제 npm run format 또는 yarn format 명령어를 실행하면 프로젝트 내의 모든 JavaScript 파일이 Prettier에 의해 서식이 맞춰집니다.

마치며

이번 포스트에서는 React 프로젝트에 Prettier를 적용하는 방법에 대해 알아보았습니다. Prettier를 사용하면 코드의 일관성과 가독성을 높일 수 있으며, 팀 프로젝트에서 여러 개발자가 참여할 때 유용하게 활용할 수 있습니다. Prettier를 적용하여 코드 스타일을 일관되게 유지할 수 있도록 노력해봅시다.

Happy coding! 🎉