자습서: Visual Studio에서 Node.js 및 Express 앱 만들기

이 Visual Studio 개발용 자습서에서는 Node.js 및 Express를 사용합니다. 이 자습서에서는 Node.js 웹앱을 만들고, 일부 코드를 추가하고, IDE의 일부 기능을 살펴보고, 앱을 실행합니다.

이 자습서에서는 다음 작업 방법을 알아봅니다.

  • Node.js 프로젝트를 만듭니다.
  • 일부 코드를 추가합니다.
  • IntelliSense를 사용하여 코드를 편집합니다.
  • 앱을 실행합니다.
  • 디버거에서 중단점을 적중합니다.

시작하기 전에, 몇 가지 주요 개념을 소개하는 빠른 FAQ를 살펴보세요.

  • Node.js란 무엇인가요?

    Node.js는 JavaScript 코드를 실행하는 서버 쪽 JavaScript 런타임 환경입니다.

  • npm이란?

    패키지 관리자를 사용하면 Node.js 소스 코드 라이브러리를 쉽게 게시하고 공유할 수 있습니다. Node.js의 기본 패키지 관리자는 npm입니다. npm 패키지 관리자는 라이브러리 설치, 업데이트 및 제거를 간소화합니다.

  • Express란?

    Express는 Node.js에서 웹앱을 빌드하는 데 사용하는 서버 웹 애플리케이션 프레임워크입니다. Express에서는 다양한 프런트 엔드 프레임워크를 사용하여 사용자 인터페이스를 만들 수 있습니다. 이 자습서에서는 프런트 엔드 프레임워크에 Pug(이전의 Jade)를 사용합니다.

필수 조건

이 자습서를 사용하려면 다음 필수 구성 요소가 필요합니다.

  • Node.js 개발 워크로드가 설치된 Visual Studio

    Visual Studio를 아직 설치하지 않은 경우:

    1. Visual Studio 다운로드 페이지로 이동하여 별도의 비용 없이 Visual Studio를 설치하세요.

    2. Visual Studio 설치 관리자에서 Node.js 개발 워크로드를 선택하고 설치 를 선택합니다.

      Visual Studio 설치 관리자 선택한 Node j의 워크로드를 보여 주는 스크린샷

    Visual Studio를 이미 설치한 경우:

    1. Visual Studio에서 도구 > 도구 및 기능 가져오기 로 이동합니다.

    2. Visual Studio 설치 관리자 Node.js 개발 워크로드를 선택하고 수정 을 선택하여 워크로드를 다운로드하고 설치합니다.

  • 설치된 Node.js 런타임:

    Node.js 런타임이 아직 설치되어 있지 않으면 Node.js 웹 사이트에서 LTS 버전을 설치합니다. LTS 버전은 다른 프레임워크 및 라이브러리와 가장 잘 호환됩니다.

    Visual Studio Node.js 워크로드의 Node.js 도구는 Node.js 32비트와 64비트 아키텍처 버전을 둘 다 지원합니다. Visual Studio에는 버전이 하나만 필요하며, Node.js 설치 프로그램은 한 번에 한 버전만 지원합니다.

    Visual Studio는 일반적으로 설치된 Node.js 런타임을 자동으로 검색합니다. 그렇지 않은 경우 설치된 런타임을 참조하도록 프로젝트를 구성할 수 있습니다.

    1. 프로젝트를 만든 후 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 속성 을 선택합니다.

    2. 속성 창에서 Node.js의 전역 또는 로컬 설치를 참조하도록 Node.exe 경로 를 설정합니다. 각 Node.js 프로젝트에서 로컬 인터프리터의 경로를 지정할 수 있습니다.

이 자습서는 Node.js 16.14.0으로 테스트되었습니다.

이 자습서는 Node.js 8.10.0를 사용하여 테스트했습니다.

새 Node.js 프로젝트 만들기

Visual Studio는 프로젝트 에서 단일 애플리케이션에 대한 파일을 관리합니다. 프로젝트에는 소스 코드, 리소스 및 구성 파일이 포함됩니다.

