Skip to content

00.Angular

Jump to bottom
cjfamily edited this page Nov 23, 2016 · 12 revisions

배경

Angular 1.x은 높은 생산성으로 많은 개발자들에게 좋은 평가를 받았지만 Two-way binding(데이터 변경만으로 뷰들을 일괄 변경할 수 있는 기능을 제공했지만, 이와 같이 데이터 흐름이 양방향으로 이루어 지다 보니, cascade 효과가 발생하여, 불필요한 digest가 발생)과 client rendering(Client Rendering으로 인해 하얀화면이 보이는 것? (FOUC:Flash of unstyled content)) 구조로 성능에 문제가 있다라는 지탄.

구조적인 개선

  • Two-way binding -> 단방향 데이터 흐름의 구조

  • client rendering -> Server Rendering 개선되며 React와 Angular2 등장

신규 프레임워크 탄생

  • Front-End 프레임워크에 대한 관심은 Facebook의 React가 발전하며 Virtual DOM과 JSX의 server rendering을 이용하여 성능이 좋다 라는 이야기와 함께 개발자들에게 퍼짐

  • 구글 주도하에 Angular2는 Angular1과 같은 단점을 보강했고, React와 같은 구조로 새로 만들어짐.

Angular2 프레임워크는 최신 웹프론드 기술을 기반으로 웹 개발을 좀 더 구조적으로 할 수 있는 환경을 제공해 줍니다. 따라서 기존에 서버 개발만 주로 하셨던 분들도 Angular2를 사용하면 좀 더 쉽고 재미있게 웹앱을 개발할 수 있습니다. Angular2는 구글 주도하에 개발하고 2016년 새해 Angular 2가 5월 3일 기준 Release Candidate 버전. Angular2는 2016말 정식릴리즈를 준비중이며, 현재는 RC.4까지 진행되었습니다. Angular2는 Angular1의 확장이 아닌 새로 만들어짐

Angular2의 주요 구성단위

  • Module, Component, Template
  • Metadata, Data Binding, Directive
  • Service, Dependency Injection

React보다 Angular2에 더 주목해야하는 이유

1) 템플릿(마크업)과 코드의 분리

  • react 단점

React는 개발시 코드 안에 JSX가 포함

render() {
	var list = this.props.pagelist.map((v, i) => {
		return <li key={i}><Link to={v.url}>{v.text}</Link></li>
	});
	return (
		<div className="main-container">
			<h1>{this.props.title}</h1>
			<p>{this.state.message}</p>
			<nav className="navbar navbar-default" role="navigation">
				<div className="col-sm-7 col-sm-offset-2">
					{list}
				</div>
			</nav>
			{this.props.children}
		</div>
	);
}

하지만, Angular2에서는 다음과 같이 템플릿 자체를 별도의 파일로 관리

@Component({
	templateUrl: 'app.component.html',
    // ...
})

2) HTML 표준과 Web Component

React는 JSX라는 새로운 언어로 뷰를 만듭니다. 이 JSX 는 우리가 생각하는 마크업(HTML)과 비슷하지만, 다른 언어입니다. HTML 표준 마크업을 템플릿으로 사용하는 Angular2는 JSX의 제약이 전혀 없습니다. 더군다나 Web Component 를 지원하고 있기 때문에, Shadow DOM과 같이 뷰 단위로 css를 지정할수도 있습니다.

3) TypeScript

Typescript는 Microsoft에서 만든 언어입니다. 자바스크립트에 “타입”을 추가해서 만든 확장형 자바스크립트 언어 타입이 존재하지만. 존재하지 않는 언어 TypeScript를 지원하기 때문에 Angular2가 진입장벽이라고 이야기하시는 분이 많습니다. 사실, 저 또한 그랬습니다. 하지만, 좀 써보니 그렇지 않은 것 같습니다. 예를 들어, React에서는 Component의 prop에 타입을 지정합니다. 다음과 같습니다.

Main.propTypes = {
    title: PropTypes.string.isRequired,
    pagelist: PropTypes.array
};

