자바스크립트 코드 스타일 가이드 (Prettier, ESLint 활용)

안녕하세요! 여러분, 자바스크립트 개발하면서 코드 스타일 때문에 고민 많으셨죠? 저도 그랬어요. 협업할 때 다른 사람의 코드 스타일이 너무 달라서 읽기 힘들었던 적도 많았고요. 그래서 오늘은 여러분의 고민을 덜어드릴 비법을 공유하려고 해요. 바로 자바스크립트 코드 스타일 가이드인데요, 마법처럼 코드를 정리해주는 Prettier 설정 및 사용법부터 똑똑한 코드 분석기 ESLint 규칙 설정 및 활용까지! 그리고 둘을 같이 사용하는 방법과 실제 프로젝트에 적용하는 예시까지 모두 준비했어요. 자, 이제 깔끔하고 효율적인 코드 작성의 세계로 함께 떠나볼까요?

Prettier 설정 및 사용법

자, 이제 본격적으로 Prettier 설정 및 사용법에 대해 알아볼까요? Prettier는 마치 마법사처럼 우리의 코드를 정돈해주는 고마운 친구예요! ✨ 복잡하고 지저분한 코드를 깔끔하고 일관된 스타일로 바꿔주니 얼마나 편한지 몰라요~ 게다가 설정도 엄청 간단해서 누구든 쉽게 사용할 수 있답니다! 😄

Prettier 설치

설치부터 시작해 볼게요. npm이나 yarn을 사용해서 간단하게 설치할 수 있어요. 프로젝트 루트에서 npm install --save-dev prettier 또는 yarn add --dev prettier를 입력하면 끝! 참 쉽죠? 😉

Prettier 설정

