[WIL] 이노베이션 캠프 3주차 회고록(DOM, 서버리스)

문서 객체 모델 (DOM)

DOM(Documnet Object Model)

• DOM(Documnet Object Model)은 웹페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 컨텐츠 및 구조, 그리고 스타일을 읽고 조작할 할 수 있도록 API를 제공한다.

출처 : 위키백과

• DOM은 tree형식의 자료 구조를 가지고 있다. tree자료 구조란 하나의 root노드에서 시작이 되어서 아래로 퍼져나가는 형태의 자료 구조이다.
• 위쪽의 node를 부모(parent) 노드, 아랫쪽 node를 자식(child)라고 한다. root node는 가장 위쪽의 parent가 없는 node가 된다. 그리고 children이 없는 node를 leaf node라고 한다.

 👉 Node 란 ?

Tree 구조에서 root 노드를 포함한 각각의 개체를 node라고 표현한다. html에서는 head, body 등의 태그 뿐만 아니라 태그 안의 text나 property등도 모두 Node에 속한다.

 

HTML ? DOM ?

• DOM은 브라우저에서 로드되는 것. 작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM이다. 그리고 이러한 DOM은 자바스크립트로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등을 가능케 하는 API를 제공한다.
• 즉, DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환하는 것.

브라우저 동작원리

 

• 브라우저가 HTML을 전달 받으면, 곧 이를 변환(파싱)하고 노드들로 이루어진 DOM 트리를 만든다. 그 후, 외부의 CSS 파일과 각 노드들의 inline 스타일을 파싱하여 스타일을 입힌 Render 트리를 만든다.
• Render 트리가 만들이지면, 각 노드들이 화면에서 정확히 어디에 나타나야 하는지에 대한 위치가 주어진다. 그 후, paint() 메서드를 호출하면 내가 구현하고 싶었던 화면이 출력된다.
• DOM은 해당 과정을 계속 반복한다. 즉, 오타 수정, 문구 제거 혹은 이미지를 첨부하는 사소한 일을 하더라도, DOM은 처음부터 다시 HTML을 파싱하여 DOM 트리를 만들고 CSS를 파싱하여 Render 트리를 만들고, 레이아웃을 입혀 출력한다.
• 2000년도 초만 하더라도 하나의 웹 사이트에 몇 페이지 없었을 테지만, 현재 대부분의 웹 사이트는 수 십개 심지어 수 백, 수 천개의 페이지로 이루어졌다. 오타 하나를 잡고 싶을 뿐인데, 전체 사이트를 다시 처음부터 렌더링(위의 결과물 출력 과정)을 해야 하며, 해당 오타를 찾기 까지 너무나 많은 시간이 들어가 상당히 비효율적이다.

Virtual DOM

• 위의 비효율적인 방법을 개선하기 위해서 나온 방법이다.
• Virtual DOM(가상 DOM)은 수정사항이 여러 가지 있더라도, 가상 DOM은 한 번만 렌더링을 일으킨다.

• 가상 DOM은 DOM이 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한 번에 전달하여 딱 한번만 렌더링을 진행한다.
• 수정사항이 생기면, 가상 DOM이 알아서 달라진 값을 탐지하여 변경하고 최종적인 결과물을 실제 DOM에 전달한다.

 

서버리스(Serverless)

서버리스란?

• 서버리스는 클라우드 컴퓨팅의 모델 중 하나로 사용자가 서버를 직접 관리할 필요가 없는 모델을 의미한다.
• 서버를 직접 관리할 필요가 없다는 의미는 laaS와 같은 모델처럼 트래픽에 따라 사용자가 직접 서버의 가용량을 증감 시킬 필요가 없다는 뜻이다.

👉 클라우드 인프라 서비스 (laaS)란 ?
인터넷을 통해 최종 사용자에게 IT 인프라를 제공하는 형태의 클라우드 컴퓨팅이다. Infra(CPU나 하드웨어 등의 컴퓨팅 자원)을 네트워크를 통해 서비스로 제공하는 모델이다. 하드웨아가 구축되어지는 단계로 소프트웨어보단 하드웨어적인(Server, Storage, Network)에 대한  가상화를 진행한다. 

