프로젝트 초기 설정을 하려다 문득 생각해보니 저는 2년 전 아무것도 모르던 때에 기계처럼 따라 설정한 개발 환경을 여지껏 그대로 사용하고 있었습니다. 개발자라면 개발 환경과 프로젝트 초기 설정 모두 스스로 할 줄 알아야 하는데... 순간 부끄러움이 느껴져 이번 기회에 VS Code 설정부터 다시 해보기로 했습니다.
VSCode 설정
settings.json 기존 설정값 초기화 & 재설정 (Mac)
기존 설정값 초기화부터 진행해보겠습니다. 아래 경로로 진입해서 settings.json 파일을 지워줍니다.
$HOME/Library/Application\ Support/Code/User/
① VSCode 재실행
② ⌘ + p
③ > 입력
④ Preferences: Open User Settings(JSON) 선택
참고: Visual Studio Code | docs | User and Workspace Settings
npm init (package.json 생성)
Node.js 프로젝트를 위한 초기 설정 파일인 package.json을 생성해줍니다.
패키지(package)
패키지는 라이브러리와 비슷한 개념입니다. 라이브러리가 재사용 가능한 코드의 묶음이라면, 패키지는 코드와 함께 필요한 다른 리소스들까지 관리하고 배포하기 쉽게 만들어진 묶음입니다. 라이브러리는 특정 기능을 제공하는 함수, 클래스, 모듈 등으로 구성되고 개발자가 그 중 필요한 기능을 가져와 사용하며 패키지는 라이브러리, 모듈, 설정 파일 등으로 구성되고 프로그램이나 라이브러리 등을 설치, 관리, 배포하는 데에 사용됩니다. 굳이 포함관계를 따지자면 라이브러리⊂패키지 라고 할 수 있습니다.
npm(node package manager)
npm은 Node.js에서 표준으로 채택한 패키지 매니저입니다. Node.js는 자바스크립트 런타임 환경입니다.
"왜 자바스크립트 패키지 매니저가 아니라 노드 패키지 매니저지?"
저는 npm이 javascript package manager라는 의미의 jpm이 아닌 npm이라 이름 지은 이유가 궁금했습니다.
자바스크립트로 작성한 파일들로 구성된 프로그램은 패키지 형태로 존재합니다. 이러한 패키지 중 Node.js 환경에서 동작하는 패키지를 노드 패키지라고 합니다. 노드 패키지는 자바스크립트로 개발되었지만, 브라우저가 아닌 서버 측(Node.js 환경)에서 실행되는 것이 특징입니다. 노드 패키지는 Node.js의 기능과 모듈 시스템을 활용하여 만들어집니다. 그리고 노드 패키지는 노드 패키지 매니저를 통해 관리됩니다. 노드 패키지 매니저에는 npm, yarn, pnpm이 있습니다. 노드 패키지 매니저에 대해 좀 더 알고 싶다면 여기에 링크된 영상을 참고해보세요.
참고: 패키지 매니저란?
npm init
이제 npm init을 진행해보겠습니다.
npm init 명령어를 사용하면 수동으로 원하는 값을 커스텀하여 설정하여 생성할 수 있습니다.
하지만 커스텀으로 일일이 설정하는 과정을 건너 뛰고, 기본형으로 생성하고 싶다면 npm init -y (또는 --yes) 명령어를 사용하면 됩니다.
VS Code 익스텐션 설치
에러는 IDE에서 내주는 것이기 때문에, VS Code 익스텐션까지 설치해주어야 합니다.
ESLint 세팅
npm 초기화를 해주었으므로, ESLint 공식문서를 따라 린트 설정을 진행해보겠습니다.
↓ 추가 참고자료 🔍
우선, 세팅을 시작하기 전에 ESLint가 무엇인지부터 정리하고 가겠습니다.
ESLint란?
ESLint는 린터(Linter)입니다. 린터는 소스 코드를 분석하여 잠재적인 버그나 일반적인 오류, 스타일 가이드 위반 등의 사항을 실시간으로 찾아내 개발자에게 피드백해주는 도구입니다. 개발자는 이를 통해 향상된 품질의 코드를 작성할 수 있습니다.
ESLint 공식 페이지에서 Core Concepts 를 살펴보면, ESLint는 포매터(Formatter) 기능을 포함하고 있습니다. 이는 뒤에서 설정할 Prettier의 역할과 겹칩니다. 뒤에서 더 자세히 이야기하겠지만, ESLint에 포매터 역할이 내장되어 있음에도 Prettier를 같이 사용하는 이유는 '진료는 의사에게, 약은 약사에게'와 비슷한 이유입니다. ESLint는 '린터'로서 코드 품질 향상에 초점을 맞추고 그것을 위한 포매팅을 진행합니다. 하지만 Prettier는 '포매터'로서 시각적으로 보여지는 코드 스타일에 중점을 두고 포매팅합니다.
린트가 필요한 상황 예제 코드
console.log()
(function () {})()
// 나의 예상: 자바스크립트는 자동으로 세미콜론을 입력해주니까 아래와 같이 인식되겠지?
console.log();
(function () {})();그러나 실제 코드 진행 결과는 아래와 같습니다.
console.log()의 결과 undefined가 즉시 실행 함수 (function () {})()를 호출해서 위와 같은 에러가 뜹니다.
이처럼 예상한 방향과 다르게 진행될 코드에 대해 미리 '이 부분은 잘못됐으므로 수정해야 합니다!'라는 피드백을 받아야 합니다.
npm init @eslint/config
그럼, ESLint 설정을 이어가보도록 하겠습니다.
npm init @eslint/config가장 먼저 eslint 초기화를 진행해줍니다. 아래 영상에서와 같이 초기화와 동시에 원하는 config 값을 설정해주면, 패키지 설치 시 해당 값이 적용된 eslint config 파일(eslintrc 파일)이 함께 생성됩니다.(현시점 기준 최신 버전은 v8.55.0이지만, v9.0.0부터는 config system이 변경된다고 하니 버전이 업데이트 된 뒤에는 이 링크를 참고하세요.)
config 설정은 패키지화하여 npm에 공유할 수 있습니다. 이런 식으로 공유된 configuration 중 가장 대표적인 것이 Airbnb의 스타일 가이드입니다. 저는 이번 프로젝트에 에어비앤비의 스타일가이드를 적용해보기로 했습니다.
또한 config 파일의 형식은 JavaScript를 선택했습니다. config 파일 확장자로 자바스크립트를 선택하면 .eslintrc 파일에서 config 값을 동적으로 생성할 수 있다는 장점이 있습니다.
이제 이 .eslintrc.js(config 파일)에 생성되어 있는 객체 안에 속성값을 이용하여 eslint 설정 작업을 진행 해주면 됩니다.
.gitignore에 node_modules 추가
eslint configuration 작업을 진행하기 전 마지막 관문입니다.
// .gitignore
# 아래에 git 버전 관리에서 제외 시킬 디렉토리명, 파일명, 확장자명을 추가해줍니다.
node_modules
.gitignore은 커밋 시 제외시킬 파일, 디렉토리 등의 목록을 작성하는 파일입니다. 이 파일에 node_modules를 추가해 줄 것입니다. node_modules 디렉토리의 모듈들은 패키지 매니저를 이용해 다시 설치할 수 있을 뿐 아니라 git으로 버전 관리를 할 필요가 없는 것들입니다. 프로젝트에 필요한 모든 의존성 모듈이 설치되어 있기 때문에 용량까지 큰 node_modules는 .gitignore에 추가하여 커밋되지 않도록 설정해야 합니다.
ESLint Rules 세팅
Rules는 ESLint의 핵심 구성 요소로, 코드를 검사하는 규칙입니다.
rules 설정
1. .eslintrc.js를 열어 config 객체 안에 rules 속성을 추가하고 값으로 빈객체를 넣어둡니다.
2. 빈 객체를 rules 설정값으로 채워줍니다.
rules 설정값은 3단계의 경고 단계로 설정할 수 있습니다.
rules 세팅 - 경고값 설정
"off" 또는 0 : 경고 없음.
"warn" 또는 1 : 'warnig'. 코드 실행에 관여하진 않습니다.
"error" 또는 2: 'error'. 해당 부분이 수정되지 않은 경우 빌드 과정에서 프로그램을 중단시킬 수 있습니다.
rules 설정값은 ESLint에서 제공하는 built-in rules를 사용해도 되고 다른 사용자가 커스텀으로 만들어 공유한 plugin rules를 사용해도 되며, 필요한 경우 직접 만들어서 사용할 수도 있습니다. 앞선 예제 코드의 경우 아래와 같이 built-in rules의 no-unexpected-multiline을 이용하여 에러를 띄울 수 있습니다.
// .eslintrc.js
module.exports = {
rules: {
"no-unexpected-multiline": "error",
},
}npx eslint index.js
2:1 error Unexpected newline between function and ( of function call no-unexpected-multiline
✖ 1 problem (1 error, 0 warnings)
위처럼 rules를 manual로 custom하게 설정할 수도 있지만, 저는 초기화 단계에서 Airbnb에서 Publishing한 Shareable Config를 사용하여 eslintrc.js를 생성했으므로, rules 세팅값을 포함한 자세한 린트 설정값은 Airbnb의 ESLint configurations를 참고하면서 프로젝트를 진행하도록 하겠습니다.
↓ Airbnb's ESLint Configuration 관련 문서🔍
Prettier 세팅
이제 드디어 프리티어 설정을 할 차례입니다! 위에서 간단히 소개했지만, 프리티어가 무엇인지부터 정리하고 가도록 하겠습니다.
Prettier란?
Prettier는 코드 포매터(Code Formatter)입니다. 프리티어는 Linter와 달리 코드 품질을 높이기 위한 검사는 하지 않습니다. 프리티어는 오직 '코드의 포맷', 즉 들여쓰기, 공백, 따옴표 사용, 줄 바꿈 등 '보여지는 스타일'을 일관되게 정리하는 작업에만 관심을 둡니다. 선언되지 않은 변수를 사용했다거나, 잠재적인 버그 등에 대해서는 관심을 두지 않습니다. 다소 극단적인 예를 들자면, 프리티어에서 설정한 스타일(formatting) 규칙은 지키고 문법은 엉망인 코드를 작성했다 할지라도 프리티어에게는 문제가 없는 코드니다. 하지만 아직 의문이 남습니다. ESLint에 formatter 기능이 있는데 왜 그것을 사용하지 않고 Prettier를 사용해야 하나? 하는 것입니다. 그 이유는 코드 포매팅(code formatting) 작업에 있어서는 Prettier가 사용성이나 포매팅 품질 등 다양한 측면에서 ESLint에 내장된 Formatter보다 우위에 있기 때문입니다. ESLint는 코드 품질 향상이 목적인 프로그램인 만큼 Formatter 설정 시 코드의 품질 검사를 위한 설정값을 고려하여 세밀하게 조정해야 하기 때문에 설정이 복잡하고 어렵습니다. 반면 Prettier는 코드의 '포매팅 품질 향상'이 목적인 프로그램이기 때문에 비교적 간단한 설정을 통해 일관된 스타일로 포맷합니다. 또한 ESLint는 이름부터 자바스크립트 계열 언어에 특화된 프로그램임을 알 수 있습니다. 반면, Prettier는 다양한 언어를 지원합니다. 디발자보다 디자이너가 디자인 작업에 특화되어 있고 개자이너보다는 개발자가 개발에 특화되어 있듯이 ESLint와 Prettier가 Code Formatting에 특화되어 있다 볼 수 있습니다.
Prettier 설치
npm install --save-dev --save-exact prettier
VS Code의 Settings 메뉴로 들어가거나, Settings JSON 파일을 열어줍니다.
ESLint 설정 시 JSON파일을 사용한 방식으로 설정했으므로, 이번에는 Settings UI에서 설정해보도록 하겠습니다.
Default Formatter를 Prettier로 설정해줍니다.
코드를 저장할 때마다 프리티어의 코드 포맷팅이 적용되도록 하는 Format On Save 옵션을 활성화시켜줍니다.
ESLint와 Prettier 모두를 프로젝트에 적용하기(eslint-config-prettier 패키지)
이제 ESLint와 Prettier를 함께 사용하기 위한 설정을 해주도록 하겠습니다.
두 프로그램은 함께 사용하더라도 '구분해서 사용'하는 편이 좋습니다.
ESLint와 Prettier를 함께 사용하는 데에 많이 사용되는 패키지 리스트는 아래와 같습니다.
eslint-config-prettier : 불필요하거나 Prettier와 충돌할 수 있는 ESLint 규칙을 끕니다.
eslint-plugin-prettier : ESLint rule로 Prettier를 실행하고 차이점을 개별 ESLint 문제로 리포팅합니다.
→ Formatting 문제도 Lint 에러 로 감지되서 오류 메시지가 지나치게 많아지며 느립니다.
prettier-eslint : prettier를 실행하고 나서 eslint --fix를 실행합니다.
→ prettier를 단독으로 사용할 때보다 느립니다. (이 패키지의 메인테이너조차도 이 패키지를 더 이상 사용하지 않는다고 합니다.)
따라서 저는 eslint-config-prettier만 설치하도록 하겠습니다.
npm install --save-dev eslint-config-prettier
// .eslintrc.js
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
이로써 ESLint와 Prettier를 함께 사용하되, ESLint의 Formatter 대신 Prettier가 Formatter로 작동할 수 있게끔 설정을 마무리했습니다.
언어를 익혀가며 한 기록들✍🏻
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
