웹 개발(Web Development)를 왜 배우는 걸까
우리가 크롬과 같이 자주 쓰는 웹 브라우저, 그리고 웹 서버가 존재하는데 이를 통칭하여 웹 개발이라고 부른다.
오늘날 웹과 앱 등은 필수다. 우리가 잘 알고 있는 App은 구동을 위한 머신이 필요한데, 그 머신을 안드로이드나 iOS 같은 모바일 OS로 국한된다. (물론 데스크탑 앱도 존재한다)
반면에 웹은 어디든지 적용 가능하다. 웹 브라우저는 어디든지 설치가 가능하다. 앱에서도 웹 브라우저를 띄울 수가 있다.
웹 개발
웹 페이지에 무엇인가 표기하는 것을 이야기한다. 페이지에 표기 방식인 Rendering을 다루는 건 프론트엔드, 웹 페이지가 표기 할 데이터와 조작은 백엔드에서 개발한다.
웹 페이지를 표기하기 위한 구성 요소는 HTML(구조), CSS(형태), JS(이벤트 처리 및 DOM조작)으로 이루어진다. 그렇다면 이런 표기를 위한 데이터는? 웹 페이지에 동적으로 표기할 데이터와 데이터 조작의 모든 것을 말한다.
프론트엔드의 웹 개발: Rendering(웹 페이지 화면 바꿔주기)
어떻게하면 우리가 원하는 다양한 웹 페이지를 보여줄 수 있을까.
1. JavaScript를 통해 HTML(DOM)을 직접 조작하기
결제하기 버튼을 누르면 결제 페이지로 이동하거나, 누르면 안 되는 버튼을 누르면 경고창을 띄우는 것. JavaScript를 통해 HTML(DOM)을 변경하고, HTML(DOM)에서 발생하는 이벤트들을 인지할 수 있다.
DOM
Document Object Model의 약자. 문서 객체 모델로 번역할 수 있다. 문서 객체가 뭘까? 우리가 익히 알고 있는 <html>, <body>와 같은 HTML 문서의 태그들을 JS가 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라 한다. 그래서 DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식을 이야기한다.
이전에는 HTML만을 이용했기에 div 태그 하나를 가져오더라도 document.createElement("div")와 같이 가져와야 해 불편했다. 하지만, JS를 이용하면 HTML을 좀 더 직관적으로 다룰 수가 있어진다.
그러나 JS를 통해 직접 DOM을 변경하면 HTML(DOM)요소 하나하나씩 조작을 가해야하며, 일일히 조작하기가 어렵다. 또한, DOM 요소 하나가 바뀔때마다 반복적인 Redering이 일어난다.
2. jQuery
- JS를 통한 DOM 조작을 쉽게 도와주는 라이브러리
웹 브라우저를 떠올려봐도 chrom, edge, whale 등 많은 것이 존재하는 것을 알 수 있다. 웹 브라우저들 저마다 자바스크립트 엔진이 다르기 때문에 어느 브라우저에서는 동작하지 않는 문제가 발생했다.
이런 웹 브라우저간 호환성이 낮은 것을 보완하기 위해 동일 자바스크립트 개발을 위한 라이브러리, jQuery가 등장했다.
좀 더 풀어서 설명하자면 JS 문법이 웹 브라우저 마다 해석이 다른 것이다. 그래서 브라우저에 공통된 문법을 제공하는 것이 jQuery인 것이다.
그런데, 아직까지 문제점은 남아있다.
DOM 변경이 될 때마다 N번 리렌더링 되는 현상은 어떻게 막을 것인가?
가장먼저 React를 사용한 페이스북의 예시로 알아보자.
우리가 페이스북의 피드를 볼 때 친구에게 페이스북 메시지가 왔다. 페이스북 메시지의 notify를 알려주기 위해서 모든 것이 리렌더링 되는 것이다.
3. React, Vue
- JS를 통한 DOM 조작을 단순화 하는 프레임워크
하나의 이벤트가 다수 DOM을 변경시키는 경우, 한 페이지 내에서 다수 DOM 변경 이벤트가 빈번하게 발생하는 경우에 React가 필요하다. 페이스북이 우리가 보고 있는 웹 페이지에서 계속해서 피드 새로고침, 알람, 상태 등이 바뀌야 하기 때문이다.
React와 같은 JS 프레임워크는 아래와 같은 것들을 제공한다.
1. VDOM을 한데 모아 DOM을 한번에 조작하게 하는(batch) 자바스크립트 코드
2. 페이지 이동을 네트워크를 쓰지 않고 JS를 통해 렌더링해 SPA가 가능하게 만들기
SPA(Single Page Application)
단일 페이지 어플리케이션. 브라우저가 최초에 한 번 서버에 요청해 페이지 전체를 로드하고 이후부터는 특정 변경 사항이 일어나는 부분만 AJAX와 같은 것을 통해 데이터를 바인딩한다.
DOM 변경이 일어날 때마다 한번에 렌더링 되지 않고 필요한 부분만 변경할 수 있다.
VDOM을 이용하며 빠른 상호작용이라는 장점이 있다. 처음 화면을 로딩할 때 모든 화면의 정보를 로드해야 하므로 로딩 속도가 다소 걸린다.
3. 로그인 후 세션 관리, Cookie나 localStorage 등을 활용하는 코드
다양한 기능들을 한데 모아 웹 페이지 렌더링을 간편히 개발하는데 도움되는 모든 것들을 제공한다.
자바스크립트 런타임 = 자바스크립트 엔진 + API 및 기타 라이브러리/바이너리
자바스크립트 엔진을 기반으로 자바스크립트 언어로 된 모든 코드를 실행할 수 있게 한 뒤 필요한 API들을 조합
웹 브라우저 = V8 자바스크립트 엔진 + Web APIs
웹 서버 = V8 자바스크립트 엔진 + Node APIs + LIBUV(비동기 I/O)
앞서 웹 브라우저는 FE, 웹 서버는 BE라고 말한 바 있다. 간단하게 풀어서 설명하자면 JS 엔진은 언어를 실행하는 것, API나 기타 라이브러리들은 언어가 필요하는 것들이라고 말할 수 있다. 이 두가지를 합쳐서 런타임이라고 부른다.
예를 들어 Timeout이라는 API를 생각해보자. setTimeout() 메서드는 CPU가 일정 시간 동안 멈추는 것을 의미하는데, Node API에서 제공한다.
Audio API, Image API 등 웹 브라우저에서 사용할 수 있는 API들은 Web API에서 제공한다.
다시 말해 언어를 실행하는 JS 엔진과 API나 기타 라이브러리들을 합쳐 자바스크립트 런타임이라고 한다.
자바스크립트의 엔진 구성
1. 싱글 스레드
2. Stack과 Heap
(call)Stack은 함수 실행을 순서대로 적재 및 수행한다. Heap은 선언 및 할당 된 변수와 함수를 저장한다.
자바스크립트의 엔진은 싱글 스레드로 한번에 한가지의 일을 처리하는데, 비동기 작업을 어떻게 처리할까?
웹 브라우저의 경우 Web API를 이용해서 비동기 작업을 처리한다. setTimeout의 예를 들어보면, 가장 먼저 stack에 함수가 쌓여 실행될 것이고 setTimeout을 만나면 Web API에서 처리하고, 완료되면 Task Queue로 이동하게 된다. 그 후 Event Loop가 Call Stack이 비었는지 확인하고, 비었다면 Stack에서 해당 비동기 함수를 실행하게 된다.
이는 Web APIs에서 Web Worker API를 간접 사용하는 것이다.
자바스크립트 프레임워크 동작 원리
1. 번들러
자바스크립트 프레임워크의 종류는 다양하다. 프레임워크마다 제공하는 기능이 다르다보니 많은 파일이 존재한다. 하지만, 유저가 웹 브라우저에서 웹 페이지를 보기 위해 그 많은 파일들을 다운로드하면 컴퓨터가 터진?다
그래서 하나의 웹 페이지를 보여줄 때 많은 JS 라이브러리 파일들을 하나의 JS 파일로 압축해야한다. 이 때 번들러를 통해 하나의 JS 파일로 묶는다.
대표적으로 webpack과 vite가 있다.
2. 트랜스파일러 / 컴파일러
고버전 JS 혹은 TS를 저버전 JS로 변환
( 컴파일러는 A -> B로 만드는 것처럼 다른 것을 만들고, 트랜스파일러는 A -> A`로 만든다.)
특정 버전의 자바스크립트는 다양한 ES 버전의 웹 브라우저에서 동작되기 때문에 JS 버전 호환성 문제가 발생한다. 다양한 버전의 웹 브라우저에서 모두 동작되게 하려면 최소 버전을 지원하면 된다.
(트랜스파일)
수많은 브라우저 지원을 위해 버전을 변경한다.
예를 들어 A 브라우저는 ES6을, B 브라우저는 ES4를, C 브라우저는 ES5를 지원한다면 우리는최소 버전인 ES4로 지원할 수 있게 만들면 된다.
고버전에서 저버전 ES로 트랜스파일 할 때 Babel 트랜스 파일러를 통해 저버전 ES 버전으로 변환가능한데, 트랜스파일링을 전환할 수 없는 로직은 Polyfill로 처리한다.
'SK Planet ASAC' 카테고리의 다른 글
| Cookie, Session 그리고 Storage (1) | 2024.04.30 |
|---|---|
| 웹 구성 간 흐름 (1) | 2024.04.28 |
| 웹과 인터넷, DNS (0) | 2024.04.24 |
| JAVA 동작 원리와 객체 지향(은닉화/상속) (0) | 2024.04.22 |
| JavaScript 함수형 프로그래밍 패러다임 ~ 스코프 체인 (0) | 2024.04.16 |
