Web

[Web] 웹 개발이란 무엇인가? 웹 개발의 변천사(Javascript, JQuery, React)

judyshin 2024. 4. 24. 09:09

웹 개발을 배우는 이유

웹 개발은 웹 브라우저와 웹 서버와 관련된 모든 것들을 개발하는 것을 통칭합니다

웹은 핸드폰이나 노트북과 같은 머신에 국한되지 않고, 어디에서든지 적용이 가능합니다
-> 웹브라우저는 어디든지 설치가 가능한 작은 가상의 머신(VM)이기 때문

웹 개발이란?

웹 개발이란 웹 페이지에 무엇인가를 보여주는 것입니다 Display things on a web page

웹 페이지는 다음의 3가지 요소로 이루어져 있습니다

  • 웹 페이지의 구조를 다루는 HTML
  • 디자인을 다루는 CSS
  • 유저 인터랙션을 다루는 Javascript

자바스크립트는 사용자의 입출력 데이터를 처리하고, 화면의 애니메이션을 그리는 등의 동적인 요소를 담당합니다

프론트엔드는 이러한 웹 화면을 그리는 Rendering을 다룹니다

*백엔드는 웹 페이지에 표기되는 데이터를 다루고 조작합니다

 

렌더링은 브라우저가 개발자의 코드를 화면으로 변환하는 과정을 말합니다
이는 시대가 지남에 따라 더욱 효율적인 방법으로 바뀌게 됐습니다

첫번째 방법: JS를 통해 HTML(DOM)을 직접 조작

💡 DOM이란? 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다...(중략)...DOM 은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다

DOM이란?

DOM(Document Object Model)은 웹 문서의 구조화된 표현을 제공합니다
돔을 통해 HTML을 Javascript의 객체로 다룰 수 있습니다


Javascript는 DOM구조에 접근하여 웹 문서의 내용, 스타일, 구조를 변경할 수 있고,
HTML(DOM)에서 발생하는 이벤트를 인지할 수 있습니다

 

하지만 HTML(DOM)요소 하나하나씩 직접 조작을 가해야 하는 단점이 있습니다

1. Hard to Manage: 일일히 DOM 매번 선택하여 조작해야 해서 힘들다
2. DOM 요소 하나가 바뀔 때마다 매번 반복적인 Rendering Process(Render Tree → Layout(Reflow) → Paint(Repaint))

두번째 방법: JQuery의 등장

JQuery는 자바스크립트를 통해 DOM 조작을 쉽게 할 수 있도록 도와주는 라이브러리 입니다

2000년대 많은 웹 브라우저가 나왔고, 웹 브라우저 간 엔진이 다르기 때문에 자바스크립트 파일이 호환되지 않는 최악의 시대 도래

-> 브라우저 간 호환성 해결을 위해 크로스 브라우저 자바스크립트 라이브러리 JQuery 등장

 

모든 웹 브라우저에서 동일한 방법으로 JS를 동작시키고 일관된 개발을 위해 등장했으며,

DOM조작이 무지하게 쉬워서 당시 거의 모든 자바스크립트 개발에 JQuery를 사용했다고 합니다

 

JQuery가 제공한 기능들

  • DOM 요소 선택, DOM 요소 조회 및 수정
  • CSS 조작
  • 이벤트 처리
  • 특수효과 및 애니메이션
  • AJAX지원 및 JSON/XML 파싱
1. Hard to Manage: 일일히 DOM 매번 선택하여 조작해야 해서 힘들다 -> 첫번째 문제 해결❗️
2. DOM 요소 하나가 바뀔 때마다 매번 반복적인 Rendering Process -> 아직 문제가 남음

JQuery를 통해 DOM 조작 및 개발이 수월해졌으나 다중 DOM 변경에 의한 다수 렌더링 문제는 여전합니다

세번째 방법: React, Vue의 등장

자바스크립트를 통한 DOM 조작을 단순화 하는 "프레임워크"

React는 Facebook에서 등장했는데,
다수의 HTML 요소가 바뀌는(다수의 DOM Repaint가 발생하는) 경우에 대응하기 위해서였습니다

  • 하나의 이벤트가 다수 DOM을 변경시키는 이벤트 발생
  • 한 페이지 내에서 다수 DOM 변경 이벤트가 빈번하게 발생

-> 페이스북은 한 페이지 내에서 피드 새로고침, 알람, 상태 바뀜 등의 이벤트 발생

 

프론트엔드 자바스크립트 프레임워크

  • React.js(리액트는 다른 것들과 달리 라이브러리이다)
  • Angular
  • Vue.js

자바스크립트 프레임워크가 제공하는 것들

  • Virtual DOM 업데이트를 한번에 모아서 실제 DOM에 한번에 적용하는 Batch 코드
  • 페이지 이동을 네트워크를 사용하지 않고 JS로 렌더링하여 SPA 구현
  • 로그인 후 세션을 관리하고 Cookie, Localstorage등을 활용하는 기능

*SPA란? Single Page Application의 약자로, 페이지 전체를 새로 로드하지 않고 필요한 부분만 동적으로 다시 로드하는 것

1. Hard to Manage: 일일히 DOM 매번 선택하여 조작해야 해서 힘들다 -> 첫번째 문제 해결❗️
2. DOM 요소 하나가 바뀔 때마다 매번 반복적인 Rendering Process -> 두번째 문제도 해결❗️

 

이처럼 웹에서 쓰이는 기술과 스택들은 문제를 하나하나씩 해결하기 위해 시대별로 변해왔습니다

새롭게 쏟아져 나오는 기술들을 남용하지 않고 적재적소에 사용하는 것을 목표로 해야겠습니다

 

*추후에 Next.js, Vite 등의 BFF(Backend For Frontend)를 사용하게 된 이유도 다루도록 하겠습니다