좋은 도구가 절반의 성공

요리를 하려면 좋은 칼과 도마가 필요하듯이, 코딩을 하려면 좋은 개발 도구가 필요합니다. 처음 시작할 때 어떤 도구를 사용해야 할지 막막하셨나요? 이 글에서는 제가 실제로 사용하고 있는 개발 환경을 처음부터 끝까지 설정하는 방법을 알려드리겠습니다.

"처음에 환경 설정을 제대로 해두면, 나중에 수백 시간을 절약할 수 있습니다."

1. 코드 에디터: Visual Studio Code

왜 VS Code인가?

시중에는 여러 코드 에디터가 있지만, VS Code를 추천하는 이유는:

• 완전 무료: 개인, 상업적 사용 모두 무료입니다
• 가볍고 빠름: 복잡한 프로젝트도 빠르게 열립니다
• 확장성: 필요한 기능을 확장 프로그램으로 추가 가능
• 커뮤니티: 전 세계 개발자들이 사용하여 자료가 풍부
• 통합 터미널: 에디터 안에서 명령어 실행 가능

설치 방법

1. code.visualstudio.com 접속
2. 운영체제에 맞는 버전 다운로드 (Windows/Mac/Linux)
3. 설치 파일 실행
4. 설치 옵션 중 "Add to PATH" 체크 (중요!)
5. 설치 완료

첫 실행 시 설정

// File > Preferences > Settings (Ctrl+,)에서 설정

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "editor.minimap.enabled": true
}

각 설정의 의미:

• fontSize: 글자 크기 (눈이 편한 크기로 조정)
• tabSize: 탭 공백 크기 (2칸 또는 4칸)
• wordWrap: 긴 줄 자동 줄바꿈
• formatOnSave: 저장 시 자동 정렬
• autoSave: 자동 저장 (실수로 잃어버리는 것 방지)

2. 필수 확장 프로그램

VS Code의 진짜 힘은 확장 프로그램에 있습니다. 왼쪽 사이드바의 Extensions 아이콘을 클릭하거나 Ctrl+Shift+X를 눌러 설치할 수 있습니다.

1) Live Server

HTML 파일을 저장하면 브라우저가 자동으로 새로고침됩니다. 매번 F5를 누를 필요가 없어집니다!

사용법:

1. HTML 파일을 연 상태에서 우클릭
2. "Open with Live Server" 클릭
3. 브라우저가 자동으로 열립니다
4. 코드를 수정하면 즉시 반영됩니다

2) Prettier - Code Formatter

코드를 자동으로 예쁘게 정렬해줍니다. 들여쓰기, 괄호 위치 등을 일관되게 맞춰줍니다.

// 정렬 전
function test(){const x=1;if(x===1){console.log("hello");}}

// Prettier 적용 후 (Shift+Alt+F)
function test() {
  const x = 1;
  if (x === 1) {
    console.log("hello");
  }
}

3) Auto Rename Tag

HTML 태그의 시작 태그를 수정하면 끝 태그도 자동으로 변경됩니다.

<div>Hello</div>
👇 div를 section으로 변경하면
<section>Hello</section> ← 자동으로 변경!

4) Path Intellisense

파일 경로를 입력할 때 자동완성을 제공합니다.

<script src="./ ← 여기서 Ctrl+Space를 누르면 파일 목록이 나타남

5) Bracket Pair Colorizer 2

괄호를 색으로 구분해줘서 어디서 시작하고 끝나는지 한눈에 알 수 있습니다.

6) ES7+ React/Redux/React-Native snippets

JavaScript 코드 자동완성을 제공합니다. 예를 들어 clg만 입력하면 console.log()가 자동완성됩니다.

3. 브라우저: Chrome과 개발자 도구

Chrome을 사용하는 이유

• 가장 강력한 개발자 도구
• 풍부한 확장 프로그램
• 대부분의 사용자가 사용하는 브라우저
• 최신 웹 표준 지원

개발자 도구 열기

세 가지 방법이 있습니다:

• F12 키
• Ctrl+Shift+I (Windows/Linux)
• Cmd+Option+I (Mac)
• 우클릭 > "검사" 클릭

개발자 도구 주요 탭

Elements 탭

HTML 구조를 실시간으로 볼 수 있습니다. 요소를 선택하면 적용된 CSS도 볼 수 있습니다.

활용 팁:

• 왼쪽 위 화살표 아이콘 클릭 후 페이지 요소 클릭 → 해당 HTML 찾기
• CSS를 직접 수정해서 테스트 가능 (실제 파일은 변경 안 됨)
• 색상, 크기 등을 실험해보고 마음에 들면 코드에 반영

Console 탭

JavaScript 코드를 실행하고 에러를 확인할 수 있습니다. 개발자의 베스트 프렌드입니다!

