입문 2주차 9 코드 서식 정리하기

<Goal>
1. 코드 서식의 중요성에 대해 알아봅니다.
2. 코드 서식 도구인 Prettier를 알아봅니다.
3. Prettier의 규칙을 알아보고, 실제 프로젝트에 적용해봅니다.

01. 코드 서식 알아보기

1) 코드 서식이 무엇일까요?

코드 서식 : 코드의 형식(Format)
코드 서식은 코드를 작성하는 방식을 말합니다. 이는 코딩 스타일(Coding Style)이라고도 합니다.

언제나 “좋은 코드”를 작성하기 위해 노력하는 것이 개발자의 미덕입니다. 전 “좋은 코드”라는 것은 가독성이 좋고, 일관성이 있으며, 간결한 코드라고 생각합니다.

2) 코드 서식을 일관적으로 관리하면 무엇이 좋을까요?

개발자들마다 똑같은 기능, 똑같은 내용의 코드를 작성하더라도 다른 형태로 코드를 작성하게 되는데요, 그 예시가 아래와 같습니다.
Case 1

sock.on("BUY", (data) => { // 인자의 구분을 위해 ()로 감싸줌
  const emitData = {
    ...data, // 파라미터마다 개행문자 (텍스트의 한 줄이 끝남을 표시하는 문자 또는 문자열)넣음
    date: new Date().toISOString(), // 최대한 적게 유지
  };

  io.emit("BUY_GOODS", emitData);
});

 

​
Case 2 (한 줄에 모든 코드 작성)

sock.on("BUY", (data) => {
  io.emit("BUY_GOODS", { ...data, "date": new Date().toISOString() });
});

​Case 3 (객체 리터럴 내의 프로퍼티를 개행으로 구분)

sock.on("BUY", (data) => {
  io.emit("BUY_GOODS", { .. 객체를 만들고 각각의 프로퍼티마다 개행문자를 입력
    ...data,
    date: new Date().toISOString(),
  });
});

​
Case 4 (문자열 리터럴 사용, 화살표 함수 괄호 생략)

sock.on('BUY', data => {
  io.emit(`BUY_GOODS`, { ...data, date: new Date().toISOString() });
});

 

정답은 없습니다. 하지만, 일관된 코드 서식은 오타를 줄이고, 가독성을 향상시키며, 때로는 여러분을 더욱 전문적으로 보이게 만들어줍니다. 
일관된 코드 서식은 팀원들 간의 협업을 원활하게 만들어주고, 코드 리뷰를 통한 피드백 과정을 더욱 효과적으로 만들어줍니다. 여기서, 코드 리뷰는 팀원들이 서로의 코드를 이해하고, 피드백해주는 과정을 뜻하는데요, 일관된 코드 서식은 이 과정을 더욱 원활하게 만들어줍니다.
또한, Git에서 협업하거나 코드 리뷰를 진행할 때 발생하는 코드 충돌(Code Conflict)을 줄여주고, 커밋 내역을 관리할 때 들여쓰기와 같은 수정내역을 줄여주기도 한답니다. 
코드 서식의 일관성을 유지하기 위해 다음 섹션에서 배우게될 Prettier나 코드의 일관성을 강제로 유지하게 만들어주는 ESLint와 같은 도구를 도입하게 된다면 팀 전체가 동일한 코드 스타일을 유지할 수 있게 도와줍니다.

개발 조직에서는 가독성을 중요하게 생각하기 때문에, 이러한 도구를 사용하여 코드 서식을 일관성 있게 유지하는것이 더욱 효율적인 개발이 가능하게 되는 것이죠.

우리는 다음 섹션에서 이러한 코드 서식 도구 중 Prettier에 대해 알아보도록 하겠습니다.​

02. Prettier

1) 코드 서식 관리 도구 Prettier(프리티어)가 무엇인지 알아보기

◆ Prettier가 어떤 기능을 하는지 실제로 체험해보기

