티스토리 뷰

IT지식

Prettier, 깔끔한 코드의 비결

고슈슈 2024. 8. 27. 12:08

개발자라면 누구나 깔끔하고 일관된 코드를 작성하고 싶어합니다. 하지만 팀 프로젝트를 하다 보면, 각자 사용하는 코딩 스타일이 달라서 코드가 뒤죽박죽이 되기 쉽습니다. 그럴 때 Prettier가 마법처럼 깔끔한 코드를 만들어줍니다.

이번 포스팅에서는 Prettier가 무엇인지, 왜 사용해야 하는지, 그리고 어떻게 사용하는지에 대해 알아보겠습니다.

1. Prettier란?

Prettier는 코드의 스타일을 자동으로 포맷팅해주는 도구입니다. Prettier는 코드의 형식을 통일시켜, 코드가 더 일관되고 읽기 쉬운 형태로 만들어줍니다. 일반적으로 코드를 작성할 때 들여쓰기, 괄호 위치, 줄바꿈 등을 신경 써야 하지만, Prettier를 사용하면 이런 고민을 덜 수 있습니다.

Prettier는 JavaScript뿐만 아니라, HTML, CSS, TypeScript, JSX, JSON, YAML, Markdown 등 다양한 언어를 지원합니다. 코드 스타일을 일관되게 유지하는 것은 가독성을 높이고, 협업할 때 코드를 더 쉽게 이해할 수 있게 해줍니다.

2. Prettier를 사용해야 하는 이유

왜 Prettier를 사용해야 할까요? Prettier를 사용하면 얻을 수 있는 여러 가지 장점이 있습니다.

1) 일관된 코드 스타일 유지

팀 프로젝트에서 여러 명이 코드를 작성할 때, 각자의 코딩 스타일이 조금씩 다를 수 있습니다. 누군가는 2칸 들여쓰기를, 다른 누군가는 4칸 들여쓰기를 사용할 수 있습니다. 이런 작은 차이들이 모이면 코드가 지저분해지고, 유지보수가 어려워집니다. Prettier는 이러한 문제를 해결해줍니다. Prettier를 사용하면 모든 코드가 동일한 스타일로 포맷팅되므로, 코드가 일관되고 깔끔해집니다.

2) 코드 리뷰 시간 단축

코드 리뷰를 할 때 스타일 문제로 시간을 낭비하는 것은 피하고 싶을 것입니다. Prettier를 사용하면 코드를 작성할 때 자동으로 스타일을 맞춰주기 때문에, 코드 리뷰에서 스타일 문제를 지적할 필요가 없습니다. 이는 코드 리뷰 시간을 단축시키고, 리뷰어가 코드의 로직에 집중할 수 있게 해줍니다.

3) 개발 생산성 향상

코드를 작성하면서 일일이 스타일을 맞추는 일은 번거롭고 시간이 많이 걸립니다. 하지만 Prettier는 코드 포맷팅을 자동으로 처리해주므로, 개발자는 코드의 로직과 기능에만 집중할 수 있습니다. 덕분에 개발 생산성이 자연스럽게 향상됩니다.

4) 프레임워크와의 호환성

Prettier는 React, Angular, Vue.js 등 다양한 프레임워크와 쉽게 통합할 수 있습니다. Prettier의 설정 파일을 프로젝트에 추가하기만 하면, 프로젝트 전반에 걸쳐 일관된 스타일을 유지할 수 있습니다.

3. Prettier 설치 및 사용 방법

이제 Prettier를 설치하고 사용하는 방법을 알아보겠습니다. Prettier를 설치하는 방법은 간단하며, 설정도 쉽게 할 수 있습니다.

1) Prettier 설치

먼저, 프로젝트에서 Prettier를 사용하기 위해 Prettier를 설치해야 합니다. Node.js와 npm이 설치되어 있다면, 다음 명령어를 터미널에 입력하여 Prettier를 설치할 수 있습니다.

npm install --save-dev prettier

이 명령어는 Prettier를 프로젝트의 개발 의존성(devDependencies)으로 설치합니다.

2) Prettier 기본 사용법

설치가 완료되면, 터미널에서 다음 명령어를 사용해 Prettier로 파일을 포맷팅할 수 있습니다.

