SlideShare a Scribd company logo
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
React 를 공부를 하고.
- Hello World 찍기 겁나 힘드네.
- Webpack / Babel 이거 뭐하는 녀석이야?
- 책 사서 보는데, 어떤 책은 예제도 안돌아가네! 아
예 작성방식이라던가 API가 많이 바뀌었어!
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
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 ? 고유의 실행방식과 정해진 규칙이 존재(골격, 틀) / 정해진 틀에 작성된, 비즈니스 로직을 관리 실행하는 컨테이너 / 프
레임워크 사용을 함으로써, 유지보수와 생산성 및 코드통일화를 기대할수 있다.
2016년 Angular 2.0.0 발표 이후, Google에서는 6개월 이후에 Angular 3.x.x 에 대
한 계획을 발표!
-> 어? 아니 2.0.0 나온지 얼마나 됬다고, 또 버전업 해서 뭘 그렇게 바꿔?
그런데, 2017. 03월에 Angular 4.0.0이 출시!
-> 아니, 버전 이렇게 확확 쌩까고 올리고 뭐하자는 거냐? 이거는 Angular 버저닝
과 출시 정책을 보면 의문이 해소가 됩니다.(그리고 Angular팀에서 출시일정을 계
획하여, Angular의 지속적인 발전을 지향하고 있습니다.)
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
Angular 살짝 해보고 발표.
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
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
- 헤일즈 버그 왈 : “당신이 JS를 알고 있다면, 이미 TS를 알고 있다.”
-> TS자체가 표준으로 시작해서, 대규모 JS App을 간단하게 만드는 언어가 되자가 목표이기에 정말 JS
를 알고 있다면, 금방 따라갈수 있는 수준입니다.(CoffeeScript 한번 보고 오시면..ㅎㄷㄷ)
- TypsScript는 JS의 상위 집합(SuperSet) 이며, CoffeeScript / DART 처럼 독립 실행이 아닙니다.(상위
집합이기에, 결론적으로는 JS로 전부 변환이 되며 컴파일 도구를 통해, es5 / es6로 간단하게 변환이 가
능)
- 명시적으로 Type을 선언함으로서, 코드를 안정적으로 수정 및 오류를 catch할 수 있기에, 유지보수
성 및 코드의 일관성을 유지할 수 있습니다.(Babel에는 타입을 검사하는 타입검사기가 존재하지 않습
니다.)
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.

More Related Content

PPTX
Angular vs react
PPTX
Angular 기본 개념 잡기
PPTX
Angular2 톺아보기
PDF
Angular는 사실 어렵지 않습니다.
PDF
원모먼트 Vue js 적용기
PPTX
ECMA Script
PDF
최근 Javascript framework 조사
PPTX
How_to_choose_the_right_framework
Angular vs react
Angular 기본 개념 잡기
Angular2 톺아보기
Angular는 사실 어렵지 않습니다.
원모먼트 Vue js 적용기
ECMA Script
최근 Javascript framework 조사
How_to_choose_the_right_framework

What's hot (20)

PDF
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
PDF
Angular Seminar [한빛미디어 리얼타임 세미나]
PPTX
웹-프론트엔드 프레임워크를 고르기 위한 팁
PPTX
PPTX
Webframeworks.kr의 소개
PPTX
Vingle tech talk #1
PPTX
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
PPT
Meteor를 통해서 개발하는 웹어플리케이션 서비스
PDF
가볍게 살펴보는 AngularJS
PDF
React vac pattern
PDF
리액트 적용기
PPTX
Data-binding AngularJS
PDF
[ES6] 2. arrow function
PDF
03 jsx
PDF
Effective c++ item45
PPTX
모듈시스템과 webpack
PDF
Golang+on+analytics+and+blockchain
PDF
모바일 웹앱 프로그래밍 과정
PPTX
Sencha review
PPTX
Sencha review
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
Angular Seminar [한빛미디어 리얼타임 세미나]
웹-프론트엔드 프레임워크를 고르기 위한 팁
Webframeworks.kr의 소개
Vingle tech talk #1
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
Meteor를 통해서 개발하는 웹어플리케이션 서비스
가볍게 살펴보는 AngularJS
React vac pattern
리액트 적용기
Data-binding AngularJS
[ES6] 2. arrow function
03 jsx
Effective c++ item45
모듈시스템과 webpack
Golang+on+analytics+and+blockchain
모바일 웹앱 프로그래밍 과정
Sencha review
Sencha review
Ad