설치가 완료되었다면 이제 설정 파일을 만들어야 해요. 프로젝트 루트에 .prettierrc 파일을 만들고 원하는 설정을 추가하면 되는데요. 예를 들어, 탭 대신 스페이스를 사용하고 싶다면 "useTabs": false, 스페이스는 2칸으로 하고 싶다면 "tabWidth": 2와 같이 설정할 수 있어요. 세미콜론을 자동으로 추가하고 싶다면 "semi": true로 설정하면 되고요! 이 외에도 다양한 옵션들이 있으니 공식 문서를 참고해서 본인의 취향에 맞게 설정해 보세요! (참고: https://prettier.io/docs/en/options.html) 😜

Prettier 사용 예시

자, 이제 간단한 예시를 통해 Prettier의 놀라운 변신 마법을 직접 경험해 볼까요? 🤔 들여쓰기가 엉망이고, 따옴표도 제각각인 보기 싫은 코드가 있다고 가정해 봅시다. Prettier를 적용하면? 짜잔! ✨ 마치 마법처럼 깔끔하고 아름다운 코드로 변신! 😍 들여쓰기는 정확하게! 따옴표도 통일되어서 가독성이 훨씬 좋아졌어요! 👍

Prettier 지원 언어

Prettier는 JavaScript뿐만 아니라 다양한 언어를 지원한답니다. HTML, CSS, JSON, Markdown 등등! 거의 모든 프론트엔드 언어를 지원한다고 봐도 무방해요! 덕분에 프로젝트 전체의 코드 스타일을 일관되게 유지할 수 있어 협업 시에도 매우 유용해요. 팀원들과 같은 설정을 사용하면 코드 스타일 때문에 생기는 불필요한 충돌을 줄일 수 있겠죠? 😊

Prettier CLI 사용

Prettier는 CLI(Command Line Interface)를 통해서도 사용할 수 있어요. npx prettier --write . 명령어를 실행하면 현재 디렉토리와 하위 디렉토리에 있는 모든 파일에 Prettier를 적용해서 코드 스타일을 자동으로 수정해 줘요. 정말 편리하죠?! 😄 특정 파일이나 폴더만 지정해서 적용할 수도 있고요!

코드 에디터 연동

VS Code, Atom, Sublime Text 등 다양한 코드 에디터에서도 Prettier를 확장 프로그램으로 설치해서 사용할 수 있어요. 확장 프로그램을 설치하면 파일을 저장할 때마다 자동으로 Prettier가 적용되어서 실시간으로 코드 스타일을 관리할 수 있다는 장점이 있어요! 개발 속도도 향상되고, 코드 품질도 높일 수 있으니 일석이조! 😉

Prettier의 장점

Prettier는 단순히 코드를 예쁘게 만들어주는 도구가 아니에요. 일관된 코드 스타일을 유지함으로써 코드의 가독성과 유지보수성을 향상시켜주는 강력한 도구랍니다. 개발 생산성을 높이고 싶다면 Prettier를 꼭 사용해 보세요! 강력 추천합니다! 👍👍

Prettier 설정 옵션

Prettier의 설정 옵션은 정말 다양해요. 들여쓰기 스타일, 따옴표 종류, 줄 바꿈 방식 등 세세한 부분까지 설정할 수 있죠. 처음에는 기본 설정으로 사용하다가, 필요에 따라 옵션을 조정해 나가면 돼요. 공식 문서에 모든 옵션이 자세하게 설명되어 있으니 참고하면 좋을 거예요! (참고: https://prettier.io/docs/en/options.html)

코드 리뷰 시간 단축

Prettier를 사용하면 코드 리뷰 시간도 단축할 수 있어요. 코드 스타일이 자동으로 통일되기 때문에 코드 리뷰어는 코드의 로직과 기능에 집중할 수 있게 되죠. 결과적으로 개발팀 전체의 효율성을 높이는 데 기여한답니다. 정말 놀랍지 않나요?! 🤩

결론

자, 이제 여러분도 Prettier의 매력에 푹 빠지셨나요? Prettier는 마치 든든한 지원군처럼 우리의 개발 생활을 더욱 편리하고 효율적으로 만들어준답니다! 망설이지 말고 지금 바로 Prettier를 사용해 보세요! 후회하지 않으실 거예요! 😉

다음 내용

자, 그럼 다음에는 ESLint 규칙 설정 및 활용에 대해 알아볼게요! 기대해 주세요! 😉

ESLint 규칙 설정 및 활용

자, 이제 본격적으로 ESLint 규칙 설정하는 방법에 대해 같이 알아볼까요? Prettier가 코드 스타일을 자동으로 맞춰주는 데 집중했다면, ESLint는 코드 품질과 관련된 부분을 담당해요. 코드의 안정성, 가독성, 유지보수성을 높여주는 아주 중요한 녀석이죠! 단순히 스타일만 맞추는 것을 넘어서 잠재적인 버그를 미리 찾아내는 데에도 도움을 준답니다?! 대단하죠?

ESLint는 규칙 기반으로 작동하는데요, 이 규칙들을 직접 설정할 수 있어서 프로젝트의 특성에 맞게 자유롭게 커스터마이징할 수 있다는 장점이 있어요. 생각보다 엄청 유연한 친구랍니다.

ESLint 규칙 설정 방법

자, 그럼 ESLint 규칙을 설정하는 방법을 몇 가지 소개해 드릴게요.

1. `.eslintrc` 파일 설정

ESLint 규칙은 .eslintrc.{js, yml, json} 파일(또는 package.json 내부의 eslintConfig 필드)에 정의할 수 있어요. 파일 확장자에 따라 JSON, YAML, JavaScript 형식으로 규칙을 작성할 수 있죠. 각자 편한 형식을 선택하면 된답니다! 예를 들어, .eslintrc.js 파일을 사용한다면 다음처럼 설정할 수 있겠죠?

module.exports = {
  "env": {
    "browser": true, // 브라우저 환경에서 사용되는 전역 변수 허용
    "es2021": true  // ES2021 문법 허용
  },
  "extends": [
    "eslint:recommended", // ESLint 추천 규칙 활성화
    "airbnb-base"       // Airbnb 스타일 가이드 규칙 활성화 (설치 필요!)
  ],
  "parserOptions": {
    "ecmaVersion": 12, // 사용할 ECMAScript 버전 지정
    "sourceType": "module" // 모듈 시스템 사용
  },
  "rules": {
    "no-console": "warn", // 콘솔 사용 경고 (에러 아님!)
    "indent": ["error", 2], // 들여쓰기 2칸, 어길 시 에러 발생!
    "quotes": ["error", "single"] // 작은따옴표 사용, 어길 시 에러 발생!
  }
};

여기서 "extends" 부분을 눈여겨보세요! eslint:recommended는 ESLint에서 기본적으로 추천하는 규칙 세트이고, airbnb-base는 널리 사용되는 Airbnb JavaScript 스타일 가이드를 적용한 거예요. 이렇게 잘 만들어진 규칙 세트를 활용하면 규칙 설정 시간을 획기적으로 줄일 수 있답니다! 물론, 필요에 따라 추가하거나 수정할 수도 있고요. "rules" 부분에서는 프로젝트에 필요한 특정 규칙을 추가하거나 기존 규칙의 설정을 변경할 수 있어요. 예를 들어, "no-console": "warn"은 콘솔 사용 시 경고를 표시하고, "indent": ["error", 2]는 들여쓰기를 2칸으로 강제하며, 어길 시 에러를 발생시키죠.

2. `package.json` 활용

.eslintrc 파일 대신 package.json 파일 내부에 eslintConfig 필드를 추가하여 ESLint 규칙을 설정할 수도 있어요. 프로젝트 설정 파일을 하나로 관리하고 싶다면 이 방법도 괜찮겠죠?

{
  "name": "my-project",
  "version": "1.0.0",
  "eslintConfig": {
    // ESLint 규칙 설정 내용
  }
}

3. 주석을 이용한 인라인 설정

특정 코드 블록에만 적용되는 ESLint 규칙을 설정하고 싶다면 주석을 이용할 수도 있어요! 아래 예시처럼요!

/* eslint-disable no-console */
console.log("이 부분에서는 콘솔 사용에 대한 규칙이 적용되지 않아요!");
/* eslint-enable no-console */

4. 플러그인 활용

ESLint의 기능을 확장하고 싶다면 플러그인을 사용하세요. eslint-plugin-react, eslint-plugin-import와 같이 유용한 플러그인이 많이 있답니다. 플러그인을 사용하면 React, import/export 등 특정 라이브러리나 기능에 대한 규칙을 쉽게 적용할 수 있어요. 정말 편리하죠?! 설치 후 .eslintrc 파일의 plugins와 extends 부분에 추가하면 된답니다.

// .eslintrc.js
module.exports = {
  // ...
  "plugins": ["react"],
  "extends": [
    // ...
    "plugin:react/recommended"
  ],
  // ...
};

ESLint 규칙을 설정하는 방법은 정말 다양하죠? 프로젝트의 규모와 특성에 맞는 방법을 선택해서 사용하면 돼요! 처음에는 어려워 보일 수 있지만, 익숙해지면 정말 강력한 도구가 될 거예요. 꾸준히 사용하다 보면 코드 품질 향상에 큰 도움이 될 뿐만 아니라, 좋은 개발 습관을 기르는 데에도 도움이 된답니다! ESLint와 함께 더 나은 개발자가 되어 보아요!

Prettier와 ESLint 통합하기

휴~! 드디어 Prettier 설정하고 ESLint 규칙도 만들었으니 이제 둘을 합쳐볼까요? 각각 따로 쓰면 좋긴 한데, 뭔가 좀… 번거롭잖아요? 😅 마치 찰떡궁합인 땅콩버터와 젤리를 따로 먹는 느낌이랄까?! 그래서! 이 둘을 같이 써서 시너지를 내는 방법을 알려드리려고 해요! 😎

자, 생각해 보세요. Prettier는 코드를 예쁘게 만들어주고, ESLint는 코드 품질을 높여주죠. 둘 다 좋은 도구인데, 따로 설정하고 실행하면 시간도 오래 걸리고 귀찮기도 하잖아요? 😫 게다가 설정이 충돌하면?! 으악! 생각만 해도 머리가 아프네요.🤯 그래서 Prettier와 ESLint를 통합하면 이런 문제들을 한 방에 해결할 수 있어요! ✨ 마치 슈퍼히어로가 나타나 악당을 물리치는 것처럼 말이죠! 🦸‍♀️🦸‍♂️

`eslint-config-prettier` 패키지 설치

통합하는 방법은 생각보다 간단해요! 먼저, eslint-config-prettier 패키지를 설치해야 합니다. 이 패키지는 ESLint와 Prettier의 설정 충돌을 방지해주는 역할을 해요. 마치 두 히어로의 힘을 하나로 합쳐주는 마법의 물약 같은 거죠!🔮 npm이나 yarn을 사용해서 설치할 수 있어요.

npm install --save-dev eslint-config-prettier
# 또는
yarn add -D eslint-config-prettier

설치가 완료되면 .eslintrc.js (또는 .eslintrc.json, .eslintrc 등) 파일을 열고 extends 배열에 "prettier"를 추가해 주세요. 이렇게 하면 Prettier와 충돌할 수 있는 ESLint 규칙들을 비활성화해 줍니다. 순서는 중요해요! "prettier"는 배열의 마지막에 위치해야 합니다. 마치 케이크 위에 얹는 체리처럼 말이죠! 🍒 아래 예시를 참고해 보세요.

module.exports = {
  extends: [
    'eslint:recommended', // 다른 ESLint 설정들...
    'plugin:react/recommended', // 만약 React를 사용한다면...
    'prettier' // 짜잔! Prettier를 추가했어요!
  ],
  // ...다른 ESLint 설정들
};

`eslint-plugin-prettier` 패키지 설치

자, 이제 거의 다 왔어요! 마지막으로 eslint-plugin-prettier 패키지를 설치해 볼까요? 이 패키지는 Prettier를 ESLint 규칙처럼 사용할 수 있게 해줍니다. 즉, ESLint를 실행하면 Prettier 포맷팅까지 자동으로 적용되는 거죠! 완전 편리하죠?! 🤩

npm install --save-dev eslint-plugin-prettier
# 또는
yarn add -D eslint-plugin-prettier

설치 후, .eslintrc.js 파일의 plugins 배열에 prettier를 추가하고, rules 객체에 "prettier/prettier": "error"를 추가해 주세요. 이렇게 하면 Prettier가 ESLint의 규칙으로 작동하게 됩니다. 코드를 저장할 때마다 Prettier 포맷팅이 자동으로 적용되어서 코드 스타일을 일관되게 유지할 수 있어요! 👍

module.exports = {
  // ...(이전 설정)
  plugins: ['prettier'], // Prettier 플러그인 추가!
  rules: {
    'prettier/prettier': 'error', // Prettier 규칙을 error 레벨로 설정!
    // ...다른 ESLint 규칙들
  }
};

"prettier/prettier" 규칙을 "warn"으로 설정하면 Prettier 포맷팅 오류가 경고로 표시되고, "error"로 설정하면 오류로 표시됩니다. 프로젝트의 상황에 맞게 설정해 주세요. 🤔 개인적으로는 "error"로 설정해서 강제로 포맷팅을 적용하는 것을 추천해요! 💪 그래야 코드 스타일이 엉망이 되는 것을 막을 수 있거든요! 🙅‍♀️🙅‍♂️

이제 모든 설정이 완료되었어요! 🎉 축하합니다! 🥳 이제 Prettier와 ESLint가 환상의 콤비를 이루어 여러분의 코드를 아름답고 깔끔하게 만들어줄 거예요! ✨ 마치 숙련된 정원사가 정원을 가꾸듯이 말이죠! 🌳🌷🌹 코드를 작성하고 저장할 때마다 자동으로 포맷팅이 적용되는 마법을 경험해 보세요! ✨ 개발 생산성이 쑥쑥 올라갈 거예요! 🚀

Prettier와 ESLint를 통합하면 코드 스타일을 일관되게 유지하고 코드 품질을 향상시킬 수 있을 뿐만 아니라 개발 시간도 단축할 수 있어요. 1석 3조의 효과라고 할 수 있죠! 😉 이제 더 이상 코드 스타일 때문에 고민하지 마세요! Prettier와 ESLint가 여러분의 든든한 지원군이 되어줄 거예요! 🤗 다음에는 실제 프로젝트에 적용하는 방법을 알아볼게요! 기대해 주세요! 😉

실제 프로젝트 적용 사례

자, 이제 드디어! Prettier와 ESLint를 실제 프로젝트에 적용해 볼 시간이에요! 두근두근?! 이론만으론 감이 잘 안 잡히셨을 수도 있으니, 실제 상황에서 어떻게 활용되는지 꼼꼼히 살펴보도록 할게요~?

1. React 기반의 프론트엔드 프로젝트 (feat. 대규모 코드베이스)

React 기반의 대규모 프론트엔드 프로젝트(대략 10만 줄 이상의 코드…!)를 상상해 보세요! 개발자만 10명이 넘는다고 가정해 볼까요? 각자의 코딩 스타일이 다르면… 코드의 가독성은 물론이고, 유지보수에도 엄청난! 시간이 소요되겠죠? 😱 이럴 때 Prettier와 ESLint의 조합은 정말 빛을 발한답니다! ✨

Prettier 설정: 프로젝트 루트에 .prettierrc 파일을 생성하고, singleQuote: true, semi: true, trailingComma: 'all' 등의 옵션을 설정해 일관된 코드 스타일을 적용했어요. 이렇게 하니, 누가 작성한 코드든 마치 한 사람이 작성한 것처럼 깔끔하게 정리되었답니다! 👍
ESLint 설정: .eslintrc.js 파일을 생성하고, Airbnb 스타일 가이드를 기반으로 규칙을 설정했어요. (Airbnb 스타일 가이드는 워낙 유명하니까요!😉) 그리고 프로젝트 특성에 맞춰 몇 가지 규칙은 수정했죠. 예를 들어, jsx-a11y/label-has-associated-control 규칙은 접근성을 높이기 위해 필수적으로 적용했답니다. 개발자 각자의 스타일보다는 프로젝트 전체의 퀄리티가 중요하니까요!
Prettier와 ESLint 통합: eslint-config-prettier와 eslint-plugin-prettier를 사용해 Prettier와 ESLint를 통합했어요. 이를 통해 코드 스타일과 관련된 충돌을 방지하고, 개발 워크플로우를 효율적으로 관리할 수 있었죠. 린트 에러 수정과 코드 포맷팅을 한 번에 처리할 수 있으니, 얼마나 편한지 몰라요! 😍
결과: 코드 스타일이 통일되니 코드 리뷰 시간이 무려 30%나 단축되었어요! (시간은 금이니까요!💰) 게다가 버그 발생률도 눈에 띄게 감소했답니다. 역시 도구를 잘 활용하는 것이 중요하다는 걸 다시 한번 느꼈어요. 😄

2. Node.js 기반의 백엔드 프로젝트 (feat. API 서버)

이번엔 Node.js 기반의 API 서버 개발 프로젝트를 예로 들어볼게요! API 서버는 데이터 처리와 로직이 복잡하기 때문에 코드의 가독성이 정말 중요해요. 안 그러면 나중에 유지보수하다가 머리털 다 빠져요…😭 (경험담…!)

Prettier 설정: 프론트엔드 프로젝트와 마찬가지로 .prettierrc 파일을 생성하고, 일관된 코드 스타일을 적용했어요. 특히, printWidth 옵션을 120으로 설정하여 긴 코드 라인을 효과적으로 관리했죠. 화면을 좌우로 스크롤 하지 않아도 되니, 얼마나 편한지 몰라요! 😎
ESLint 설정: .eslintrc.js 파일에서 eslint-plugin-node를 사용하여 Node.js 환경에 특화된 규칙을 적용했어요. 예를 들어, no-console 규칙을 적용하여 console.log를 제거하고, no-process-exit 규칙을 적용하여 process.exit() 사용을 제한했죠. (보안과 안정성을 위해서라면 필수!)
Husky & Lint-staged 활용: 코드 커밋 전에 자동으로 Prettier와 ESLint를 실행하도록 Husky와 Lint-staged를 설정했어요. 덕분에 코드 품질을 일관되게 유지할 수 있었죠. 자동화는 사랑입니다! 💖
결과: 개발 초기 단계부터 코드 품질을 관리하니, 나중에 발생할 수 있는 문제들을 미리 예방할 수 있었어요. 또한, 팀원 간의 코드 스타일 충돌도 줄어들어 협업 효율이 크게 향상되었죠. 역시, 미리미리 준비하는 것이 중요해요! 💯

3. 오픈 소스 프로젝트 (feat. 다양한 협업)

오픈 소스 프로젝트는 다양한 배경을 가진 개발자들이 참여하기 때문에 코드 스타일이 제각각일 가능성이 높아요. 이럴 때 Prettier와 ESLint는 필수죠! ✨ 저는 최근 참여한 오픈 소스 프로젝트에서 Prettier와 ESLint를 적용하여 코드 스타일을 통일하고, 프로젝트의 품질을 높이는 데 기여했답니다! 😊

자, 이렇게 세 가지 실제 프로젝트 사례를 통해 Prettier와 ESLint의 활용법을 살펴보았는데요, 어떠셨나요? 이제 여러분도 Prettier와 ESLint를 적극 활용하여 깔끔하고 효율적인 개발 환경을 구축해 보세요! 💪 프로젝트 규모나 종류에 상관없이, Prettier와 ESLint는 여러분의 개발 생산성을 향상시켜줄 최고의 도구가 될 거예요! 😉 다음 포스팅에서는 더욱 유용한 개발 팁을 가지고 돌아오겠습니다! 기대해 주세요~! 🤗

자, 이렇게 Prettier와 ESLint를 활용해서 깔끔하고 효율적인 자바스크립트 코드를 작성하는 방법을 알아봤어요! 어때요, 생각보다 어렵지 않았죠? 처음엔 설정하는 게 조금 번거로울 수 있지만, 익숙해지면 정말 편리하답니다. 마치 마법처럼 코드가 자동으로 정돈되는 걸 보면 쾌감까지 느껴질 거예요. 깨끗한 코드는 읽기도 좋고, 유지보수도 훨씬 수월해져서 개발 시간도 단축되고 협업도 더욱 원활하게 만들어준답니다. 이제 여러분의 프로젝트에도 적용해서 깔끔한 코드의 세계를 경험해보세요! 앞으로 더 즐겁게 코딩할 수 있을 거예요.