기본 콘텐츠로 건너뛰기

#DEVIEW 2016 React vs Angular 2 , Angular 2 vs React

#DEVIEW 2016 React vs Angular 2 , Angular 2 vs React

2016 DEVIEW 후기! - Angular 2 vs React 강연!

개발환경 언어 생산성 컴포넌트 / 템플릿 데이터 동기화 비동기처리

1. 개발 환경 Setting ( ? ) Angular 2 개발환경 구축하기

2. 언어 생산성 - TypeScript ( 영향력 : ✭✭☆☆☆ )

그 정체는 무엇인가

TypeScript는 유연함이 장점인 언어인 JavaScript를 잘못 사용하게 되면, 큰 버그를 발생시킬 수 있는 부분을 보안하기 위한 언어이다. ( 굳이 예를 들자면, 인자를 넘겨받을 때 해주는 타입체크라던지…)

일단 여기서 한 가지 짚고 넘어가자. Angular 2에서 MS의 TypeScript를 웹 표준으로 만들기 위해 열심히 밀고 있는 것은 사실이지만, JavaScript, Dart 도 지원하고 있다. 하지만 TypeScript로 공식적으로 지정한 것은 위에서 언급한 JavaScript의 문제점을 구글도 심각하게 받아들이고 있다는 것이다.

그래, 그럼 React도 TypeScript를 쓰면 되잖아?

말이 쉽지 생각해봐야 하는 부분이 있다.

TypeScript에는 JavaScript에 타입을 지정했다든데, 자바스크립트의 외부 모듈, 라이브러리를 도입해야하는 경우에도 타입이 지정되어 있나? 외부모듈이 타입을 제공하지 않는다면, 타입 정의 파일을 찾아봐야 하고 최악의 경우 없으면 직접 만들어야 한다. 귀찮으면 Any로 정의하면 되지만 그럴꺼면 TypeScript를 왜 쓰는가! 또 어떤 부분은 타입이 정의되고 어떤 부분은 타입이 정의되지 않아 코드의 일관성이 깨지게 된다. 타입이 정의되면 좋지만 그만큼의 비용이 발생하게 된다.

이러한 이유로 React에서도 TypeScript를 사용할 수 있지만 그렇게 하지 않고 Flow라는 정적 분석 타입기를 사용한다. 또한 Flow와 TypeScript를 함께 사용하는 경우는 거의 없고 그럴 필요를 느끼지 못한다. 하지만 Flow의 등장은 React진영인 페이스북에서도 자바스크립트의 문제점에 대해 TypeScript와 같은 생각을 갖고 있는 것은 분명하다!

개인적인 마음으로는 빨리 ECMAScript가 TypeScript의 문법들을 끌어안았으면 좋겠다. 얼마나 깔끔한가!

사견 >>

TypeScript를 사용하여 코딩을 하면, 문제를 일으킬 여지들을, 버그를 발생시킬 수 있는 여지들을 없앨 수 있고, 코드가 훨씬 간결해진다. 물론 이와 함께 가독성도 좋아진다. 하지만 외부모듈을 도입하는데 있어서는 많은 문제가 발생한다. Angular2는 All-in-One FrameWork 이기 때문에 외부 모듈과 관련된 문제가 적지만, React의 경우는 조금 다르다. 외부 모듈을 많이 조립하여 사용하여야 하기 때문에, TypeScript에 대한 문제는 무시할 수 없다.

React를 위해서는 TypeScript보다는 Flow를 사용하는 것이 더 나아보인다. 하지만 TypeScript가 새로운 언어가 아니라 ECMAScript의 Next 모습이라면? TypeScript를 공부하는 것이 새로운 언어를 공부한다는 느낌이 아니라, JavaScript 개발자로서, 미리 투자한다고 볼 수 있지 않을까?

React 사용자들은 Flow를 쓰다가 TypeScript로 갈아타야하는 경우가 올 수 있지만, ECMAScript의 표준을 잘 따라가다 보면, 이 정도는 그렇게 큰 문제가 된다고 보지 않는다.

2. 컴포넌트 구성하기 ( 영향력 : ✭✭ ✭ ☆☆ )

컴포넌트( Component) 란?

뷰를 구성하는 요소로 보통 HTML과 CSS와 JavaScript 코드를 하나로 뭉쳐놓은 것을 말한다.

Angular 2를 살펴보자면 Angular 2에서 제공하는 encapsulation을 무기로 꺼내들 수 있겠다.

