Share via

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

  • 아티클

Visual Studio를 사용하면 Node.js 프로젝트를 손쉽게 만들고 IntelliSense 및 Node.js를 지원하는 다른 기본 제공 기능을 사용할 수 있습니다. 이 자습서에서는 Visual Studio 템플릿에서 Node.js 웹앱 프로젝트를 만듭니다. 그런 다음, React를 사용하여 간단한 앱을 만듭니다.

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

  • Node.js 프로젝트 만들기
  • NPM 패키지 추가
  • 앱에 React 코드 추가
  • JSX 트랜스파일
  • 디버거 연결

Important

Visual Studio 2022부터 권장되는 CLI 기반 프로젝트 형식을 사용하여 React 프로젝트를 만들 수도 있습니다. 이 문서의 일부 정보는 Node.js 프로젝트 형식(.njsproj)에만 적용됩니다. 이 문서에 사용된 템플릿은 Visual Studio 2022 버전 17.8 미리 보기 2부터 더 이상 사용할 수 없습니다.

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

  • Node.js란 무엇인가요?

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

  • npm이란?

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

  • React란?

    React는 UI(사용자 인터페이스)를 만들기 위한 프런트 엔드 프레임워크입니다.

  • JSX란?

    JSX는 일반적으로 UI 요소를 설명하기 위해 React와 함께 사용되는 JavaScript 구문 확장입니다. JSX 코드를 일반 JavaScript로 트랜스파일해야만 브라우저에서 실행할 수 있습니다.

  • Webpack이란?

    webpack은 브라우저에서 실행할 수 있도록 JavaScript 파일을 번들로 제공하며, 다른 리소스와 자산을 변환하거나 패키지할 수도 있습니다. webpack은 Babel 또는 TypeScript 같은 컴파일러를 지정하여 JSX 또는 TypeScript 코드를 일반 JavaScript로 트랜스파일할 수 있습니다.

필수 조건

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

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

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

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

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

      Screenshot showing the Node j s workload selected in the Visual Studio Installer.

    Visual Studio가 설치되어 있지만 Node.js 워크로드가 필요한 경우:

    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 18.5.0으로 테스트되었습니다.

이 자습서는 Node.js 12.6.2를 사용하여 테스트되었습니다.

프로젝트 만들기

먼저 Node.js 웹앱 프로젝트를 만듭니다.

  1. Visual Studio를 열고 Esc 키를 눌러 시작 창을 닫습니다.

  2. Ctrl+Q를 누르고 검색 상자에 node.js를 입력한 후 드롭다운 목록에서 빈 Node.js 웹 애플리케이션 - JavaScript를 선택합니다.

    이 자습서에서는 TypeScript 컴파일러를 사용하지만 단계에서는 JavaScript 템플릿으로 시작해야 합니다.

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

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

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

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

    Screenshot showing the Node.js project structure in Solution Explorer.

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

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

      프로젝트 속성 및 환경 변수를 보고 설정하려면 Alt+Enter를 누르거나 프로젝트를 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 속성을 선택합니다. 프로젝트 파일이 Node.js 프로젝트 소스에 사용자 지정 변경을 수행하지 않으므로 다른 개발 도구로 작업할 수 있습니다.

    • npm 노드(3)에는 설치된 모든 npm 패키지가 표시됩니다.

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

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

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

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

  1. Visual Studio를 엽니다.

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

    Esc 키를 눌러 시작 창을 닫습니다. Ctrl + Q 입력하여 검색 상자를 열고 Node.js를 입력한 다음, 빈 Node.js 웹 애플리케이션 - JavaScript를 선택합니다. (이 자습서에서는 TypeScript 컴파일러를 사용하지만 단계에서는 JavaScript 템플릿으로 시작해야 합니다.)

    표시되는 대화 상자에서 만들기를 선택합니다.

    빈 Node.js 웹 애플리케이션 프로젝트 템플릿이 표시되지 않으면 Node.js 개발 워크로드를 추가해야 합니다. 자세한 지침은 필수 조건을 참조하세요.

    Visual Studio가 새 솔루션을 만들고 프로젝트를 엽니다.

    Screenshot showing the Node.js project in Solution Explorer

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

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

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

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

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

