Angular로 웹페이지 만들기
프롤로그
마지막으로 웹 사이트를 손을 댄 것이 2007년에 JSP, 스프링 이런 것들이었고, Javascript는 유효성 검사해서 Alert 다이얼로그나 띄워주는 하찮은 언어라고 생각했었다. 그리고 지금 나는 웹사이트를 만들면서 개고생 삽질을 하고 있다.
지금부터는 웹사이트를 만들면서 삽집했던 것들을 기록하기로 한다.
프레임워크 선택
요즘 웹 쪽에서 뜨고 있는 Angular, React, Vue.js 중에서 하나 고르기로 했다. 일단 Angular가 가장 인기가 없었고 React의 인기가 Vue.js로 넘어가고 있는 것 같았다. 3가지 프레임워크를 모두 설치 해 보고 프로토타이핑을 해 본 결과 Angular를 선택하였다. 이유는 .. 내가 구글빠여서이다.
React는 전에 다뤄본 결과 나랑 좀 안 맞는 느낌이었고, Vue.js는 현재 인기는 많은데 뭔가 Visual Studio Code에서 자동 import가 안되서(나만 안되나?) 포기. Angular로 선택. 그리고 또 한 가지 이유는 Firebase를 백엔드로 사용하기 위해서인데 아무래도 같은 구글제품끼리 궁합이 좋지 않나 해서 선택. 앵귤러쪽에는 AngularFire2라는 라이브러리가 있는데 Firebase 작업하기 편하게 되어 있다.
Angular 자료
일단 앵귤러가 인기가 없다 보니 자료 찾기가 많이 어려웠다. 책은 3권과 e-book 1개를 보았다.
1. Angular Essentials (앵귤러 6) (http://www.yes24.com/24/Goods/62063090?Acode=101)
2. Angular Development with TypeScript (앵귤러 5) (http://www.yes24.com/24/goods/42474040?scode=032&OzSrank=7)
3. 앵귤러 첫걸음 (앵귤러 4) (http://www.yes24.com/24/Goods/41070512?Acode=101)
4. The Angular Firebase Survival Guide (e-book 앵귤러6+Firebase) https://leanpub.com/angularfirebase
Build Angular Apps on a Solid Foundation with Firebase
leanpub.com
5. Firebase 관련 교육 자료 : https://angularfirebase.com/
당연히 공식 레퍼런스(https://angular.io/)도 필독해야 한다.
사용한 라이브러리
1. 머티리얼 디자인 (https://material.angular.io/) : 머티리얼 디자인 공식 컴포넌트 제공. 초반에 많이 쓰다가 결국 부트스트랩으로 갈아탐
2. 부트스트랩 (https://ng-bootstrap.github.io/) : jquery 등을 걷어내고 앵귤러에 맞게 컨버전된 라이브러리. 현재는 머티리얼을 거의 걷어낸 상태로 이걸 사용 중.
3. 앵귤러파이어2 (https://github.com/angular/angularfire2) : Firebase를 백엔드로 사용한다면 필수.
앵귤러 간단 요약
크게 컴포넌트, 서비스, 라우터, 모듈 정도의 개념을 가지고 만든다.
라우터는 말 그대로 페이지를 전환하는 것을 정의하는 요소이다.
컴포넌트로 각종 UI 요소를 만들고 동작도 정의한다. 컴포넌트들을 조합하여 또 다른 컴포넌트를 만는다. 컴포넌트를 잘 만들면 재활용하면 사용할 수 있다.
데이터 서비스, 네트워크 서비스, 인증 서비스 등등 UI와 별개로 동작하는 부분을 서비스로 정의한다.
컴포넌트가 서비스를 이용하여 기능을 완성한다.
모듈은 외부 라이브러리 정도로 생각하면 된다.
이 외에도 디렉티브, 가드, 파이프 등등의 개념이 있다.
Firebase 연동
Firebase 와의 궁합은 좋은 편이다. 모든 데이터는 스트림으로 처리하며 기본으로 Rx프로그래밍과 Promise를 사용하여 비동기 처리를 수행한다.
난이도
안드로이드보다 쉽다. 공부량도 안드로이드보다는 적다. 제일 어려운 건 앵귤러가 아닌 CSS와 디자인이다.
삽질 후 얻은 사실
1. jquery를 사용할 수는 있으나 안 쓰는 것이 깔끔하다.
2. 부트스트랩은 ng-bootstrap을 사용한다.
3. IDE는 WebStorm이 제일 좋다.
4. 구글이 제공하는 머티리얼 디자인은 컴포넌트만 제공하지 디자인을 해 주진 않는다.
5. 웹 디자인은 부트스트랩.
6. 유료 디자인 템플릿을 사도 앵귤러에 녹여내기가 어려워서 포기했다. 살 때 앵귤러용으로 잘 사길 추천함.
7. PG사 연동시 jquery 특정 버전 의존성이 있는 경우가 있다. 이것 때문에 1번을 못 지키게 될 수 있다.
8. 사파리에서는 궁서체로 나온다. 이유는 모른다.
