웹 개발과 프레임워크

 웹을 개발하는 것은 웹 브라우저와 웹 서버와 관련된 모든 것들을 개발하는 것을 통칭한다고 이해할 수 있다. 웹 환경을 살펴보면 Chrome이나 Safari같은 웹 브라우저가 있고, 웹 서버가 존재한다.

 

 웹 개발은 무엇이며, 웹 페이지란?

 

- 웹 개발은 웹 페이지에 무엇인가를 표기하는 것을 의미한다. (Displaying things on the web page)

- Rendering을 다루는 것은 프론트엔드, 웹 페이지가 표기할 데이터 및 조작은 백엔드 단에서 이루어진다.

 

 웹 페이지의 구조를 살펴보자, 웹 페이지는 HTML(구조), CSS(형태), JavaScript(유저 이벤트 처리 및 DOM 조작) 으로 구성된다. 여기서 HTML은 문서 구조, CSS는 문서를 꾸미는 데 쓰이고(형태), JavaScript는 유저와의 인터랙션을 처리한다.

 

 그렇다면, 어떻게 해야 웹 브라우저에 우리가 원하는 다양한 웹 페이지를 보여줄 수 있을까? 즉, 유저가 웹 페이지 내의 버튼을 누르거나 페이지를 이동할 때 웹 페이지의 화면을 어떻게 바꿔줄까?

 

-> JavaScript를 통해 HTML(DOM)을 직접 조작하면 된다.

DOM :

- DOM은 "Document Object Model"의 약자로, 웹 문서의 구조를 표현하는 프로그래밍 인터페이스

- 웹 페이지는 HTML과 같은 마크업 언어로 작성되지만, 웹 브라우저는 이 HTML 문서를 DOM으로 변환하여 사용자와 상호 작용한다.

 

웹 페이지의 조작

 JavaScript는 DOM을 조작하여 웹 페이지의 HTML 내용을 동적으로 바꿀 수 있다. 뿐만 아니라, HTML에서 발생하는 이벤트들을 인지할 수 있다. 

 

 그렇다면, JavaScript를 통해 직접 DOM을 조작하여 HTML을 변경하면 어떤 문제가 발생하는가? 2가지 문제점이 존재한다.

 

1. Hard to Manage : 일일이 DOM을 매번 선택하여 조작해야 한다. 즉, 개발이 힘들다는 뜻이다.

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

 

 

Rendering Process

 

 1. 문서 파싱

- HTML 파싱: 브라우저는 서버로부터 받은 HTML 파일을 읽기 시작한다. HTML 파서는 파일을 읽으며 DOM 트리를 구축한다. DOM 트리는 문서의 요소와 속성을 노드로 표현한 것이다.
- CSS 파싱: HTML과 함께 링크된 CSS 파일들도 파싱되어 스타일 규칙을 읽고, 이 규칙들을 이용해 CSSOM (CSS Object Model) 트리를 생성한다.

2. 렌더 트리 구축

DOM 트리와 CSSOM 트리는 결합하여 렌더 트리를 형성한다. 렌더 트리는 페이지의 렌더링에 필요한 요소들만 포함하며, 화면에 표시되지 않는 요소들(display: none 등)은 제외된다.

3. 레이아웃(Reflow)

렌더 트리가 완성되면, 각 노드의 정확한 위치와 크기를 계산하는 과정인 레이아웃이 수행된다. 이 단계는 페이지의 초기 로딩 뿐만 아니라 요소의 크기나 위치가 변경될 때도 발생한다.

4. 페인트(Paint)

레이아웃 단계 후, 각 노드를 화면에 그리는 페인트 과정이 진행된다. 이 과정에서는 색상, 텍스처 등 시각적 스타일이 적용된다.

5. 합성(Composite)

복잡한 애니메이션과 트랜지션은 페인트 단계를 거치지 않고, 별도의 레이어로 관리되어 GPU를 통해 더 빠르게 처리될 수 있다. 최종적으로 이러한 레이어들이 합성되어 최종 이미지가 생성된다.

 

 

