"협업을 위한 코드 스타일 통일, Prettier로 시작하기"

| 서론 — 협업하다 보면 반드시 마주치는 문제

안녕하세요, 팡일입니다.

 

이번 포스팅에서는 개발자끼리 협업할 때 반드시 맞춰야 하는 요소 중 하나인 ‘코드 스타일’에 대해 이야기해보려고 합니다.

 

여러 명이 함께 개발하다 보면 이런 경험, 한 번쯤은 있으실 것 같아요.

• 기능은 동일한데 PR diff가 잔뜩 쌓여 있는 경우
• 공백, 줄바꿈, 따옴표 차이 때문에 코드 리뷰가 길어지는 상황
• “이건 누가 고친 거죠?” 싶은 변경 내역들

이런 문제의 상당수는 코드 스타일이 통일되지 않았기 때문입니다.

 

오늘은 이 문제를 가장 간단하게 해결해주는 도구인 Prettier에 대해 정리해보려고 합니다.

 

 

 

| Prettier란? — 코드 스타일을 자동으로 맞춰주는 도구

Prettier는 코드 포맷터(Formatter)입니다.

즉, 코드의 동작에는 관여하지 않고, 코드의 모양(스타일)만 자동으로 정리해주는 도구입니다.

 

Prettier를 사용하면 다음과 같은 것들을 자동으로 맞춰줍니다.

• 들여쓰기
• 줄바꿈 위치
• 세미콜론 여부
• 따옴표 종류
• trailing comma 여부

그렇다면, 왜 Prettier를 써야 할까요?

 

바로 “코드 스타일에 대한 논쟁을 없애주기” 때문입니다. 누가 더 잘 썼는지가 아니라, 도구가 정한 규칙을 모두가 따르게 만드는 것이 핵심입니다.

 

 

 

| Prettier는 ‘어떻게’ 구성되어 있을까?

Prettier를 처음 설정하다 보면, 보통 아래 세 가지를 함께 마주하게 됩니다.

• .prettierrc 파일
• Prettier VS Code Extension
• .vscode/settings.json 파일

이 셋은 역할이 서로 다르고, 각각 책임지는 범위도 다릅니다.

 

1) .prettierrc — 코드 스타일 규칙을 정의하는 파일

: .prettierrc는 이 프로젝트에서 코드가 어떤 모습이어야 하는지를 정의하는 파일입니다.

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

• 줄 길이는 어디까지 허용할지
• 세미콜론을 붙일지 말지
• 따옴표는 무엇을 쓸지

위와 같은 스타일의 기준(Source of Truth)이 모두 이 파일에 담깁니다.

 

중요한 점은, 이 파일은 VS Code뿐 아니라 CLI, CI, 다른 IDE에서도 동일하게 적용된다는 것입니다. 그래서 협업에서는 반드시 프로젝트 루트에 두는 것이 좋습니다.

 

 

 

2) Prettier VS Code Extension — 규칙을 실제로 실행하는 도구

: Prettier VS Code Extension은 .prettierrc에 적힌 규칙을 읽어서 실제로 코드에 적용해주는 실행기입니다.

• VS Code에서 Format Document 기능 제공
• 저장 시 자동 포맷 실행
• .prettierrc 설정을 그대로 반영

즉, 규칙을 정의하지는 않고, 정의된 규칙을 VS Code 안에서 실행해주는 역할만 담당합니다.

 

 

 

3) .vscode/settings.json  — 어떤 도구를 언제 사용할지 정하는 파일

: .vscode/settings.json은 VS Code 전용 설정 파일로, 여러 포맷터 중 어떤 것을 사용할지, 언제 포맷을 실행할지를 결정합니다.

 

예를 들어 아래 설정은, 기본 포맷터로 Prettier를 사용하고 파일 저장 시 자동으로 실행하겠다는 의미입니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

 

 

즉, 이 파일은 “Prettier를 쓰느냐 마느냐”가 아니라, “VS Code에서 누가, 언제 실행할지”를 정하는 파일이라고 이해하면 됩니다.

 

 

 

이 세 가지를 쉽게 정리하면 아래와 같은 역할 분담 구조를 가집니다.

• .prettierrc → 무엇이 올바른 스타일인지
• Prettier Extension → 그 스타일을 실행
• .vscode/settings.json → VS Code에서 실행 방식 결정

 

 

 

 

| Prettier는 어떻게 사용하는가?

Prettier는 프로젝트 루트에 설정 파일을 하나 두는 방식으로 사용합니다.

 

1) .prettierrc  파일 생성

project-root
 ├─ src/
 ├─ package.json
 └─ .prettierrc

 

2) 설정 파일 작성

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

 

이렇게 설정해두면, VS Code에서 저장 시 자동 포맷 또는 Format Document 실행 시 모든 팀원이 동일한 코드 스타일을 유지하게 됩니다.

 

 

 

 

| 주요 옵션 살펴보기 (예시 코드 포함)

이제 위에서 사용한 옵션들이 실제로 어떤 역할을 하는지 하나씩 살펴보겠습니다.

 

1) printWidth: 80

한 줄에 허용할 최대 문자 수를 의미합니다.

// Before
const user = { id: 1, name: 'Kwangil', role: 'admin', isActive: true };

// After
const user = {
  id: 1,
  name: 'Kwangil',
  role: 'admin',
  isActive: true,
};

• 코드 가로 스크롤 최소화
• PR diff 가독성 향상

2) semi: true

문장 끝에 세미콜론(;)을 붙이도록 설정합니다.

const count = 0;
setCount(count + 1);

• ASI로 인한 예외적인 버그 예방
• 팀 차원의 안정성 확보

3) tabWidth: 2

들여쓰기 한 단계당 공백 수를 의미합니다.

function App() {
  return (
    <div>
      <span>Hello</span>
    </div>
  );
}

• React / TypeScript 생태계의 표준
• JSX 중첩 구조에서 가독성 향상

4) singleQuote: true

JavaScript / TypeScript 문자열에 작은따옴표(')를 사용합니다.

const title = 'Dashboard';
const message = 'He said "hello"';

• JSX의 "와 시각적 구분
• escape 빈도 감소
• ※ JSX의 className 같은 attribute에는 적용되지 않습니다.

5) trailingComma: "all"

마지막 요소 뒤에도 쉼표를 추가합니다.

const config = {
  apiKey: 'xxx',
  timeout: 3000,
};

function fetchData(
  url: string,
  options: Options,
) {}

• diff 최소화
• 리뷰 시 변경점 명확

 

 

 

 

| 결론 — 협업을 위한 가장 쉬운 첫 단계

결론적으로, Prettier는 코드 실력을 판단하는 도구가 아닙니다. 오히려 팀의 에너지를 더 중요한 문제에 쓰게 해주는 도구에 가깝습니다.

 

스타일 논쟁도 없고, 의미 없는 diff 사항도 업속, 리뷰 피로도 줄어줍니다. 또한, 통일된 코드 스타일과 깔끔한 PR, 빠른 리뷰와 협업을 가져다주는 참 듬직한 존재라고 볼 수 있습니다.

 

협업을 시작한다면, 가장 먼저 맞춰야 할 것은 코드 스타일이고, 그 시작은 Prettier 설정 파일 하나라고 생각합니다.