[ASAC 6기] 웹 개발이란 무엇이며, 어떻게 동작하나? FE(1) -jQuery, React

✅웹 개발은 무엇인가?

웹 페이지 그 자체 + 웹 페이지 내 표기할 데이터

🔷웹 페이지(FE)

HTML = 문서구조(구조)

CSS = 문서 꾸미기(형태)

JS = 유저 인터렉션(유저 이벤트 처리 및 DOM 조작)

 

🔷데이터(BE)

웹 페이지에 동적으로 표기할 데이터 및 데이터 조작의 모든것

---

✅프론트엔드 웹 개발: Rendering = 웹 페이지의 화면 변경

어떻게 유저의 웹 브라우저에 우리가 원하는 다양한 웹 페이지를 보여줄 수 있을까? 버튼을 누르거나 페이지 이동 시 웹 페이지 화면을 어떻게 바꾸어줄까? -> DOM 조작

🔷웹 페이지의 화면 변경: JS통한 HTML(DOM) 직접 조작

결제하기 버튼을 누르면 결제하기 페이지로 이동하거나, 누르면 안되는 버튼을 누르면 경고창을 띄우거나

1. JS를 통해 HTML(DOM)을 변경하며, 우리가 보는 화면을 마치 뮤지컬처럼 다채롭게 바꾸준다.

2. JS는 HTML(DOM)을 변경하고, HTML(DOM)에서 발생하는 이벤트들을 인지할 수 있다.

 

JS로 DOM을 직접 조작하면 어떤 문제가 발생할까

1. Hard to Manage: 일일히 DOM을 매번 선택해서 조작해야함(개발이 힘들다...)

2. DOM 요소 하나가 바뀔때마다 매번 반복적인 Rendering Process

    Render Tree -> Layout(Reflow) -> Paint(Repaint)

 

JS로 직접 DOM을 조작하면 Paint과정이 많이 일어난다. 나중에 배우겠지만 리액트는 VDOM을 통해 한번에 해결가능하다

 

🔷jQuery 등장: JS통한 DOM 조작을 쉽게 돕는 "라이브러리"

브라우저 호환성을 위한(크로스 브라우저)자바스크립트 라이브러리

등장 배경

2000년대는 닷컴버블을 맞이하며 많은 웹 브라우저가 나왔고, 웹 브라우저 간 자바스크립트 엔진이 다르기때문에 웹 브라우저 자신들만의 추가 자바스크립트 문법들을 추가해서, 자바스크립트 파일은 어떤 웹 브라우저에서는 동작하고 어떤 웹 브라우저에서는 동작하지 않는 최악의 호환성 시대가 도래
이렇게 웹 브라우저간 호환성이 낮아 개발자들이 골치썩던 시절 동일 자바스크립트 개발을 위한 라이브러리 등장

 

    모든 웹 브라우저에서 동일한 방법으로 자바스크립트를 동작시키고, 일관된 개발을 위해 등장

    jQuery 등장으로 JS로 직접 조작하는 단점에서 Hard to Manage에 대한 문제는 꽤 해결되었다.

 

jQuery가 제공하는 기능

🔹DOM 요소 선택
🔹 DOM 요소 조회(Traversal) 및 수정
🔹CSS 조작
🔹이벤트 처리
🔹특수효과 및 애니메이션
🔹 AJAX 지원 및 JSON/XML 파싱
🔹자바스크립트 개발을 쉽게해주는 여러 유틸리티 함수들

• traversal: 부모 - 자식 - 부모 - 자식 이렇게 트리 구조로 내려가면서 탐색하는 것이다.
• AJAX 지원: AJAX 가 웹 브라우저마다 다른데 이것을 통합해서 지원해준게 jQueyr이다.

jQuery 내용 요약

---

🔷React 등장: JS 통한 DOM조작을 단순화하는 "프레임워크"

jQuery를 통해 DOM조작 및 개발이 수월해진 것은 맞지만 다중 DOM 변경에 의한 다수 렌더링 문제는 여전하다.

-> Rendering Process 반복 문제 해결하지 못함(Render Tree -> Layout(Reflow) -> Paint(Repaint))

 

등장 배경

다수의 DOM Repaint가 발생하는 경우가 많아지면서 React가 필요하게 되었다.

🔹하나의 이벤트가 다수 DOM을 변경시키는 경우
🔹한 페이지 내에서 다수 DOM변경 이벤트가 빈번하게 일어나는 경우

 

React가 제공하는 기능

    🔹 VDOM을 한데 모아 DOM을 한번에 조작하게 하는 (Batch) 자바스크립트 코드가 들어있거나

    🔹 페이지 이동을 네트워크를 쓰지 않고 자바스크립트를 통해 렌더링하여 SPA가 가능하게 만들어주거나

    🔹 로그인하고 난 뒤 세션을 관리하고, Cookie나 localstorage등을 활용하는 자바스크립트 코드가 있거나

 

위와 같이 다양한 기능을 한데 모아 "웹 페이지 렌더링을 간편히 개발하는데 도움이 되는 거의 모는것들을 제공"

 

💡VDOM이 뭔가?

VDOM(Virtual DOM)
: DOM이 아닌데 DOM인 것처럼 동작하도록 만든 가상의 DOM
하나의 이벤트가 다수 DOM을 변경시키는 경우 VDOM이 유용하게 사용된다.

페이스북 글에 댓글이 하나 달렸(하나의 이벤트 발생)다고 생각해보자. 페이스북 페이지에서는 어떤 반응이 나타날까?
1. 댓글 알림
2. 새로운 댓글 추가
총 2번의 Rendering Process가 일어나게 된다. -> 다수의 DOM을 변경
데이터와 관련된 요소들을 묶어서 한번에 변경되도록 하면 어떨까? 해서 나온게 VDOM이다.

위 상황에서는 댓글DOM + 댓글알림DOM을 묶어서 하나의 VDOM으로 만들어 한번의 DOM 조작으로 해결한다. (VDOM을 버퍼 개념이라고 생각해보자..)

그래서 리액트에서 렌더링이 VDOM조작을 말한다.