이 자습서에서는 Node.js 및 Express 앱에 대한 코드를 포함한 간단한 프로젝트부터 시작합니다.

  1. Visual Studio 열고 Esc 를 선택하여 시작 창을 닫습니다.

  2. CtrlQ를+ 선택하고 검색 상자에 node.js 입력한 다음 드롭다운 목록에서 기본 Azure Node.js Express 4 애플리케이션 - JavaScript 를 선택합니다.

    기본 Azure Node.js Express 4 애플리케이션 선택 항목이 표시되지 않으면 Node.js 개발 워크로드를 설치해야 합니다. 자세한 내용은 필수 구성 요소를 참조하세요.

  3. 새 프로젝트 구성 대화 상자에서 만들기 를 선택합니다.

    Visual Studio가 새 솔루션과 프로젝트를 만들고 오른쪽 창에서 프로젝트를 엽니다. app.js 프로젝트 파일이 왼쪽 창의 편집기에 열립니다.

  4. 오른쪽 창에서 솔루션 탐색기 의 프로젝트 구조를 살펴봅니다.

    솔루션 탐색기의 프로젝트 구조를 보여 주는 스크린샷.

    • 최상위 수준은 기본적으로 프로젝트와 이름이 동일한 '솔루션'(1)입니다. 디스크에서 .sln 파일로 표시되는 솔루션은 하나 이상의 관련된 프로젝트에 대한 컨테이너입니다.

    • 새 프로젝트 구성 대화 상자에서 지정한 이름을 사용하는 프로젝트(2)가 굵게 강조 표시됩니다. 파일 시스템에서 프로젝트는 프로젝트 폴더의 .njsproj 파일입니다.

      프로젝트를 마우스 오른쪽 단추로 클릭하고 바로 가기 메뉴에서 속성 을 선택하여 프로젝트 속성 및 환경 변수를 보고 설정할 수 있습니다. 프로젝트 파일이 Node.js 프로젝트 소스에 사용자 지정 변경을 수행하지 않으므로 다른 개발 도구로 작업할 수 있습니다.

    • npm 노드(3)에는 설치된 모든 npm 패키지가 표시됩니다. npm 노드를 마우스 오른쪽 단추로 클릭하고 대화 상자를 사용하여 npm 패키지를 검색하고 설치할 수 있습니다.

      package.json 의 설정과 npm 노드의 마우스 오른쪽 단추 클릭 옵션을 사용하여 패키지를 설치하고 업데이트할 수 있습니다.

    • 프로젝트 파일(4)이 프로젝트 노드 아래에 표시됩니다. 프로젝트 시작 파일 (app.js)이 굵게 표시됩니다.

      프로젝트에서 파일을 마우스 오른쪽 단추로 클릭하고 Node.js 시작 파일로 설정 을 선택하여 시작 파일을 설정할 수 있습니다.

    • npm은 package.json 파일(5)을 사용하여 로컬에 설치된 패키지의 종속성과 버전을 관리합니다. 자세한 내용은 npm 패키지 관리를 참조하세요.

  5. npm 노드를 열고 모든 필수 npm 패키지가 존재하는지 확인합니다.

    패키지가 ( 누락됨) 으로 나열된 경우 npm 노드를 마우스 오른쪽 단추로 클릭하고 npm 패키지 설치 를 선택하고 누락된 패키지를 설치합니다.

    명령 프롬프트에서 npm 패키지 또는 Node.js 명령을 설치하려면 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 여기에서 명령 프롬프트 열기 를 선택합니다.

    프로젝트 상황에 맞는 메뉴에서 명령 프롬프트 열기를 보여 주는 스크린샷

  1. Visual Studio를 엽니다.

  2. 새 프로젝트를 만듭니다.

    Esc 를 선택하여 시작 창을 닫습니다. Ctrl + Q 를 선택하여 검색 상자를 열고 Node.js 입력한 다음 새 기본 Azure Node.js Express 4 애플리케이션 만들기(JavaScript)를 선택합니다. 표시되는 대화 상자에서 만들기 를 선택합니다.

    기본 Azure Node.js Express 4 애플리케이션 프로젝트 템플릿이 표시되지 않으면 Node.js 개발 워크로드를 추가해야 합니다. 자세한 내용은 필수 구성 요소를 참조하세요.

    Visual Studio가 새 솔루션을 만들고 오른쪽 창에서 프로젝트를 엽니다. app.js 프로젝트 파일이 편집기에 열립니다(왼쪽 창).

    솔루션 탐색기의 프로젝트 구조를 보여 주는 스크린샷.

    (1) bold 강조 표시된 것은 새 프로젝트 대화 상자에서 지정한 이름을 사용하는 프로젝트입니다. 파일 시스템에서 이 프로젝트는 프로젝트 폴더의 .njsproj 파일로 표시됩니다. 속성을 마우스 오른쪽 단추로 클릭하고 속성 을 선택하여 프로젝트와 연결된 환경 변수와 속성을 설정할 수 있습니다. 프로젝트 파일이 Node.js 프로젝트 원본에 대한 사용자 지정 변경을 수행하지 않으므로 다른 개발 도구로 라운드트립을 수행할 수 있습니다.

    (2) 최상위 수준은 기본적으로 프로젝트와 이름이 동일한 솔루션입니다. 디스크에서 .sln 파일로 표시되는 솔루션은 하나 이상의 관련된 프로젝트에 대한 컨테이너입니다.

    (3) npm 노드에는 설치된 모든 npm 패키지가 표시됩니다. npm 노드를 마우스 오른쪽 단추로 클릭하고 대화 상자를 사용하여 npm 패키지를 검색하고 설치할 수 있습니다. package.json 의 설정 또는 npm 노드의 오른쪽 클릭 옵션을 사용하여 패키지를 설치하고 업데이트할 수도 있습니다.

    (4) package.json 은 로컬로 설치된 패키지의 종속성과 패키지 버전을 관리하기 위해 npm에서 사용하는 파일입니다. 자세한 내용은 npm 패키지 관리를 참조하세요.

    (5) app.js 와 같은 프로젝트 파일은 프로젝트 노드 아래 표시됩니다. app.js 프로젝트 시작 파일이므로 굵게 표시됩니다. 프로젝트에서 파일을 마우스 오른쪽 단추로 클릭하고 Node.js 시작 파일로 설정 을 선택하여 시작 파일을 설정할 수 있습니다.

  3. npm 노드를 열고 모든 필수 npm 패키지가 존재하는지 확인합니다.

    패키지가 없으면 아이콘에 느낌표가 포함됩니다. 누락된 패키지를 설치하려면 npm 노드를 마우스 오른쪽 단추로 클릭하고 npm 패키지 설치를 선택할 수 있습니다.

    명령 프롬프트에서 npm 패키지 또는 Node.js 명령을 설치하려면 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 명령 프롬프트 열기 를 선택합니다.

    프로젝트 상황에 맞는 메뉴에서 명령 프롬프트 열기를 보여 주는 스크린샷

  1. Visual Studio를 엽니다.

  2. 새 프로젝트를 만듭니다.

    위쪽 메뉴 모음에서 FileNew > > Project 선택합니다. 새 Project 대화 상자의 왼쪽 창에서 JavaScript 를 확장한 다음, Node.js 선택합니다. 가운데 창에서 기본 Azure Node.js Express 4 애플리케이션****을 선택한 다음 확인을 선택합니다.

    기본 Azure Node.js Express 4 애플리케이션 프로젝트 템플릿이 표시되지 않으면 Node.js 개발 워크로드를 추가해야 합니다. 자세한 내용은 필수 구성 요소를 참조하세요.

    Visual Studio가 새 솔루션을 만들고 오른쪽 창에서 프로젝트를 엽니다. app.js 프로젝트 파일이 편집기에 열립니다(왼쪽 창).

    솔루션 탐색기의 프로젝트 구조를 보여 주는 스크린샷.

    (1) bold 강조 표시된 것은 새 프로젝트 대화 상자에서 지정한 이름을 사용하는 프로젝트입니다. 파일 시스템에서 이 프로젝트는 프로젝트 폴더의 .njsproj 파일로 표시됩니다. 속성을 마우스 오른쪽 단추로 클릭하고 속성 을 선택하여 프로젝트와 연결된 환경 변수와 속성을 설정할 수 있습니다. 프로젝트 파일이 Node.js 프로젝트 원본에 대한 사용자 지정 변경을 수행하지 않으므로 다른 개발 도구로 라운드트립을 수행할 수 있습니다.

    (2) 최상위 수준은 기본적으로 프로젝트와 이름이 동일한 솔루션입니다. 디스크에서 .sln 파일로 표시되는 솔루션은 하나 이상의 관련된 프로젝트에 대한 컨테이너입니다.

    (3) npm 노드에는 설치된 모든 npm 패키지가 표시됩니다. npm 노드를 마우스 오른쪽 단추로 클릭하고 대화 상자를 사용하여 npm 패키지를 검색하고 설치할 수 있습니다. package.json 의 설정 또는 npm 노드의 오른쪽 클릭 옵션을 사용하여 패키지를 설치하고 업데이트할 수도 있습니다.

    (4) package.json 은 로컬로 설치된 패키지의 종속성과 패키지 버전을 관리하기 위해 npm에서 사용하는 파일입니다. 자세한 내용은 npm 패키지 관리를 참조하세요.

    (5) app.js 와 같은 프로젝트 파일은 프로젝트 노드 아래 표시됩니다. app.js 프로젝트 시작 파일이므로 굵게 표시됩니다. 프로젝트에서 파일을 마우스 오른쪽 단추로 클릭하고 Node.js 시작 파일로 설정 을 선택하여 시작 파일을 설정할 수 있습니다.

  3. npm 노드를 열고 모든 필수 npm 패키지가 존재하는지 확인합니다.

    패키지가 없으면 아이콘에 느낌표가 포함됩니다. 누락된 패키지를 설치하려면 npm 노드를 마우스 오른쪽 단추로 클릭하고 npm 패키지 설치를 선택할 수 있습니다.

    명령 프롬프트에서 npm 패키지 또는 Node.js 명령을 설치하려면 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 명령 프롬프트 열기 를 선택합니다.

    프로젝트 상황에 맞는 메뉴에서 명령 프롬프트 열기를 보여 주는 스크린샷