• 클라우드 컴퓨팅이 등장하면서, 더 이상 서버를 직접 설치하고 관리할 필요가 없어졌다. 물리적인(하드웨어) 부분은 클라우드 서비스를 제공하는 기업이 직접 관리해주지만 여전히 소프트웨어적인 부분은 사용자가 직접 관리를 해야한다.

서버리스 아키텍처의 구현 방식

- BaaS (Backend as a Service) : Firebase, Kinvey, Parse ... 등
- FaaS (Function as a Service) : AWS Lambda, Azure Functions, Google Cloud Functions ...  등

• BaaS를 사용하는 애플리케이션은 일반적으로 SPA, 안드로이드와 같은 클라이언트 중심으로 개발된 애플리케이션이다. 클라이언트단에서 Baas가 제공하는 인증, DB, 사용자 관리 등과 같은 외부 서비스를 사용해서 대부분의 비즈니스 로직을 처리한다.
• FaaS는 무상태(Stateless) 함수가 서버 측 비즈니스 로직을 포함한다. 백엔드를 작은 함수단으로 쪼개서 사용자가 직접 관리하지 않는 서버로 올린다. 함수들은 특정한 조건 또는 주기, 요청 등으로 트리거 되어서 서버가 알아서 실행되고 종료된다. 주로 서버리스라 하면 FaaS에 더 가깝다.

서버리스 장단점

- 장점

• 이벤트 기반의 비용. (일정 주기, 조건 등에 함수를 호출하므로 리소스를 낭비하지 않게 되어서 비용이 저렴하다.)
• 인프라 구성, 운영, 보안 등에 신경쓰지 않고 비즈니스 로직에 집중할 수 있다.
• 자동 스케일 업 및 스케일 다운
• 간단한 패키징 및 배포
• 릴리즈 주기 감소
• 높은 생산성

 

- 단점

• 실시간 서비스에는 적합하지 않음 (항시 실행 중인 서버랑 달리, 트리거에 의해 서버를 실행하고 종료하기를 반복하기 때문에 실행 대기 시간이 오래 걸림)
• 클라우드 서비스 업체에 종속적
• 마이그레이션의 어려움
• 실행 시간 한계 (AWS Lambda의 경우 15분)
• 로컬 데이터를 사용할 수 없다. (Stateless)
• 디버깅이나 테스팅에 불편하다.

 

---

 

3주차를 마치며...

 

 3주차에는 내가 주특기로 선택한 React.js를 배웠다. 사용이 조금 서툴렀지만, 주어진 과제를 하다보니 조금씩 익숙해지고 있는 것 같다. 과제를 하면서 의아했던 것은 Redux를 사용하는데, 무엇이 편하고 좋다는 건지 이해가 잘 안되었었다. 하지만 팀원들과 코드를 공유하고 어려움에 대해서 이야기 하니, 한번에 이해가 되었다.

 내가 놓친 부분은, Redux를 사용하기 전에, 상위 컴포넌트에서 list를 만들어서 가장 하위 컴포넌트까지 props를 넘겨주는 방식으로 코드를 짰었다. Redux를 사용할 때는 정보가 필요한 컴포넌트에서만 정보를 불러와서 사용을 해도 되는 것을... 상위 컴포넌트에 list를 그대로 리덕스로 사용하고, 똑같이 props로 넘기고 있었으니...😂

 

 전역상태관리에 대한 개념을 알면서도 처음 사용하는 Redux이다 보니, 사용방법을 따라가기 급급해서 중요했던 부분을 놓쳤던 것 같다. 역시 혼자서 하는 것 보다는 함께 해주는 동료들이 있어야 내 자신에 대한 피드백이 잘 되는 것 같아서 좋은 것 같다.

 

 

 

https://github.com/Hwang-Junsu/React_todolist

 

 

 

 

---

 

 

- 출처 :

https://dlee0129.tistory.com/140

클라우드 모델 및 특징 (IaaS, PaaS, SaaS)

https://jaehoney.tistory.com/77

서버리스(Serverless)란 무엇인가?

https://wit.nts-corp.com/2019/02/14/5522

DOM은 정확히 무엇일까? | WIT블로그

https://iamdaeyun.tistory.com/entry/DOM-01Document-Object-Model-DOM%EC%9D%98-%EB%9C%BB

[DOM-01]Document Object Model : DOM의 뜻