1.3 개발 환경 설정

필요한 도구 목록

JavaScript 개발에 필요한 도구들을 설치하겠습니다.

도구	역할	필수 여부
Node.js	JavaScript 런타임	필수
VS Code	코드 에디터	강력 권장
Git	버전 관리	권장
ESLint	코드 품질 검사	권장
Prettier	코드 포맷터	권장

---

Node.js 설치

nvm 사용 (권장)

nvm(Node Version Manager) 을 사용하면 여러 Node.js 버전을 관리할 수 있습니다.

macOS / Linux

# nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 터미널 재시작 후
nvm install 20        # LTS 버전 설치
nvm use 20           # 버전 활성화
nvm alias default 20  # 기본 버전 설정

# 확인
node --version  # v20.x.x
npm --version   # 10.x.x

Windows

# nvm-windows 설치: https://github.com/coreybutler/nvm-windows
# 설치 후

nvm install 20.11.0
nvm use 20.11.0

# 확인
node --version
npm --version

직접 설치 (대안)

https://nodejs.org에서 LTS 버전 다운로드 후 설치.

---

VS Code 설치 및 설정

설치

https://code.visualstudio.com에서 다운로드.

필수 확장 프로그램

VS Code 왼쪽 사이드바의 확장(Extensions) 탭에서 설치:

# 필수
- ESLint (Microsoft)
- Prettier - Code formatter (Prettier)

# 강력 권장
- JavaScript (ES6) code snippets
- Path Intellisense
- GitLens

# 테마/아이콘 (선택)
- One Dark Pro
- Material Icon Theme

VS Code 설정 (settings.json)

Ctrl+Shift+P → "Open User Settings (JSON)" 입력:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["javascript", "typescript"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

---

첫 번째 프로젝트 생성

# 프로젝트 폴더 생성
mkdir my-js-project
cd my-js-project

# npm 초기화
npm init -y

# 생성된 package.json 확인
cat package.json

{
  "name": "my-js-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "test": "node --test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

"type": "module" 을 추가하면 .js 파일에서 ES 모듈(import/export) 문법을 사용할 수 있습니다.

---

ESLint 설정

ESLint는 코드의 문제를 미리 발견해주는 정적 분석 도구 입니다.

설치 및 초기화

npm install --save-dev eslint @eslint/js

# eslint.config.js 수동 생성 (Flat Config 방식, ESLint v9+)

eslint.config.js (Flat Config)

import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2024,
      sourceType: 'module',
      globals: {
        console: 'readonly',
        process: 'readonly',
        setTimeout: 'readonly',
        clearTimeout: 'readonly',
        setInterval: 'readonly',
        clearInterval: 'readonly',
      },
    },
    rules: {
      // 오류 (빨간 밑줄)
      'no-unused-vars': 'error',
      'no-undef': 'error',
      'no-console': 'warn',

      // 경고 (노란 밑줄)
      'prefer-const': 'warn',
      'no-var': 'warn',

      // 코드 스타일
      'eqeqeq': ['error', 'always'], // === 강제
      'curly': 'error',              // 중괄호 필수
    },
  },
];

ESLint 실행

# 파일 검사
npx eslint index.js

# 자동 수정 가능한 오류 수정
npx eslint --fix index.js

# 전체 프로젝트 검사
npx eslint .

---

Prettier 설정

Prettier는 코드 포맷을 자동으로 맞춰주는 코드 포맷터 입니다.

설치

npm install --save-dev prettier

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid"
}

.prettierignore

node_modules
dist
build
.next

Prettier 실행

# 파일 포맷 확인 (변경 없음)
npx prettier --check .

# 파일 포맷 적용
npx prettier --write .

# 특정 파일만
npx prettier --write src/index.js

---

ESLint + Prettier 통합

ESLint와 Prettier를 함께 사용할 때 충돌을 방지하는 설정:

npm install --save-dev eslint-config-prettier

// eslint.config.js 업데이트
import js from '@eslint/js';
import prettierConfig from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  prettierConfig, // Prettier와 충돌하는 ESLint 규칙 비활성화
  {
    // ... 나머지 설정
  },
];

---

package.json 스크립트 설정

{
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js",
    "test": "node --test",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

# 개발 모드 (파일 변경 시 자동 재시작, Node.js 18.11+)
npm run dev

# 린트 검사
npm run lint

# 포맷 적용
npm run format

---

Chrome DevTools 활용

콘솔(Console) 탭

// 다양한 console 메서드
console.log('일반 로그');
console.info('정보');
console.warn('경고');
console.error('오류');

// 객체/배열을 테이블로 표시
const users = [
  { name: '김철수', age: 25 },
  { name: '이영희', age: 30 },
];
console.table(users);

// 시간 측정
console.time('배열 정렬');
[3, 1, 4, 1, 5, 9, 2, 6].sort();
console.timeEnd('배열 정렬');

// 그룹화
console.group('사용자 정보');
console.log('이름: 김철수');
console.log('나이: 25');
console.groupEnd();

// 조건부 출력
console.assert(1 === 2, '1과 2는 다릅니다'); // 거짓일 때만 출력

Sources 탭 (디버거)

VS Code에서 .vscode/launch.json 설정:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "현재 파일 실행",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome 디버거",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

브라우저 콘솔에서 직접 실행

개발자 도구 콘솔(F12 → Console)에서 JavaScript를 즉시 실행할 수 있습니다:

// 현재 페이지의 모든 링크 가져오기
const links = [...document.querySelectorAll('a')].map(a => a.href);
console.table(links);

// 특정 CSS 변경
document.body.style.backgroundColor = 'lightblue';

// JSON 예쁘게 출력
const data = { name: '테스트', values: [1, 2, 3] };
console.log(JSON.stringify(data, null, 2));

---

고수 팁

Node.js --watch 모드

Node.js 18.11+ 에서는 별도 패키지 없이 파일 변경 감지가 가능합니다:

node --watch index.js

예전에는 nodemon을 사용했지만, 이제 내장 기능으로 대체 가능합니다.

.editorconfig로 에디터 설정 공유

팀 개발 시 에디터 설정을 공유하려면 .editorconfig 파일을 사용합니다:

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

유용한 VS Code 단축키 (JavaScript 개발)

단축키	기능
F12	정의로 이동
Alt+F12	정의 미리보기
Shift+F12	참조 찾기
F2	이름 변경 (리팩터링)
Ctrl+.	빠른 수정 (Quick Fix)
Ctrl+Shift+P	명령 팔레트
Ctrl+`	통합 터미널 열기
Ctrl+/	줄 주석 토글