항해 99 3주차 WIL-DOM 과 서버리스

 

DOM과 Virtual DOM

• DOMHTML 요소들(input, button, div ..)을 "부품"이라고 하면 그것을 개발자가 마크업해서 "주문서"를 브라우저로 보내면 브라우저가 input은 텍스트 등을 입력받게하고, 버튼은 이벤트를 감지하게 하는 등의 완전한 기능을 가진 "실제 제품"을 생산하는 것이라고 볼 수 있다.HTML 문서 그 전체 구조에 맞춰 제품들(input, button, div ..)이 배치되고, 여기에 개발자가 추가적으로 명령을 보내 속성이나 디자인, 배치 등을 조작할 수 있도록 된 상태이다.
  • DOM은 Javascript가 만들어 낸 객체일까?->X
  • DOM은 특정 언어에 종속된 것이 아니다. 따라서 Javascript가 만들어 낸 객체가 아니라, Javascript가 제어해야 할 대상인 것이다.다른 언어로도 특정 라이브러리만 있다면 DOM을 제어할 수 있다. (→ DOM이 API이기 때문)
  • 조작할 수 있도록 된 상태라면 어떻게 조작이 될 수 있을까?
  • DOM은 API이기 때문에 특정 명령어들로 조작이 가능한 것이다. 추가로, 여러 브라우저가 만든 DOM마다 사용방법이 다르면 브라우저마다 다르게 코딩을 해야 할 것이다.
  • DOM은 그래서 어떻게 생긴 것일까?
  • DOM은 트리구조이다. HTML 파일을 보면 html 태그 안에 head와 body 태그, 또 body 태그 안에 여러 태그들을 담고 있는 여러 div 태그들이 있다. 따라서 DOM은 트리구조로 되어 있다.
  • DOM의 요소들Node의 기능들이란, html 요소 가지고 JS로 구현했던 기능들이 거의 모두가 노드의 기능들이다. (ex, textContent, childNode, parentNode, appendChild, removeChild 등등)
  • 추가로, Node는 또 EventTarget으로부터 상속받기 때문에 요소들 모두 addEventListener 등의 기능 또한 가지고 있는 것이다.
  • DOM의 모든 요소들(html, div, input, button ..)은 모두 node의 기능을 가지고, 사용할 수 있다(node로 부터 상속받기 때문)
  • CSSOM과 BOM
    • CSSOM은 CSS를 토대로 만든 CSS Object Model로 이 또한 트리형태이며 브라우저는 DOM과 CSSOM을 융합하여 우리가 보는 화면을 만들어 낸다.
    • BOM은 Browser Object Model로 브라우저를 다룰 수 있게 해주는 API이다. window안에 location, navigation, screen 등등의 기능들이 바로 BOM api에서 제공하는 기능들이다.
• 그렇다고 해서 input, button, div 이 브라우저에서 완성된 요소들 하나하나가 DOM이라는 것은 아니다.
• Document Object Model로 HTML이나 XML 문서를 실체로 나타내는 API
• Virtual DOM (가상 DOM)
  • 가상 DOM이란?이전에는 화면에서 작은 좋아요 버튼 하나 누르려고 웹 페이지 전체가 교체되어 깜빡대는 현상이 있었다.React와 Vue는 템플릿으로 html 요소를 코딩해두고, 그 안에 바꾸려고 하는 데이터만 연결하면 그 데이터들이 변하면서 알아서 화면이 바뀌게 되는 것이다.
  • React와 Vue 또한 직접 DOM을 전체로 다 갈아엎는 것이 아니라 이 과정에서 가상 DOM이라는 개념을 도입하게 된다.
  • 그래서 React와 Vue는 이를 보완하기 위해 JS를 이용해서 html을 필요한 부분만 바꿔줌으로써 깔끔한 UX를 구현하기 위해 등장했다.
  • 가상 DOM을 이해하려면 React와 Vue, 즉 SPA(Single Page Application)의 이해가 필요하다.
  • 가상 DOM이 나오게 된 배경이미 브라우저에서 엄청 많은 양의 실제 DOM을 다 만들어 놓았는데, Javascript에서 명령이 와서 갑자기 몇 개만 바꾸라고 한다면 실제 DOM을 건드리면서 작은 요소라도 도미노 현상으로 다 갈아 치우게 된다. (→리소스가 많이 듦)
  • 따라서 가상 DOM을 이용해서 바꾼 배치들을 미리 시뮬레이션해보고, 이를 실제 DOM과 비교(Diffing)해서 바뀐 그 작은 부분만 적용이 될 수 있도록 한 것이다.
  • 그래서 가상 DOM을 도입하게 된 이유는 무엇일까?
