본문으로 건너뛰기
Advertisement

1.3 개발 환경 설정

필요한 도구 목록​

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

도구역할필수 여부
Node.jsJavaScript 런타임필수
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+/줄 주석 토글
Advertisement
Advertisement