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

아티클
05/08/2023

이 문서에서는 Visual Studio를 사용하여 Express 프레임워크를 사용하는 간단한 Node.js 웹앱을 빌드하는 방법을 알아봅니다.

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

Node.js란 무엇인가요?

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

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

Express는 Node.js에서 웹앱을 빌드하는 데 사용하는 서버 웹 애플리케이션 프레임워크입니다. Express를 사용하면 여러 가지 방법으로 사용자 인터페이스를 만들 수 있습니다. 이 자습서에서 제공하는 구현에서는 Express 애플리케이션 생성기의 기본 템플릿 엔진인 Pug를 사용하여 프런트 엔드를 렌더링합니다.

전제 조건

다음을 꼭 설치해야 합니다.

Visual Studio 2022 버전 17.4 이상 및 ASP.NET 및 웹 개발 워크로드. Visual Studio 다운로드 페이지로 이동하여 별도의 비용 없이 설치하세요. 워크로드는 설치해야 하며 Visual Studio가 이미 있는 경우 도구>도구 및 기능 가져오기... 로 이동하면 Visual Studio 설치 관리자가 열립니다. ASP.NET 및 웹 개발 워크로드를 선택한 후 수정을 선택합니다.
Node.js가 포함된 npm(https://www.npmjs.com/)
npx(https://www.npmjs.com/package/npx)

앱 만들기

시작 창에서(열려는 파일>시작 창 선택) 새 프로젝트 만들기를 선택합니다.
맨 위의 검색 창에서 Express를 검색한 다음 JavaScript Express 애플리케이션을 선택합니다.
프로젝트와 솔루션의 이름을 지정합니다.

프로젝트 속성 보기

기본 프로젝트 설정을 사용하면 프로젝트를 빌드하고 디버그할 수 있습니다. 그러나 설정을 변경해야 하는 경우 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 속성을 선택한 다음 빌드 또는 디버깅 섹션으로 이동합니다.

참고

launch.json은 디버그 도구 모음에서 시작 단추와 연결된 시작 설정을 저장합니다. 현재 launch.json은 .vscode 폴더 아래에 있어야 합니다.

프로젝트 빌드

빌드>솔루션 빌드를 선택하여 프로젝트를 빌드합니다.

앱 시작

F5 키를 누르거나 창 맨 위에 있는 시작 단추를 선택합니다. 그러면 명령 프롬프트가 표시됩니다.

노드 ./bin/www 명령을 실행하는 npm

참고

콘솔 출력에서 Node.js 버전을 업데이트하도록 지시하는 메시지 같은 메시지를 확인합니다.

이제 기본 Express 앱이 표시됩니다.

앱 디버그

이제 앱을 디버그할 수 있는 몇 가지 방법을 살펴보겠습니다.

먼저 앱이 계속 실행 중인 경우 Shift + F5 키를 누르거나 창 맨 위에 있는 빨간색 중지 단추를 선택하여 현재 세션을 중지합니다. 세션을 중지하면 앱을 표시하는 브라우저는 닫히지만 노드 프로세스를 실행하는 명령 프롬프트 창은 그대로 있습니다. 지금은 계속 진행하여 남아 있는 명령 프롬프트를 모두 닫습니다. 이 문서의 뒷부분에서 노드 프로세스를 실행 상태로 두는 이유를 설명합니다.

노드 프로세스 디버깅

시작 단추 옆의 드롭다운에 다음 시작 옵션이 표시됩니다.

localhost(Edge)
localhost(Chrome)
Dev Env 디버그
노드 및 브라우저 시작

노드 및 브라우저 시작 옵션을 선택합니다. 이제 F5 키를 누르거나 시작 단추를 다시 선택하기 전에 다음 코드 줄 앞의 왼쪽 여백을 선택하여 index.js(routes 폴더)에서 중단점을 설정합니다. res.render('index', { title: 'Express' });

팁

코드 줄에 커서를 놓고 F9 키를 눌러 해당 줄의 중단점을 토글할 수도 있습니다.

그런 다음 F5 키를 누르거나 디버그>디버깅 시작을 선택하여 앱을 디버그합니다.

방금 설정한 중단점에서 디버거 일시 중지가 표시됩니다. 일시 중지된 동안 앱 상태를 검사할 수 있습니다. 마우스로 변수를 가리키면 해당 속성을 검사할 수 있습니다.

상태 검사를 마친 다음 F5 키를 눌러 계속하면 앱이 예상대로 로드됩니다.

이번에는 중지에 도달하면 브라우저와 명령 프롬프트 창이 모두 닫힌 것을 알 수 있습니다. 그 이유를 알아보려면 launch.json을 자세히 살펴보세요.

launch.json 이해

launch.json은 현재 .vscode 폴더에 있습니다. 솔루션 탐색기에서 .vscode 폴더가 보이지 않으면 모든 파일 표시를 선택합니다.

이전에 Visual Studio Code를 사용한 적이 있다면 launch.json 파일이 친숙해 보일 것입니다. 여기서 launch.json은 Visual Studio Code에서 디버깅에 사용되는 시작 구성을 나타내는 것과 거의 동일한 방식으로 작동합니다. 각 항목은 디버그할 하나 이상의 대상을 지정합니다.

처음 두 항목은 브라우저 항목이며 다음과 같이 표시됩니다.

    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }

위의 항목에서 type가 브라우저 유형으로 설정되어 있음을 확인할 수 있습니다. 브라우저 유형만 단독 디버그 대상으로 지정하여 시작하는 경우 Visual Studio는 프런트 엔드 브라우저 프로세스만 디버그하고 노드 프로세스는 연결된 디버거 없이 시작됩니다. 즉, 노드 프로세스에 설정된 중단점이 바인딩되지 않습니다.

세션을 중지하면 노드 프로세스도 계속 실행됩니다. 브라우저가 디버그 대상인 경우 의도적으로 계속 실행됩니다. 프런트 엔드에서만 작업이 수행되는 경우 백 엔드 프로세스를 지속적으로 실행하면 개발 워크플로가 용이하기 때문입니다.

이 섹션의 시작 부분에서 노드 프로세스에서 중단점을 설정하기 위해 남아 있는 명령 프롬프트 창을 닫았습니다. 노드 프로세스를 디버그할 수 있으려면 디버거가 연결된 상태에서 다시 시작해야 합니다. 디버그할 수 없는 노드 프로세스가 실행 중인 경우 (포트를 다시 구성하지 않고) 디버그 모드에서 노드 프로세스를 시작하려고 하면 실패합니다.

참고

현재 edge 및 chrome만 디버깅에 지원되는 브라우저 유형입니다.

launch.json의 세 번째 항목은 node를 디버그 형식으로 지정하며 노드는 다음과 같이 표시됩니다.

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

이 항목은 디버그 모드에서 노드 프로세스만 시작합니다. 브라우저는 시작되지 않습니다.

*launch.json*에 제공된 네 번째 항목은 다음과 같은 복합 시작 구성입니다.

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

이 복합 구성은 vscode 복합 시작 구성과 동일하며 이를 선택하면 프런트 엔드와 백 엔드를 모두 디버그할 수 있습니다. 이 구성은 노드 및 브라우저 프로세스에 대한 개별 시작 구성만 참조하는 것을 알 수 있습니다.

시작 구성에서 사용할 수 있는 다른 많은 특성이 있습니다. 예를 들어 presentation 개체의 hidden 특성을 true로 설정하여 드롭다운에서 구성을 숨길 수 있지만 여전히 참조할 수 있습니다.

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

디버깅 환경을 개선하는 데 사용할 수 있는 특성 목록은 옵션을 클릭하세요. 현재는 시작 구성만 지원됩니다. 연결 구성을 사용하려고 하면 배포가 실패합니다.