jQuery의 등장

 

 jQuery는 브라우저 호환성을 위한 JavaScript 라이브러리이다.

 

 2000년대는 닷컴버블을 맞이하며 많은 웹 브라우저가 나왔고, 웹 브라우저 간 자바스크립트 엔진이 다르기 때문에 웹 브라우저 자신들만의 자바스크립트 추가 문법이 더해져, 자바스크립트 파일이 어떤 웹 브라우저에서는 동작하고 어떤 웹 브라우저에서는 동작하지 않는 최악의 호환성 시대가 도래한다. jQuery는 이러한 브라우저 간 차이를 추상화하여, 한 번의 코드 작성으로 모든 주요 브라우저에서 일관된 방식으로 작동하게 만들어 주었다.

 

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

 

① DOM 요소 선택

- jQuery는 $를 사용하여 HTML 문서의 DOM 요소를 쉽게 선택할 수 있게 해준다.

 

② DOM 요소 조회 및 수정

- jQuery를 사용하면 .text(), .html(), .val() 등의 메소드를 통해 요소의 내용을 조회하거나 수정할 수 있다. 이는 웹 페이지의 동적인 인터랙션 구현에 필수적으로, 사용자의 입력을 반영하거나 페이지의 콘텐츠를 실시간으로 업데이트하는 데 사용된다.

 

③ CSS 조작

- .css() 메소드를 이용해 직접적으로 요소의 스타일을 조회하거나 변경할 수 있다. 예를 들어, $(element).css('color', 'red')는 요소의 텍스트 색상을 빨간색으로 변경한다. 

 

④ 이벤트 처리

- jQuery는 .click(), .on() 등의 메소드로 이벤트를 쉽게 처리할 수 있다.

 

⑤ 특수효과 및 애니메이션

- .animate(), .slideDown(), .fadeOut() 등의 메소드로 간단한 애니메이션과 효과를 적용할 수 있다.

 

⑥ AJAX 지원 및 JSON/XML 파싱

- .ajax(), .get(), .post() 메소드 등을 사용하여 서버와의 비동기 통신을 손쉽게 구현할 수 있다. 이를 통해 페이지 전체를 새로 고치지 않고도 데이터를 불러오거나 서버에 데이터를 보낼 수 있다. 또한, 받은 JSON이나 XML 데이터를 쉽게 파싱하고 활용할 수 있다.

 

⑦ 그 외 여러가지 유틸리티 함수

- 그 외에도 .each(), .map(), .filter() 등 다양한 유틸리티 함수를 제공하여 데이터의 처리와 DOM 요소의 관리를 효율적으로 할 수 있게 도와준다.

 

추가적으로 lodash(데이터구조 조작)도 자주 사용되었었으나, 요즘은 일반 자바스크립트에서 거의 다 지원한다.

 

React의 등장

 jQuery를 통해 DOM 조작 및 개발이 수월해진 것은 맞으나, 다중 DOM 변경에 의한 다수의 Rendering Process 문제는 여전하다. (앞서 Rendering Process의 문제에 대해서도 언급했었다.) 

 

 React는 페이스북에서 개발된 UI 구축을 위한 JavaScript 라이브러리이다. 페이스북의 동작 구조를 예를 들어 확인해보자. 페이스북은 우리가 보고 있는 웹 페이지에서 피드도 계속해서 새로고침 되어야 하고, 알람도 뜨고, 상태도 바뀌며, 메시지가 왔을 때의 팝업 또한 추가된다. 이 말은 다수의 HTML 요소가 지속적으로 바뀌는, 즉 다수의 DOM Repaint가 발생하는 경우이다. 

 React는 Virtual Dom을 도입함으로써, 실제 DOM에 접근하는 횟수를 줄이고, 변경사항을 효율적으로 계산하여 렌더링하는 방식을 채택했다. 

 

JavaScript Framework

 

 자바스크립트는 웹 개발의 공식 프레임워크같은 것이 아닌, 단순히 프로그래밍 언어이기에, 자바스크립트는 용도에 맞춰서 다양한 라이브러리와 프레임워크들이 등장하게 됐다. (React.js, Angular, Vue.js, Express.js, Nest.js, Three.js 등...) 이 프레임워크들은 VDOM을 한데 모아 DOM을 한 번에 조작하게 하는 (Batch) 자바스크립트 코드가 들어있거나, 페이지 이동을 네트워크를 사용하지 않고 자바스크립트를 통해 렌더링하여 SPA가 가능하게 만들어주거나, 로그인하고 난 뒤 세션을 관리하고, Cookie나 localstorage 등을 활용하는 자바스크립트가 들어있는 등의 기능을 한 데 모았다. 즉, 웹 페이지 렌더링을 간편히 개발하는 데 도움이 되는 거의 모든 것들을 제공한다.