npx prettier --write .

이 명령어는 현재 디렉토리의 모든 파일을 Prettier로 포맷팅합니다. 특정 파일만 포맷팅하고 싶다면, 파일 경로를 지정하면 됩니다.

npx prettier --write src/index.js

이제 Prettier가 자동으로 코드를 포맷팅해줍니다. 들여쓰기, 공백, 줄바꿈 등 모든 스타일을 Prettier가 알아서 정리해줍니다.

3) Prettier 설정 파일 추가

Prettier는 기본적으로 내장된 설정을 사용하지만, 필요에 따라 설정 파일을 추가해 맞춤 설정을 할 수 있습니다. 프로젝트 루트에 .prettierrc 파일을 생성하고, 원하는 설정을 추가하세요.

{
  "tabWidth": 4,
  "singleQuote": true,
  "semi": false
}
// 탭 너비를 4칸으로 설정

tabWidth → 탭의 너비를 설정합니다. 기본값은 2입니다.
singleQuote → 작은따옴표를 사용할지 설정합니다. 기본값은 false이며, 큰따옴표를 사용합니다.
semi → 문장의 끝에 세미콜론을 추가할지 설정합니다. 기본값은 true입니다.

이 설정 파일을 통해 Prettier의 동작 방식을 원하는 대로 조정할 수 있습니다.

4) 에디터 통합

Prettier는 다양한 코드 편집기와 통합되어, 코드 작성 중 자동으로 포맷팅을 적용할 수 있습니다. 예를 들어, Visual Studio Code를 사용하는 경우, Prettier 확장을 설치하고 설정을 추가하면 저장할 때마다 자동으로 코드가 포맷팅됩니다.

Prettier 확장 설치 → Visual Studio Code에서 확장 마켓플레이스로 가서 "Prettier - Code formatter" 확장을 설치합니다.
자동 포맷팅 설정 → settings.json 파일에 다음 설정을 추가하면, 파일을 저장할 때마다 자동으로 포맷팅이 적용됩니다.

"editor.formatOnSave": true

이제 코드 작성 후 저장할 때마다 Prettier가 알아서 코드 스타일을 정리해줍니다. 이를 통해 코딩 속도와 스타일의 일관성을 동시에 유지할 수 있습니다.

5) Prettier와 ESLint 통합

ESLint는 코드의 오류를 잡고 스타일을 체크해주는 또 다른 도구입니다. Prettier와 ESLint를 함께 사용하면, 코드의 스타일뿐만 아니라 품질까지 동시에 관리할 수 있습니다. 두 도구를 함께 사용하려면, eslint-plugin-prettier 플러그인을 설치하고 설정 파일에 다음과 같이 추가합니다:

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

eslintrc 파일에 Prettier를 통합하도록 설정합니다.

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

이 설정을 통해 ESLint가 Prettier의 규칙을 따르도록 만들 수 있습니다. 이제 코드의 스타일과 품질을 한 번에 관리할 수 있습니다.

4. Prettier의 단점

Prettier는 강력한 도구지만, 모든 도구와 마찬가지로 단점도 있습니다.

▶ 단점

유연성 부족 → Prettier는 특정한 규칙에 따라 코드를 포맷팅하기 때문에, 개발자가 선호하는 스타일과 다를 수 있습니다. 하지만 이는 코드 스타일의 일관성을 위해 감수해야 할 부분이기도 합니다.
프로젝트 초기 설정 필요 → Prettier를 처음 도입할 때, 프로젝트에 맞는 설정을 하는 데 시간이 조금 걸릴 수 있습니다.

Prettier는 개발자에게 없어서는 안 될 중요한 도구입니다. 코드 포맷팅을 자동으로 처리해주어 일관된 스타일을 유지할 수 있고, 코드 리뷰 시간을 절약하며, 더 나은 협업 환경을 조성해줍니다. Prettier를 사용하는 것은 깔끔하고 읽기 쉬운 코드를 작성하는 데 큰 도움이 됩니다.

이번 포스팅을 통해 Prettier의 개념과 사용법을 이해하고, 여러분의 프로젝트에 도입해 보세요. 코드를 더욱 아름답게 만들고, 개발 과정에서 불필요한 스트레스를 줄일 수 있을 것입니다.