Angular 프로젝트 만들기

전제

· Node.js가 설치되어 있음
· Angular Cli가 설치되어 있음
· VSCode가 설치되어 있음

1. Angular 프로젝트 생성 및 시작

1) VSCode의 터미널에서 "ng new"명령 실행으로 프로젝트 작성
　　my-app는 임의의 이름으로 좋다

$ ng new my-app

2) 어플리케이션을 기동, 브라우저로 확인
작성한 프로젝트로 이동하여 「ng serve」명령 실행으로 어플리케이션 기동
「-o」옵션으로 기동시에 자동으로 브라우저를 열 수 있다

$ cd my-app
$ ng serve -o

http://localhost:4200에 액세스로 확인


3) 어플리케이션 정지
VSCode 터미널에서 "Ctrl + C"로 중지

2. VSCode에서 디버깅하는 방법

1) 확장 기능(Ctrl+Shift+X)에서 "Debugger for Chrome"설치

2) 「launch.json」을 작성한다
메뉴에서 "실행"-> "구성 열기"-> "Chrome"을 선택하십시오.

3) 디버그 개시
"ng serve"명령으로 프로젝트를 기동 상태로, 메뉴로부터 「실행」->「디버그의 개시(F5)」로 Chrome 기동
멈추고 싶은 파일의 행 번호에 왼쪽을 클릭하는 것으로 브레이크 포인트를 설정할 수 있다
화면에 표시되어 있는 아이콘류로 「재개」 「스텝 인, 아웃」 「정지」를 할 수 있다

4) 변수의 내용 확인
"console.log"를 사용하여 디버그 콘솔에서 변수의 내용을 확인합니다.