다른 html 에서도 외부 CSS에 영향없이 사용할 수 있게 해준 것이다. Component 를 정말 Component 처럼 사용할 수 있는 것이다. 그렇기 때문에 재사용성과 이식성이 정말 높다.

하지만 React의 컴포넌트는 어떠한가? 반쪽짜리 Component이다. Angular2 처럼 온전한 Component를 구성하기 위해서는 Webpack의 CSS Loader를 사용하여 CSS Encapsulatioin을 사용해야 한다. React가 조금 번잡스러운 과정이 필요하지만 이 부분에서 제공하는 기능은 궁극적으로 같다고 볼 수 있다. Angular처럼 All-in-one 프레임워크가 아니니 이 정도는 감수해야 하는 부분이 아닐까 하는 생각이 든다.

Template 부분

JSX!! 이게 뭐란 말인가. 마크업 개발자와 협업이 곤란하고, 디자인을 미리볼 수 없다는 치명적인 단점이 존재한다! 온갖 오해를 받고 있는 JSX. JSX의 본질은 자바스크립트이다. 자바스크립트에 HTML의 표현력을 얹은 것이다. 하지만 Angular2 가 제공하는 Template 표준 HTML을 확장한 것이므로 협업이 가능하고 마크업과 UI 개발을 분리했다!?

여기서 반론 Angular2가 제공하는 Template 은 협업과 무관한가?

No! 이 부분은 똑같다. 순수한 HTML은 동적 기능을 추가하는 순간 망가지게 된다. 디렉티브로 떡칠된 HTML은 더이상 HTML이 아니며, 마크업 개발자는 더이상 손을 못대게 된다. 수정사항이 발생하면 UI 개발자는 변경사항과 디렉티브로 떡칠된 HTML을 비교해가면서 수정해야한다.

이게 진정한 분리란 말인가? 아니다. 구조와 기능은 떨어뜨릴래야 떨어뜨릴 수 없는 것이다. Angualr2, React 둘 다 이 문제에 대해서는 별다른 해결책을 제시하지 못하였다. 그렇기 때문에 React는 그 시선을 다르게 한 것이다. 이것을 억지로 떨어뜨리려고 하지말고 그냥 그 자체로 하나로 보자는 것이다. 자바스크립트 개발자와 마크업 개발자가 나뉜 경우가 아닌, 한 명이 전체를 담당하는 경우라면 오히려 훨씬 더 생산성이 높을 수 있는 것이다.

사견 >>

프론트엔드 분야가 고도화되고 있는 분위기에 마크업 개발자와 UI개발자가 얼마나 나뉘어져 있는지 잘 모르겠다. 하지만 이 부분에서 만큼은 UI 개발자가 마크업까지 할 수 있다면, React가 생산성이 더 좋을 것 같다.

3. 데이터 동기화 ( 영향력 : ✭ ✭ ☆ ☆ ☆ )

UI 개발 프레임워크의 핵심인 부분이다.

기존의 Angular1은 Two-way Binding의 방식을 제공했다. 그러나 애플리케이션의 View와 Model의 관계는 대부분 1대1이 아니기 때문에 Two-way Binding은 구조를 복잡하게 만들 수 있다. 그리고 Two-way Binding이 얼마나 필요한가? 항상 필요한 것이 아니다. 필요한 부분에만 사용하면 되는 것이다. 그래서 이제는 1-way-binding이다.

Virtual DOM

React의 간판인 Virtual DOM이다.

메모리에 DOM의 상태를 저장하고, 수정사항에 대해 diff를 떠서 diff가 발생한 부분만 수정하는 방식이다. 하지만 React는 setState라는 메소드를 통해서 뷰에 변경사항을 사용자가 직접 저장해줘야 한다.

React의 천재적인 발상을 본받아 Angular 2 에서도 1-way-binding 으로 데이터를 동기화한다!

Angular 2에서는 각각의 컴포넌트에 Change Ditector를 두고, 변경사항을 감시하게 하였다. 그렇다. 데이터 바인딩 부분은 Angular가 React 의 원리를 차용한 것이다. 약간 다른 점은 Angular2는 뷰에 적용을 프레임워크 수준에서 해결해준다.

사견 >>

데이터 바인딩 부분에 대해서는 React가 약간 번잡한 부분이 있을 수 있지만 이것은 오히려 개발자가 다룰 수 있는 부분이 많다고 볼 수 있다. 서비스가 고도화되면 Angular가 기본적으로 제공하는 기능도 결국 customize 해야 하는 시점이 오지 않을까?

