코드 스타일이 중요한 이유
1. 코드 스타일이 중요한 이유
여러 명의 개발자들이 같이 작업을 할 때 똑같은 함수를 작성하고 동작도 똑같이 되지만, 코드는 서로 다르게 작성될 때가 대부분이다. 한 연구 결과에 따르면 소프트웨어 개발자들이 약 60%의 업무시간을 코드를 읽고 이해하는데 사용한다고 한다. 마치 한 사람이 작성한 것처럼 일관된 스타일로 코드를 작성하는 건 효율적인 협업을 위해서 필수적이다. 가독성이 좋은 코드는 읽는데 작은 노력과 적은 시간이 들기 때문이다.
2. 코딩 컨벤션
수많은 기업과 프로젝트들이 코딩 컨벤션(Coding Convention)을 정해놓고 사용한다. 개발자들이 논의를 통해 어떤 스타일로 코드를 작성할지 약속해 놓은 규칙, 메뉴얼이라고 생각하면 된다.
JavaScript Standard Style
Goolge JavaScript Style Guide
GitHub - airbnb/javascript: JavaScript Style Guide
코딩컨벤션
3. 포메터와 린터
실제 코딩 커벤션 문서를 보면 알겠지만, 항목도 너무 많고 다 외워서 사용하기도 어렵다. 그리고 외우는 사람이 있더라도 실수를 하기 마련이다. 이걸 지켰는지 확인하면서 일일이 신경쓰는 것도 비효율적이다. 그래서 개발자들은 이것도 대신해 주는 개발 도구를 사용한다. 바로 포매터(Formatter)와 린터(Linter)이다.
규칙을 미래 정해두면, 포매터는 코드 스타일을 검수/수정(포매팅)해 주고, 린터는 코드의 구조를 검사해서 잘못 작성된 코드가 없는지 확인(정적 분석: Static Analysis)해 준다. 포매터와 린터에 규칙만 잘 정해두면 마치 한 사람이 작성한 코드처럼 만들 수 있다.
4. 함께 사용하는 자동화 도구들
근데 포매터와 린터도 사람이 매번 실행하려니 비효율적이다. 검사는 걸 잊어버릴 때도 있는데, 이것마저도 대신해 주는 자동화 도구들을 사용한다.
(1) Husky
최근에는 자바스크립트로 개발하는 경우에 husky라고 하는 패키지를 사용해서 포매터와 린터를 자동으로 실행하는 경우가 많다. husky를 사용하면 커밋을 하기 전이나 푸시를 하기 전에 포매터와 린터를 실행해서 자동으로 코드를 검사하도록 할 수 있다. 참고로 Husky는 Git에서 제공하는 깃 훅(Git Hooks)이라는 기능을 쉽게 사용할 수 있도록 해주는 패키지이기 때문에, 꼭 husky를 사용하지 않더라도 Git의 기능으로 이런 자동화를 할 수 있다.
(2) Github Action
자동화 스크립트를 본인의 컴퓨터에서만 실행하는 게 아니라, 깃허브 같은 원격 저장소에서도 실행할 수 있다. 린터를 실행하거나 하는 일도 깃허브에서 실행할 수 있다. 최근에는 깃허브에서 기본적으로 제공하는 Github Action이라는 걸 많이 사용한다.
Editor Config
1. Editor Config
VSCode에서는 환경 설정을 하면 원하는 코드 스타일을 지키도록 할 수 있다. 예를 들어 들여쓰기를 스페이스 2칸으로 하고, 따움표는 반드시 홑따움표만 쓰도록 할 수 있다.
그런데 사람들이 전부 똑같이 VSCode를 사용하지는 않느다. WebStorm을 쓰는 사람도 있고, Sublime Text를 쓰는 사람들도 있다. 이 모든 사람들에게 설정을 공통적으로 적용할 수 있는 방법이 있는데, 바로 Editor Config이다.
Editor Config는 에디터의 설정을 코드로 할 수 있다. 예를 들어 .editorconfig 파일을 만들고 프로젝트 최상위 폴더에 배치해 두면, 기본적인 에디터 설정을 할 수 있다. 이렇게 하면 프로젝트 소스코드만 다운 받으면 별도로 에디터 설정을 할 필요없이 기본적인 코드 스타일을 설정할 수 있다는 장점이 있다.
# .editorconfig
root = true
[*]
indent_style = space # 들여쓰기에 스페이스 사용
indent_size = 2 # 들여쓰기 크기는 스페이스 2개로 쓰기
charset = utf-8 # 파일 인코딩은 utf-8
insert_final_newline = true # 파일 맨 마지막에 빈 줄 추가하기Prettier
1. 패키지로 설정하기
프로젝트에 devDependencies로 prettier라는 패키지를 설치한다.
npm install --save-dev prettier그리고 .prettierrc.json라는 파일을 만들어라. 이 파일은 Prettier에서 사용할 규칙을 적은 설정 파일이다. 예를 들어 "매번 마지막에 콤마를 추가하기.", "들여쓰기 크기는 2", "세미콜론은 쓰지 않기.", "홑따움표만 쓰기"를 설정할 수 있다. 이런 규칙의 목록은 Prettier 공식 문서의 Options에서 확인할 수 있다.
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}prettier 패키지를 직접 실행할 수도 있지만, NPM 스크립트를 통해 사용하는 걸 권장한다. 예를 들어 prettier라는 스크립트에 prettier --write .라고 설정을 한다고 가정하자. --write는 파일을 덮어써서 수정하겠다는 의미이고, src/**/*.js는 src 디렉토리 아래에 있는 모든 자바스크립트 파일을 의미한다.
# package.json
{
"name": "formatter-and-lint",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prettier": "prettier --write src/**/*.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"prettier": "^2.8.8"
}
}예를 들어 src/test.js라는 파일에 '섭씨-화씨 변환 코드'를 저장하고 npm run prettier를 실행하면, Prettier는 미리 정한 규칙에 따라 파일을 수정하게 된다.
# src/test.js
function c2f(value){return value*9/5+32}2. VSCode 확장 프로그램으로 사용하기
VSCode에서는 Prettier를 VSCode 에디터 안에서 실행할 수 있다. Extension 메뉴에서 "prettier"를 검색하고 설치하면 된다.
3. 참고하면 좋은 자료
ESLint
1. React(Create React App)에서 사용하기
프로젝트 폴더에서 터미널을 열고, ESLint에서 제공하는 도구를 사용해서 초기화를 한다.
npm init @eslint/config만약에 이 명령어를 처음 실행했다면 @eslint/create-config라는 패키지를 설치할 거냐고 물어보는데, y를 입력해준다.
Need to install the following packages:
@eslint/create-config@0.4.3
Ok to proceed? (y)설치 목적을 선택한다.
? How would you like to use ESLint? …
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style
To check syntax only모듈 문법은 import/export를 위주로 쓴다면 그렇게 설정하라.
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these그 외에 필요한 설정을 한다. 성공적으로 설정을 완료했다면 package.json의 devDependencies에 두 패키지가 추가되어 있을 것이다.
"eslint": "^8.39.0"
"eslint-plugin-react": "^7.32.2"NPM 스크립트를 추가하라.
{
...
"script": {
"lint": "eslint src/**/*.js",
...
}
}src 폴더 아래에 있는 모든 자바스크립트 파일에 eslint를 실행하도록 한다. npm run lint를 실행하면 eslint가 실행된다. .eslintrc.js라는 파일이 만들어져 있는데, 이 파일은 eslint에 적용할 규칙을 코드로 작성한 파일이다. 이걸 수정하면 적용할 규칙을 바꿀 수 있다.
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {},2. Next.js에서 사용하기
Next.js에서는 기본적으로 ESLint를 별도의 설정 없이 사용할 수 있다. .eslintrc.js 파일을 만들고 npm run lint를 실행하면 된다.
3. VSCode에서 확장 프로그램으로 사용하기
확장 프로그램을 설치하고 .eslintrc.js 같을 설정 파일을 만들어 두면 VSCode에서 바로바로 린트 결과를 확인할 수 있다. 확장 프로그램 탭에서 "eslint"를 검색해 설치하면 된다.
소스 코드 파일에서 왼쪽 아래의 아이콘을 클릭하거나, 소스 코드에 생긴 빨간 줄에 마우스 커서를 올려 보면 ESLint 오류를 확인할 수 있다.
4. 자주 쓰이는 설정들
우선 규칙을 추가하는 법부터 배우도록 하자. rules라는 프로퍼티에서 객체를 만들고, 그 객체에서는 각 프로퍼티의 이름으로 규칙의 이름을 쓴 다음 규칙을 설정할지 말지를 결정한다. 어떤 규칙을 쓸 수 있는지는 Rules Reference에서 확인해 볼 수 있다.
예를 들어 세미콜론을 쓸 건지 정하는 규칙(공식 문서)은 semi이다. 공식 문서에 따르면 always라는 값을 쓰면 항상 세미콜론을 쓰고, never라는 값을 쓰면 항상 세미콜론을 생략한다. 이런 식으로 rules에다가 규칙을 설정하면 된다.
# .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {
semi: ['error', 'never'],
},
};만약 리액트 버전 17 이상을 쓰고 있다면 매번 import React from 'react';라는 코드를 쓸 필요가 없다. 그래서 이것과 관련된 코드를 eslint가 검사하지 않도록 react/jsx-runtime이라는 설정을 상속해 주어야 한다.(링크) 쉽게 말해 다른 eslintrc 파일을 현재 eslintrc 파일에서 불러와서 쓰는 거라고 생각하면 된다.
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
**'plugin:react/jsx-runtime',**
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {},
};그 밖에도 많은 사람들이 규칙을 하나하나 정의하기 보다는 다른 사람들이 만들어 놓은 규칙에 일부만 수정해서 사용하는 경우가 많다. 그 중에서도 가장 많이 사용하는 규칙 중 하나는 에어비앤비에서 만든 규칙들이다.
eslint-config-airbnb라는 패키지는 앞에서 살펴 본 plugin:react/jsw-runtime이랑 마찬가지로 미리 만들어 놓은 eslintrc 파일이다. 이 패키지를 설치한 다음 프로젝트에서 불러와서 사용할 수 있다. 패키지 공식 문서의 설명에 따라 eslint-config-airbnb 패키지를 설치하고, extends에 추가하면 된다.
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
**'airbnb',
'airbnb/hooks',**
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {},
};참고로 airbnb는 에어비앤비의 코딩 컨벤션을 eslint 규칙으로 만들어 둔 것이다. 그리고 airbnb/hooks는 리액트 훅을 사용하는 규칙을 정해놓은 것이다.
5. 팁1) Prettier와 ESLint 충돌없이 사용하기
포매터와 린터를 함께 쓰다보면 포매터와 린터의 규칙이 조금씩 달라서 충돌이 발생할 때가 있다. 이럴 때는 린터에서 포매터의 설정들을 포함하도록 설정해 주면 된다.
우선 eslint-config-prettier 패키지를 설치한다. 이 패키지는 ESLint의 규칙 중에서 Prettier와 충돌의 여지가 있는 규칙들을 꺼주는 역할을 한다.
npm install --save-dev eslint-config-prettier그리고 .eslintrc에 prettier을 추가하면 된다.
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'airbnb',
'airbnb/hooks',
**'prettier',**
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {},
};6. 팁2) TypeScript와 ESLint 사용하기
최신 버전에서는 ESLint 안에서 타입스크립트를 지원한다. 마찬가지로 공식 홈페이지 설명을 참고해 TypeScript와 관련된 패키지들을 설치하고, .eslintrc를 수정하면 된다.
7. 참고하면 좋은 자료
Stylelint
1. Stylelint
앞에서 살표 본 ESLint가 자바스크립트의 구문을 분석해 검사하는 도구라면, CSS를 위한 린터인 Stylelint도 있다.
참고로 일반적인 CSS 문법이 아니라, SCSS 같은 프리프로세서 문법이라던지 Styled-Components 같은 CSS-in-JS 라이브러리에서도 Stylelint를 위한 플러그인을 만들어서 제공하는 경우도 있으니 참고해 보면 좋을 것 같다.
npm: stylelint-config-standard-scss
styled-components: Tooling
Husky
1. Husky
앞에서 잠깐 소개했듯이, 깃 훅(Git Hooks) 기능을 쉽게 쓰도록 도와주는 NPM 패키지이다.
패키지를 설치하고 공식 문서의 설명처럼 prepare라는 NPM 스크립트로 husky install을 추가한 다음에 한 번 실행하면 된다. (참고로 여기서 첫 번째 줄은 package.json 파일에서 scripts 안에다가 prepare: "husky install"을 추가하는 명령어이다.)
npm pkg set scripts.prepare="husky install"
npm run prepare이제 pre-commit 훅을 추가해 본다. npm run lint 명령어를 추가해 본다.
npx husky add .husky/pre-commit "npm run lint"코드를 수정하고 커밋을 해 보면, npm run lint를 먼저 실행하고, 만약에 린트가 깨진다면 커밋이 생성되지 않는다. 이런 식으로 husky를 이용하면 깃 훅을 활용해 여러가지 명령어들을 실행해 볼 수 있다.