일부 코드를 추가합니다.

애플리케이션은 프런트 엔드 JavaScript 프레임워크에 대해 Pug를 사용합니다. Pug은 HTML로 컴파일되는 간단한 표시 코드를 사용합니다.

Pug는 app.js 에서 코드 app.set('view engine', 'pug');를 사용하여 뷰 엔진으로 설정됩니다.

  1. 솔루션 탐색기 에서 views 폴더를 열고 index.pug 를 선택하여 파일을 엽니다.

  2. 다음 내용을 다음 마크업으로 바꿉니다.

    extends layout
    
    block content
      h1= title
      p Welcome to #{title}
      script.
        var f1 = function() { document.getElementById('myImage').src='#{data.item1}' }
      script.
        var f2 = function() { document.getElementById('myImage').src='#{data.item2}' }
      script.
        var f3 = function() { document.getElementById('myImage').src='#{data.item3}' }
    
      button(onclick='f1()') One!
      button(onclick='f2()') Two!
      button(onclick='f3()') Three!
      p
      a: img(id='myImage' height='300' width='300' src='')
    

    앞의 코드는 제목 및 환영 메시지가 있는 HTML 페이지를 동적으로 생성합니다. 페이지에는 단추를 선택할 때마다 변경되는 이미지를 표시하는 코드도 포함되어 있습니다.

  3. routes 폴더에서 index.js 를 엽니다.

  4. router.get 함수 호출 앞에 다음 코드를 추가합니다.

    var getData = function () {
        var data = {
            'item1': 'https://images.unsplash.com/photo-1563422156298-c778a278f9a5',
            'item2': 'https://images.unsplash.com/photo-1620173834206-c029bf322dba',
            'item3': 'https://images.unsplash.com/photo-1602491673980-73aa38de027a'
        }
        return data;
    }
    

    이 코드는 동적으로 생성된 HTML 페이지에 전달할 데이터 개체를 만듭니다.

  5. router.get 함수 호출을 다음 코드로 바꿉니다.

    router.get('/', function (req, res) {
        res.render('index', { title: 'Express', "data" });
    });
    

    앞의 코드는 Express 라우터 개체를 사용하여 현재 페이지를 설정하고 페이지를 렌더링하여 제목 및 데이터 개체를 페이지에 전달합니다. 이 코드는 index.pug 파일을 index.js 가 실행될 때 로드될 페이지로 지정됩니다. 여기에 표시되지 않은 app.js 코드는 index.js 를 기본 경로로 구성합니다.

    Visual Studio 기능을 여러 가지 보여주기 위해 res.render가 포함된 코드 줄에 의도적인 오류가 있습니다. 다음 섹션에서는 앱을 실행할 수 있도록 IntelliSense의 도움을 받아 오류를 수정합니다.

