VS Code에서 Node.js 개별 파일 실행 방법 launch.json 설정부터 단축키 최적화

VS code

 Node.js를 공부하다 보면 이런 상황을 자주 겪게 됩니다. 알고리즘 테스트용 파일 하나를 실행하고 싶은데 VS Code는 자꾸 app.js나 index.js만 실행합니다. 새로운 JavaScript 파일을 만들어도 매번 실행 설정을 바꿔야 하고, 디버깅을 위해 F5를 누르려니 맥북에서는 Fn 키까지 함께 눌러야 하는 경우도 있습니다.

많은 분들이 Atom에서 VS Code로 넘어왔을 때 가장 불편했던 부분이 바로 이것이었습니다. 하지만 launch.json 설정과 단축키만 조금 수정하면 현재 열려 있는 파일을 즉시 실행할 수 있는 개발 환경을 만들 수 있습니다. VS Code에서 Node.js 개별 파일 실행 환경을 구축하는 방법을 처음 사용하는 분도 이해할 수 있도록 쉽게 설명해보겠습니다.

VS code 

Node.js 프로젝트를 생성하면 대부분 package.json에 메인 진입 파일이 지정됩니다. 예를 들면 다음과 같습니다.

{ "main": "app.js" }

이 설정 때문에 VS Code는 디버깅 실행 시 자동으로 app.js를 기준으로 동작하는 경우가 많습니다 하지만 개발 과정에서는 다음과 같은 상황이 더 많습니다.

• 알고리즘 테스트

• 크롤링 코드 테스트

• API 실험

• 기능별 모듈 검증

이럴 때는 현재 열려 있는 파일만 빠르게 실행하는 환경이 훨씬 효율적입니다.

현재 파일 실행하기

먼저 프로젝트 루트 폴더에 아래 구조를 만듭니다.

.vscode └ launch.json

launch.json 파일에 아래 내용을 입력합니다.

{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Current Active File", "program": "${file}", "env": { "NODE_ENV": "development" }, "console": "integratedTerminal" } ] }

가장 중요한 설정은 "program": "${file}" 이 부분이 핵심입니다. 많은 초보자가 다음처럼 설정합니다. "program": "${workspaceFolder}/app.js" 이렇게 하면 항상 app.js만 실행됩니다. 반면 "program": "${file}" 를 사용하면 현재 열려 있는 파일이 자동으로 실행됩니다. 

예를 들어 crawler.js test.js api.js 중에서 test.js를 보고 있다면 test.js가 실행됩니다. api.js를 열어두면 api.js가 실행됩니다. 즉 별도 수정 없이 현재 작업 중인 파일만 즉시 테스트할 수 있습니다.

Node. js

많은 Node.js 프로젝트에서는 환경 변수를 사용합니다. process.env.NODE_ENV 이를 통해 개발 환경과 운영 환경을 구분합니다. launch.json에서 아래 설정을 추가하면 "env": { "NODE_ENV": "development" } 실행과 동시에 개발 모드가 활성화됩니다. 실무에서는 거의 필수로 사용하는 설정입니다.

단축기 최적화

개발을 오래 하다 보면 실행 버튼을 마우스로 누르는 것이 생각보다 많은 시간을 잡아먹습니다. 특히 맥북 사용자는 F5 사용이 불편할 수 있습니다.

1. 설정 메뉴 이동

Code → Preferences → Keyboard Shortcuts 또는 Cmd + K Cmd + S 입력

2. 디버그 실행 찾기

검색창에 입력 Debug: Start Debugging 또는 F5

3. 새 단축기 지정

Shift + R 또는 Cmd + Shift + R 개인적으로는 Shift + R 조합이 가장 편했습니다. 왼손만으로 실행이 가능하기 때문입니다.

4. 현재 파일 실행 테스트

console.log("hello world"); 가 들어있는 test.js 파일을 열어둡니다. 설정한 실행 단축키를 누르면hello world 가 통합 터미널에 출력됩니다. app.js를 수정할 필요도 없고 package.json을 건드릴 필요도 없습니다.

VS Code에서 여러 프로젝트를 동시에 열어놓으면 예상하지 못한 문제가 발생할 수 있습니다. 대표적인 예가 launch.json 충돌입니다. Project A Project B Project C 를 하나의 Workspace에 등록한 경우입니다. VS Code가 잘못된 프로젝트의 launch.json을 참조하는 경우가 있습니다.

해결 방법

프로젝트별로 독립 Workspace 사용하는 것으로 project-a.code-workspace project-b.code-workspace project-c.code-workspace 형태로 관리하는 것이 가장 안정적입니다.

인터넷을 검색하다 보면 다음과 같은 방법을 볼 수 있습니다. "main": "${file}" 겉보기에는 편해 보입니다. 하지만 실제 Node.js 런타임은 ${file} 변수를 해석하지 못합니다. 그 결과 Cannot find module 오류가 발생할 수 있습니다. 특히 GitHub 저장소에 그대로 업로드하거나 서버에 배포하면 문제가 발생합니다.

항상 launch.json 사용 "program": "${file}" 이 방법이 가장 안정적이고 유지보수도 쉽습니다. 추가로 Code Runner 확장 프로그램 사용,  VS Code 확장 프로그램에서 Code Runner 를 설치하면 Ctrl + Alt + N 만으로 현재 파일 실행이 가능합니다. 간단한 테스트에는 매우 편리합니다. File → Auto Save 를 켜두면 저장을 깜빡해도 최신 코드가 실행됩니다

QNA

1. VS Code에서 현재 파일만 실행하려면 어떻게 해야 하나요?

launch.json에서 "program": "${file}" 설정을 사용하면 됩니다.

2. F5 대신 다른 단축키를 사용할 수 있나요?

가능합니다. Keyboard Shortcuts 메뉴에서 원하는 키로 변경할 수 있습니다.

3. Code Runner와 launch.json 중 무엇이 더 좋나요?

간단한 테스트는 Code Runner가 편리합니다. 디버깅과 실무 프로젝트는 launch.json 사용을 권장합니다.

VS Code에서 Node.js를 개발할 때 가장 생산성이 높은 방법은 현재 열려 있는 파일을 즉시 실행할 수 있는 환경을 만드는 것입니다. 핵심은 단 하나입니다. "program": "${file}" 이 설정만 적용해도 app.js에 묶여 있던 기존 방식에서 벗어나 현재 작업 중인 JavaScript 파일을 바로 실행할 수 있습니다.

*  authy 백업 방법 원리만 알면 쉽다

*  윈도우 10 시작 프로그램 팝업 끄는 법

* 업데이트와 업그레이드의 차이점

* 디바이스 변경 윈도우 10초 만에 끄는 방법