4. 비동기 처리 ( 영향력 : ✭ ✭ ☆ ☆☆ )

비동기 프로그래밍을 위해 Rx JS를 도입한 Angular2 왜? async await 같이 훌륭한 스펙이 있는데 learning curve가 높은 Rx JS를 도입한 이유는 무엇일까? Angular2가 Rx JS에 대한 부분을 개발자가 사용하기 쉽도록 만들어놨고, 제대로 자리를 잡고 나면, 자연스럽게 Rx JS에 대한 필요성이 증대되겠지만, 굳이…라는 생각이 든다. 비동기 프로그래밍을 위해 Rx JS를 도입한 Angular2 왜? async await 같이 훌륭한 스펙이 있는데 learning curve가 높은 Rx JS를 도입한 이유는 무엇일까? Angular2가 Rx JS에 대한 부분을 개발자가 사용하기 쉽도록 만들어놨고, 제대로 자리를 잡고 나면, 자연스럽게 Rx JS에 대한 필요성이 증대되겠지만, 굳이…라는 생각이 든다.

최후의 변론 Angular>>

Angular는 최소 기능과 기본적인 것들을 제공한다. Coding Convention과 Application Infra 그리고 겪을 문제들에 대한 솔루션이 제공된다. 또한 데이터 플로우에 Redux를 낄 수 있는 유연함이 있다. 또 벤더인 구글이 개발하다보니, 웹 표준에 가까워지려는 노력이 보인다.

최후의 변론 React>>

그러면 custominze가 필요하게 되는데, 이 때 angular가 제공하는 기본적인 기능들이 거추장스러울 수 있다. 각자가 맞닥뜨린 상황에 따라 맞는 솔루션을 찾아야 할 때가 온다.

프레임워크를 사용해야 할지 말아야 할지를 고민한 다음에 사용해야 한다면, 프레임워크를 사용해야하는 이유에 집중하자.

네 개의 토론주제들이 Angular, React 각각이 추구하는 철학이 뚜렷하고 방향성이 약간씩 달라서 서로를 비교하는데 큰 영향을 미치지 못했다. 정작 중요한 영향을 미치는 것은 도입하려고 하는 서비스가 기존에 어떻게 이루어지고 있는지 또는 프로젝트 팀원들의 상황 등과 훨씬 더 긴밀한 관계가 있을 것 같다. 각각의 도입 가이드가 정식으로 공개되면 훨씬 더 현실적인 비교가 가능할 것이라고 생각한다.

이 와중에 Vue.js 끌린다. Vue.js에 대해 정말 잘 소개해놓은 wiki와 블로그가 있다!!

React의 잠재력이 많이 드러나지 못해 조금 아쉬웠습니다! 하지만 Angular, React에 대한 내용뿐만 아니라 TypeScript, Rx JS에 대해서도 많이 배울 수 있는 시간이었던 것 같습니다! 좋은 강연해주신 손찬욱님, 김훈민님 그리고 김태훈 교수님께 감사드립니다!

end

from http://asfirstalways.tistory.com/308 by ccl(A) rewrite - 2020-03-07 13:21:33

댓글

이 블로그의 인기 게시물

[Vue] Angular 2 대신에 Vue.js를 선택한 이유

[Vue] Angular 2 대신에 Vue.js를 선택한 이유 들어가며 이 글은 Medium 의 "Why we moved from Angular 2 to Vue.js(and why we didn't choose React)" 글을 번역한 글입니다. 항상 이상적일 수만은 없는 실제 프로젝트 여건에서 신중하게 프레임워크를 고민하고 선정해 나가는 과정을 상세하게 기술한 글입니다. Angular 2로 구축되어 있는 프로젝트를 업그레이드 & 마이그레이션 하는 과정에서 프로젝트의 현 상황과 여건을 반영한 프레임워크 선정 기준을 세우고, Vue.js 프레임워크를 적용해 나가는 개인 경험담이 담겨져 있습니다. 급격하게 요동치는 프론트엔드 프레임워크 시대에, 프론트엔드 개발자로서 항상 어떤 프레임워크를 선정해야 할지 고민하는 데 인사이트를 제공하는 글이 되길 바랍니다. 본문 우리는 최근에 Rever 라는 사이트에 Vue.js로 개발한 웹 페이지를 오픈했습니다. 16주 동안 641 개의 커밋이라는 강도 높은 개발 과정을 지나고 나니, Vue.js 도입하기를 잘했다는 생각이 듭니다. 8 달 전에 우리는 Angular 2를 쓰고 있었습니다. 정확하게 말하자면 Angular 2 베타 9 버전이었죠. 외주가 Angular 2로 제작해놓은 웹 사이트가 있었는데, UX/UI부터 설계까지 한 번도 만족한 적이 없었습니다. 심지어 어느 부분에 대해서는 Angular 2 자체가 맘에 들지 않았어요. 경험담을 더 얘기하기 전에, Angular 2 베타 9와 Angular 2.0는 완전히 다른 제품이라고 말하고 싶습니다. 그렇기 때문에 문제가 있었죠. Beta 9부터 2.0.0까지 8 개의 Beta 버전이 있었습니다. RC 8 개와 2.0.0 버전, 그리고 업그레이드까지 합치면 총 17 개의 버전이 있었죠. 우리는 Beta 9에서 2.0.0으로 업그레이드를 시도했지만, 상당히 많은 부분들이 호환되지 않아 업그레이드 작업이 버거워졌습니다. ...

