Visual Studio Code에서 Node.js 튜토리얼

Node.js는 JavaScript를 사용하여 빠르고 확장 가능한 서버 애플리케이션을 구축하기 위한 플랫폼입니다. Node.js는 런타임이고, npm은 Node.js 모듈을 위한 패키지 관리자입니다.

Visual Studio Code는 JavaScript 및 TypeScript 언어에 대한 내장 지원과 Node.js 디버깅을 지원합니다. 하지만 Node.js 애플리케이션을 실행하려면 컴퓨터에 Node.js 런타임을 설치해야 합니다.

이 튜토리얼을 시작하려면 플랫폼에 맞는 Node.js를 설치하십시오. Node 패키지 관리자는 Node.js 배포판에 포함되어 있습니다. node 및 npm 명령줄 도구가 PATH에 포함되도록 새 터미널(명령 프롬프트)을 열어야 합니다.

컴퓨터에 Node.js가 올바르게 설치되었는지 테스트하려면 새 터미널을 열고 node --version을 입력하면 설치된 현재 Node.js 버전이 표시됩니다.

Linux: 다양한 Linux 배포판에 맞는 특정 Node.js 패키지가 있습니다. 패키지 관리자를 통한 Node.js 설치를 참조하여 Linux 버전에 맞는 Node.js 패키지와 설치 지침을 찾으십시오.

Linux용 Windows 하위 시스템: Windows를 사용 중이라면 WSL은 Node.js 개발을 위한 훌륭한 방법입니다. Windows에서 Linux 배포판을 실행하고 Linux 환경에 Node.js를 설치할 수 있습니다. WSL 확장을 사용하면 WSL 컨텍스트에서 실행하면서 완전한 VS Code 편집 및 디버깅 지원을 받을 수 있습니다. 자세히 알아보려면 WSL에서 개발하기로 이동하거나 WSL에서 작업하기 튜토리얼을 시도하십시오.

Hello World

가장 간단한 Node.js 애플리케이션인 "Hello World"를 만들어 시작하겠습니다.

"hello"라는 빈 폴더를 만들고 해당 폴더로 이동한 후 VS Code를 엽니다.

mkdir hello
cd hello
code .

팁: 명령줄에서 파일이나 폴더를 직접 열 수 있습니다. 점('.')은 현재 폴더를 나타내므로 VS Code가 시작되고 Hello 폴더가 열립니다.

파일 탐색기 도구 모음에서 새 파일 버튼을 누릅니다.

그리고 파일 이름을 app.js로 지정합니다.

.js 파일 확장자를 사용하면 VS Code는 이 파일을 JavaScript로 해석하고 JavaScript 언어 서비스를 사용하여 내용을 평가합니다. JavaScript 지원에 대한 자세한 내용은 VS Code의 JavaScript 언어 토픽을 참조하십시오.

app.js에 간단한 문자열 변수를 만들고 문자열 내용을 콘솔로 보냅니다.

var msg = 'Hello World';
console.log(msg);

console.을 입력했을 때 console 객체에 대한 IntelliSense가 자동으로 표시된 것을 주목하십시오.

또한 VS Code는 'Hello World'로 초기화된 것을 기반으로 msg가 문자열임을 알고 있습니다. msg.를 입력하면 msg에서 사용할 수 있는 모든 문자열 함수를 보여주는 IntelliSense가 표시됩니다.

IntelliSense를 사용해 본 후 위의 소스 코드 예제에서 추가한 모든 변경 사항을 되돌리고 파일을 저장합니다 (⌘S (Windows, Linux Ctrl+S)).

Hello World 실행

Node.js로 app.js를 실행하는 것은 간단합니다. 터미널에서 다음을 입력하면 됩니다.

node app.js

"Hello World"가 터미널에 출력된 후 Node.js가 반환되는 것을 볼 수 있습니다.

통합 터미널

VS Code에는 쉘 명령을 실행하는 데 사용할 수 있는 통합 터미널이 있습니다. 여기서 Node.js를 직접 실행하여 명령줄 도구를 실행하는 동안 VS Code를 전환하지 않아도 됩니다.

보기 > 터미널 (⌃` (Windows, Linux Ctrl+`) 백틱 문자 포함)을 선택하면 통합 터미널이 열리고 거기서 node app.js를 실행할 수 있습니다.

