워드프레스를 컨텐츠 서버로 활용하기

끄적끄적 싸이트를 하나 만들고 있는데, 컨텐츠를 넣어야 하는 페이지가 있다. 그냥,  http://www.primefaces.org/primeng/#/editor 를 이용하여 기능을 만들고, 테이블을 설계하면 되지만, 뭔가 재미로 만들고 있는데 내가 직접 이것까지 다 만들려니 한 세월이고 헛짓꺼리라는 생각이 들었다.

그런 찰나에 훌륭한 컨텐츠 관리 툴인 WordPress를 사용하고있다는 사실을 기억하고, 이놈을 컨텐츠 서버로 쓰면 좋겠다는 생각이 들었다. 이리저리 조사해보니 가능한듯하다. 워드프레스에 Page를 만들어놓고 그 데이터를 JSON을 이용하여 CI를 통해서 Angular2까지 전달해주는걸로 생각한다. 그래야, CORS문제를 해결하기도 쉽고…(생각해보니 한 사이트에 몰아넣을꺼라 상관이 없긴 한데?) WP REST API V2를 이용하기로 하였고,  테스트 해보니 잘 동작함.

그러던 와중에 그냥 테이블에서 가져와도 되겠다는 생각이 들었다. 굳이 JSON API를 콜해서 가져올 필요가 있을까? 대단한걸 하는것도 아닌지라…

뭐가 나을까.

30분 고민 끝에 WP를 JSON으로 연결하는 것으로 결정. 이유는 JSON이 분석하기 더 쉬워서. 좀 느릴수도 있겠지만, 뭐 사용자가 별로 없을거라서 괜찮을듯.

이라고 생각했는데, 호스팅을 받은 Cafe24의 문제인지 일정 사이즈 이상의 포스트가 JSON으로 읽어지지가 않는다. 속편하게 DB에서 직접 읽도록 하자!!!

Angular2 시작하기 (feat. Code Igniter)

  1. 에디터 고르기 : 몇가지 추천할만한 에디터가 있지만, 많은 사람들이 칭찬하는 ATOM.
  2. php+mysql 개발 환경 설정+code igniter : XAMPP + CI 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
    • codeigniter 설치
    • REST API 개발

 

참고링크

  • http://ngcourse.rangle.io/handout/why_angular_2.html (Angular2 학습에 필요한 전반적인 기술 다룬 내용, 강추)
  • 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 학습자료)