Web 개발의 필요성, 프론트엔드의 웹개발, 자바스크립트의 런타임

Dohyeon Kong·2024년 4월 16일
0

Web🌎

목록 보기
1/5

웹 개발, 왜 우리가 알아야 하지??🤔

  • 앱(Mobile Application)은 안드로이드와 iOS와 같은 모바일 OS에 국한된다. 하지만 웹(Web Applicaion)은 데스크탑, 모바일 어디에서든(anywhere) 적용이 가능하다!!

웹 개발, 도대체 넌 누구야??

웹 개발이란? 웹 페이지에 무엇인가를 표기하는 것

  • 웹 페이지에 표기 방식

    • Rendering을 다루는 건 프론트엔드(Front-End)
    • 웹 페이지가 표기할 데이터 및 데이터 조작은 백엔드(Back-End)

  • 웹페이지 = HTML(구조) + CSS(형태) + JS(유저 이벤트 처리 및 DOM 조작)
    - HTML = 문서 구조

    • CSS = 문서 꾸미기
    • JS = 유저 인터렉션

  • 웹 페이지 내 표기할 데이터 = 웹 페이지에 동적으로 표기할 데이터 및 데이터 조작의 모든 것을 의미한다.

프론트엔드의 웹 개발 : Rendering = 웹 페이지의 화면 바꿔주기

  • 유저의 웹 브라우저에 우리가 원하는 다양한 웹 페이지를 보여주고 웹 페이지 내 버튼을 누르거나 페이지 이동 시 웹 페이지 화면을 바꿔줄 수 있는 방법

Javascript를 통해 HTML(DOM)을 직접 조작하면 됨

  • 자바스크립트는 HTML(DOM)을 변경하고, HTML(DOM)에서 발생하는 이벤트들을 인지할 수 있다.
  • 자바스크립트를 통해 직접 DOM을 변경하면 어떤 문제가 발생하는가?
    • 문제 1. HTML(DOM) 요소 하나하나씩 조작을 가해야 한다.
    • 문제 2. DOM 요소 하나가 바뀔때마다 매번 반복적인 Rendering Process
      • Render Tree -> Layout(Reflow) -> Pain(Repaint)

jQuery 등장 : Javascript를 통한 DOM 조작을 쉽게 도와주는 "라이브러리"

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

  • 웹 브라우저 간 자바스크립트 엔진이 다르기 때문에 웹 브라우저 자신들만의 추가 스크립트 문법들을 추가해서 어떤 브라우저에서는 동작하지만 어떤 브라우저에서는 동작하지 않는 문제를 jQuery가 해결하였다.

jQuery의 대표 기능

  • DOM 요소 선택
  • DOM 요소 조회 및 수정
  • AJAX 지원 및 JSON/XML 파싱

React, Vue 등장

Javascript를 통한 DOM 조작을 단순화하는 "프레임워크"

React는 왜 FaceBook에서 등장하였는가?

  • DOM 요소 하나가 바뀔때 마다 매번 Rendering Process의 문제를 해결해주었다.
  • 즉, 아래와 같이 다수 HTML 요소가 바뀌는(다수의 DOM Repaint가 발생하는) 경우 React가 필요하다.
    - 하나의 이벤트가 다수 DOM을 변경시키는 경우
    - 한페이지 내에서 다수 DOM 변경 이벤트가 빈번하게 발생하는 경우
  • 페이스북은 우리가 보고있는 웹 페이지에서 피드도 계속 새로 고침되어야 하고, 알람도 뜨고, 상태도 바뀌기 때문에 다수 DOM 변경이 빈번하게 발생하기 때문이다.

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

  • VDOM을 한데 모아 DOM을 한번에 조작하게 하는 Batch가 자바스크립트 코드에 들어있거나
  • 페이지 이동을 네트워크를 쓰지 않고 자바스크립트를 통해 렌더링하여 SPA가 가능하게 만들어주거나
  • 로그인하고 난 뒤 세션을 관리하고, Cookie, localstorage 등을 활용하는 자바스크립트 코드가 있다.

    이러한 다양한 기능들을 모아 '웹 피이지 랜더링을 간편히 개발에 도움이 되는 거의 모든 것들을 제공한다.'

자바스크립트 런타임

JS엔진은 웹브라우저에서만 사용하지 않고 웹서버에서도 사용된다.

  • 백엔드 자바스크립트 프레임워크인 Express.js와 Next.js와 같이 웹 서버에서도 많이 사용된다.

자바스크립트 런타임 = 자바스크립트 엔진 + API 및 기타 라이브러리/바이너리

  • 자바스크립트 엔진을 기반으로 자바스크립트 언어로 된 모든 코드를 실행할 수 있게한 뒤 필요한 API들을 조합한다.
  • 웹 브라우저 (예, 우리가 사용하는 Chrome) = V8 자바스크립트 엔진 + Web APIs
  • 웹 서버 (예, 서버로 많이 사용하는 Node.js) = V8 자바스크립트 엔진 + Node APIs + LIBUV
    • LIBUV = 비동기 I/O

자바스크립트 엔진 구성은 크롬 V8를 기반한다.

  1. 자바스크립트는 싱글 스레드이다
  2. Stack + Heap 두 개만 기억하면 된다.
    • (Call) Stack - 함수 실행을 순서대로 적재 및 수행한다.
      • 간단하게, 함수 실행 및 순서는 Stack
    • Heap - 선언 및 할당된 변수 및 함수를 저장한다.
      • 간단하게, 여러 변수 및 함수 담는 바구니는 Heap

자바스크립트 엔진에서 비동기는 어떻게 지원되는가?

API를 통해 지원이 된다.

"웹 브라우저"에서의 비동기 지원은 멀티스레드를 사용한다.

  • Web APIs 중 Web Worker API 간접 사용 : 자바스크립트 동작 중 비동기가 필요한 상황에 사용된다.
    1. 대기실 : Web APIs 에서 비동기 처리 완료 시 **Task (Callback) Queue** 내 Callback 적재한다.
      • Callback : 비동기 처리가 완료되면 수행할 마지막 함수
    2. 문지기 : Event Loop
    3. 작업장 : Stack + Heap (V8 엔진 메모리 기본 구성)
  • Web Worker API 직접 사용 : 프론트엔드 개발자가 직접 멀티스레드를 활용하여 개발하고 싶을 시 사용한다.

“웹 서버”에서의 비동기 지원 : 멀티스레드 + 비동기 I/O 라이브러리를 사용한다.

  • Node API + LIBUV : 서버 내 자바스크립트 동작 중 비동기(I/O Blocking)가 필요한 상황에서 사용된다.
    1. Node APIs 에서 비동기 처리 적재
    2. 대기실 : Event Queue ← 비동기 처리를 적재한다.
    3. 문지기 : Event Loop
    4. 작업장 : Worker Thread 내 처리 완료
profile
Dohyeon Kong
천천히, 꾸준히, 그리고 끝까지
다음 포스트

자바스크립트 프레임워크의 동작 원리, CSS 개발의 Preprocessor 및 Framework

0개의 댓글