NPM 패키지 추가

이 앱이 제대로 실행되려면 다음 npm 모듈이 필요합니다.

  • react
  • react-dom
  • Express
  • 경로
  • ts-loader
  • typescript
  • webpack
  • webpack-cli

패키지를 설치하려면 다음을 수행합니다.

  1. 솔루션 탐색기에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 새 npm 패키지 설치를 선택합니다.

  2. 새 npm 패키지 설치 대화 상자에서 react 패키지를 검색하고 패키지 설치를 선택하여 설치합니다.

    Screenshot that shows installing an npm package.

    Screenshot that shows installing an npm package.

    새 npm 패키지 설치 대화 상자에서 최신 패키지 버전 설치 또는 버전 지정을 선택할 수 있습니다. 현재 버전을 설치하도록 선택했지만 나중에 예기치 않은 오류가 발생하면 다음 단계에 나열된 정확한 패키지 버전을 설치해 보세요.

    Visual Studio 아래쪽 창의 출력 창에는 패키지 설치 진행률이 표시됩니다. 보기>출력을 선택하거나 Ctrl+Alt+O를 눌러 출력 창을 엽니다. 출력 창의 출력 보기 선택 필드에서 Npm을 선택합니다.

    설치되면 react 패키지가 솔루션 탐색기의 npm 노드 아래에 표시됩니다.

    프로젝트의 package.json 파일은 패키지 버전을 포함하여 새 패키지 정보로 업데이트됩니다.

UI를 사용하여 나머지 패키지를 한 번에 하나씩 검색하고 추가하는 대신, package.json에 필요한 패키지 코드를 붙여넣을 수 있습니다.

  1. 솔루션 탐색기에서 Visual Studio 편집기에 package.json을 엽니다. 파일의 끝 앞에 다음 dependencies 섹션을 추가합니다.

    "dependencies": {
  "express": "^4.18.2",
  "path": "^0.12.7",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "ts-loader": "^9.4.2",
  "typescript": "^5.0.2",
  "webpack": "^5.76.3",
  "webpack-cli": "^5.0.1"
},

    파일에 이미 dependencies 섹션이 있는 경우 앞에 나온 JSON 코드로 바꿉니다. package.json 파일 사용에 대한 자세한 내용은 package.json 구성을 참조하세요.

  2. Ctrl+S를 누르거나 파일>package.json 저장을 선택하여 변경 내용을 저장합니다.

  3. 솔루션 탐색기에서 프로젝트의 npm 노드를 마우스 오른쪽 단추로 클릭하고 npm 패키지 설치를 선택합니다.

    이 명령은 npm 설치 명령을 직접 실행하여 packages.json에 나열된 모든 패키지를 설치합니다.

    아래쪽 창에서 출력 창을 선택하여 설치 진행률을 확인합니다. 설치하는 데 몇 분 정도 걸릴 수 있으며 즉시 결과를 확인하지 못할 수도 있습니다. 출력 창의 출력 보기 선택 필드에서 Npm을 선택합니다.

    설치 후 npm 모듈은 솔루션 탐색기의 npm 노드에 표시됩니다.

    Screenshot that shows installed npm packages.

    Screenshot that shows installed npm packages.

    참고 항목

    명령줄을 사용하여 npm 패키지를 설치할 수도 있습니다. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 여기서 명령 프롬프트 열기를 선택합니다. 표준 Node.js 명령을 사용하여 패키지를 설치합니다.

프로젝트 파일 추가

다음으로, 프로젝트에 네 개의 새 파일을 추가합니다.

  • app.tsx
  • webpack-config.js
  • index.html
  • tsconfig.json

