[Angular] 설치 & 프로젝트 생성과 실행

📌Node와 TypeScript 설치

먼저 node와 typescript는 설치되어 있어야 합니다.
저는 window를 사용하고 있어 윈도우 기준으로 작성하겠습니다.

✅node 다운로드 받으러 가기

CLI를 사용하기 위해서 아래의 버전 이상으로 다운받아야 합니다.

Node.js 6.9.0
npm 3.0.0

node 설치가 완료되었다면 터미널에서 npm -v로 버전을 확인할 수 있습니다.

node를 설치했다면 아래의 명령어로 타입스크립트를 설치합니다.

npm install –g typescript

📌Angular CLI 설치

Angular CLI는 사용자가 하나하나 파일을 만들 필요 없이 명령어 하나로 프로젝트 생성작업이 자동화 되어있고, 알아서 프로젝트의 구성요소를 추가해주는등 개발환경 구축에 도움을 주기 때문에 설치합니다.

최신 버전의 CLI 설치

npm install -g @angular/cli

CLI 삭제

npm uninstall -g @angular/cli

버전 별CLI 설치

npm install -g @angular@cli@"버전"

이제 CLI 설치가 완료 되었다면 ng명령을 사용할 수 있습니다. 아래의 명령어로 버전을 확인해봅니다.

ng --version

📌프로젝트 생성

ng new 프로젝트명

이 명령어를 실행하면 npm의존성 파일들이 설치되면서 프로젝트 이름의 폴더가 하나 생깁니다. 생성도중 앵귤러 라우팅의 추가 유무등의 질문이 있는데 엔터를 누를 시에는 기본 값으로 자동 설정되어 생성됩니다.

앵귤러 라우팅의 추가 유무에서 Y를 누르면 routing.module.ts 파일이 추가되고, N를 누르면 파일은 생성되지 않지만 라우팅 기능이 app.module.ts에 포함 됩니다.

📌프로젝트 실행

ng serve --port 9001 --o

이 명령어는 타입 스크립트 파일을 자바스크립트 파일로 자동 변환해서 실시간으로 컴파일 합니다. --port 옵션을 사용하면 뒤에 지정한 포트번호로(예시에서는 9001) 변경할 수 있고 뒤에 --o 옵션을 붙이면 open의 축약어로, 실행과 동시에 브라우저에서 열립니다.

---

이렇게 앵귤러로 설치하고 프로젝트를 생성하는 과정까지 해봤는데요, 이후 프로젝트를 진행하고 코드를 작성할 때를 위해서 어느 버전으로 작업할지 꼭 맞춰두는게 중요하다는 생각이 들었습니다. 당연한 이야기지만 저는 책을 보고 실습하던 도중 예제를 보고 실습한 코드가 책과 똑같았는데도 오류가 떠서 (최신버전의 앵귤러가 좀 더 엄격해져서 타입을 명시하지 않아 에러가 나거나 기타등등...)
버전을 중간에 낮춰보려고 했는데 실패했습니다. ... ...
버전별 앵귤러의 특징도 잘 알아두어야 할 것 같아요. 버전이 너무 많습니다.😭
언젠간 꼭 해결해서 작성하겠습니다.