[Angular 4/vscode] 2. 프로젝트 생성 및 구동

 

 

이 글은 아래 사이트에서 튜토리얼로 나와있는 투어 프로젝트를 따라 하며, 복습 개념으로 간단하게 정리한 내용입니다.

 

https://angular.io/tutorial

 

 

이전 글에 이어서 진행되는 내용입니다.

 

2020/07/26 - [개발 일지] - [Angular 4/vscode] 1. 설치

[Angular 4/vscode] 설치

 

---

 

 

 

1. 프로젝트 생성

 

프로젝트는 아래와 같이 ng new 프로젝트이름 을 입력하여 생성할 수 있습니다.

 

또한 라우터를 추가로 설치할지, CSS 파일의 포맷은 뭐로 할지와 같은 질문을 하는데

저는 아래와 같이 했습니다.

 

라우터 같은 경우에는 여러 가지 컴포넌트를 사용해 사용자에게 다양한 화면을 보여주는 등의

동작을 하기 위해 필요하긴 한데 나중에 따로 커맨드를 이용하여 추가하기 때문에 우선은 넘어가겠습니다.

 

 

 

진행하시면 입력한 프로젝트 이름으로 폴더가 생성되며, 해당 폴더 안에 프로젝트 기본 구성 파일이 설치됩니다.

 

 

 

 

 

 

2. 프로젝트 구동

 

프로젝트 ng serve 커맨드로 구동시킬 수 있습니다.

 

커맨드 입력 시 프로젝트가 빌드되고, 프로젝트 파일 내용이 변경되면 자동으로 다시 빌드되어

수정 사항을 반영하게 됩니다.

 

접근은 localhost:4200 으로 가능하며, 커맨드를 ng serve --open 으로 입력 시 구동과 동시에

브라우저에서 화면을 띄워줍니다. (TMI)

 

초기 화면은 아래와 같은데, 천천히 둘러보시고 필요 없다! 싶으면 프로젝트 내에 있는

src > app > app.component.html 파일의 내용을 제거하시면 됩니다.

 

이제 여기에다가 투어 프로젝트를 구현하게 됩니다.

 

 

 

 

 

3. 프로젝트 생성 및 구동 끝