Visual Studio Code에서 Angular 사용

Angular는 Google에서 개발하고 유지 관리하는 인기 있는 웹 개발 플랫폼입니다. Angular는 기본 프로그래밍 언어로 TypeScript를 사용합니다. Visual Studio Code 편집기는 TypeScript IntelliSense 및 코드 탐색을 기본적으로 지원하므로 다른 확장을 설치하지 않고도 Angular 개발을 수행할 수 있습니다.

Welcome to app

참고: Angular 개발을 시작하는 데 도움이 되도록 유용한 확장, 설정 및 코드 조각이 포함된 Angular 프로필 템플릿을 사용할 수 있습니다.

Angular 시작하기

이 튜토리얼에서는 Angular CLI를 사용할 것입니다. 명령줄 인터페이스를 설치 및 사용하고 Angular 애플리케이션 서버를 실행하려면 Node.js JavaScript 런타임과 npm(Node.js 패키지 관리자)이 설치되어 있어야 합니다. npm은 Node.js와 함께 제공되며 Node.js 다운로드에서 설치할 수 있습니다.

팁: Node.js와 npm이 컴퓨터에 올바르게 설치되었는지 테스트하려면 node --version 및 npm --version을 입력하십시오.

Angular CLI를 설치하려면 터미널 또는 명령 프롬프트에서 다음을 입력하십시오.

npm install -g @angular/cli

설치하는 데 몇 분이 걸릴 수 있습니다. 이제 다음을 입력하여 새 Angular 애플리케이션을 만들 수 있습니다.

ng new my-app

my-app은 애플리케이션 폴더의 이름입니다. ng new 명령은 생성된 애플리케이션에 대한 옵션을 묻습니다. Enter 키를 눌러 기본값을 수락합니다. 이렇게 하면 TypeScript로 Angular 애플리케이션을 만들고 종속성을 설치하는 데 몇 분이 걸릴 수 있습니다.

새 폴더로 이동하여 ng serve를 입력하여 웹 서버를 시작하고 브라우저에서 애플리케이션을 열어 Angular 애플리케이션을 빠르게 실행해 보겠습니다.

cd my-app
ng serve

브라우저에서 https://:4200에 "Welcome to app!!"이 표시되어야 합니다. VS Code로 애플리케이션을 살펴보는 동안 웹 서버를 계속 실행해 두겠습니다.

Angular 애플리케이션을 VS Code에서 열려면 다른 터미널(또는 명령 프롬프트)을 열고 my-app 폴더로 이동한 다음 code .를 입력합니다.

cd my-app
code .

구문 강조 및 괄호 일치

이제 src\app 폴더를 확장하고 app.component.ts 파일을 선택합니다. VS Code가 다양한 소스 코드 요소에 대한 구문 강조를 제공하고 괄호에 커서를 놓으면 일치하는 괄호도 선택됨을 알 수 있습니다.

angular bracket matching

IntelliSense

파일에서 텍스트 위로 마우스를 가져가면 VS Code가 소스 코드의 주요 항목에 대한 정보를 제공한다는 것을 알게 될 것입니다. 변수, 클래스 및 Angular 데코레이터와 같은 항목은 이러한 정보가 제공되는 몇 가지 예입니다.

angular decorator hover

app.component.ts에 입력하기 시작하면 스마트 제안 및 코드 조각이 표시됩니다.

angular suggestions

정보 버튼(i)을 클릭하면 더 많은 설명서가 포함된 플라이아웃이 표시됩니다.

angular intellisense

VS Code는 코드 인텔리전스(IntelliSense)에 TypeScript 언어 서비스를 사용하며 자동 형식 가져오기(ATA)라는 기능을 갖추고 있습니다. ATA는 package.json에 참조된 npm 모듈에 대한 npm 형식 선언 파일(*.d.ts)을 다운로드합니다.

정의로 이동, 정의 미리보기

TypeScript 언어 서비스를 통해 VS Code는 **정의로 이동**(F12) 또는 **정의 미리보기**(⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10))를 통해 편집기에서 형식 정의 정보를 제공할 수도 있습니다. app.module.ts 파일을 열고 bootstrap 속성 선언에서 AppComponent 위에 커서를 놓고 마우스 오른쪽 버튼을 클릭한 다음 **정의 미리보기**를 선택합니다. 미리보기 창이 열리고 app.component.ts의 AppComponent 정의가 표시됩니다.

angular peek definition

미리보기 창을 닫으려면 Escape 키를 누릅니다.

Hello World