IntelliSense 사용

IntelliSense는 코드를 작성할 때 지원하는 Visual Studio 도구입니다.

  1. Visual Studio 코드 편집기의 index.js 에서 res.render가 포함된 코드 줄로 이동합니다.

  2. "data" 문자열 뒤에 커서를 놓고 : get를 입력합니다. IntelliSense는 코드의 앞부분에서 정의한 getData 함수를 표시합니다. getData를 선택합니다.

    코드 옆에 표시되는 IntelliSense 메뉴를 보여 주는 스크린샷 getData 함수가 메뉴에 표시됩니다.

    코드 옆에 표시되는 IntelliSense 메뉴를 보여 주는 스크린샷 getData 함수가 메뉴에 표시됩니다.

  3. 괄호를 추가하여 코드를 함수 호출로 만듭니다. getData().

  4. "data" 앞에 있는 쉼표를 제거합니다. 녹색 구문 강조 표시가 식에 나타납니다. 구문 강조 표시 위에 마우스를 가져갑니다.

    IntelliSense의 구문 오류를 보여 주는 스크린샷.

    IntelliSense의 구문 오류를 보여 주는 스크린샷.

    이 메시지의 마지막 줄에 JavaScript 인터프리터가 쉼표를 예상했다는 메시지가 나타납니다.

  5. 아래쪽 창에서 오류 목록 탭을 클릭하고 보고된 문제 유형의 드롭다운 목록에서 빌드 + IntelliSense 를 선택합니다.

    창에 경고 및 설명이 파일 이름 및 줄 번호와 함께 표시됩니다.

    오류가 나열된 오류 목록 창을 보여 주는 스크린샷

    오류가 나열된 오류 목록 창을 보여 주는 스크린샷

  6. "data" 앞에 쉼표를 추가하여 코드를 수정합니다.

    수정된 코드 줄은 다음과 같습니다.res.render('index', { title: 'Express', "data": getData() });

  7. 소스 코드 render로 이동하려면 다음 옵션 중 하나를 사용합니다.

    • F12 를 선택하고 render 선택합니다.
    • 마우스 오른쪽 단추를 클릭하고 render 상황에 맞는 메뉴에서 정의로 이동(Go To Definition )을 선택합니다.

    이러한 명령을 사용하면 index.d.tsrender 함수 정의로 연결됩니다.

    렌더링 상황에 맞는 메뉴의 정의로 이동 스크린샷

    렌더링 상황에 맞는 메뉴의 정의로 이동 스크린샷