이 간단한 앱에 대해서는 프로젝트 루트에서 새 프로젝트 파일을 추가합니다. 대부분 앱의 경우, 하위 폴더에 파일을 추가하고 상대 경로 참조를 적절하게 조정합니다.

  1. 솔루션 탐색기에서 프로젝트 이름을 선택하고 Ctrl+Shift+A를 누르거나 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 추가>새 항목을 선택합니다.

    모든 항목 템플릿이 표시되지 않으면 모든 템플릿 표시를 선택한 다음 항목 템플릿을 선택합니다.

  2. 새 항목 추가 대화 상자에서 TypeScript JSX 파일을 선택하고 app.tsx 이름을 입력하고 추가 또는 확인을 선택합니다.

  3. 이 단계를 반복하여 webpack-config.js라는 JavaScript 파일을 추가합니다.

  4. 이 단계를 반복하여 index.html이라는 HTML 파일을 추가합니다.

  5. 이 단계를 반복하여 tsconfig.json이라는 TypeScript JSON 구성 파일을 추가합니다.

앱 코드 추가

  1. 솔루션 탐색기에서 server.js를 열고 기존 코드를 다음 코드로 바꿉니다.

    'use strict';
var path = require('path');
var express = require('express');

var app = express();

var staticPath = path.join(__dirname, '/');
app.use(express.static(staticPath));

// Allows you to set port in the project properties.
app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
    console.log('listening');
});

    이전 코드는 Express를 사용하여 웹 애플리케이션 서버로 Node.js를 시작합니다. 코드는 프로젝트 속성에서 구성된 포트 번호로 포트를 설정합니다. 기본적으로 1337입니다. 프로젝트 속성을 열어야 하는 경우 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 속성을 선택합니다.

  2. app.tsx를 열고 다음 코드를 추가합니다.

    declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

export class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to React!!</h1>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

    위의 코드는 JSX 구문과 React를 사용하여 메시지를 표시합니다.

  3. index.html을 열고 body 섹션을 다음 코드로 바꿉니다.

    <body>
    <div id="root"></div>
    <!-- scripts -->
    <script src="./dist/app-bundle.js"></script>
</body>

    이 HTML 페이지는 일반 JavaScript로 트랜스파일된 JSX 및 React 코드를 포함하는 app-bundle.js를 로드합니다. 현재 app-bundle.js는 빈 파일입니다. 다음 섹션에서 코드를 트랜스파일하는 옵션을 구성합니다.

Webpack 및 TypeScript 컴파일러 옵션 구성

다음으로 Webpack 구성 코드를 추가하여 webpack-config.js. JSX를 일반 JavaScript로 묶고 변환하기 위해 입력 파일, app.tsx 및 출력 파일( app-bundle.js)을 지정하는 간단한 Webpack 구성을 추가합니다. 트랜스파일하려면 일부 TypeScript 컴파일러 옵션을 구성합니다. 이 기본 구성 코드는 Webpack 및 TypeScript 컴파일러를 소개합니다.

  1. 솔루션 탐색기에서 webpack-config.js를 열고 다음 코드를 추가합니다.

    module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

    Webpack 구성 코드는 TypeScript 로더를 사용하여 JSX를 트랜스파일하도록 Webpack에 지시합니다.

  2. tsconfig.json을 열고 콘텐츠를 다음 코드로 대체하여 TypeScript 컴파일러 옵션을 지정합니다.

    {
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}

    이 코드는 app.tsx를 소스 파일로 지정합니다.

  3. Ctrl+Shift+S를 누르거나 파일>모두 저장을 선택하여 모든 변경 내용을 저장합니다.

