4. React 를 공부를 하고.
- Hello World 찍기 겁나 힘드네.
- Webpack / Babel 이거 뭐하는 녀석이야?
- 책 사서 보는데, 어떤 책은 예제도 안돌아가네! 아
예 작성방식이라던가 API가 많이 바뀌었어!
5.
6.
7.
8.
9.
10.
11. Angular는 Google에서 만든(시작은 2009년), Front-End MVC FrameWork.
(사용자용 애플리케이션 개발을 위한 프레임워크 -> View/UI를 위한 프레임워크)
사용언어는 TypeScript 혹은 ES6를 사용할수 있으나, Google측에서 TypeScript를
반강제(?)로 권장하고 있습니다. 실제 관련 문서도, TypeScript기준으로 작성이 되어
있습니다.
2014년 Angular 2가 발표되었으며, 2016년 정식 버전인 Angular 2.0.0이 릴리즈!
그리고 현재, Angular 5.0.0이 릴리즈 되어 있습니다!(2017. 12월 기준)
*FrameWork ? 고유의 실행방식과 정해진 규칙이 존재(골격, 틀) / 정해진 틀에 작성된, 비즈니스 로직을 관리 실행하는 컨테이너 / 프
레임워크 사용을 함으로써, 유지보수와 생산성 및 코드통일화를 기대할수 있다.
12. 2016년 Angular 2.0.0 발표 이후, Google에서는 6개월 이후에 Angular 3.x.x 에 대
한 계획을 발표!
-> 어? 아니 2.0.0 나온지 얼마나 됬다고, 또 버전업 해서 뭘 그렇게 바꿔?
그런데, 2017. 03월에 Angular 4.0.0이 출시!
-> 아니, 버전 이렇게 확확 쌩까고 올리고 뭐하자는 거냐? 이거는 Angular 버저닝
과 출시 정책을 보면 의문이 해소가 됩니다.(그리고 Angular팀에서 출시일정을 계
획하여, Angular의 지속적인 발전을 지향하고 있습니다.)
13. Angular 1.0
Angular 1.1 - 1.2 지원을 위한 이전 버전
Angular 1.2
Angular 1.3 - IE8 지원 중단
Angular 1.4
Angular 1.5
출처: http://han41858.tistory.com/25 [한장현입니다.]..
1.2와 1.3 사이에 IE8 지원 중단등의 이슈가 있지만, 버
전 넘버링만으로는 그 이슈를 알기 어려운 이유로, 시
멘틱 버저닝을 따르기로 합니다.(Angular2가 나오면서
적용)
참조 : https://semver.org/lang/ko/
SemVer는 버전번호가 의미가 있음을 의미.
Angular 2
Angular 3
Angular 4
Angular 5
Angular 6
Angular 7
Angular 8
즉 2017년 3월에 릴리즈 하였던, Angular4는 Angular
2의 2번째 major 버전인셈 입니다.
이러한 이슈로 기존 한국 커뮤니티에서는 Angular2 명
칭을 Angular로 변경하고 있는 중입니다.(Angular1은
AngularJS)
참조 : http://angularjs.blogspot.kr/2016/10/versioning-
and-releasing-angular.html
14.
15. Angular4
- Angular 4.0.0 버전으로 정식 출시 되면서, Angular2 / Angular4의 공식문서가 분리.
- Angular CLI 1.0 출시(Angular4 프로젝트 관리 및 생성)
- Small & Faster -> 용량을 감소하고, 성능을 개선. (공통모듈 코드 최소화)
- 향상된, 템플릿 문법(ngIf / ngFor)
- TypeScript 2.1 / 2.2 지원
- AOT(Ahead Of Time)를 통한, 컴포넌트의 코드들이 60% 정도 감소.
- Angular Universal : Angular를 서버에서 실행 할 수 있도록 해주는(서버렌더링) angular
universal의 @angular/platform-server 프로젝트가 업데이트 되었습니다.
참조 : https://docs.google.com/document/d/195L4WaDSoI_kkW094LlShH6gT3B7K1GZpSBnnLkQR-g/preview
16.
17.
18.
19.
20. - 헤일즈 버그 왈 : “당신이 JS를 알고 있다면, 이미 TS를 알고 있다.”
-> TS자체가 표준으로 시작해서, 대규모 JS App을 간단하게 만드는 언어가 되자가 목표이기에 정말 JS
를 알고 있다면, 금방 따라갈수 있는 수준입니다.(CoffeeScript 한번 보고 오시면..ㅎㄷㄷ)
- TypsScript는 JS의 상위 집합(SuperSet) 이며, CoffeeScript / DART 처럼 독립 실행이 아닙니다.(상위
집합이기에, 결론적으로는 JS로 전부 변환이 되며 컴파일 도구를 통해, es5 / es6로 간단하게 변환이 가
능)
- 명시적으로 Type을 선언함으로서, 코드를 안정적으로 수정 및 오류를 catch할 수 있기에, 유지보수
성 및 코드의 일관성을 유지할 수 있습니다.(Babel에는 타입을 검사하는 타입검사기가 존재하지 않습
니다.)
Notas del editor
WebPack 설정이 가능하나, 저런 경우, package.json의 빌드/시작스크립트가 새명령으로 변경이 됨. 이런 경우 사용자는 또 무언가를 수정해야함.
애초에 왜 이러나면, 학습곡선을 줄이기 위해, WebPack구성을 수정하지 못하게하는 것이 설계상의 결정이었기 때문.
AOT 컴파일을 하는 경우, 시간이 더 오래 걸리는 부분이 보임.
AOT 컴파일에 단점이 있다면, 브라우저에서 실행이 되기 전에 앵귤러 코드를 JS로 변환하기 때문에, 플랫폼 의존적인 동적 코드를 사용 하면 안됌.(예: window.location.href / document.URL 등)
AOT는 번들링 전에 컴파일 과정이 이루어 지기 때문에, JIT 컴파일 대비 시간이 당연히 더 소모됨.
수시로 확인을 하고 작업하는 경우는 JIT / 운영환경에서는 AOT를 사용하는게 바람직한 방법이다.
타입스크립트 자체가
95%정도? 이 퍼센테이지 표현이 맞는지는 모르지만, 정적타입언어의 특징을 어느정도 가지고 와서.
JS 생태계에 녹인것이기 때문에 마치 내가 JS를 Java 또는 es6 문법으로 짜는것과 같은 느낌을 줍니다.
FrameWork이기 때문에, 자율성이 없어요.
네 틀린말 아닙니다. React는 자율성이 보장이 되지만, 이 자율성을 정말 좋게 쓸려면 많은 경험과 이해도가 필요하다는 단점이 존재합니다.
그리고, 기존 우리회사 코딩 하는 방식이 마치 Angular처럼 template를 따로 분리하는방식이라. Angular를 익히면 진짜 훨씬 프론트단이 유지보수와 재사용성을 고려한 코드들이 많이 나올거 같습니다.(그러한 상용서비스를 만들기 위해서는 서로가 노력해야 하겠지만, React 보다는 코스트가 적을거라 예상합니다.)
Angualr JS (1.x)
성능이슈 및 서버사이드 렌더링 자체가 불가능
네이티브 코드 변환X
어떤 환경에서는 오작동..;
Angular2 그리고 4 현재는 5로 오면서 계속해서 많은 발전을 이루고 있음.
버전업 되면서 아이오닉도 업데이트 계속 진행 + 상태값이나 값추적 같은거는?
Observable객채로 쉽게 통신 할 수 있어서 상태가 관리가능합니다. 다만 프로젝트 규모가 커지거나 할때는 Redux 또는 MobX같은걸 써서 편의성을 추구 할 수 있습니다.https://github.com/ngrx/platform 이런녀석 / MobX 등을 같이 연동해서 사용가능.(React + MobX 구성해서 사용하는 곳도 존재)
이런 단점을 극복하기 위해, 변신해서 2가 나옴.(그래서 사람들이 통수 쩐다고 말함)