1. 웹 페이지 HTML 전체 변경 : Routing

Routing은 사용자가 브라우저에서 특정 URL을 입력하거나 링크를 클릭할 때, URL에 매핑된 페이지나 컴포넌트를 사용자에게 보여주는 것.

1. HTML 전체를 바꿈 = 웹 페이지 전체를 바꾸는 Routing

URL 에 따라 페이지가 바뀌는 방식, Routing 방법은 2가지로 나뉜다 Server-side / Client-side

- Hard Navigation : 아예 새 HTML 를 네트워크로 받음 = Server-side : 새 HTML 를 서버로부터 네트워크로 받음

- Soft Navigation : JS 가 새 HTML 를 다시 그려냄 = Client-side : 새 HTML 을 클라이언트가 다시 그려냄

1.1. Hard Navigation : Server-side Routing

URL 변경 시 : 새 페이지 네트워크 요청

• Hard Navigation = Routing 은 기본적으로 새로운 페이지를 가져오는 형태로만 진행이되었으나,
  • 네트워크 사용 = SSR, SSG 방식 : window.**history**

1.2. Soft Navigation : Rerendering = Client-side/SPA Routing

URL 변경 시 : 어떠한 네트워크도 사용하지 않고, 페이지만 바뀌어 렌더링

• SPA Navigation = 유저가 보고있는 부분을 모두 다 새로 Rerendering 하는 형태로도 진행하게됐다.
  • 네트워크 미사용 = CSR(SPA) 방식 : `navigate = useNavigate()`
    • React (CSR 방식, Client-Side Template Engine) : 영사기나 뮤지컬을 생각하면된다.

2. 웹 페이지 HTML 부분 변경 : Rendering

어떻게 웹 브라우저에서 유저의 다양한 활동(클릭, 이동 등)에 대해 다양한 웹 페이지 화면을 바꿔보여줄 수 있을까

• 유저의 다양한 활동에 따라 JS 가 그에 맞게 웹 페이지 내 여러 HTML 요소들을 바꾸어주면된다
  • = JS 통한 HTML(DOM) 직접 조작

2.1. DOM 직접 조작 : Javascript

Javascript 통한 HTML(DOM) 직접 조작

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

1. Javascript 를 통해 HTML (DOM) 을 변경하며, 우리가 보는 화면을 마치 뮤지컬처럼 다채롭게 바꿔준다.
2. Javascript 는 HTML(DOM) 을 변경하고, HTML(DOM) 에서 발생하는 이벤트들을 인지할 수 있다.

• Javascript 를 통해 직접 DOM 을 변경하면 어떤 문제가 발생하는가?
  • HTML (DOM) 요소 하나하나씩 조작을 가해야한다.
    1. Hard to Manage : 일일히 DOM 을 매번 선택하여 조작해야함 = 개발이 힘들다는 뜻
    2. Repetitive : DOM 요소 하나가 바뀔때마다 매번 반복적인 Rendering Process
    • Render Tree → Layout(Reflow) → Paint(Repaint)

2.2. DOM 간편 조작 : jQuery (자바스크립트 라이브러리)

jQuery 자바스크립트 라이브러리 통한 HTML(DOM) 간편 조작
jQuery = 브라우저 호환성을 위한 (크로스 브라우저) JS 라이브러리

jQuery는 AJAX 메서드 요청으로 받아온 데이터를 브라우저에 자동으로 렌더링 하지 않는다.
서버로부터 응답 데이터를 다양한 형식(JSON, XML, HTML, 텍스트 등)으로 받아오도록 지원함

2000년대는 닷컴버블을 맞이하며 많은 웹 브라우저가 나왔고, 웹 브라우저 간 자바스크립트 엔진이 다르기때문에 웹 브라우저 자신들만의 추가 자바스크립트 문법들을 추가해서, 자바스크립트 파일은 어떤 웹 브라우저에서는 동작하고 어떤 웹 브라우저에서는 동작하지 않는 최악의 호환성 시대가 있었다.

이렇게 웹 브라우저간 호환성이 낮아 개발자들이 골치썩던 시절 동일 자바스크립트 개발을 위한 라이브러리 등장