JSX 트랜스파일

  1. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 여기서 명령 프롬프트 열기를 선택합니다.

  2. 명령 프롬프트에서 다음 Webpack 명령을 입력합니다.

    node_modules\.bin\webpack --config webpack-config.js

    명령 프롬프트 창에 결과가 표시됩니다.

    Screenshot that shows results of running the Webpack command.

    위의 출력 대신 오류를 참조하면 앱이 작동하기 전에 해당 오류를 해결해야 합니다. npm 패키지 버전이 이 자습서에서 지정한 버전과 다른 경우 오류가 발생할 수 있습니다. 오류를 해결하려면 다음을 시도합니다.

    • 아직 없는 경우 이전 단계에서 표시된 정확한 버전을 사용합니다.

      또는 오류가 계속 표시되면 다음을 수행합니다.

    • 솔루션 탐색기 npm 노드를 마우스 오른쪽 단추로 클릭하고 npm 패키지 설치를 선택하여 최신 버전의 npm 패키지를 설치합니다.

    하나 이상의 패키지 버전이 더 이상 사용되지 않으며 오류가 발생하는 경우 오류를 해결하려면 최신 버전을 설치해야 할 수 있습니다. package.json을 사용하여 npm 패키지 버전을 제어하는 방법에 대한 자세한 내용은 package.json configuration을 참조하세요.

  3. 솔루션 탐색기에서 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 추가>기존 폴더를 선택합니다.

  4. dist 폴더를 선택한 후 폴더 선택을 선택합니다.

    Visual Studio가 app-bundle.js 및 app-bundle.js.map을 포함하는 dist 폴더를 프로젝트에 추가합니다.

  5. app-bundle.js를 열고 트랜스파일된 JavaScript 코드를 봅니다.

  6. 외부에서 수정된 파일을 다시 로드할지 여부를 묻는 메시지가 표시되면 모두 예를 선택합니다.

    Screenshot showing a prompt whether to load modified files.

app.tsx를 변경할 때마다 Webpack 명령을 다시 실행해야 합니다. 이 단계를 자동화하기 위해 빌드 스크립트를 추가하여 JSX를 트랜스파일할 수 있습니다.

빌드 스크립트를 추가하여 JSX를 트랜스파일

Visual Studio 2019 버전부터 빌드 스크립트가 필요합니다. 앞의 섹션에서 표시된 것처럼, 명령줄에서 JSX를 트랜스파일하기보다 Visual Studio에서 빌드할 때 JSX를 트랜스파일할 수 있습니다.

  1. package.json을 열고 dependencies 섹션 뒤에 다음 섹션을 추가합니다.

    "scripts": {
 "build": "webpack-cli --config webpack-config.js"
}

  2. 변경 내용을 저장합니다.

앱 실행

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

    Screenshot that shows selecting Microsoft Edge as the debug target.

    Screenshot that shows selecting Chrome as the debug target.

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

  2. 앱을 실행하려면 F5 키를 누르거나 녹색 화살표 단추를 선택하거나 디버그>디버깅 시작을 선택합니다.

    디버거 수신 대기 포트를 보여 주는 Node.js 콘솔 창이 열립니다.

    Visual Studio는 server.js 시작 파일을 시작하여 앱을 시작합니다.

    Screenshot that shows running React in a browser.

  3. 브라우저와 콘솔 창을 닫습니다.

중단점 설정 및 앱 실행

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

  1. server.js에서 staticPath 선언 왼쪽의 여백을 클릭해 중단점을 설정합니다.

    Screenshot showing a breakpoint set for the staticPath declaration in server dot j s.

    Screenshot showing a breakpoint set for the staticPath declaration in server dot j s.

  2. 앱을 실행하려면 F5 키를 누르거나 디버그>디버깅 시작을 선택합니다.

    디버거는 설정한 중단점에서 일시 중지되고 현재 문은 강조 표시됩니다. 이제 로컬 및 조사식 창과 같은 디버거 창을 사용하여 현재 범위 내에 있는 변수를 가리킴으로써 앱 상태를 검사할 수 있습니다.

  3. 앱을 계속 실행하려면 F5 키를 누르고 디버그 도구 모음에서 계속을 선택하거나, 디버그>계속을 선택합니다.

    Chrome 개발자 도구 또는 Microsoft Edge용 F12 도구를 사용하려는 경우 F12를 누릅니다. 이러한 도구를 사용하여 DOM을 검사하고 JavaScript 콘솔을 사용하여 앱과 상호 작용할 수 있습니다.

  4. 브라우저와 콘솔 창을 닫습니다.

클라이언트 쪽 React 코드에서 중단점 설정 및 적중

이전 섹션에서 서버 쪽 Node.js 코드에 디버거를 연결했습니다. 클라이언트 쪽 React 코드에서 중단점에 연결하고 중단점을 적중하려면 디버거를 올바른 프로세스에 연결해야 합니다. 다음과 같이 디버깅에 브라우저를 사용하도록 설정하고 프로세스를 연결할 수 있습니다.

