[ASAC 06] 프론트엔드 변천사(Vanilla JS, jQuery, React.js)

이 글은 ASAC 06기를 수강하며 강의 자료 참고 및 추가 자료 수집을 통해 작성된 글입니다.

프론트엔드 변천사

1. Vanilla Javascript

라이브러리나 프레임워크를 사용하지 않는 순수한 자바스크립트를 의미한다.

웹 페이지 화면 변경은 javascript를 통한 HTML(DOM) 조작으로 가능하다.
페이지의 전환 과정에서 리페인팅이 발생한다.

javascript가 수행하는 일

1. HTML(DOM) 이벤트 감지
2. HTML(DOM) 조작

vanilla javascript 사용상 단점

1. Hard to Manage
   : DOM 요소를 하나하나씩 매번 선택하여 조작을 가해야 한다.
   => jQuery로 해결!
   
   
2. DOM 요소 하나가 바뀔 때마다 매번 반복적인 Rendering Process
   • Render Tree -> Layout(Reflow) -> Paint(Repaint)
     => React로 해결!

2. jQuery 등장

jQuery 는 브라우저 호환성을 위한(크로스 브라우저) 자바스크립트 라이브러리이다. 크롬, 파이어폭스, 사파리 등 웹 브라우저의 종류는 다양하다.

브라우저마다 추가된 자바스크립트 문법들로 인해 동일한 자바스크립트 파일에 대해서 어떤 웹 브라우저에서는 동작하고 어떤 웹 브라우저에서는 동작하지 않았었다.

이러한 브라우저 간 호환성 문제를 극복하기 위해서 동일 자바스크립트 개발을 위한 라이브러리가 등장하였고 그것이 바로 jQuery이다.

DOM 조작 매우 쉽고 간편하다는 장점 또한 가지고 있다.

jQuery 지원 브라우저 : https://jquery.com/browser-support/

Browser Support | jQuery

 

 

해결하고자 하는 문제

1. 브라우저 호환성을 위해서 자바스크립트 조작 문법을 통일시킬 수 없을까?
2. 순수 자바스크립트로는 DOM 조작이 어렵다.

기능

• DOM 요소 선택 ( $  기호 사용)
• DOM 요소 조회(Traversal) 및 수정
• CSS 조작
• 이벤트 처리
• 특수효과 및 애니메이션
• AJAX 지원 및 JSON/XML 파싱
  ⇒ AXIOS 등장 전까지 사실상 자바스크립트에서 AJAX 사용을 위한 표준
  • 웹 브라우저마다 AJAX 상세 구현체들이 각양각색 (윈도우와 애플을 보는듯하다)
• 자바스크립트 개발을 쉽게해주는 여러 유틸리티 함수들
• 추가로는 lodash (데이터구조 조작) 도 자주 사용되었었으나, 요즘은 일반 자바스크립트에서 거의 다 지원

+) AJAX를 사용하는 이유?

웹 브라우저가 해석할 수 있는 언어는 두 가지이다.
=> 1. HTML (동기적 수행) 2. XML (비동기적 수행)

• XML은 가져와도 HTML로 표시할 필요가 없다.
  -> 리렌더링이 필요 없다. 데이터를 가져올 때는 HTML 대신 XML(비동기)로 가져온다.

3. React 등장

React 는 Javascript를 통한 DOM 조작을 단순화하는 프레임워크이다. (React는 실제로는 라이브러리이지만, 프레임워크로 분류된다.)

 

jQuery를 사용하여 DOM 조작 및 개발이 수월해졌으나, 여전히 다중 DOM 변경에 의한 다중 렌더링 문제가 존재한다.

하나의 이벤트가 다수의 DOM을 변경시키는 경우를 생각해보자.

데이터 변경으로 인한 이벤트 발생 시, 다음과 같이 여러 개의 DOM이 변경될 수 있다.
ex) 메세지 알림이 오게 되면, 1. 알림 뱃지 2. 메세지 창 두 가지의 DOM이 변경된다.

해결하고자 하는 문제

1. 데이터 상태가 바뀌면 해당 상태를 바라보고 있는 모든 요소들을 한 번에 바꿀 수 없을까?
2. 빈번하게 바뀌는 요소들 -> 페이지나 DOM 변환을 부드럽게하고 싶다.

리액트는 이러한 문제들을 VDOM을 통해 해결한다. VDOM은 Virtual DOM의 약자로, 가상적인 표현을 메모리에 저장하고 라이브러리(ex. ReactDOM)를 통해 실제 DOM과 동기화하는 프로그래밍 방법론이다.
각각의 DOM 변경을 하는 대신, VDOM으로 만든다. 그리고 VDOM들을 한데 모아(일종의 버퍼) DOM을 한 번에 조작(Batch)하게 한다.

기능

• VDOM 을 한데 모아 DOM 을 한번에 조작하게 하는 (Batch) 자바스크립트 코드가 들어있다.
• 페이지 이동을 네트워크를 쓰지 않고 자바스크립트를 통해 렌더링하여 SPA 가 가능하게 만들어준다.
• 로그인하고 난 뒤 세션을 관리하고, Cookie 나 localstorage 등을 활용하는 자바스크립트 코드가 있다.

이렇게 다양한 기능들을 한데 모아 “웹 페이지 렌더링을 간편히 개발하는데 도움이 되는 거의 모든것들을 제공”한다.

단점

브라우저로 전송되는 자바스크립트 파일의 용량이 크다. SSR의 경우 렌더링된 하나의 페이지를 가져오지만, 리액트와 같은 프레임워크를 사용하는 CSR은 매번 브라우저에서 렌더링을 해야하기 때문이다.