🤔 항해99 2주차 WIL 주특기(기본)

  React의 R자도 몰랐던 내가 항해99 2주차 주특기 기본주차를 수강하며 이번 주차의 키워드인
문서 객체 모델(DOM, Document Object Model)과 서버리스에 대해 배운 것과 느낀점에 대해 기록하려고 남기는 글.

주특기 기본 진행기간: 2021-09-20 ~ 2021-09-29
(이후 주특기 심화 수강예정)

아무것도 모르고 시작했던 프로젝트 주간이 지나가고 새로 다가온 주특기(React) 기본 주간에 내가 배운 내용을 이해한대로 작성 해 보고자 한다. (틀린 부분이 있다면 알게 되는대로 수정예정!)

📌 1. 문서 객체 모델(DOM, Document Object Model)

DOM(Document Object Model)이란

(1) DOM

문서 객체 모델은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. W3C의 표준이다. W3C의 표준화한 API들의 기반이 된다. DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다. -위키백과-

 보통 HTML=DOM이라고 많이 생각하는데, 완전히 같은 개념은 아니다.
간단하게 보자면 Browser를 목수, 우리가 계속해서 만들고 있는 HTML은 설계도 라고 봤을 때 이 설계도의 내용대로 실체로 만들어 낸 것(집)을 DOM이라고 한다.

  그렇다면 리액트에서 사용하는 가상 돔(Virtual Dom)은 뭘까?

 만약 저 설계대로 만든 집(DOM)에 Javascript로 지시가 들어와서 집에있는 책상(하나의 컴포넌트라고 생각하자) 하나를 옮겨야 된다면 어떻게 될까?

 가상 돔 없이 이 책상을 옮긴다면 목수는 두 설계도를 비교하지도 않고 아예 설계도대로 처음부터 다시 집을 부쉈다가 다시 짓는 행동을 하게된다.(페이지 전체를 리렌더링한다.)

하지만 가상 돔(virtual Dom)을 이용하면 목수는 그 안에서 실제 집(DOM)에서 옮기기 전에 이전 설계도와 새로운 설계도를 겹쳐보고 달라진 부분만을 가져와 효율적으로 해당 '책상(컴포넌트)'을 옮기게 된다.(해당 요소만 렌더링)

📌 2. 서버리스(Serverless)란?

서버 리스에 대해 말하기 전에 먼저 서버의 역할부터 간단히 알아보면 아래와 같다.
(물론 아래 3가지가 서버 역할의 전부는 아니다)

역할1. 데이터 관리
(db -> 요청에 따른 데이터 가공 -> 응답)

역할2. 헬스체크
( 미리 답이 정해진 일정한 규칙을 실행시켜 장애의 유무를 결정하고, 필요할 때는 장애 단위를 분리시키는 자기 진단 기능.)

역할3. 데이터 관리
(db -> 요청에 따른 데이터 가공 -> 응답)

 서버리스(Serverless)라는 단어만 보면 자칫 '서버리스 = 백엔드 리스' 라거나 '서버가 없다' 라고 생각할 수 있지만 단순히 미리 위와같은 서버의 역할을 미리 설정해둔 서버를 서버리스라고 한다.