Angular 개발환경 구축하기 Mac(맥) OS

앵귤러를 처음 접하고 스터디를 시작하게 되었습니다.

머릿속에 정리도 안 된 상태에서 블로깅을 할 계획이기에 난장판이 될 가능성이 높습니다.

포스팅 글의 대부분은 웹에서 마구잡이로 혼합된 컨텐츠가 주가 될 예정 이기에 철저하게 글쓴이 중심적일 수 있습니다.

앵귤러 준비하기

앵귤러를 시작하기에 앞서 앵귤러를 기반으로 한 프로젝트를 시작하려면 Node.js와 NPM, ES6, 타입스크립트 등을 알아야 합니다.

( 걱정 마세요.... 몰라도 됩니다. 그래도 HTML,CSS,Javascript 는 조금 알아야 합니다. 아주 기초적인 웹 지식이면 됩니다. )

우리는 앵귤러를 시작하기에 앞서 Node.js와 NPM을 알 필요가 있어 보입니다.

기초적인 개념만 짚고 넘어가도록 해봅시다.

1. Node.js 설치

Node.js ??? 도대체 뭐....야?

자바스크립트 언어로 I/O 서버 프로그램 개발을 위하여 만들어졌습니다. 그러나~!!

브라우저 외에 Node.js 가 설치된 곳이라면 어디서든지 실행될 수 있다는 점이 큰 장점으로 부각이 되어

브라우저를 벗어나 자바스크립트 언어를 사용할 수 있게 해주는 도구라고 할 수 있습니다.

맥OS에서는 brew로 쉽게 설치할 수 있습니다.

- Homebrew ( 없다면 아래 링크로 가서 설치해주세요 ~ ! )

http://brew.sh/index_ko.html

command + space

terminal 실행 후

brew install node

node.js는 이렇게 쉽게 설치가 끝납니다.

NPM도 같이 설치가 되므로 걱정 안하셔도 됩니다.

node의 버전은 아래 명령어로 확인할 수 있습니다.

node -v

node.js 설치를 했으니 js 파일을 브라우저 없이 실행할 수 있을겁니다.

hello.js 라고 새 파일을 생성해 console.log('Hello, Node.js')를 작성해 봅시다.

그리고 아래 명령어를 통해 터미널 창에서 실행하면 됩니다.

node hello.js

이렇게 node.js 설치 과정을 완료 했습니다. 다음으론 NPM 다루는 법을 간단하게 살펴보겠습니다.

2. NPM 사용법

NPM은 Node Package Manager의 약자로 웹 애플리케이션에서 사용할 외부 패키지들을 관리해주는 도구입니다.

( 패키지 관리 해주는 프로그램~ 사용법만 알면 엄청 편리한 도구일듯 합니다. )

NPM 주요 명령어

명령어	설명
npm init	명령이 실행되는 위치에 package.json 파일을 생성하여 NPM 패키지 관리를 위한 초기화 작업을 수행합니다.
npm install	package.json 파일이 있는 경우 파일에 선언된 의존 패키지를 설치합니다. npm install 뒤에 패키지명을 함께 입력하면 해당 패키지를 내려받습니다. ( ex - npm install jquery ) 추가 옵션으로 --save, --save-dev 등을 사용할 수 있습니다.
npm uninstall	uninstall 뒤에 패키지명을 입력하여 이미 설치된 패키지를 제거합니다. 추가 옵션으로 --save, --save-dev 등을 사용할 수 있습니다.
npm list	현재 설치된 패키지 목록을 트리 형태로 보여 줍니다. --depth= 옵션으로 목록 출력 시 트리의 깊이를 지정하여 출력합니다. ( ex - npm list --depth=0 )
npm prune	package.json에 선언된 패키지 기준으로 현재 설치된 패키지 중 선언되지 않은 것을 정리합니다.
npm link	전역 환경에서 설치된 패키지에 명령이 수행된 로컬 환경으로 심볼릭 링크를 걸어 로컬 환경의 프로젝트에서 전역에 설치된 패키지를 바라보게 하는 명령입니다.
npm run	package.json의 script에 선언된 명령을 수행합니다. 주로 반복적으로 사용하는 주요한 패키지 명령을 등록하여 사용합니다.

패키지 설치 예

npm install jquery

버전을 따로 명시하지 않으면 최신 버전을 설치합니다.

npm install jquery@1.12.4

3. angular 설치

앵귤러 설치도 간단하게 할 수 있습니다.

https://cli.angular.io/

위 링크 페이지에서 cli 환경에서 설치 할 수 있는 명령어가 안내되어 있습니다.

마찬가지로 NPM 도구를 통해 설치를 하시면 됩니다.

설치 명령어는 npm install -g @angular/cli 이며 아래 명령어는 순서대로 프로젝트 생성, 해당 폴더로 이동, 프로젝트 실행입니다.

이렇게 angular 개발환경 구축을 완료했습니다.

cli 환경에 익숙하신 분들은 금방 따라하실 수 있으며 어렵지 않으실 겁니다.

중요한 건 앵귤러를 사용하기 전에 앞서 node의 설치와 NPM 기본적인 사용법을 숙지하는 것입니다.

그러면 다음 포스팅에는 본격적으로 angular를 사용해 보도록 합시다.