Angular 개발환경 설정하기

출처 : angular

개발환경 설정하기

참고 1 이하의 문서에서 플랫폼이라는 용어는 OS 를 의미합니다. 현재 사용하고 있는 데스크탑의 OS는 Windows 10 으로 이를 기준으로 내용을 작성하도록 하겠습니다.

참고 2 이하의 설치과정을 생략하고 온라인 IDE 서비스인 StackBlitz 를 사용하여 Angular 어플리케이션의 작성이 가능합니다.

필요한 소프트웨어

• Text Editor
  Visual Studio Code 를 사용하겠습니다. VS Code 의 홈페이지 에 접속하여 Download for Windows 버튼을 눌러 인스톨러를 받습니다. 이를 실행하면 설치가 완료됩니다.

• 웹브라우저
  구글사의 크롬 브라우저를 사용하도록 하겠습니다. 역시 Chrome 의 홈페이지 에 접속하여 Chrome 다운로드 버튼을 눌러 인스톨러를 다운로드 받고, 이를 실행하여 설치를 합니다.

Git 설정

• Git 을 PC 에 설치하기 위하여 https://git-scm.com/downloads 에 접속하여 설치본을 받아 설치합니다.

플랫폼별 좀 더 상세한 설치 방법은 Git 설치 문서를 참고합니다.

Git 전역구성(Global Configuration) 설정하기

윈도우즈의 cmd 를 실행합니다. git 이 설치되었음을 확인하기 위하여

> git --version
git version 1.9.1

을 입력합니다.

git 에서 사용할 사용자 이름과 이메일 주소를 설정하기 위해서 프롬프트에 아래와 같이 입력합니다.

> git config --global user.name <Your Name>
> git config --global user.email <Your Email>

<Your Name> 과 <Your Email> 자리에는 자신의 이름과 이메일 주소를 입력합니다.

잘 설정되었는지 확인하기 위하여 아래와 같이 입력합니다.

> git config --list

가장 마지막줄에 이름과 이메일 주소가 설정된 것을 확인 할 수 있습니다.

Node.js 와 npm 설치

마찬가지로 Node.js 의 홈페이지 에 접속하여 Installer 를 다운로드 받고 이를 설치하도록 합니다.

앞서와 마찬가지로 윈도우즈의 cmd 를 실행합니다. Node.js 와 npm 이 설치되었는지 확인하기 위하여 아래의 명령을 입력합니다.

> node -v
v10.1.0
> npm -v
6.1.0

Angular CLI 설치

마지막으로 Angular 어플리케이션의 기본 뼈대를 잡아줄 수 있는 도구인 Angular CLI 를 설치합니다. 다시한번 cmd 를 열고 아래의 명령을 입력합니다.

> npm install -g @angular/cli
> ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.1
typescript                   2.7.2

비록 관련되어 있는 도구를 다운로드 받고 설치하는게 전부이지만 그럼에도 불구하고, 여기까지 오는데 한참 걸렸습니다. 이럴 때를 대비해서 저 같은 경우는 개발환경을 Cloud 환경에 1회 구성하고 재활용하는 것을 추천합니다.