본문 바로가기
개발/Angular

[Angular] 앵귤러 맥OS 설치 및 개발환경 구축 :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 24.

예전부터 Angular로 Front side를 개발해보고 싶다는 생각을 갖고있었다.

이번 기회에 공부하면서 최종적으로 Angular를 사용해서 작은 프로젝트하나를 해볼려고한다.

 Angular를 설치하기에 앞서, Node.js, typescript에 대해서 좀 알아두면 좋겠지만, Angular를 하면서 익혀도 된다.


Angular를 설치하기 위해 Node.js가 설치되어 있어야한다. 간단하게 Node.js가 무엇인지 알아보자.


1. Node.js

Node.js에 대한 정의를 검색해보면, 확장성 있는 네트워크 애플리케이션이다.... Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다..... 등등 어렵게 설명이 되어있는데...

쉽게 그냥 설명하면 JavaScript를 Back end에서 사용할수 있도록 해주는 소프트웨어이다.

front와 back을 같이 JavaScript로 개발을 할수 있어, Data를 주고받는데 편해진다.


그럼 이제 Node.js를 설치해보자.

먼저 맥os에 brew package manager를 설치해준다.

https://brew.sh/index_ko.html

위 사이트를 통해 brew를 쉽게 설치할 수 있을것이다.




터미널에서 brew를 이용해서 node를 설치하고 버전을 확인해준다.

1
2
3
 Jamong@macui-MacBook-Pro  ~/Documents  brew install node
 Jamong@macui-MacBook-Pro  ~/Documents  node -v
v8.11.3
 
cs





2.Angular

node를 설치하면 npm(Node Package Manager)도 같이 설치된다.

이제 npm을 통해서 typescript 와 angular를 설치해주고 버전을 확인한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 Jamong@macui-MacBook-Pro  ~/Documents  sudo npm install -g typescript
 Jamong@macui-MacBook-Pro  ~/Documents  sudo npm install -g @angular/cli
 Jamong@macui-MacBook-Pro  ~/Documents  ng --version
 
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
 
 
Angular CLI: 6.2.3
Node: 8.11.3
OS: darwin x64
Angular:
...
 
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.3
@angular-devkit/core         0.8.3
@angular-devkit/schematics   0.8.3
@schematics/angular          0.8.3
@schematics/update           0.8.3
rxjs                         6.2.2
typescript                   2.9.2
 cs





설치는 끝났다.

앞으로 실습을 진행할 workspace와 프로젝트를 만들어준다.

실행은 VSCode를 사용할거다. VSCode가 설치 안되어있으면 설치한다.

1
2
3
4
5
6
7
8
 Jamong@macui-MacBook-Pro  ~/Documents  mkdir angularProjects
 Jamong@macui-MacBook-Pro  ~/Documents  cd angularProjects
 Jamong@macui-MacBook-Pro  ~/Documents/angularProjects  ng new ng-jamong-app
 Jamong@macui-MacBook-Pro  ~/Documents/angularProjects  cd ng-jamong-app
 Jamong@macui-MacBook-Pro  ~/Documents/angularProjects/ng-jamong-app   master  ls
README.md         e2e               package-lock.json src               tslint.json
angular.json      node_modules      package.json      tsconfig.json
 Jamong@macui-MacBook-Pro  ~/Documents/angularProjects/ng-jamong-app   master  code .
cs





VSCode을 실행하면 아래와같이 프로젝트가 생성된것을 확인할수 있다.





서버를 실행해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 Jamong@macui-MacBook-Pro  ~/Documents/angularProjects/ng-jamong-app   master  ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 
Date: 2018-09-24T08:55:25.378Z
Hash: 059e28b7edeac351db08
Time: 6161ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ 「wdm」: Compiled successfully.
 
 
 cs





localhost:4200으로 index.html페이지를 실행해보자.


설치와 개발환경은 끝!

댓글0