[MEANI-Stack] - #2 개발환경 구축, Angular2 Seed Proejct
이번 Pet-Project의 Angular2는 TypeScript기반으로 진행하기에
TypeScript를 지원할수 있는 개발환경이 필요했습니다.
사실 처음엔 이미 ECMA6는 어느정도 익숙해진 상태라 ECMA6기반으로 진행하려고 했지만 Angular2개발진이 TypeScript를 기반으로 작성하는점과 github에서 angular2 seed를 검색했을때 아래와 같이 TypeScript기반으로 된 프로젝트들이 주류를 이룬다는점이 TypeScript기반개발에 힘을 더 실어 주었습니다.
그리하여 Angular2 Seed 프로젝트를 시작하기전에 개발환경에 대해 조사를 하였습니다.
우선 첫번째로 제가 애용하고 있는 vim ...!?
에서 TypeScript가 지원하는지 찾아보았습니다.
저는 이제서야 typescript를 사용하는데
이미 typescript-vim plugin은 3년전에 나와 있었습니다...
안타깝게도 Angular2 플러그인은 없군요.
사실 플러그인이 없어도 익숙하기만 한다면 사용하는데 아무런 문제가 없습니다.
회사 업무를 진행하는데 Angular 1.x를 플러그인 없이 그냥 개발하고 있습니다.
그래서 익숙한 Vim을 사용할까 하다가
http://egghead.io 사이트에서 대부분 강의가 WebStrom 인점을 부분과
2016년부터 WebStorm이 Monthly Plan을 $5.90 에 판매중이므로
러닝 커버를 최대한 줄이기 위해 이번엔 Pet-Proejct에서는
처음 1달간 WebStorm을 써보려 합니다.
https://www.jetbrains.com 에 들어가보니 역시나 괜히 사람들이 typescript + Angular2를 사용할때
WebStorm을 사용하는게 아니였군요.
아래와 같이 TypeScript와 Angular2모두 지원합니다.
이로써 IDE는 WebStrom으로 결정하여서 설치를 완료하였고
Angular2 Seed Project를 조사해 본 결과
Angular Class(https://angularclass.com/#instructors)
에서 만든 Webpack Starter Seed가 제일 적절하다고 결정하였습니다.
혹시 Webpack또는 Front-End task Runner 에 익숙치 않으신분들은 아래 글을 참고 하시기 바랍니다.
바로 seed project를 clone해서 의존성 모듈들을 설치하고 프로젝트를 열고 실행해 보았습니다.
네 멋지게 TypeScript Compiler에러가 발생합니다.
일단 import하는 구조가 JetBrains에서 소개했던것과, 다른 angular2자료를 볼때는
import { somFunc } from 'angular2/angular2'; 형식 인데
angular2 Beta버전부터는 angular2/하위에
core, router, common등으로 나뉘었습니다
현재 Webstorm 11 TyepScript compiler 에서는
angular2를 지원하는것이지 angular2 Beta를 지원하는것이 아니었습니다.
네 그래도 상관없습니다. 이미 결제했으니까요...
에러와 상관없이 아주 잘 동작합니다.
Task목표인 Angular2 Seed Project의 준비가 완료 되었으므로 바로 github에 init합니다.
이로써 태스크 2개가 마무리 되었고 다음 단계는 Node & Express Seed Project 생성입니다.
이 프로젝트를 Angular2와 복합적으로 할까도 고민 하였지만
나중에 Ionic2를 통해 만들어진 어플리케이션들이 API를 요청하는 상황을 고려하면
서버는 따로 분리하는게 맞는듯 하여 기존 계획대로 별개의 태스크로 진행할 예정입니다.
Node & Express와 MongoDB 모두 기억이 가물가물 해서 오늘 책도 한권 구매 하였습니다.
강남 교보문고에서 MEAN스택 관련 책 3권을 보았는데
이 책은 기본적으로 Javascript를 어느정도 익숙하다는 전제 조건으로 진행되는 책입니다.
설명도 굉장히 잘 되어 있습니다.
현업에 종사하시는 분이라면 누구라도 바로 읽어도 무방해 보입니다.
이제 다음 태스크는 Node.js & Express Seed Project입니다.
이번 글은 여기서 마치도록 하겠습니다.
댓글 없음:
댓글 쓰기