https://prettier.io/playground/
Prettier 홈페이지에서 TRY IT ONLINE 버튼을 누르면, 실제로 프리티어를 사용해볼 수 있는 플레이그라운드 페이지가 뜹니다.

 

←Prittier 설정       ↓적용 전               적용 후→ 

 

--print-width : 한줄 글자 길이

--tab-width : 텝 너비

 

위 예시는 임의의 코드를 입력하여 좌측의 코드가 우측의 형태로 자동으로 변환되는 모습입니다.

◆ 어떤 언어에 사용할 수 있는지 살펴보기

프리티어는 다양한 프로그래밍 언어와 포맷을 지원합니다.
최근 프리티어의 공식 홈페이지에 나온 지원 언어는 아래와 같습니다

"Community Plugins"는 Prettier 개발사에서 직접 제공하지 않고, 해당 언어 커뮤니티의 개발자들이 따로 만들어놓은 third-party 플러그인으로 지원되는 언어이니 사용 시 문제가 있을 수 있으니 주의하세요.

◆ 어떤 규칙들을 제공하는지 살펴보기

문서에 따르면 Prettier가 기본적으로 제공하는 규칙은 아래와 같습니다.

https://prettier.io/docs/en/configuration.html#basic-configuration

const config = {
  trailingComma: "es5", // ES5에서 제원하는 위치에 쉼표를 추가합니다.
  tabWidth: 4, // Tab의 너비를 4 스페이스로 설정합니다.
  semi: false, // 세미콜론을 사용하지 않습니다.
  singleQuote: true, // 따옴표를 작은 따옴표(')를 사용합니다.
};

export default config;

규칙들은 수정 가능합니다.

2) Prettier 사용 준비

1. 프로젝트에 prettier 설치
Prettier를 debDependency로 설치합니다.

yarn add prettier -D

프리티어는 실제로 여러분의 서비스를 구동시킬때 필요한 모듈이 아니고, 여러분의 코드 작성을 조금 더 편리하게 해주는 도구이므로 devDependency로 설치하겠습니다!

2. Prettier 설정파일 추가
작업 디렉토리의 최상단(root) 위치에 .prettierrc.json 라는 파일을 생성하고, 아래의 내용을 넣어주세요!
.prettierrc.json 기본 설정

// .prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all",
}

각각의 속성은 아래와 같습니다.
"printWidth": 80 : 한 줄에 최대 글자수를 정의
"tabWidth": 2 : Tab에 대한 스페이스 수를 정의
"singleQuote": false : 따옴표를 쌍 따옴표(")를 사용
"trailingComma": "all" : 여러 줄을 사용할 때, 후행 콤마 사용

3. 스크립트 추가
이제 Prettier를 보다 편리하게 사용할 수 있도록 package.json 파일에 스크립트를 추가할거에요. 이를 통해 터미널에서 간단한 명령만으로 Prettier를 실행할 수 있게됩니다.

package.json 파일에 있는 "scripts" 항목에 원하는 스크립트를 따로 추가해서 편리하게 단축키처럼 사용할 수 있습니다!
우선 아래 코드스니펫을 복사해서 package.json 파일에 "scripts" 항목 안에 추가해주면 됩니다!
[코드스니펫] format 스크립트 추가

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

 

위 코드를 추가한 후 package.json파일은 아래와 같이 수정되어 있습니다.
package.json 예시

{
  "name": "todolist",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module",
  "scripts": { ///////추가
    "format": "prettier --write *.js **/*.js"
  },///////추가
  "dependencies": {
    "express": "^4.21.1",
    "joi": "^17.13.3",
    "mongoose": "^8.8.2"
  },
  "devDependencies": {
    "prettier": "^3.3.3"
  }
}

위에 "format": "prettier --write *.js **/*.js" 라인은 format이라는 새로운 스크립트를 추가한 것입니다. 이 스크립트를 실행하면 프로젝트 내의 모든 .js 파일을 대상으로 .prettierrc.js에 설정된 값을 바탕으로 Prettier를 실행하게 됩니다.

3) Prettier 실행하기