샘플 애플리케이션을 "Hello World"로 업데이트해 보겠습니다. app.component.ts 파일로 돌아가 AppComponent의 title 문자열을 "Hello World"로 변경합니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

app.component.ts 파일을 저장하면 실행 중인 서버 인스턴스가 웹 페이지를 업데이트하고 "Welcome to Hello World!!"가 표시됩니다.

팁: VS Code는 기본적으로 일정 시간 후에 파일을 저장하는 자동 저장 기능을 지원합니다. 파일 메뉴에서 **자동 저장** 옵션을 확인하여 자동 저장을 켜거나 files.autoSave 사용자 설정을 직접 구성하십시오.

hello world

Angular 디버깅

클라이언트 측 Angular 코드를 디버깅하기 위해 내장 JavaScript 디버거를 사용할 것입니다.

참고: 이 튜토리얼에서는 Edge 브라우저가 설치되어 있다고 가정합니다. Chrome을 사용하여 디버깅하려면 시작 시 type을 chrome으로 바꾸십시오. Firefox 브라우저용 디버거도 있습니다.

중단점 설정

app.component.ts에 중단점을 설정하려면 줄 번호 왼쪽의 여백을 클릭합니다. 이렇게 하면 빨간색 원으로 표시되는 중단점이 설정됩니다.

set a breakpoint

디버거 구성

먼저 디버거를 구성해야 합니다. 그렇게 하려면 **실행 및 디버그** 보기(⇧⌘D (Windows, Linux Ctrl+Shift+D))로 이동하여 **launch.json 파일 만들기** 링크를 선택하여 launch.json 디버거 구성 파일을 만듭니다. **디버거 선택** 드롭다운 목록에서 **웹 앱(Edge)**을 선택합니다. 이렇게 하면 프로젝트의 새 .vscode 폴더에 launch.json 파일이 생성되며 웹 사이트를 시작하는 구성이 포함됩니다.

예제에서는 한 가지 변경이 필요합니다. url의 포트를 8080에서 4200으로 변경합니다. launch.json은 다음과 같아야 합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

F5 키 또는 녹색 화살표를 눌러 디버거를 시작하고 새 브라우저 인스턴스를 엽니다. 중단점이 설정된 소스 코드는 디버거가 연결되기 전에 시작 시 실행되므로 페이지를 새로 고칠 때까지 중단점에 도달하지 않습니다. 페이지를 새로 고치면 중단점에 도달해야 합니다.

hit breakpoint

소스 코드를 단계별로 실행(F10)하고 AppComponent와 같은 변수를 검사하고 클라이언트 측 Angular 애플리케이션의 호출 스택을 볼 수 있습니다.

debug variable

디버거 및 사용 가능한 옵션에 대한 자세한 내용은 브라우저 디버깅에 대한 설명서를 참조하십시오.

Angular 프로필 템플릿

프로필을 사용하면 현재 프로젝트 또는 작업에 따라 확장, 설정 및 UI 레이아웃을 빠르게 전환할 수 있습니다. Angular 개발을 시작하는 데 도움이 되도록 유용한 확장과 설정이 포함된 큐레이션된 프로필인 Angular 프로필 템플릿을 사용할 수 있습니다. 프로필 템플릿을 그대로 사용하거나 자신만의 워크플로에 맞게 추가로 사용자 지정하는 시작점으로 사용할 수 있습니다.

프로필 > 프로필 만들기... 드롭다운을 통해 프로필 템플릿을 선택합니다.

프로필 템플릿을 선택하면 설정 및 확장을 검토하고 새 프로필에 포함하지 않으려는 개별 항목을 제거할 수 있습니다. 템플릿을 기반으로 새 프로필을 만든 후 설정, 확장 또는 UI에 대한 변경 사항은 프로필에 유지됩니다.

Angular 확장

VS Code가 기본적으로 제공하는 기능 외에도 더 큰 기능을 위해 VS Code 확장을 설치할 수 있습니다.

위의 확장 타일을 클릭하면 Marketplace에서 설명과 리뷰를 읽을 수 있습니다.

다른 Angular 확장을 찾으려면 확장 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))를 열고 'angular'를 입력하여 필터링된 Angular 확장 목록을 확인하십시오.

angular extensions

커뮤니티에서는 유용한 확장을 번들로 묶어(예: 린터, 디버거 및 스니펫) 단일 다운로드로 제공하는 "확장 팩"을 만들기도 했습니다. 사용 가능한 Angular 확장 팩을 보려면 필터에 "extension packs" 범주를 추가하십시오(angular @category:"extension packs").

12/10/2025