• DOM 구조를 흉내 낸 자바스크립트 객체

 

서버리스

sever+less로 직역하면 서버가 없다는 뜻이지만 실제로는 "관리해야 할 서버가 없다"는 의미이다.

 

**서버구축 방법**

1. 서버용 컴퓨터 구매
2. 인터넷, 보안, 네트워크 등의 인프라 환경 구축
3. 개발환경에 맞는 OS설치
4. 런타임 환경을 수겅
5. 백엔드 서비스 설치

-여기서 대부분의 서비스는 어플리케이션서버 하나만 필요한게 아니라 DB서버, 파일서버, 이미지서버 등 다양한 서버가 필요하다. ->모든 서버를 구축해야 한다.

-서버는 외부 온도, 충격, 보안 등에 민감하기 때문에 따로 비용을 들여 서버룸을 구축하거나, 데이터센터에 일정 공간을 빌려서 그 안에서 안전하게 관리해야 한다.

 

이렇게 자체적으로 서버를 구매, 설치하여 운영하는 방식을 "온프레미스"라고 한다.

전통적인 방법으로 구축하는데도 오랜시간이 걸리고 비용이 많이 든다.

서비스가 성장하여 트래픽이 증가하면 서버를 확장해야 함. 온프레미스 환경에서는 서버를 확장하는 것이 매우 어렵다.

 

그래서 등장하게 된 것이 "클라우드 컴퓨팅"

-인터넷을 통해 다른 컴퓨터의 자원을 빌려서 사용하는 기술

-온프레미스 환경에서는 서버 구축 시에 서버 구매, 인프라 환경구축, 데이터센터 임대 등 많은 비용 발생

-클라우드에서는 이러한 과정 없이 가상 컴퓨터를 할당받아서 바로 OS와 런타임환경을 구성하고 백엔드 어플리케이션을 설치하여 운영->아마존의aws, 구글의 GCP, MS의 Awure, 네이버클라우드플랫폼 (온프레미스처럼 자사가 운영하는 데이터 센터 소유, 센터에 여러대 서버를 두고 관리, 고객이 요청했을 때 서버자원을 빌려주는 형식-가상컴퓨팅)

 -가상컴퓨팅을 이용하면 물리적 서버 한대에 여러대의 가상컴퓨터 환경을 만들 수 있다.

->낮은 비용, 서버자원 유연하게 관리 가능 BUT 여전히 서버를 관리해야 하는 일이 존재한다.

->서버자원 할당, 런타임환경 구축, 서버확장 축소 관리등을 해야하는 인력이 필요하다

->이런 문제들을 해결하기 위해 나온 것이 "서버리스 컴퓨팅"

 

<서버리스 컴퓨팅>

-서버를 관리할 필요가없음.

-클라우드 제공업체에서 대신 관리해준다.

-서버 준비나 관리가 불필요

-트래픽기반 자동 확장,축소(인력 배치 필요 없음)

-가용성, 장애 방지->클라우드의 엔지니어들이 관리해준다.

-미실행시 과금 안함

 

 

유튜브 얄팍한코딩, 짐코딩님 참고!

---