Redux + React

Redux + React Redux는 state 관리 툴이다. 오해하지 말아야할 것이, React에 의존하지 않는 툴이다. Vue, Angular 심지어 vinilla JS에서도 돌아간다. 그러나 React에서 사용하면서 유명세를 탄 것도 사실이므로 React와 Redux를 같이 배우는 것이 좋다. 우선 기본적인 Redux를 살펴보고 이후에 React에 적용해보도록 하자. 🚗 redux 설치 npm i redux 🚗 Reducer Context API와 마찬가지로 Store는 정보를 저장하는 곳입니다. 여기서 reducer라는 개념이 새로 등장합니다. reducer는 간단하게, 1️⃣저장소(Store)에 있는 데이터를 수정하는 함수입니다. 2️⃣reducer가 return하는 값은 Store에 저장됩니다. 정리하자면, Store에 있는 data를 컨트롤하고 저장하는 중요한 함수라고 보면 됩니다. reducer만이 데이터를 수정할 수 있기 때문에 추후에 데이터를 수정, 가공하기 위해서는 반드시 reducer를 거쳐야만 합니다. import { createStore } from "redux"; // createStore 함수에게 전달할 reducer를 만듭니다. // reducer는 data를 수정(modify)할 함수입니다. const countModifier = () => { return "Hello" }; // 정보를 저장하는 store를 생성합니다. const countStore = createStore(countModifier); 여기서 Store란 객체가가 가지고 있는 함수를 살펴봅시다. 전부 다 알아야 하지만 가장 중요한 3개를 먼저 알아보겠습니다. getState란 함수에는 reducer가 return한 값이 담겨 있으며 dispatch를 통해 reducer에게 action을 줄 수 있습니다. subscribe는 store 안의 변화를 감지합니다. Store를 구독...

[Angular2] 1. Component 소개 (1)

[Angular2] 1. Component 소개 (1) 1. Component 컴포넌트는 애플리케이션의 화면 단을 구성하는 중요한 구성요소이다. Angular에서 화면을 구성하는 요소는 컴포넌트로서, Angular에서는 컴포넌트를 중심으로 개발을 진행 한다. 1. 1 Web Component Angular Component는 W3C 표준인 Web Component 기술을 기반으로 합니다. Web Component를 알아보면 Angular Component를 이해하기 쉽습니다. Web Component 기술은 하나의 기능이 아니라 HTML, CSS, JavaScript 가 합해져 하나의 Web Component를 구성합니다. Web Component의 기술요소는 다음과 같습니다. HTML Template Template 호출 Shadow DOM Custom Element * Web Component는 비교적 최근에 나온 기술이기 때문에 Web Component를 이용하려면 webcomponent.js 또는 polymer 같은 보완 라이브러리를 이용 합니다. - HTML Template HTML Template은 Component의 UI를 표현하는 영역입니다. 웹 페이지의 일부분으로 동작하며, 재사용 가능하다는 특징이 있다 1 2 3 4 5 6 7 메인 소개 로그인 cs - Template 호출 Template을 정의 했다면 외부에서 link 엘리먼트를 이용해 Template을 호출할 수 있습니다. 1 2 3 4 Colored by Color Scripter cs Template을 실제로 사용하려면 쿼리 선택자를 이용해 선택한 Template 노드를 현재 문서의 DOM 노드 밑으로 붙입니다. 1 2 3 4 5 6 var link = document .querySelector( 'link[rel="import"]' ); var content = link.i...