Angular 시작하기
Angular를 시작하기 위한 필수 설치
- nodejs 설치(npm이 같이 설치됨)
- angular cli 설치
Node.js 설치
nodejs.org 홈페이지에 접속해서 다운로드 받아 설치합니다.
nodejs 설치시 LTS란 Long Term Support 라 해서 장기 지원 버전이란 뜻입니다.
오류나 버그 발생 시 해당 버전에 대해 장기적으로 패치 및 지원 하겠다는 뜻입니다.
그래서 어떤 걸 설치해야 하냐면 단순한 예로 '나는 nodejs의 최신버전에 새롭게 도입된 기능을 사용해보고 싶어'
하면 최신버전(Current, Latest Features) 설치.
'아니 나는 좀 더 안정적인 버전 중 최신버전을 쓸래' 라고 생각한다면
가장 높은 버전의 LTS 버전을 설치하시면 되겠습니다.
참고로 Downloads 페이지에서 다운로드 하시는 경우
Installer와 Binary를 선택해서 설치하실 수 있습니다.
installer는 환경변수를 자동설정해 주므로 installer를 설치 하시면 됩니다.
환경변수를 직접 설정하고 싶다면 binary를 다운로드 하시면 됩니다.
npm이라 함은 Node.js 패키지 관리자
npm이 Node.js의 패키지 관리자이기 때문에 nodejs 설치시 npm이 같이 설치 됩니다.
java에서는 maven repository
docker에서는 docker hub
nodejs에서는 npm 이라 생각하면 한층 더 이해하기 쉬우실 거라 생각됩니다.
※ nodejs와 angular cli를 설치하면 angular 프로젝트를 생성할 수 있는 상태가 됩니다.
angular 프로젝트 생성을 위한 angular cli 설치
> npm install --global @angular/clicli란 Command Line Interface 로서 대부분의 언어는 이런 CLI를 지원합니다.
쉽게 이야기 하면 저희가 윈도우 커맨드(CMD), 리눅스에서 명령어 등을 명령줄로 입력하는 기능이라 생각 하시면 됩니다.
--global을 붙인 이유는 어디서든지 angular/cli 인 ng를 사용하기 위함입니다.
angular 프로젝트 생성하기
> ng new my-demo-projectangular 프로젝트 실행하기
> ng serve
여기까지 아주 간단한 my-demo-project 라는 angular 프로젝트를 만들어서 실행해 봤습니다.
깊이들어가기(global 설치와 일반 설치의 차이)
이 아래는 차분히 읽어 내려가면 --global로 설치했을 때의 원리를 어느정도 이해 하실수 있게 되리라 생각합니다.
--global 옵션으로 설치 시 전역 환경에서 설치가 됩니다.
그렇다면 전역 환경이란 무엇을 의미할까요?
아래 내용을 직접 실행해 보시면 좀 더 빠른 이해가 가능합니다.
1. window의 경우 D:\angular 경로에서 CMD창을 이용해 npm install @angular/cli@10.2.2 설치
2. C:\angular 경로에서 CMD창을 이용해 npm install --global @angular/cli@11.1.4 설치
3. D:\angular 경로에서 ng명령어 사용시 @angular/cli@10.2.2 버전이 사용 됩니다.
4. D:\angular 경로에서 ng version 입력해서 버전 확인
5. D:\angular 경로를 제외한 모든 경로에서는 ng 명령어 사용시 @angular/cli@11.1.4 버전이 사용 됩니다.
6. D:\angular 경로를 제외한 곳에서 ng version 입력해서 버전 확인
※ 참고로 --global로 @angular/cli를 설치하지 않은 경우 ng 명령어를 사용해도 angular/cli는 작동하지 않습니다.
이유는 환경변수를 확인하면 알 수 있습니다.
npm은 전역으로 설치하는 경로를 환경변수에 저장해 놨습니다.
환경변수 path를 확인해 보면 \AppData\Roaming\npm 경로가 잡혀 있는 것을 확인할 수 있습니다.
해당 위치에 가보게 되면 --global로 설치한 패키지들이 설치되어 있는걸 볼 수 있습니다.
angular/cli를 --global로 설치한 경우에는 ng 파일들을 볼 수 있을 것입니다.
우리가 일반적으로 윈도우에서 ng 명령어 사용 시 실행되는 파일은
\AppData\Roaming\npm경로의 ng.cmd 파일입니다.
ng.cmd 파일을 열어보면 길지 않은 코드를 볼 수 있습니다.
코드의 내용은 nodejs로 ng 파일을 실행한다는 내용입니다.
nodejs는 javascript 런타임을 제공 합니다.
javascript 런타임이란 말 그대로 javascript를 실행시켜주는 녀석입니다.
한번 예를 들어 실습을 해본다면
CMD프롬프트에서 node를 실행하면 nodejs cli 환경에 진입하게 됩니다.
여기서 console.log('test'); 를 입력하게 되면 output 으로 test가 출력되는 것을 볼 수 있습니다.
다시 본론으로 돌아와서 코드의 내용을 보게 되면 --global 로 설치하지 않아도 angular/cli를 실행할 수 있다는 것을 알 수 있게 됩니다.
만약 예를 들어 angular/cli를 --global 옵션을 주지않고 D:\angular-demo에 설치했다면
ng 를 사용하기 위해서는 직접 node 명령어와 full path 를 지정하여 실행할 수 있습니다.
> node D:\angular-demo\node_modules\@angular\cli\bin\ng
여기까지 보셨으면 npm과 ng가 어떻게 실행되는지에 대한 원리를 파악하셨을 거라 생각됩니다.