자유도가 높은 JavaScript에서 왜 이런 작업을 하는 것일까요? 당연히 필요하기 때문입니다. Front-End 비중이 높아지면 질수록, 타입체크는 꼭 필요한 기능 중 하나인거죠. 하지만, TypeScript는 다음과 같이 코드에서 부터 타입을 명시할수 있습니다.

var title: string;
var pagelist: string[];

가장 좋은 점은 타입을 지정하는 것이 꼭! 필수는 아니다는 것입니다. 그래서 TypeScript로 개발을 하더라도 그냥 JavaScript와 같이 쓸수 있습니다.

미래를 준비하는 언어

React를 쓰려면 JSX를 변경하기 위해 transpile 과정을 꼭! 해야만 합니다. 그래서 일반적으로는 ES6 까지 함께 적용하여 개발을 합니다. Angular2가 사용하는 TypeScript 또한 꼭! transplie 과정을 거칩니다. 어차피 개발환경에서 하는 일은 동일합니다. 하지만, TypeScript는 아래와 같이 ES5,6 기본 스펙을 포함하고 있고, 더불어 annotations과 type을 가지고 있습니다. ES2017에서 decorator, async와 같은 스펙이 이미 논의되고 있습니다. 이 부분이 TypeScript를 사용하게 되면 미리 사용할 수 있는 장점이 있습니다. 즉, 최신의 ECMAScript 를 사용할 수 있다는 것입니다.

4) 프레임워크 내에서의 설계

Angular1은 controller, service, directive등과 DI(Dependency Injection) 방식을 제공하여 많은 면에서 정해진 룰(?)에 의해 개발을 할 수 있는 장점이 있습니다. 반면, React는 Flux나 Redux와 같은 데이타 플로우 설계에 대한 많은 선택지가 있습니다. 많은 선택지가 있다는 것은 선택을 해야하는 자유도가 높아 유연성이 좋다는 의미이기도 하지만, 다른 한편으로는 올바른 선택을 하기 위해서는 많은 경험과 높은 이해도가 필요하다는 이야기 입니다. Angular2는 Angular1과 React의 중간점에 있다고 생각됩니다. React와 다르게 프레임워크이기 때문에, 어느 정도 정해진 플로우를 사용하면서, Flux, Redux, RxJS와 같은 것을 유연하게 적용할수도 있습니다.

5) 브라우저 벤더 “구글”. Angular2는 구글 주도하에 개발

Angular2는 구글 주도하에 개발되고 있는 Front-End 프레임워크입니다. 브라우저를 만드는 구글이기 때문에, Angular2에도 브라우저의 표준을 따르려고 하는 모습이 보입니다. 기본적으로 사용하는 템플릿도 HTML표준이고, 컴포넌트들의 모습도 Web Component를 지향하고 있으며, 심지어 애니메이션 처리하는 부분도 Web Animation API를 지향하고 있습니다. 물론, Facebook의 React도 그 행보가 유사하지만, 구글과 같이 민첩하고 직접적으로 표준을 지켜나가는 모습은 아닙니다.

Angular2 프레임워크 안에 이미 최신의 프론트 엔드 기술과 개념들이 어우려저 사용되고 있기 때문에 우리는 이 개념들을 하나씩 이해하고 넘어가야 합니다. 따라서 Angular2를 사용하려면 적어도 아래와 같은 키워드를 한 번씩 훑어보지 않을 수 없습니다.

. NPM . ES6와 Module(CommonJS, AMD…) . Transpiler(Polyfill, shim) . TypeScript, (typings, tsd) . Angular 프레임워크 관련 개념: MVVM, Change Detector, Observable, Immutable, Two-way Binding, Zone.js . RxJs . Webpack 등의 Bundler

구축 http://www.notforme.kr/archives/1585

Angular2에서 Typescript를 사용하는 이유 [Angular2] 지시자(Directive) 반응형 프로그래밍 분류 [Angular2] 데이터 바인딩 [Angular2] 상태 다루기 [Angular2] 예제 프로그램 및 프로젝트 셋팅 [Angular2] Component Angular2: QuickStart 따라하기 Angular2 시작하기 http://www.notforme.kr/archives/tag/angular2

Clone this wiki locally