Angular2 시작하기 (feat. Code Igniter)

  1. 에디터 고르기 : 몇가지 추천할만한 에디터가 있지만, 많은 사람들이 칭찬하는 ATOM.
  2. +mysql 개발 환경 설정+code igniter : XAMPP + 3.x 로 해결
  3. angular2 개발 환경 설정

위의 세가지를 진행하고 나면 이제 어떻게 엮을까를 고민하게 된다. 뭐 대충 엮일꺼라고 생각은 했지만 아직 구체적이지 않아서…

php+Code Igniter는 간단하기 JSON 서비스 역할만 할것이다. 일종의 DB 역할만…
대부분의 UI 관련 내용은 angular2를 이용하여 브라우저상에서 수행될 것이다.

CI에서 JSON을 개발하는 것은 어렵지 않았다. 사실, CI를 쓸 필요도 없었다. 하지만, 무척 간단하고(일주일 정도 보기엔, Rails와 폴더 구조나 개념도 비슷해보임), 혹여나 나중에 확장하거나 할때 Web 프레임웍 하나 정도는 끼고 있어야 도움이 될것 같다는 생각이 들었다. 그리고, 국내에서는 CI가 사용자를 가장 많이 확보하고 있는 것 같다

JSON 서비스 틀을 만들고 나니, 이제 angular2로 ui를 구성해야하는데, 생짜로 하려니 또 막막하다. 난 UI Component를 날코딩하는게 무척 싫다. 컴포넌트 예쁘게 만드는데도 한세월이고, 재사용 가능한 컴포넌트로 제작하다보면 시간 소모가 심하다. 그렇다고, 재사용이 자주 되지도 않지만, 재사용 가능하도록 만들지 않으면 유지보수할때 무척 짜증난다. angular2는 여전히 개선이 진행중이기 때문에, 자료나 써드파티 툴들이 부족하다. angular2는 무엇인가에 대한 자료만 무성하다~

몇가지 찾아본 컴포넌트가 있는데 그 중 PrimeNG 정도면 될것 같아서 이녀석으로 진행하기로 했다. 아직 angular2에 익숙하지 않아서, 얼마나 버벅댈지는 모르지만 또 진행해봅시다.

진행 계획

  • front-end
    • npm 설치
    • 예제 스터디
    • UI Component 스터디
    • UI-DATA간 연동
  • back-end

 

참고링크

  • http://ngcourse.rangle.io/handout/why_angular_2.html ( 학습에 필요한 전반적인 기술 다룬 내용, 강추)
  • https://angular.io/docs/ts/latest/tutorial/ (공식 튜토리얼)
  • http://victorsavkin.com/ (angular2 개발 커밋 1등공신의 블로그, angular2 동작원리 잘 설명되어 있음
  • http://blog.thoughtram.io/categories/angular-2/ (angular 전문 컨설팅 독일 회사 블로그 내용 설명 좋음)
  • http://seokjun.kr/ecmascript-6-features/ (ECMA6 간략 설명)
  • http://xgrommx.github.io/rx-book/ (Rx.js 설명: Angular2 에서 아주 열심히 Rx.js 씀)
  • http://rxmarbles.com/ (Rx 이해를 돕는 애니매이션 사이트)
  • http://mobicon.tistory.com/category/Angular.io (한글 개인 블로그)
  • http://es6-features.org/#StatementBodies (ES6 와 ES5 코드 비교)
  • https://kangax.github.io/compat-table/es6/ (ES6 브라우저호환성)
  • http://han41858.tistory.com/3
  • http://sculove.github.io/slides/2016_FETrend/#/
  • https://kangax.github.io/compat-table/es6/
  • https://medium.com/@basarat/typescript-won-a4e0dfde4b08#.2xxoq0vo8 (Typescript Won)
  • https://www.gitbook.com/book/basarat/typescript (Typescript 학습자료)

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다