이 튜토리얼에서는 외부 터미널 또는 VS Code 통합 터미널을 사용하여 명령줄 도구를 실행할 수 있습니다.

Hello World 디버깅

소개에서 언급했듯이 VS Code는 Node.js 애플리케이션용 디버거와 함께 제공됩니다. 간단한 Hello World 애플리케이션을 디버깅해 봅시다.

app.js에 중단점을 설정하려면 편집기 커서를 첫 번째 줄에 놓고 F9를 누르거나 줄 번호 옆의 편집기 왼쪽 여백을 클릭하십시오. 여백에 빨간색 원이 나타납니다.

디버깅을 시작하려면 활동 표시줄에서 실행 및 디버그 보기를 선택합니다.

이제 디버그 도구 모음 녹색 화살표를 클릭하거나 F5를 눌러 "Hello World"를 시작하고 디버깅할 수 있습니다. 설정한 중단점이 히트되고 간단한 애플리케이션을 보거나 단계별로 실행할 수 있습니다. VS Code가 디버그 모드를 나타내기 위해 다른 색상의 상태 표시줄을 표시하고 DEBUG CONSOLE가 표시되는 것을 확인하십시오.

이제 "Hello World"로 VS Code를 사용해 보았으므로 다음 섹션에서는 전체 스택 Node.js 웹 앱으로 VS Code를 사용하는 방법을 보여줍니다.

참고: "Hello World" 예제는 완료되었으므로 Express 앱을 만들기 전에 해당 폴더에서 나갑니다. 튜토리얼의 나머지 부분에 필요하지 않으므로 "Hello" 폴더를 삭제해도 됩니다.

Express 애플리케이션

Express는 Node.js 애플리케이션을 구축하고 실행하는 데 매우 인기 있는 애플리케이션 프레임워크입니다. Express Generator 도구를 사용하여 새 Express 애플리케이션을 스캐폴딩(생성)할 수 있습니다. Express Generator는 npm 모듈로 제공되며 npm 명령줄 도구를 사용하여 설치합니다.

팁: 컴퓨터에 npm이 올바르게 설치되었는지 테스트하려면 터미널에서 npm --help를 입력하면 사용법 설명서를 볼 수 있습니다.

터미널에서 다음을 실행하여 Express Generator를 설치합니다.

npm install -g express-generator

-g 스위치는 Express Generator를 컴퓨터에 전역으로 설치하므로 어디서든 실행할 수 있습니다.

이제 다음을 실행하여 myExpressApp이라는 새 Express 애플리케이션을 스캐폴딩할 수 있습니다.

express myExpressApp --view pug

이렇게 하면 myExpressApp이라는 새 폴더와 애플리케이션 내용이 생성됩니다. --view pug 매개변수는 생성기가 pug 템플릿 엔진을 사용하도록 지시합니다.

애플리케이션의 모든 종속성(npm 모듈로 제공됨)을 설치하려면 새 폴더로 이동하여 npm install을 실행합니다.

cd myExpressApp
npm install

이 시점에서 애플리케이션이 실행되는지 테스트해야 합니다. 생성된 Express 애플리케이션에는 start 스크립트가 포함된 package.json 파일이 있으며, 이는 node ./bin/www를 실행합니다. 이렇게 하면 Node.js 애플리케이션이 실행됩니다.

Express 애플리케이션 폴더의 터미널에서 다음을 실행합니다.

npm start

Node.js 웹 서버가 시작되고 https://:3000으로 브라우징하여 실행 중인 애플리케이션을 볼 수 있습니다.

훌륭한 코드 편집

브라우저를 닫고 myExpressApp 폴더의 터미널에서 CTRL+C를 눌러 Node.js 서버를 중지합니다.

이제 VS Code를 실행합니다.

code .

참고: Express Generator를 설치하고 앱을 스캐폴딩하기 위해 VS Code 통합 터미널을 사용하고 있었다면, 파일 > 폴더 열기 명령을 사용하여 실행 중인 VS Code 인스턴스에서 myExpressApp 폴더를 열 수 있습니다.

Node.js 및 Express 문서는 플랫폼과 프레임워크를 사용하여 풍부한 애플리케이션을 구축하는 방법에 대해 잘 설명하고 있습니다. Visual Studio Code는 훌륭한 코드 편집 및 탐색 환경을 제공하여 이러한 유형의 애플리케이션 개발 생산성을 높여줍니다.