// 콘솔에서 직접 JavaScript 실행
console.log("Hello, World!");
2 + 2
document.querySelector('h1').style.color = 'red';

Network 탭

페이지가 어떤 파일들을 불러오는지 확인할 수 있습니다. 나중에 성능 최적화할 때 유용합니다.

4. Git 설치

Git은 코드의 버전을 관리하는 도구입니다. 처음에는 필요성을 못 느낄 수 있지만, 나중에 꼭 필요해집니다.

설치 방법

Windows:

1. git-scm.com 접속
2. Download 클릭
3. 설치 파일 실행
4. 기본 옵션으로 계속 Next
5. 설치 완료

Mac:

# Homebrew가 설치되어 있다면
brew install git

# 또는 터미널에서
git --version
# 설치되지 않았다면 설치 안내가 나타남

Git 초기 설정

# 사용자 정보 설정 (커밋할 때 표시됨)
git config --global user.name "당신의 이름"
git config --global user.email "당신의 이메일"

# 설정 확인
git config --list

5. Node.js 설치

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 환경입니다. 또한 npm이라는 패키지 관리자가 함께 설치됩니다.

설치 방법

1. nodejs.org 접속
2. LTS 버전 다운로드 (안정적인 버전)
3. 설치 파일 실행
4. 기본 옵션으로 설치

설치 확인

# 터미널(명령 프롬프트)에서 실행
node --version
# v18.x.x 같은 버전 번호가 나오면 성공

npm --version
# npm 버전도 확인

6. 유용한 터미널 명령어

개발하다 보면 터미널(명령 프롬프트)을 자주 사용하게 됩니다. 꼭 알아야 할 기본 명령어들입니다.

디렉토리 이동

# 현재 위치 확인
pwd           # Mac/Linux
cd            # Windows

# 폴더로 이동
cd 폴더이름

# 상위 폴더로 이동
cd ..

# 홈 디렉토리로 이동
cd ~          # Mac/Linux
cd %USERPROFILE%  # Windows

파일/폴더 관리

# 현재 폴더의 내용 보기
ls            # Mac/Linux
dir           # Windows

# 폴더 생성
mkdir 폴더이름

# 파일 생성
touch 파일이름.txt    # Mac/Linux
type nul > 파일이름.txt  # Windows

# 파일 삭제
rm 파일이름       # Mac/Linux
del 파일이름      # Windows

로컬 서버 실행

# Python이 설치되어 있다면
python -m http.server 8000

# Node.js가 설치되어 있다면
npx http-server -p 8000

# 그 다음 브라우저에서
http://localhost:8000

7. VS Code 단축키 (생산성 200% 향상)

마우스 대신 단축키를 사용하면 코딩 속도가 엄청나게 빨라집니다.

필수 단축키

• Ctrl+S: 저장 (맥: Cmd+S)
• Ctrl+/: 주석 토글
• Ctrl+D: 같은 단어 선택
• Alt+↑/↓: 줄 이동
• Shift+Alt+↑/↓: 줄 복사
• Ctrl+P: 파일 빠른 열기
• Ctrl+Shift+P: 명령 팔레트
• Ctrl+B: 사이드바 토글
• Ctrl+`: 터미널 토글

멀티 커서 (신세계)

// Alt+클릭으로 여러 커서 생성
const name = "John";
const age = 25;
const city = "Seoul";

// Ctrl+D로 같은 단어 선택 후 동시 수정
function test() {
  test();  ← 이 test를 선택하고
  test();  ← Ctrl+D
  test();  ← Ctrl+D
  // 세 개를 동시에 수정 가능!
}

8. 폴더 구조 추천

프로젝트를 체계적으로 관리하는 습관을 처음부터 들이는 게 중요합니다.

내문서/
└── Projects/          ← 모든 프로젝트를 여기에
    ├── my-website/
    │   ├── index.html
    │   ├── css/
    │   │   └── style.css
    │   ├── js/
    │   │   └── app.js
    │   └── images/
    ├── todo-app/
    └── portfolio/

9. Chrome 확장 프로그램

1) ColorZilla

웹페이지의 색상을 스포이트로 추출할 수 있습니다.

2) WhatFont

웹페이지에서 사용된 폰트를 확인할 수 있습니다.

3) JSON Viewer

JSON 데이터를 보기 좋게 정렬해서 보여줍니다.

10. 체크리스트: 환경 설정 완료 확인

"좋은 도구는 개발자를 행복하게 만들고, 행복한 개발자는 좋은 코드를 작성합니다."

이제 개발 환경이 준비되었습니다! 처음에는 낯설고 복잡해 보이지만, 매일 사용하다 보면 곧 익숙해질 것입니다. 다음 글에서는 실제로 HTML과 CSS로 웹페이지를 만들어보겠습니다.