앱 실행

다음으로 Visual Studio 디버거가 연결된 앱을 실행합니다. 그 전에 중단점을 설정해야 합니다.

중단점 설정

중단점은 신뢰할 수 있는 디버깅의 가장 기본적이고 필수적인 기능입니다. 중단점은 Visual Studio가 실행 중인 코드를 일시 중단해야 하는 위치를 나타냅니다. 변수 값, 메모리 동작 또는 코드 분기의 실행 여부를 확인할 수 있습니다.

중단점을 설정하려면 index.js 다음 코드 줄 앞에 있는 왼쪽 여백을 선택합니다.

res.render('index', { title: 'Express', "data": getData() });

코드 줄 옆에 빨간색 점을 보여 주는 스크린샷 빨간색 점은 중단점을 나타냅니다.

코드 줄 옆에 빨간색 점을 보여 주는 스크린샷 빨간색 점은 중단점을 나타냅니다.

디버그 모드에서 앱 실행

  1. 웹 서버(Google Chrome) 또는 웹 서버(Microsoft Edge) 같은 디버그 도구 모음에서 디버그 대상을 선택합니다.

    디버그 대상 상자에 표시되는 드롭다운 목록을 보여 주는 스크린샷.

    디버그 대상 상자에 표시되는 드롭다운 목록을 보여 주는 스크린샷.

    디버그 대상 상자에 표시되는 드롭다운 목록을 보여 주는 스크린샷.

    머신에서 선호하는 디버그 대상을 사용할 수 있지만 옵션으로 표시되지 않는 경우 디버그 대상 드롭다운 목록에서 브라우저 선택 을 선택합니다. 목록에서 기본 브라우저 대상을 선택하고 기본값으로 설정 을 선택합니다.

  2. F5 를 선택하거나 DebugStart > 디버깅을 선택하여 앱을 실행합니다.

    디버거는 앱 상태를 검사할 수 있도록 설정한 중단점에서 일시 중지됩니다.

  3. getData에 마우스를 가져가 DataTip에서 해당 속성을 봅니다.

    디버깅 중에 검사에 사용할 수 있는 일부 변수를 보여 주는 스크린샷

  4. F5 를 선택하거나 DebugContinue > 를 선택하여 앱을 계속 실행합니다.

    앱이 브라우저에서 열립니다. 브라우저 창에서 제목으로 Express, 첫 단락으로 Welcome to Express 가 표시됩니다.

  5. One! , Two!Three! 단추를 선택하여 각 이미지를 표시합니다.

    브라우저에서 실행되는 앱을 보여 주는 스크린샷.

  6. 웹 브라우저를 닫습니다.