package.json에 작성된 format 스크립트를 실행합니다.

yarn run format

여기서 yarn run은 package.json에 작성한 스크립트를 실행하는 명령어입니다. 뒤에 format은 우리가 방금 package.json에 추가한 스크립트 이름이죠. 
만약 스크립트가 정상적으로 추가됐다면, Prettier가 프로젝트의 모든 JavaScript 파일을 대상으로 코드 서식을 자동으로 수정하고, 그 결과를 터미널에 출력됩니다.

app.js파일을 확인해보면 코드 서식이 바뀌어 있을겁니다.
.prettierrc.json에 설정된 것 처럼, 쌍따옴표와 세미콜론이 잘 적용된 것을 확인할 수 있습니다

4) VS Code에서 사용하기

Prettier는 콘솔에서 명령어로 실행하는 것 외에도, VS Code에서 사용할 수 있는 확장 플러그인을 제공합니다.

이 방법으로는 매번 터미널에서 명령어를 실행할 필요 없이, IDE 내에서 코드 서식을 자동으로 수정할 수 있습니다

1. VS Code - Prettier 플러그인 설치하기

 

2. Prettier 플러그인을 사용하도록 설정하기
VsCode에서 아래 단축키를 입력해서 Format Document를 열어주세요!
Window: Shift + Alt + F
mac: ⇧ + ⌥ + F
Configure Default Formatter창이 나올경우 Configure… 항목을 선택해주세요!
"Select a default formatter …" 라고 뜰텐데, 아래에 보이는 "Prettier - Code formatter" 를 선택해주세요!

만약 Configure Default Formatter창이 나오지 않는다면?
app.js 파일로 테스트해보기
우선 테스트를 위해서는 app.js 파일을 규칙에 맞지 않게 바꿔야만 해요!
1) app.js 파일 아무거나 수정
아래처럼 들여쓰기만 바꾼다던가, 외따옴표(’)로 변경한다거나, 세미콜론을 삭제하는 방식으로 코드에 에러는 없지만 이상하게 보이도록 바꿔주세요!

Prettier 적용 전 app.js
2) app.js 파일 편집 창에서 오른쪽 마우스를 클릭해 "Format Document"(문서서식 프로그램) 항목을 누릅니다.
기본값을 수정하고 나면 app.js를 이상하게 수정했던 부분이 원래대로 돌아오게 됐을거예요!

3) 변경했던 app.js 파일이 Prettier에 맞추어 자동으로 수정된 것을 확인할 수 있습니다

 

.prettierrc.json  수정 후에는 터미널에 'yatn run format'을 입력하세요

yarn run format

5) Prettier 규칙에 대해 조금 알아보기

◆ trailingComma: "es5"

https://prettier.io/docs/en/options.html#trailing-commas
코드 맨 뒤에 콤마(,)를 붙일수 있는 경우 콤마를 붙일지 말지 결정하는 규칙입니다!

// 원래 코드
const items = [
    'item1',
    'item2'
];

// Prettier 규칙을 적용한 후
const items = [
    'item1',
    'item2',
];

▶ es5라는 값은 JavaScript 버전중 하나인 ES5에서 허용되는 부분까지만 콤마를 뒤에 붙이는 규칙입니다.
▶ none이라는 값은 가능한 모든 코드에서 코드 뒤에 붙은 콤마를 제거합니다. (에러가 나도록 다 제거하는것은 아닙니다!)
▶ all 이라는 값은 ES8 이전의 버전까지 허용되는 모든 부분에 콤마를 붙이도록 합니다.

아직 all 규칙에 해당하는 문법을 지원하지 않는 브라우저가 있기 때문에 현재 여러분에게 권장드리는 규칙은 "es5" 혹은 "none" 입니다.

◆ tabWidth: 4

들여쓰기 한번에 얼만큼의 스페이스(여백)로 구성할지에 대한 설정입니다.

// tabWidth: 2
function foo() {
  console.log('Hello, world!');
}

