[Angular] Mac OS에서 Angular 설치 및 개발환경 구축

이미지 출처 : Pixabay

졸업학기 프로젝트를 하면서 이리저리 꼬아둔 맥을 연말을 맞이하여 3년만에 싹- 갈아엎었습니다.

깨끗해진 맥에다가 웹개발 공부를 위해 Angular를 다시 설치하는 방법을 정리해 보았습니다.

 

[시스템 사양]

MacOS version : MacOS Catalina 10.15.2

Homebrew version : 2.2.2

 

MacOS에서 Angular을 설치하여 프로젝트를 만들기 위해서는 우선 npm이 필요한데, brew를 통해 node를 먼저 설치합니다.

Homebrew 설치 : https://brew.sh

Homebrew

터미널에서 brew를 설치하고 node를 설치해 줍니다.

brew install node node -v

 

node 설치가 완료되면 npm 패키지 매니저를 사용하여 Angular을 설치해 줍니다.

Reference : https://angular.io/cli

Angular

npm install -g typescript npm install -g @angular/cli

 

Projects 폴더(사용자지정)로 이동하여 새 프로젝트를 생성해 줍니다.

ng new sampleProject ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS cd sampleProject ng serve -o

 

위 과정이 완료되면 웹 브라우저에서 다음과 같은 화면을 확인할 수 있습니다.

localhost:4200

저는 Jetbrain 사의 PHPstorm을 IDE로 사용하고 있습니다.

PHPstorm 실행화면

여기서 Open을 클릭해 준 다음,

Open project

아까 만들어 둔 프로젝트 폴더 경로로 이동하여 Open을 클릭해 주면 다음과 같은 화면을 볼 수 있습니다.

README.md

여기서 우측 상단의 실행 버튼을 클릭하면,

실행 버튼

ng serve -o 동작을 수행합니다.

Angular CLI Server run

터미널에서 ng serve -o 명령어를 실행한 것과 같이 웹 브라우저에 localhost:4200을 입력하면 sampleProject is running!  문구를 볼 수 있습니다.