[Angular] Node설치부터 Angular 프로젝트 생성까지

[Angular] Node설치부터 Angular 프로젝트 생성까지

목차

1. Node.js 설치

2. Angular 설치

3. 프로젝트 생성 및 확인

1. Node.js 설치

Node.js 사이트에서 Node를 다운로드합니다.

Next만 누르다 보면 어느새 설치가 완료되었습니다.

확인은 cmd창에서 "node -v"를 실행시켜보시면 됩니다.

2. Angular 설치

전 Visutal Studio Code를 사용하고 있습니다.

필요하신 분은 다운로드 후 진행하시면 됩니다.

open Folder를 통해 작업하고자 하는 폴더를 우선 선택합니다.

선택 완료 후 터미널 창을 통해 Angluar를 설치할 수 있습니다.

터미널 창에서 "npm install @angular/cli" 를 입력하시면 angular-cli의 최신 버전을 받을 수 있습니다.

뭔가 주룩주룩 되면서 설치가 다되었다면 "ng version"을 쳐서 확인을 해봅니다.

(컴퓨터는 무엇이든 확인이 되니까요!)

설치한 Node와 Angular의 버전이 표시됩니다.

여기까지가 Angualr 설치의 끝입니다.

참 쉽죠..?

3. 프로젝트 생성 및 확인

프로젝트 생성을 해봅시다.

터미널 창에서 "ng new 원하는프로젝트명" 으로 프로젝트를 생성합니다.

라우팅과 css에 대해서 묻는데 Angular프로젝트를 처음 접해보신다면 yes를 선택하시면 됩니다.

스타일시트는 기본 CSS선택했습니다.(css는 맘대로..!)

패키지 설치가 성공적으로 완료되었습니다. 혹시 이게 안뜬다면 다시 처음부터 차근차근해보세요!

Open Folder 를 통해

만들어진 폴더를 열어봅시다.

Angular 프로젝트의 기본 구성을 확인할 수 있습니다.

자 그렇다면 이제 도화지가 준비된 것입니다.

이 안에서 여러분만의 그림을 그려나가면 멋진 그림이 담긴 프로젝트가 될 것입니다.

그림을 그리기 전 그린 그림을 확인할 수 있어야겠죠..?

터미널 창에서 "ng serve"를 입력하시면 됩니다.

컴파일이 잘됐다고 하네요!

자 그럼 인터넷창에서 "localhost:4200"으로 접근하여 확인해봅시다.

기본적으로 제공해주는 도화지는 이렇게 생긴 것을 확인할 수 있습니다.

다음 포스팅에는 이 도화지에 하나씩 원하는 것을 넣어보는 작업을 해보겠습니다.

from http://bbak-daegari.tistory.com/21 by ccl(A) rewrite - 2021-06-17 22:26:57