// tabWidth: 4
function foo() {
    console.log('Hello, world!');
}

위처럼 2개의 여백으로 들여쓰기를 했었던 파일이 4개의 여백으로 바뀌었습니다.
최근 스크립트 언어들의 들여쓰기는 2개~4개로 하는것이 일반적인 관례입니다.
만약 코드의 들여쓰기가 잘 구분이 안된다 하시면 4개, 코드가 길어지는게 싫다 하시면 2개를 권장합니다.

◆ semi: false

코드 뒤에 세미콜론을 붙일지 말지 결정하는 규칙입니다.
true인 경우 세미콜론을 항상 붙이도록 해줍니다.

// semi: true
const x = 10;
const y = 20;

// semi: false
const x = 10
const y = 20

만약 이 설정을 false로 하는 경우 위 사진처럼 세미콜론이 모두 제거됩니다.
자바스크립트는 세미콜론이 없어도 정상적으로 동작할 수 있는 언어이기 때문에 존재할 수 있는 옵션입니다
이 규칙은 항상 true로 하시길 권장드립니다.
세미콜론은 코드가 어디서 끝맺음을 하는지 코드의 맥락을 파악하는데 도움을 주는 중요한 요소입니다.

◆ singleQuote: true

문자열을 표기하는 문법에서 외따옴표(’)를 사용할지, 쌍따옴표(”)를 사용할지의 여부를 설정하는 규칙입니다.

// singleQuote: false
const greeting = "Hello, world!";

// singleQuote: true
const greeting = 'Hello, world!';

이 규칙은 true로 설정해두어 외따옴표(’)를 사용하는것을 권장드립니다.
키를 매번 입력하다보면 쉬프트 키를 매번 누르는것이 상당히 번거롭고, 외따옴표를 썼을때 단점이 특별히 없기 때문입니다 

◆ arrowParens: "always"

Arrow function에서 파라미터 부분에 괄호를 항상 붙여주는 규칙입니다.

// arrowParens: "avoid"
const square = x => x * x;

// arrowParens: "always"
const square = (x) => x * x;

이 규칙은 항상 "always"로 해두시는걸 권장합니다.
Arrow function이 아무리 편리하고 코드를 짧게 쓰도록 도와준다고 해도, 괄호가 있는것이 일관적인 코드를 작성하는것에 도움이 됩니다.
→ 일관적인 코드는 가독성이 향상됩니다.

6) 정리하자면

권장하는 기본 규칙

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "arrowParens": "always"
}
.prettierrc.json

trailingComma: "es5"
   역할: 객체나 배열에서 마지막 요소 뒤에 쉼표를 추가할지 설정합니다.
   옵션 설명:
      "none": 쉼표를 추가하지 않음.
       "es5": ES5에서 허용되는 위치(객체, 배열)에서만 쉼표를 추가.
       "all": 가능한 모든 위치에 쉼표 추가 (함수 인자 포함).
   현재 설정: 객체와 배열에만 쉼표를 추가합니다.

 

tabWidth: 2
   역할: 들여쓰기에서 탭의 크기를 지정합니다.
   현재 설정: 들여쓰기를 공백 2칸으로 설정합니다.

 

semi: true
   역할: 명령문 끝에 세미콜론(;)을 추가할지 여부를 설정합니다.
   현재 설정: 모든 명령문 끝에 세미콜론을 추가합니다.

 

singleQuote: true
   역할: 문자열을 작은따옴표(')로 감쌀지 큰따옴표(")로 감쌀지 설정합니다.
   현재 설정: 문자열을 작은따옴표로 감쌉니다.

 

arrowParens: "always"
   역할: 화살표 함수의 매개변수를 괄호로 감쌀지 설정합니다.
   옵션 설명:
       "always": 매개변수의 개수와 상관없이 항상 괄호 사용.

 (param) => {}

      "avoid": 매개변수가 하나인 경우 괄호 생략.

param => {}

   현재 설정: 항상 괄호를 사용합니다.