Similar to Angular 살짝 해보고 발표. (20)

PDF
AngularJS 2, version 1 and ReactJS
PDF
앵귤러 첫걸음(Angular for beginers)
PDF
Angular Popular Tools
PDF
Angular Features and New Things
PDF
Angular CodeLab 두번째
PPTX
Angular2를 활용한 컴포넌트 중심의 개발
PDF
Front end dev 2016 & beyond
PPTX
Single-page Application
PDF
LucideWorks Banana 소개
PDF
Spring3 발표자료 - 김연수
PPTX
Angular 2 rc5 조사
PDF
2017. 프론트엔드 트랜드
PPTX
Angular, What is SinglePageApplication
PDF
Angular CodeLab 첫번째
PDF
Angularcdk
PPTX
모바일 크로스플랫폼 비교 - 월간슬라이드 4월
PDF
Angualr2에서 typescript 활용하기
PPTX
Spring Boot + React + Gradle in VSCode
PDF
Angularjs 도입 선택 가이드
PDF
Spring boot와 docker를 이용한 msa
AngularJS 2, version 1 and ReactJS
앵귤러 첫걸음(Angular for beginers)
Angular Popular Tools
Angular Features and New Things
Angular CodeLab 두번째
Angular2를 활용한 컴포넌트 중심의 개발
Front end dev 2016 & beyond
Single-page Application
LucideWorks Banana 소개
Spring3 발표자료 - 김연수
Angular 2 rc5 조사
2017. 프론트엔드 트랜드
Angular, What is SinglePageApplication
Angular CodeLab 첫번째
Angularcdk
모바일 크로스플랫폼 비교 - 월간슬라이드 4월
Angualr2에서 typescript 활용하기
Spring Boot + React + Gradle in VSCode
Angularjs 도입 선택 가이드
Spring boot와 docker를 이용한 msa
Ad

More from ChangHyeon Bae (16)

PPT
호이스팅, 클로저, IIFE
PPTX
Webpack&babel
PPTX
PPTX
PPTX
javascript03
PPTX
javascript02
PPTX
javascript01
PPTX
Java memory
PPTX
JavaScript 실행컨텍스트와 클로저
PPTX
WAS와 웹서버 간단 정리
PPTX
REST Concept
PPTX
Srping data rest
PPTX
OOP - Object Oriendted Programing
PPTX
TDD - Test Driven Development
PPTX
DI - Dependency Injection
PPTX
CDN - Content Delivery Network
호이스팅, 클로저, IIFE
Webpack&babel
javascript03
javascript02
javascript01
Java memory
JavaScript 실행컨텍스트와 클로저
WAS와 웹서버 간단 정리
REST Concept
Srping data rest
OOP - Object Oriendted Programing
TDD - Test Driven Development
DI - Dependency Injection
CDN - Content Delivery Network