디버깅에 브라우저 사용

Microsoft Edge 또는 Google Chrome을 사용할 수 있습니다. 대상 브라우저의 모든 창을 닫습니다. Microsoft Edge의 경우 Chrome의 모든 인스턴스도 종료합니다. 두 브라우저는 모두 Chromium 코드베이스를 공유하기 때문에 두 브라우저를 모두 종료하면 최상의 결과를 얻을 수 있습니다.

다른 브라우저 인스턴스에서는 디버깅을 사용하도록 설정하여 브라우저를 열지 못하게 할 수 있습니다. 브라우저 확장이 전체 디버그 모드를 방지할 수 있습니다. 작업 관리자를 사용하여 실행 중인 모든 Chrome 인스턴스를 찾아서 종료해야 할 수 있습니다.

디버깅을 사용하도록 설정된 상태로 브라우저를 시작하려면 다음을 수행합니다.

  1. 디버그 도구 모음의 드롭다운 목록에서 브라우저 선택을 선택합니다.

  2. 선호하는 브라우저가 강조 표시된 브라우저 선택 화면에서 추가를 선택합니다.

  3. 인수 필드에 --remote-debugging-port=9222 플래그를 입력합니다.

  4. 브라우저에 Edge with debugging 또는 Chrome with debugging 같은 새 식별 이름을 지정하고 확인을 선택합니다.

  5. 브라우저 선택 화면에서 찾아보기를 선택합니다.

    Screenshot that shows creating an Edge browser with debugging enabled.

  • 또는 Windows 시작 단추를 마우스 오른쪽 단추로 클릭하여 실행 명령을 열고 다음을 입력할 수 있습니다.

    msedge --remote-debugging-port=9222

    또는

    chrome.exe --remote-debugging-port=9222

디버깅을 사용하도록 설정된 상태로 브라우저가 시작됩니다. 앱이 아직 실행되고 있지 않으므로 브라우저 페이지가 비어 있습니다.