• 모든 웹 브라우저에서 동일한 방법으로 자바스크립트를 동작시키고, 일관된 개발을 위해 등장
  • DOM 조작이 무지하게 쉽고 간편해서 자바스크립트 개발한다치면 거의 다 jQuery 는 기본으로 사용

jQuery 는 다음과 같은 기능들을 제공

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

2.3. DOM 간접 조작 : React (자바스크립트 프레임워크로 분류)

React 자바스크립트 라이브러리(프레임워크로 분류) 통한 HTML(DOM) 간접 조작
DOM 간접조작인 이유는 React가 Virtual DOM을 통해 실제 DOM을 조작하기 때문.
React = 데이터 변경에 따른 DOM 변경이 아닌 VDOM 변경 후 단일 DOM 변경하는 JS 라이브러리

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

• 문제 1 : Hard to Manage : 일일히 DOM 을 매번 선택하여 조작해야함 = 개발이 힘들다는 뜻 → 해결
• 문제 2 : Repetitive : DOM 요소 하나가 바뀔때마다 매번 반복적인 Rendering Process → 여전히 문제

2.3.1. React 는 왜 Facebook 에서 등장했는가? 다수의 DOM Repaint 발생

4개의 사진 리스트를 보여주는 페이지에서 더보기 버튼을 눌렀을때 추가 4개의 사진을 보여주는건, 사진 리스트 단일 HTML 요소의 하단에 추가로 보여줄 4개의 사진 리스트를 한번에 추가 나열하면된다.
이는 한번의 DOM Repaint 를 발생시킨다. 일반적인 쇼핑몰 홈페이지와 같은 경우엔 React 가 필요없다.

그런데, 아래와 같이 다수 HTML 요소가 바뀌는 (다수의 DOM Repaint 가 발생하는) 경우 React 가 필요

• 데이터가 변함에 따라 웹 페이지 리렌더가 발생하는 이 절차를 React 에서는 단방향 프로세스로 설명한다
  = Controller(SetState 데이터 변경 발생) → Model(State 데이터가 변경) → View(Page 그 데이터를 바라본 DOM 변경)

• 하나의 이벤트가 다수 DOM 을 변경시키는 경우

  • 하나의 이벤트 = 상태(데이터, Model) 변경(Controller) → 다수 DOM 변경 = 페이지(View)

• 일반 쇼핑몰 홈페이지가 아니라 피드 기반의 홈페이지에서 React 같은것이 필요하다 (앱과 비슷한 웹, 웹앱)

• 페이스북은 우리가 보고있는 웹 페이지에서 피드도 계속 새로고침 되어야하고, 알람도 뜨고, 상태도 바뀌고 등

2.3.2. Javascript “Frontend” Framework

자바스크립트는 웹 개발(백엔드, 프론트엔드)의 공식 프레임워크같은것이 아니라 단순히 프로그래밍 언어이기에

• 본 자바스크립트는 용도에 맞춰서 정말 미친듯이 다양한 라이브러리와 프레임워크들이 등장하게됐다.
  • 프론트엔드 자바스크립트 프레임워크
    • React.js (다른것들과 달리 리액트는 라이브러리이지만 프론트엔드 프레임워크로 분류된다)
    • Angular
    • Vue.js
  • 백엔드 자바스크립트 프레임워크
    • Express.js
    • Nest.js
  • 그래픽 자바스크립트 프레임워크
    • Three.js 등

---

프론트엔드 자바스크립트 프레임워크는 무엇을 하는가? 무엇을 제공하는가?

• VDOM 을 한데 모아 DOM 을 한번에 조작하게 하는 (Batch) 자바스크립트 코드가 들어있거나
• 페이지 이동을 네트워크를 쓰지 않고 자바스크립트를 통해 렌더링하여 SPA 가 가능하게 만들어주거나
• 로그인하고 난 뒤 세션을 관리하고, Cookie 나 LocalStorage 등을 활용하는 자바스크립트 코드가 있거나
  이렇게 다양한 기능들을 한데 모아 “웹 페이지 렌더링을 간편히 개발하는데 도움이 되는 거의 모든것들을 제공”