Angular 살짝 해보고 발표.

  • 4. React 를 공부를 하고. - Hello World 찍기 겁나 힘드네. - Webpack / Babel 이거 뭐하는 녀석이야? - 책 사서 보는데, 어떤 책은 예제도 안돌아가네! 아 예 작성방식이라던가 API가 많이 바뀌었어!
  • 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
  • 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
  • 20. - 헤일즈 버그 왈 : “당신이 JS를 알고 있다면, 이미 TS를 알고 있다.” -> TS자체가 표준으로 시작해서, 대규모 JS App을 간단하게 만드는 언어가 되자가 목표이기에 정말 JS 를 알고 있다면, 금방 따라갈수 있는 수준입니다.(CoffeeScript 한번 보고 오시면..ㅎㄷㄷ) - TypsScript는 JS의 상위 집합(SuperSet) 이며, CoffeeScript / DART 처럼 독립 실행이 아닙니다.(상위 집합이기에, 결론적으로는 JS로 전부 변환이 되며 컴파일 도구를 통해, es5 / es6로 간단하게 변환이 가 능) - 명시적으로 Type을 선언함으로서, 코드를 안정적으로 수정 및 오류를 catch할 수 있기에, 유지보수 성 및 코드의 일관성을 유지할 수 있습니다.(Babel에는 타입을 검사하는 타입검사기가 존재하지 않습 니다.)

Editor's Notes

  • #9: WebPack 설정이 가능하나, 저런 경우, package.json의 빌드/시작스크립트가 새명령으로 변경이 됨. 이런 경우 사용자는 또 무언가를 수정해야함. 애초에 왜 이러나면, 학습곡선을 줄이기 위해, WebPack구성을 수정하지 못하게하는 것이 설계상의 결정이었기 때문.
  • #17: AOT 컴파일을 하는 경우, 시간이 더 오래 걸리는 부분이 보임. AOT 컴파일에 단점이 있다면, 브라우저에서 실행이 되기 전에 앵귤러 코드를 JS로 변환하기 때문에, 플랫폼 의존적인 동적 코드를 사용 하면 안됌.(예: window.location.href / document.URL 등) AOT는 번들링 전에 컴파일 과정이 이루어 지기 때문에, JIT 컴파일 대비 시간이 당연히 더 소모됨. 수시로 확인을 하고 작업하는 경우는 JIT / 운영환경에서는 AOT를 사용하는게 바람직한 방법이다.
  • #21: 타입스크립트 자체가 95%정도? 이 퍼센테이지 표현이 맞는지는 모르지만, 정적타입언어의 특징을 어느정도 가지고 와서. JS 생태계에 녹인것이기 때문에 마치 내가 JS를 Java 또는 es6 문법으로 짜는것과 같은 느낌을 줍니다.
  • #23: FrameWork이기 때문에, 자율성이 없어요. 네 틀린말 아닙니다. React는 자율성이 보장이 되지만, 이 자율성을 정말 좋게 쓸려면 많은 경험과 이해도가 필요하다는 단점이 존재합니다. 그리고, 기존 우리회사 코딩 하는 방식이 마치 Angular처럼 template를 따로 분리하는방식이라. Angular를 익히면 진짜 훨씬 프론트단이 유지보수와 재사용성을 고려한 코드들이 많이 나올거 같습니다.(그러한 상용서비스를 만들기 위해서는 서로가 노력해야 하겠지만, React 보다는 코스트가 적을거라 예상합니다.)
  • #26: Angualr JS (1.x) 성능이슈 및 서버사이드 렌더링 자체가 불가능 네이티브 코드 변환X 어떤 환경에서는 오작동..; Angular2 그리고 4 현재는 5로 오면서 계속해서 많은 발전을 이루고 있음. 버전업 되면서 아이오닉도 업데이트 계속 진행 + 상태값이나 값추적 같은거는? Observable객채로 쉽게 통신 할 수 있어서 상태가 관리가능합니다. 다만 프로젝트 규모가 커지거나 할때는 Redux 또는 MobX같은걸 써서 편의성을 추구 할 수 있습니다. https://github.com/ngrx/platform 이런녀석 / MobX 등을 같이 연동해서 사용가능.(React + MobX 구성해서 사용하는 곳도 존재) 이런 단점을 극복하기 위해, 변신해서 2가 나옴.(그래서 사람들이 통수 쩐다고 말함)