on
2. Angular CLI 설치(앵귤러 )
2. Angular CLI 설치(앵귤러 )
Angular CLI
Angular CLI는 Comand Line Interface의 준말로 terminal이나 console에서 명령어를 입력하면 입력한 명령어에 따라 프로젝트를 만들어준다던가 컴포넌트나 라우터, 서비스를 생성해주는 것입니다.
Angualr 및 Angular CLI설치 방법은 Angular 공식 사이트에 더 자세히 나와있습니다.
1. node js 설치
Angular CLI는 node js 프로젝트 이므로 Angular CLI 설치 전에 node js가 필수로 설치되어야 합니다.
주의할 점은 Angular CLI는 node js 버전 6.9.0 이상 에서만 가동됩니다. 다운로드 시 버전 확인을 꼭 해주세요.
node js 웹사이트 주소 : https://nodejs.org/ko/
사이트에 들어가시자마자 보실 수 있는 화면입니다.
웹사이트에서 6.9.0 이상의 파일을 설치해주세요.
저는 글 작성일 당시 가장 최신 버전인 16.11.0 대신 안정적인 14.18.0 버전을 다운로드하였습니다.
다운로드한 파일을 실행해 node js 설치를 진행합니다.
next를 눌러 진행하세요. 체크박스를 클릭해 동의를 한 후 next를 눌러 진행하세요.
저장할 장소를 지정하시고 next 눌러서 설치를 진행해주세요.
체크박스를 클릭하시고 넘어가시면 Python이나 Visual Bulid Tools 설치됩니다. 저는 이미 VScode가 설치되어있는 상태이므로 체크하지 않고 넘어갔습니다.
Install 버튼을 누르고 잠시 기다리시면 위 사진과 같은 화면가 뜨면서 node js 설치가 완료되었음을 알립니다.
실제로 node js가 설치되었는지 확인하시려면 cmd창에서 아래의 명령어를 입력해보세요. (두 개 중 하나만 해도 무방)
node --version
node -v
node js의 설치된 버전이 표시된다면 정상적으로 설치가 된 것입니다.
2. Angular CLI 설치
Angular CLI 설치를 하기 위해 아래 명령어를 터미널이나 cmd창에 입력해주세요.
맥 os 유저분들은 앞에 sudo 붙여주셔야 합니다.
sudo npm install -g @angular/cli (맥 os)
npm install -g @angular/cli (윈도우)
저는 설치하다 보니까
Would you like to share annoymous usage data with the Angular Team at Google under Google's Privacy at https://policies.google.com/privacy? For more detailes and how to change this setting. see https://angular.io/analytics.(y/N).
라고 질문이 뜨는데 익명의 데이터를 구글 개인정보 정책 하에 앵귤러팀과 공유할 거냐고 묻는 것 같아서 그냥 N이라고 하고 설치를 완료했습니다.
Angular cli 설치를 확인하려면 아래 명령어를 입력해주세요.(둘 중 하나만 해도 무방)
npm -v
ng --version
저는 6.14.15 버전의 Angular CLI가 설치되었습니다. CLI 버전을 확인하셨다면 정상적으로 설치가 완료되었습니다.
3. 프로젝트 만들기
새로운 workspace(프로젝트)를 만들기 위해서는 아래의 명령어를 입력해주세요.
ng new 프로젝트명
저는 first-project라는 워크스페이스를 새로 생성하겠습니다.
생성 도중 라우팅 사용 여부에 대한 질문을 합니다. 저는 사용할 것이기 때문에 y를 입력하였습니다.
또 스타일 포맷에 대한 질문을 합니다. 저는 가장 기본인 css를 선택하였습니다.
프로젝트 생성이 완료되면 cd 프로젝트명을 입력하여 프로젝트 파일로 이동해보세요.
그리고 프로젝트 실행을 통해 정상적으로 잘 만들어졌는지 확인해봅니다.
실행하시려면 아래의 명령어를 입력해주세요.
ng serve --open
컴파일이 완료됨과 동시에 새 창이 열리면서 실행된 프로젝트를 확인하실 수 있습니다.
http://localhost:4200/
위의 화면이 보이신다면 프로젝트 생성이 정상적으로 잘 된 것입니다.
from http://choonsdevlog.tistory.com/3 by ccl(A) rewrite - 2021-10-12 08:27:10