http://blog.naver.com/smilehsm29/220410119510
프론트엔드에 빠질 수 없는
자바스크립트
그 중에서도 요세 대세로 접어드는
react
여러분의 웹을 보다 빠르게
그리고
제이쿼리(jQuery)와 앵귤러JS(AngularJS)간의 삼각관계를
면밀히
조사해봅시다!
여러분 중에는 프론트엔드 개발자나 퍼블리셔도
이 글을 보시고 계실거라고 생각하고 있고
이제 막 프론트 웹을 배우는 새내기 개발자나, 백엔드 개발자도 보고 있을거에요.
그 분들을 위해서 javascript에 대해 간단한 서론을 시작할게요
(관심 없는 분들은 다음 글로 스크롤! 스크롤!)
HTML은 하이퍼텍스트 마크업 랭귀지입니다.
즉 초창기 HTML은 링크간의 연결과 정보를 나타내는 문서만을 알려주는 도구였죠.
하지만 요세 HTML은 DHTML의 줄임말이라고 해석하시면 됩니다.
HTML 문서에는 디자인을 위해서 스타일시트(CSS)가 필요해졌고,
동적(Dynamic) 표현을 위한 Javascript가 필요해졌습니다.
그렇게 Dynamic HyperText Markup Language(DHTML)이 생겨나게 된거죠
하지만 HTML의 역사는 거기서 끝이 아닙니다!
Javascript는 여전히 사용하기 불편했죠
이유는 간단합니다.
이제는 3대 브라우저라 불릴
익스플로러, 파이어폭스, 크롬
각각의 Javascript 사용방법이 달랐고,
또 버전마다도 그 작성방법이 달랐죠
그리고 Javascript의 기존에 지원하는 기능들로는 화려한 효과를 낼 수가 없었습니다.
그렇게 동적인 기능중에도 일부만을 사용할 수 밖에 없었던
자바스크립트(Javascript)는 제이쿼리(jQuery)를 만나면서 많은 변화가 생깁니다.
HTML에 모션 애니메이션을 넣고, 동적으로 모든 페이지를 처리하는(Ajax)
다양한 기능이 생기게 된거죠.
하지만 여기서도 문제가 생깁니다.
동적으로 페이지를 처리하다보니, 초기화부터
엘리먼트랑 정보를 연결해주는게 너무 번거롭고
그것들이 꼬여있다는 거죠
그래서 또 다시 변화하게 됩니다.
구글에서 앵귤러JS(AngularJS)를 발표하게 된 것이죠.
앵귤러는 놀라운 기술이었습니다.
문서(DOM)와 정보(Infomation)을 연결(Binding)하는 기술이죠
사용자가 정보가 변할때마다 문서를 업데이트 해주지 않더라도
Watcher라는 감시자가 정보가 변하면 자동으로 문서에 연결해주었습니다.
거기에 MVC 디자인 패턴을 프론트에서도 사용할 수 있게 되었죠
하지만 AngularJS도 문제에 봉착하게 됩니다.
감시자들이 많아질 수록 속도가 느려지고, 랜더링 시간이 길다는 것이죠
이 때 페이스북은 발표하게 됩니다.
바로 React 프레임워크!
리액트(React)는 반응하다라는 동사를 가지고 있는 단어입니다.
그럼 React는 뭐가 좋을까?
React는 MVC패턴 중 View를 극도로 최적화한 프레임워크로
AngularJS에서 장점인 양방향 바인딩에서 극명한 단점으로 확인된 속도문제를
단방향 바인딩으로 합의했으며
가상문서(Virtual DOM)라는 방식을 사용하여
랜더링 속도를 비약적으로 끌게 되었습니다.
개인적으로 React 신텍스는 조금 어렵게 느껴지겠지만
익숙한 사용자라면 금방금방 사용하실 수 있습니다.
또한 외국에서는 이미
AngularJS와 React를 합쳐서
앵귤러의 단점을 React로 극복하여
서로간의 장점만을 사용하는 방식 또한 출현하였습니다.
어떤가요?
차세대 기술은 우리의 생각을 앞서나가고 있는 것 같군요
사실 JS 프레임워크는
언더스코어나 Require.js, 엠버나 Backbone등 다양하지만
대표적인 3개 프레임워크를 뽑아 살펴보았습니다.
더 알고싶으신 프레임워크가 있다면
댓글 작성!
댓글이 많이달린 프레임워크는
다음 포스팅에 주제가 됩니다~
[출처] 이슈가 되는 react! 그리고 제이쿼리와 앵귤러간의 삼각관계|작성자 스나형
