이번 gdg webtech는 2018.11.28일 maru180에서 진행 되었다. 세션은 총 3개로 이루어져있고 이번 주제는 프론트 엔드 레벨업이었다.

---

Angular로 프론트앤드 개발 레벨업 - 고재도

이 세션은 웹테크에 맞게 자바스크립트를 먼저 말하면서 시작을 하였다. 그리고 그와 동시에 프레임워크도 동시에 발전하였다.

2008년 그때 당시에 자바스크립트OOP로 짰다. 그리고 css, 돔선택자를 공부하고 다음에 jquery를 사용하면서 ajax 같은 것도 사용하였다. 하지만 이 때 복잡한 것을 작업했을 때 ajax를 쓰는건 너무 힘들다는 것을 알았고 이때 다른 방법들을 하게되었다. 그리고 이때 modulality, template에 대하여 공부하였다. 또한 이 때 데이터 모델을 했다.

앵귤러 특징

1. MVC 구조

   모델은 JS OBject 뷰는 Dom 컨트롤러는 JS Function(키 이벤트등...)

2. 의존관계 주입

   재사용성, 테스트 등...

3. 지시자

웹 컴포넌트는 브라우저단에서 재사용을 해보자

1. 커스텀 엘리먼트
2. html 임포트
3. 쉐도우 돔
4. 템플릿

앵귤러는 타입스크립트를 기반으로 한다. 타입스크립트는 es5,es6를 포함하며 타입이 들어가고 제네릭 및 어노테이션이 들어가게 되었다.

---

1. 컴포넌트 계층구조간 커뮤니케이션

   자식과 부모간의 커뮤티케이션은 양방향으로 상태가 전이 된다.

2. 데이터 전달은 서비스로 하는 것이 좋다
3. Rxjs

   리액티브 프로그래밍, 프론트엔드에선 주로 Observable과 함께 프로그래밍 하는 것

---

디자이너와 대화

1. 폰트와 타이포그래피

   폰트와 타이포그래피는 큰 차이다. 디자이너는 글자간도 다 계산해서 할 수 있는데 큰 차이다 그리고 여전히 다운로드 받는데에는 많은 용량을 차지한다. 그리고 아직까지 한국어 폰트가 무거운 것이 사실이다. 예 ) woff , woff2 , ieeee

2. 컬러 매니지먼트

   미리미리 컬러를 만들어 놓은 것이 좋다.

   $white: #fff !default;
   $gray-100: #f8f9fa !default;
   $gray-200: #e9ecef !default;
   $gray-300: #dee2e6 !default;
   $gray-400: #ced4da !default;
   $gray-500: #adb5bd !default;

3. 컴포넌트 정리

   디자이너에게 컴포넌트 정리를 부탁하여 컴포넌트를 규격화한다. 컴포넌트 보이는 규격화 뿐만이 아니라 재활용성이 좋아진다. DOM이 곧 컴포넌트이다. 더욱 하기 쉬워진다.