Azure App Service에 게시(선택 사항)

  1. 솔루션 탐색기 에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시 를 선택합니다.

    • 메시지가 표시되면 게시 프로필 추가 를 선택합니다.
    • Azure WebJob Tools를 설치하라는 메시지가 표시되면 설치 를 선택합니다.
  2. 첫 번째 게시 화면에서 Azure 를 선택한 후 다음 을 선택합니다.

    Azure가 선택된 게시 대화 상자를 보여 주는 스크린샷.

  3. 두 번째 게시 화면에서 Azure App Service(Windows) 를 선택한 후 다음 을 선택합니다.

    Azure App Service가 선택된 게시 대화 상자를 보여 주는 스크린샷

  4. 다음 화면에서 필요한 경우 Azure에 로그인합니다. Azure 구독, 리소스 그룹 및 게시할 App Service 선택한 다음 마침 을 선택합니다.

    Azure 구독, 리소스 그룹 또는 App Service가 없는 경우 이 화면의 프롬프트에 따라 만들 수 있습니다.

    Azure 웹앱이 선택된 게시 대화 상자를 보여 주는 스크린샷

    자세한 내용은 웹 배포를 사용하여 Azure 웹 사이트에 게시를 참조하세요.

  5. 게시 구성을 살펴본 다음 게시 를 선택합니다.

    Visual Studio 게시 구성 및 단추를 보여 주는 스크린샷

    Visual Studio 출력 창에는 Azure 배포 진행률이 표시됩니다.

  6. 제대로 배포되면 브라우저의 Azure App Service에서 앱이 열려 실행됩니다. 단추를 클릭하여 이미지를 표시합니다.

    브라우저의 Azure App Service에서 실행되는 웹앱을 보여 주는 스크린샷

  1. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시 를 선택합니다.

    Azure App Service에 게시를 보여 주는 스크린샷

  2. Microsoft Azure App Service 를 선택합니다.

    App Service 대화 상자에서는 Azure 계정에 로그인하여 기존 Azure 구독에 로그인할 수 있습니다.

  3. 나머지 단계에 따라 구독을 선택하고, 리소스 그룹을 선택하거나 만들고, App Service 계획을 선택하거나 만듭니다. 메시지가 표시되면 단계에 따라 Azure에 게시합니다. 자세한 내용은 웹 배포를 사용하여 Azure 웹 사이트에 게시를 참조하세요.

  4. 출력 창에는 Azure 배포 진행률이 표시됩니다.

    제대로 배포되면 Azure App Service를 실행하는 브라우저에서 앱이 열립니다. 단추를 클릭하여 이미지를 표시합니다.

    브라우저의 Azure App Service에서 실행되는 웹앱을 보여 주는 스크린샷

축하합니다. 이 자습서를 마쳤습니다.

다음 단계