본문으로 건너뛰기
기술스택 · stack/javascript/코드 편집기 고르기

JavaScript · 1장 소개

코드 편집기 고르기

자바스크립트 파일은 글자만 적힌 텍스트 파일이라 메모장으로도 쓸 수 있어요. 그래도 개발자들이 전용 편집기를 쓰는 이유, 그리고 처음 시작할 때 무엇을 고르면 좋은지 정리했어요.

#1.3

01. 메모장으로도 되지만

코드 편집기는 코드를 읽고 이해하면서 글자를 다뤄요. 그래서 메모장이 못 하는 일을 해 줘요. 아래 그림은 한 줄을 입력하는 동안 편집기가 끼어들어 돕는 순간들을 보여 줘요.

①4번째 줄을 입력하는 동안 자동 완성 목록이 뜨고, 오타 consle에 빨간 밑줄이 그어져요. 빠른 수정으로 console로 고치면 밑줄이 사라지고, 저장할 때 서식이 정리돼요.
기능하는 일
문법 색키워드 · 문자열 · 숫자 · 주석을 다른 색으로 칠해서 구조가 한눈에 보여요
자동 완성몇 글자만 치면 쓸 수 있는 이름을 골라 보여 줘요. 오타가 줄어요
오류 밑줄실행하기 전에 문법 오류나 없는 이름에 밑줄을 그어요
서식 정리들여쓰기 · 띄어쓰기 · 따옴표를 규칙대로 맞춰 줘요
찾기 · 이동함수가 정의된 곳으로 바로 가고, 프로젝트 전체에서 이름을 찾아요

특히 오류 밑줄은 초보일수록 도움이 커요. 그림 속 코드를 그대로 실행하면 어떻게 되는지 아래 과제에서 확인해 보세요.

점수 세 개의 평균을 출력하려는 코드인데, 실행하면 오류가 나요. 오류 메시지를 읽고 한 곳만 고쳐서 평균이 출력되게 해 보세요.

const scores = [70, 85, 92];
let total = 0;
for (const s of scores) total += s;
consle.log(total / scores.length);
해답 보기

오류는 ReferenceError: consle is not defined예요. consle이라는 이름이 없다는 뜻이에요. console로 고치면 82.33333333333333이 나와요(247 ÷ 3). 편집기를 쓰면 실행하기 전에 이 자리에 밑줄이 그어져요.

console.log(total / scores.length); // 82.33333333333333

02. IDE: 프로젝트 전체를 아는 도구

IDE(통합 개발 환경)는 편집기에 실행 · 디버거 · 테스트 · 버전 관리 같은 도구를 한데 묶은 프로그램이에요. 파일 하나가 아니라 프로젝트 전체를 읽어 두기 때문에, 함수 이름을 바꾸면 그 함수를 부르는 모든 파일을 함께 고쳐 주는 식의 큰 작업을 잘해요.

  • WebStorm (JetBrains): 자바스크립트 · TypeScript 전용 IDE예요. 2024년 10월부터 공부나 개인 프로젝트 같은 비상업적 용도로는 무료로 쓸 수 있어요.
  • Visual Studio Code (Microsoft): 무료 편집기예요. 원래는 가벼운 편집기에 가깝지만, 자바스크립트 지원이 기본으로 들어 있고 확장(extension)을 더하면 IDE처럼 쓸 수 있어서 가장 많이 쓰여요.

VS Code는 프로젝트 폴더 안의 .vscode/settings.json 파일로 설정을 공유할 수 있어요. 예를 들어 저장할 때마다 서식을 정리하고, 들여쓰기를 두 칸으로 맞추려면 이렇게 적어요.

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2
}

03. 가벼운 편집기

가벼운 편집기는 빨리 열리고 빨리 고치는 데 초점을 둬요. 파일 하나를 잠깐 열어 고치거나, 오래된 컴퓨터에서 작업할 때 좋아요. 대신 프로젝트 전체를 이해하는 기능은 기본으로는 약하고, 플러그인으로 채워요.

편집기특징
Sublime Text아주 빠르고, 여러 곳을 한꺼번에 고치는 다중 커서가 유명해요
Notepad++Windows용 무료 편집기. 가볍게 파일을 열어 보기 좋아요
Zed빠른 속도와 여럿이 같이 편집하는 기능을 내세운 비교적 새 편집기예요
Vim · Neovim · Emacs터미널 안에서 키보드만으로 다루는 편집기. 익히는 데 시간이 걸리지만 손에 붙으면 아주 빨라요

사실 IDE와 가벼운 편집기의 경계는 흐려졌어요. 가벼운 편집기도 확장을 더하면 IDE 기능을 대부분 갖출 수 있고, IDE도 점점 가볍게 열리도록 바뀌고 있어요. 이름보다 "내가 지금 하려는 일에 필요한 기능이 있는가"로 고르면 돼요.

04. 처음이라면 무엇을 고를까

정답은 없지만, 상황별로 많이 쓰는 선택을 정리하면 이래요.

상황추천
이 튜토리얼을 따라 하며 짧은 코드를 실험해요이 글의 실행 블록, 또는 브라우저 콘솔
파일 몇 개로 작은 웹 페이지를 만들어요VS Code
설치 없이 코드를 남들과 나누고 싶어요CodePen · JSFiddle · StackBlitz 같은 온라인 편집기
큰 프로젝트를 리팩터링 · 디버깅해요WebStorm, 또는 확장을 갖춘 VS Code
서버에 접속해 설정 파일 하나를 고쳐요Vim · nano 같은 터미널 편집기

요즘 편집기들은 AI가 다음 코드를 제안해 주는 기능도 많이 갖추고 있어요. 편리하지만, 처음 배울 때는 제안을 끄고 직접 쳐 보는 것을 권해요. 손으로 써 본 코드라야 오류 메시지를 읽고 고치는 힘이 생기고, 나중에 AI의 제안이 맞는지도 판단할 수 있어요.

어떤 편집기를 고르든 하나에 익숙해지는 게 가장 중요해요. 단축키 몇 개(파일 찾기, 이름으로 이동, 여러 줄 주석)만 익혀도 작업 속도가 크게 달라져요.

정리

  • 편집기는 문법 색 · 자동 완성 · 오류 밑줄 · 서식 정리로 실행하기 전에 실수를 줄여 줘요.
  • IDE는 프로젝트 전체를 이해하고 디버거 · 테스트 같은 도구를 묶어 둔 프로그램이에요 (예: WebStorm).
  • 가벼운 편집기는 빨리 열고 고치는 데 강하고, 확장으로 기능을 더해요 (예: Sublime Text, Zed, Vim).
  • 처음이라면 실행 블록 · 브라우저 콘솔로 실험하고, 파일을 만들 때는 VS Code처럼 널리 쓰이는 편집기 하나를 익혀요.
SIMPLE · 기술스택 / JavaScript — 1장 소개