Programmazione di Ku0re

Angular 4 Tutorial Prima) Angular 4 개발을 위한 환경 설정 본문

Programmazione/Angular

Angular 4 Tutorial Prima) Angular 4 개발을 위한 환경 설정

ku0re kuore 2017. 4. 28. 07:52

이 글은 단순히 Angular 공식사이트의 Tutorial을 정리해 놓은

Alexband님의 블로그 포스팅을 보고  Angular를 공부하면서 내용을 정리한 글입니다.

공부하실 분은 Angular 공식사이트의 Tutorial을 보시고 제 포스팅은 참고만 하세요! :)


*Angular 4는 Angular 2와 문법적으로 큰 차이는 없다고 합니다.




Angular 4 개발을 위한 환경 설정



먼저 Angular 4를 이용한 웹 애플리케이션 개발에 앞서 필요한 것은 다음과 같다.


Angular 4 개발에 필요한 것

    • 편리한 개발을 위한 필수 소프트웨어 IDE
    • Node.js 기반의 패키지 관리를 위한 Node.js와 NPM
    • 편리한 프로젝트 생성 및 관리를 위한 Angular CLI


그럼 가장 먼저 IDE를 선정하자.


나는 초보 개발자이지만 한참 Atom을 사용하다가 VScode가 좋다는 말을 듣고 VScode를 사용했었다.


하지만 아직 익숙치 않아서 인지 많은 사람들이 편한 기능을 잘 사용하지 못해서 인지 나에게는 불편한 감이 있어 잘 사용하지 않았다.


최근 Dream Tripper 싱글 페이지 웹 사이트를 만들 때는 CSS나 HTML을 수정할 때 실시간으로 프리뷰를 해주는 기능이 기본 내장되어 있는 Brackets라는 IDE가 그렇게 편했다.


우선 공부하는 동안 VScode를 사용하고 실무 또는 개인 작업시에는 돈이 있다면 무조건 Webstorm을 사서 사용하는 것을 추천한다.

잘은 몰라도 VScode와 비슷하지만 사용해보니 훨씬 더 편하다.(역시 돈이 최고야)


우선 Alexband님의 블로그에서는 VScode를 사용하기에 따라하기로 한다.


여기서 IDE를 살짝 소개하자면, 위에서 말한 Atom Editor는 크로미움을 기반으로 Javascript(정확히는 Coffeescript)로 만든 IDE이다.

그렇기 때문에 자유롭고 가벼운 느낌이 있다. 게다가 Sublime Text와 상당히 유사하다.(확장성과 UI까지도..)

뭐 잘은 몰라도 나는 개인적으로 Sublime Text보다 Atom을 더 편하게 썼다.(생활코딩에서 공부할 때 항상 Atom을 썼다.)


그리고 VScode는 Visual Studio를 생각하면 무거울 것 같지만 생각보다 가볍고 빠르며 확장성도 뛰어나다.

Angular 4도 Typescript를 사용했고, Typescript는 MS에서 만들었으며 VScode에서 TypeScript를 공식 지원하기 때문에 궁합이 잘맞지 않을까...

생각하지만 편한 것으로 하면 되겠다.(강의를 찾으면 Alexband님 블로그 보라해놓고 강의 하듯이 다 설명하는 나..ㅋㅋ;;)


IDE 공식 홈페이지 링크

만약 IDE가 설치되어 있지 않다면 참고하시길!


이제 VScode를 설치했다면 개발을 도와줄 플러그인을 설치해보자.

Alexband님은 Angular 2 TypeScript Emmet과 Angular 2 TypeScript Snippets를 추천하셨지만

문법적으로 비슷하더라도 Angular 4를 해볼 것이기 때문에 Angular 4에 대한 Emmet과 Lint, 그리고 Snippets를 찾아서 설치하자.


설치 방법은 Ctrl + Shift + X 버튼을 누르면 확장 탭이 나온다.(또는 그냥 왼쪽 메뉴 중 가장 아래 아이콘을 클릭하자)



Angular 4 TypeScript Emmet과 Lint가 없어서 TSLint와 Angular v4 TypeScript Snippets만 설치했다.

아마도 크게 상관 없을 거다.(아마?)


모두 설치 했다면 https://angular.io/ 에서 Angular의 튜토리얼을 참고 해도 좋다.

하지만 정식 튜토리얼대로 하자면 React도 Angular도 처음 개발 시작전부터 환경설정에 많은 시간을 허비한다고 한다.

Angular를 사용하기 위해 필요한 모듈들 Webpack, babel, grunt, jasmin 등등... 너무 많다.

물론 알아야 할 것들이긴 하다. (공부하면서 여러번 봤던 것들 이지..) 자세한건 다음에 보자.


먼저 Angular를 사용하기 위해 필요한 개발환경을 한번에 설정해 주는 모듈이 있다.

바로 Angular-cli 이다. 자세한 사용법은 https://cli.angular.io/ 에 나와있다.


먼저 angular-cli를 사용하기 위해서는 npm으로 다운로드 받아야 한다.

node.js를 설치 하지 않았다면 먼저 npm을 사용하기 위해 node.js를 설치하자.


그럼 cmd 또는 Terminal 창을 열어서


npm install angular-cli -g


커맨드를 사용하여 cli 모듈을 설치한다.


설치가 완료되면 Angular 프로젝트를 만들어 보자.

먼저 프로젝트 폴더로 사용할 디렉터리로 가서


ng new my-first-app


명령어를 사용하면 새로운 Angular 프로젝트를 생성하고 모듈을 다운로드 받기 시작한다.

위 명령어는 Angular CLI를 이용해 프로젝트를 만드는 가장 기본적인 명령어다.


시간이 조금 걸린다.



완료되면 위와 같이 my-first-app 이라는 프로젝트 디렉터리가 생성된다.


이제 만들어진 프로젝트 폴더로 가서 다음 명령어를 사용해보자.


ng serve



해당 명령어는 테스트를 위한 live-server를 실행하는 명령어이다.


초기 포트는 4200으로 설정 되어있기 때문에 http://localhost:4200으로 접속 해보자.



해당 화면은 최초 Angular 프로젝트를 생성했을 때 입력되어있는 것을 Angular를 이용해 웹 서비스를 실행한 기본 화면이다.

프로젝트 생성과 서비스 실행은 쉬운것 같다. (이래 놓고 과정 배우면 항상 어렵던데.. 일단 쉽다!)


이번 포스팅은 간단한 환경 설정과 Angular-cli를 이용한 첫 Angular App을 실행하는 것까지 이다.

(사실 Alexhand 님의 블로그 순서를 따라간다.)


다음 포스팅은 Angular의 폴더 구조와 설정 파일에 대한 설명, Angular 공식 홈페이지의 Todo Heroes를 만들어 보며 Angular의 기본 기능을 알아보자.




ps> 다 쓰고 보니 또 카피 포스팅이다... 이 강의에 대한 공부가 끝나고부터는 직접 써봐야겠다.


ps2> 프로그래밍 언어 기초 문법 배우려는 분들도 아닌 프레임워크 배우려는 분들이 IDE나 Node.js, npm을 모를까 싶지만.. 일단 블로그 내용을 따라가기로 했다..


ps3> 언젠간 주관대로 적을 게요ㅠㅠ 우선 이렇게 라도 정리 겸 공부를 해야..


0 Comments
댓글쓰기 폼