app.js 파일을 열고 Node.js 전역 객체 __dirname 위로 마우스를 가져갑니다. VS Code가 __dirname이 문자열임을 어떻게 이해하는지 주목하십시오. 더 흥미로운 것은 Node.js 프레임워크에 대한 완전한 IntelliSense를 얻을 수 있다는 것입니다. 예를 들어, http를 require하고 Visual Studio Code에서 입력할 때 http 클래스에 대한 완전한 IntelliSense를 얻을 수 있습니다.

VS Code는 TypeScript 형식 선언(타이핑) 파일(예: node.d.ts)을 사용하여 애플리케이션에서 사용하는 JavaScript 기반 프레임워크에 대한 메타데이터를 VS Code에 제공합니다. 형식 선언 파일은 TypeScript로 작성되어 매개변수와 함수의 데이터 형식을 표현할 수 있으므로 VS Code는 풍부한 IntelliSense 환경을 제공할 수 있습니다. 자동 형식 가져오기라는 기능을 통해 이러한 형식 선언 파일을 다운로드하는 것에 대해 걱정할 필요가 없습니다. VS Code가 자동으로 설치합니다.

다른 파일의 모듈을 참조하는 코드를 작성할 수도 있습니다. 예를 들어 app.js에서 ./routes/index 모듈을 require하며, 이 모듈은 Express.Router 클래스를 내보냅니다. index에 대한 IntelliSense를 가져오면 Router 클래스의 구조를 볼 수 있습니다.

Express 앱 디버깅

Express 애플리케이션에 대한 디버거 구성 파일 launch.json을 만들어야 합니다. **활동 표시줄**(⇧⌘D (Windows, Linux Ctrl+Shift+D))에서 **실행 및 디버그**를 클릭한 다음 **launch.json 파일 만들기** 링크를 선택하여 기본 launch.json 파일을 만듭니다. configurations의 type 속성이 "node"로 설정되어 있는지 확인하여 **Node.js** 환경을 선택합니다. 파일이 처음 생성되면 VS Code는 package.json에서 start 스크립트를 찾고 해당 값을 **프로그램 시작** 구성의 program(이 경우 "${workspaceFolder}\\bin\\www)으로 사용합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\bin\\www"
    }
  ]
}

새 파일을 저장하고 **실행 및 디버그** 보기 상단 구성 드롭다운에서 **프로그램 시작**이 선택되어 있는지 확인합니다. app.js를 열고 Express 앱 객체가 생성되는 파일 상단 근처에 줄 번호 왼쪽 여백을 클릭하여 중단점을 설정합니다. F5를 눌러 애플리케이션 디버깅을 시작합니다. VS Code는 새 터미널에서 서버를 시작하고 설정한 중단점을 히트합니다. 거기서 변수를 검사하고, 감시를 만들고, 코드를 단계별로 실행할 수 있습니다.

애플리케이션 배포

웹 애플리케이션을 배포하는 방법에 대해 배우고 싶다면 Azure에 애플리케이션 배포 튜토리얼을 확인하십시오. 이 튜토리얼에서는 Azure에서 웹사이트를 실행하는 방법을 보여줍니다.

다음 단계

Visual Studio Code에서 더 많은 것을 탐색할 수 있습니다. 다음 토픽을 시도해 보십시오.

• Node.js 프로필 템플릿 - 선택된 확장, 설정 및 스니펫 세트로 새 프로필을 만듭니다.
• 설정 - VS Code를 원하는 방식으로 사용자 지정하는 방법을 알아봅니다.
• 디버깅 - VS Code가 진정한 빛을 발하는 부분입니다.
• 비디오: VS Code 디버깅 시작하기 - VS Code에서 디버깅을 사용하는 방법을 배웁니다.
• Node.js 디버깅 - VS Code의 내장 Node.js 디버깅에 대해 자세히 알아봅니다.
• 디버깅 레시피 - 클라이언트 측 및 컨테이너 디버깅과 같은 시나리오에 대한 예제를 제공합니다.
• 작업 - Gulp, Grunt 및 Jake를 사용하여 작업 실행. 오류 및 경고 표시.