AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
Java Memory 구조와 내용에 대해서 정리한 PPT 입니다.
회사에서, 서버가 메모리 누수가 발생하여 뻗는 사건이 생겨서 팀원들이 전부 공부를 해서 발표를 했습니다.
GC는 Heap 영역에서 일어납니다.
메서드 영역 : 클래스 놀이터 입니다.
힙 영역 : 생성된 객체 및 배열 놀이터 입니다.
스택 영역 : 메서드 놀이터 입니다.
자바스크립트 스터디 하면서, 발표했던 자료.
(각자 맡은 부분에 대한 개념 정리해서 발표)
JavaScript 중요 개념인 실행컨텍스트와 클로저에 대해서 정리가 되어있다. (업로드 하면서 다시 봤는데. 여전히 어렵고 헷갈린다)
실행컨텍스트는 자바스크립트에 실행환경 등의 정보를 확인하는 도구로 이해하면 된다.
- 참조 : 인사이드 자바스크립트
REST에 대한 내용을 정리한 PPT 입니다.
많은 내용이 있지만 축약 또는 이해되는 내용만 정리를 하려고 하다보니 빠진 부분이 있을 수 있습니다.
REST는
1. URI와 HTTP Method를 이용해 객체화된 서비스에 접근하는 것.
2. HTTP URI로 잘 표현된, 리소스에 대한 행위를 HTTP Method에 정의 리소스에 내용은 json, xml, yaml 등의 다양한 언어로 정의.
3. 하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다는 개념.* REST는 표준이 아님 + REST는 프로토콜이 아님.
결론적으로 REST API를 사용하는 궁극적인 목적은
서로 다른 플랫폼(OS, 개발언어)에서 데이터를 주고받기 위해서와 범용 인터페이스(HTTP/URI)를 만들어서 각 API를 독립적으로 배포하기 위함이다.
객체지향에 관련해서, 가볍게 내용을 정리하였습니다.
참고서적 : 스프링 입문을 위한, 자바 객체 지향의 원리와 이해 김종민 지음
객체지향.
말은 참 어려운데. 프로그래밍 하면서 사람이 인식하는 사물 또는 실체를 하나하나 조합해서 프로그래밍 하자는 패러다임입니다.
쉽게, 객체를 가지고 놀자 이겁니다.
객체지향언어에서는
클래스(Class) 객체(Object)가 존재합니다.
클래스는 추상화 및 분류
객체는 실제를 의미합니다.
예) 사람클래스 -> 원빈 객체 / 동물 클래스 -> 고양이 객체
4대 특징
- 캡슐화
- 상속
- 추상화
- 다형성
객체지향 개념을 완벽히 이해하려면. 많이 공부해야 할거같습니다..ㅠㅠ
TDD 테스트 주도 개발이며, 하나의 개발 방법론 입니다.
- TDD는 반복 테스트을 이용한 소프트웨어 개발법이다. 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 소프트웨어를 구현한다.
- TDD의 목표는 작동하는 깔끔한 코드 “Clean code that works”
- TDD는 아래 단계의 반복으로 진행된다.
빨강 : 실패하는 작은 테스트 케이스를 작성한다. 처음에는 컴파일조차 안될 수 있다.
초록 : 테스트를 통과하는 코드를 작성한다.
리펙터링 : 테스트를 통과하기 위해 만든 코드의 모든 중복을 제거하고, 불명확한 것을 명확히 한다.
이러한 단계로 인해 TDD는 “업무 코드 작성 전에 테스트 코드를 먼저 만드는 것”으로 정의되기도 한다
Spring Framework 에서 중요한 개념인 DI(의존성 주입)에 대해서, 정리하였습니다.
DI(Dependency Injection) 란?
- 스프링 IoC 컨테이너 핵심 개념 중 하나
- 다양한 프레임워크에 이미 적용되어 있는 기능
- 객체 간의 의존 관계를 외부의 조립기가 관리
- 불필요한 의존 관계를 없애거나 줄일 수 있음
- 단위테스트 수행 수월
- 설정파일과 애노테이션을 이용하여 객체 간의 의존 관계를 설정
- 각 객체를 빈(bean)으로 관리
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에는 타입을 검사하는 타입검사기가 존재하지 않습
니다.)
Editor's Notes
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가 나옴.(그래서 사람들이 통수 쩐다고 말함)