Visual Studio Code에서 Node.js 앱 만들기
이 단원에서는 다음을 수행하는 방법을 이해합니다.
- Visual Studio Code 및 Cosmos DB를 사용하여 JavaScript 애플리케이션을 만듭니다.
- Intellisense를 사용하여 코드 작성을 돕습니다.
- Visual Studio Code 내에서 Node.js를 사용하여 애플리케이션을 실행하는 방법을 알아봅니다.
- 통합 디버거를 사용하여 코드를 단계별로 진행하고 코드가 실행될 때 변수를 검사합니다.
Node.js용 JavaScript 애플리케이션 만들기
터미널 창을 사용하여 Visual Studio Code 내에서 Node.js용 새 JavaScript 애플리케이션을 만들 수 있습니다. npm init -y 명령은 애플리케이션 폴더에 package.json이라는 새 파일을 만듭니다. 이 파일에는 Node.js 런타임에 대한 애플리케이션을 설명하는 데 사용하는 메타데이터가 포함되어 있습니다.
그런 다음 애플리케이션 코드에 대한 새 파일을 만들어야 합니다. 파일을 저장할 때 파일에 확장명 .js(JavaScript용)을 지정해야 합니다. 이제 JavaScript 코드 작성을 시작할 준비가 되었습니다.
IntelliSense를 사용하여 코드 작성
코드를 작성할 때 IntelliSense에서 형식 검사 및 코드 완성을 수행할 수 있습니다. 예를 들어 함수를 만들거나, 형식을 정의하거나, 모듈을 JavaScript 파일로 가져올 때 추가하거나 가져온 항목을 IntelliSense에서 사용할 수 있습니다.
입력할 때 IntelliSense에서는 형식 검사 및 형식 유추의 조합을 사용하여 현재 컨텍스트에 적합한 제안을 표시합니다. IntelliSense에서는 형식 유추를 통해 코드를 작성할 때 유효한 코드 완성 제안을 제공할 수 있습니다.
IntelliSense에서는 형식 검사를 통해 함수 호출에 사용할 수 있는 매개 변수를 표시할 수 있으며 각 함수에 제공하는 식의 형식을 검사합니다.
Visual Studio Code에서 사용할 수 있는 다른 IntelliSense 기능은 다음과 같습니다.
- 연결할 수 없는 코드 및 사용되지 않는 변수를 검색합니다. 실행할 수 없는 문 및 사용되지 않는 변수는 편집기에서 흐리게 표시됩니다.
- 정의 및 참조 미리보기 미리 보기 기능을 사용하면 다른 파일 내에 있더라도 개체 또는 함수의 정의를 빠르게 볼 수 있습니다. 변수나 함수를 마우스 오른쪽 단추로 클릭하고 정의 미리 보기 또는 참조 미리 보기를 선택합니다. 정의 또는 참조가 팝업 창에 표시됩니다.
- 변수, 함수 또는 형식 정의로 이동합니다. 이 기능을 사용하면 코드에서 변수, 함수 또는 형식의 정의로 직접 이동할 수 있습니다. 이 기능은 항목의 정의를 변경하거나 함수를 수정해야 하는 경우에 유용합니다. 변수 또는 형식을 참조하거나 함수를 호출하는 코드를 마우스 오른쪽 단추로 클릭합니다. 정의로 이동 또는 형식 정의로 이동을 선택합니다.
- 코드의 가능한 리팩터링을 제안합니다. 항목 아래에 있는 줄임표(...)는 IntelliSense에서 하나 이상의 제안을 제공하는 영역을 나타냅니다. 제안을 보려면 줄임표를 선택합니다. 빠른 수정을 선택하여 제안을 구현합니다.
Node.js 애플리케이션 실행 및 디버그
Visual Studio Code에서 Node.js 애플리케이션을 실행하는 가장 간단한 방법은 터미널 창에서 node 명령을 사용하는 것입니다. 예를 들어 index.js라는 파일에서 코드를 실행하려면 node index.js를 실행하세요.
터미널 창에서 네이티브 Node.js 디버거(예: node inspect index)를 사용할 수 있지만, Visual Studio Code는 Node.js 애플리케이션을 단계별로 실행하고 디버깅하기 위한 향상된 환경을 제공합니다.
launch.json 파일에서 디버거 구성
Visual Studio Code 디버거를 사용하기 전에 이 환경을 구성해야 합니다. 디버거 구성 설정을 편집하려면 실행 메뉴에서 구성 추가를 선택합니다. 디버거 선택 옵션에서 Node.js선택합니다. ./.vscode/launch.json 파일에 새 구성이 표시됩니다.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.js",
}
]
}
이 Contoso 애플리케이션의 경우 여러 코드 파일을 실행하여 몇 가지 추가 속성을 추가합니다. 프로그램 속성 파일 이름을 ${file}로 변경합니다. 이렇게 하면 현재 활성 JavaScript 파일을 디버그할 수 있습니다. 애플리케이션에 매개 변수를 전달해야 하는 경우 args 속성을 추가합니다. 이 값은 Node.js 런타임에서 사용할 수 있는 process.argv 속성에서 사용할 수 있습니다.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
// ${file} is replaced with active file's name
"program": "${workspaceFolder}/${file}",
// these values are available as process.argv
"args": ["abc", "1"],
}
]
}
중단점 설정
디버그를 시작하기 전에 애플리케이션 코드에서 중단점을 설정해야 합니다. 이렇게 하려면 실행을 일시 중지하려는 문의 왼쪽 여백을 클릭합니다. 빨간색 점이 표시됩니다.
디버그 시작
디버깅을 시작하려면 실행 메뉴에서 디버깅 시작을 선택하거나 디버거, F5를 시작합니다. 외부 터미널을 사용하는 경우 새 터미널 창이 표시됩니다. Visual Studio Code의 출력 창에 디버거 출력이 나타납니다.
디버거가 애플리케이션의 중단점에 도달하면 실행이 일시 중지되고 중단점 문이 강조 표시됩니다. 실행 및 디버그 탐색기의 Windows를 사용하면 로컬 및 전체 변수 및 호출 스택의 값을 검사하고 설정할 수 있습니다. 조사식 창의 변수 및 식실행이 진행됨에 따라 평가되고 표시되는 조사식을 추가할 수도 있습니다.
| 항목 | 설명 |
|---|---|
| 1 - 변수 | 로컬 및 전체 범위의 모든 변수 |
| 2- 조사식 | 실행 중에 조사할 변수 추가 |
| 3- 호출 스택 | 현재 시점에 있는 애플리케이션의 실행 스택 |
| 4- 중단점 | 애플리케이션에 설정된 모든 중단점 |
| 5- 디버그 도구 모음 | 이 도구 모음에는 코드를 단계별로 하나씩 실행할 수 있는 명령이 포함되어 있습니다. 문에 함수 호출이 포함된 경우 해당 함수를 한 단계씩 실행하거나 함수 단위로 실행할 수 있습니다. 프로시저 나가기 명령은 함수가 완료될 때까지 계속 실행됩니다. 디버거가 다른 중단점에 도달하거나 애플리케이션이 완료될 때까지 애플리케이션을 계속 실행할 수도 있습니다. |
| 6 - 디버그 콘솔 | 모든 콘솔 문 값을 참조하세요. |
다음 몇 가지 연습에서 JavaScript 코드를 추가할 때 무엇이 잘못되었는지 확인하기 위해 코드를 디버그해야 할 수도 있습니다. 필요한 경우 이 단원으로 돌아갑니다.