클라이언트 쪽 스크립트에 디버거 연결

  1. Visual Studio 편집기에서 app-bundle.js 또는 app.tsx 소스 코드에 중단점을 설정합니다.

    • app-bundle.js의 경우 render() 함수에 중단점을 설정합니다. app-bundle.js 파일에서 render() 함수를 찾으려면 Ctrl+F를 누르거나 편집>찾기 및 바꾸기>빠른 찾기를 선택하고 검색 필드에 render를 입력합니다.

      Screenshot showing a breakpoint set in the render function in app-bundle dot j s.

      Screenshot showing a breakpoint set in the render function in app-bundle dot j s.

    • app.tsx의 경우 return 문에서 render() 함수 내부에 중단점을 설정합니다.

      Screenshot showing a breakpoint set on the return statement of the render function in app dot t s x.

      Screenshot showing a breakpoint set on the return statement of the render function in app dot t s x.

      app.tsx에 중단점을 설정하는 경우 webpack-config.js도 업데이트하여 다음 코드를 바꾸고 변경 내용을 저장합니다.

      이 코드를 바꿉니다.

      output: {
    filename: "./app-bundle.js",
},

      다음 코드를 사용합니다.

      output: {
    filename: "./app-bundle.js",
    devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
},

      이 개발 전용 설정은 Visual Studio에서 디버깅을 사용하도록 설정합니다. 기본적으로 원본 맵 파일의 Webpack 참조에는 visual Studio에서 원본 파일 app.tsx를 찾을 수 없는 webpack:/// 접두사도 포함됩니다. 이 설정은 앱을 빌드할 때 소스 맵 파일 app-bundle.js.map에서 생성된 참조를 재정의합니다. 특히 이 설정은 소스 파일에 대한 참조를 webpack:///./app.tsx에서 디버깅을 사용하도록 설정하는 ./app.tsx로 변경합니다.

  2. Visual Studio에서 디버그 대상으로 대상 브라우저를 선택한 다음, Ctrl+F5를 누르거나 디버그>디버깅하지 않고 시작을 선택하여 브라우저에서 앱을 실행합니다.

    식별 이름을 사용하여 디버깅 사용 브라우저 구성을 만든 경우 해당 브라우저를 디버그 대상으로 선택합니다.

    앱이 새 브라우저 탭에서 열립니다.

  3. 디버그>프로세스에 연결을 선택하거나 Ctrl+Alt+P를 누릅니다.

    팁

    처음으로 프로세스에 연결하면 디버그>프로세스에 다시 연결을 선택하거나 Shift+Alt+P를 눌러 동일한 프로세스에 신속하게 다시 연결할 수 있습니다.

  4. 프로세스에 연결 대화 상자에서 연결할 수 있는 브라우저 인스턴스의 필터링된 목록을 가져옵니다.

    대상 브라우저에 대한 올바른 디버거(JavaScript(Chrome) 또는 JavaScript(Microsoft Edge - Chromium))가 연결 대상 필드에 나타나는지 확인합니다. 필터 상자에 chrome 또는 edge를 입력하여 결과를 필터링합니다.

  5. 올바른 호스트 포트(이 예제에서는 localhost)를 사용하여 브라우저 프로세스를 선택합니다. 올바른 프로세스를 선택하는 데 도움이 되도록 포트 번호 1337 또는 localhost가 제목 필드에 나타날 수도 있습니다.

  6. 첨부를 선택합니다.

    다음 예에서는 Microsoft Edge 브라우저의 프로세스에 연결 창을 보여 줍니다.

    Screenshot showing the Attach to process dialog box.

    팁

    디버거가 연결되지 않고 프로세스에 연결할 수 없습니다. 현재 상태에서는 작업을 수행할 수 없습니다.라는 메시지가 표시되는 경우 작업 관리자를 사용하여 대상 브라우저의 모든 인스턴스를 닫은 후 브라우저를 디버깅 모드에서 시작합니다. 실행 중일 수 있는 브라우저 확장 프로그램이 전체 디버그 모드를 방지할 수 있습니다.

  7. 중단점이 있는 코드가 이미 실행됐기 때문에 중단점을 적중하려면 브라우저 페이지를 새로 고치기 합니다.

    사용자 환경, 브라우저 상태 및 이전에 수행한 단계에 따라 app-bundle.js에서 중단점이나 app.tsx에서 매핑된 위치를 적중할 수 있습니다. 어느 경우든 단계별 코드를 실행하고 변수를 검사할 수 있습니다.

    디버거가 일시 중지된 동안 변수를 가리키고 디버거 창을 사용하여 앱 상태를 검사할 수 있습니다. 코드를 단계별로 실행하려면 F11 키를 누르거나 디버그>한 단계씩 코드 실행을 선택하거나, F10 키를 누르거나 디버그>단위 실행을 선택합니다. 코드를 계속 실행하려면 F5 키를 누르거나 계속을 선택합니다. 기본 디버깅 기능에 대한 자세한 내용은 디버거 소개를 참조하세요.

    • app.tsx에서 코드를 중단할 수 없는 경우, 이전 단계에서 설명한 대로 프로세스에 연결을 사용하여 디버거에 연결을 다시 시도해 보세요. 환경이 올바르게 설정되었는지 확인합니다.

      • 작업 관리자를 사용하여 Chrome 확장을 포함한 모든 브라우저 인스턴스를 닫습니다. 디버그 모드에서 브라우저를 시작해야 합니다.

      • 소스 맵 파일에 Visual Studio 디버거가 app.tsx를 찾을 수 없도록 하는 webpack:///./app.tsx가 아니라 ./app.tsx에 대한 참조를 포함하도록 합니다.

      또는 app.tsx에서 debugger; 문을 사용해 보거나 Chrome 개발자 도구 또는 Microsoft Edge용 F12 도구에서 중단점을 설정해 봅니다.

    • app-bundle.js에서 코드를 중단할 수 없는 경우 app-bundle.js.map 소스 맵 파일을 제거합니다.

다음 단계

앱을 Linux App Service에 배포