DOM과 서버리스 (3주차)

DOM이란? 

 

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

 

Virtual DOM 이란? (메모리 위에서만 돌아간다)

 

화면에 변화가 일어났을 때 더 적은 리소스로 빠르게 업데이트를 한다. 개념적으로는 브라우저에는 실제 DOM이 아닌 리액트가 생성한 가상 DOM(Virtual DOM)을 렌더링한 후 엘리먼트가 변경될 경우 React가 변경 내용을 연산해서 가상 DOM에서 필요한 부분만 업데이트 한다.

 

react는 왜 DOM에 바로 접근하는 대신 Virtual DOM을 사용하여 접근하는 것인가?

 

그 이유는 바로 성능에 있다.

DOM을 자주 조작하면 성능에 많은 영향을 끼치기 때문에 속도가 느려진다.

그렇다고 DOM이 느리다는 것이 아니다.

DOM 자체는 빠르고, DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리할 때의 성능과 비교하여 다르지 않다.

하지만, 웹 브라우저에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 다시 구성하고, 페이지를 다시 칠하는데 이 과정에서 많은 시간이 허비되어 성능이 저하가 되는 것이다.

그렇기 때문에 Virtual DOM을 사용해야 하며, 이 방식을 통해 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행하게 만들어준다.

하지만 Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아니다.

리액트에서는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축을 할때 사용을 권장하고 있다.

즉, 이 말은 리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단할 때는 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다.

결국에는 적절하게 사용해야 리액트가 지닌 능력을 잘 발휘할 수 있다고 한다.

 

정리하자면 

• 빈번한 DOM 조작은 성능이 무겁고 느려지게 된다.
• Virtual DOM은 실제 DOM의 가상의 표현 즉, 사본 같은 형태이다.
• 상태 변경이 발생하면 Virtual DOM이 업데이트되고 이전 및 현재 버전의 가상 DOM이 비교된다. 이것을 "diffing"이라 부른다.
• 그런 다음 Virtual DOM은 배치 업데이트를 실제 DOM으로 보내 UI를 업데이트한다.
• React는 Virtual DOM을 사용하여 대규모 애플리케이션을 구축할 경우 성능을 향상시킨다.

 

서버리스란?

 

Serverless, 즉 서버가 없다는 의미이다. 이는 BaaS 와 FaaS, 이렇게 두가지로 나뉘어질 수있는데, 서버가 없다는건, 그냥 표현일 뿐, 사실 작업을 처리하는 서버는 존재하긴 한다. 다만, “서버의 존재”에 대해서 신경쓰지 않아도 된다. 서버가 어떤 사양으로 돌아가고있는지, 서버의 갯수를 늘려야 할지, 네트워크는 어떤걸 사용할지, 이런걸 설정할 필요가 없다.

 

 

BaaS (Backend as a Service)

 

보통, 우리가 모바일 혹은 웹 애플리케이션을 만들게 될 때, 백엔드 서버개발을 진행하게 된다. 엄청 단순하게 생각하자면, 계산기, 혹은 그림판 수준으로 프론트엔드 쪽 코드로만 충분히 이뤄질 수 있다면, 백엔드 서버를 만들 필요가 없지만, 데이터를 저장하고, 다른 기기에서도 접근하고, 공유하기 위해서는, 백엔드 개발은 필수적이다.

서버 개발을 하다보면, 고려할 사항이 꽤 많다. 유저가 늘어나게 된다면 서버의 확장도 고려해야 하고, 보안성 또한 고려해야 한다. 그래서 탄생한 서비스가, Firebase 같은 BaaS 입니다. 이 시스템에서는, 앱 개발에 있어서 필요한 다양한 기능들 (데이터베이스, 소셜서비스 연동, 파일시스템 등)을 API로 제공해 줌으로서, 개발자들이 서버 개발을 하지 않고서도 필요한 기능을 쉽고 빠르게 구현 할 수 있게 해주고, 비용은 사용 한 만큼 나가게 된다. 서버의 이용자가 순식간에 늘어나게 되어도, 따로 대비를 안해주어도 알아서 확장이 된다.

 

FaaS (Fucntion as a Service)

 

FaaS 는 프로젝트를 여러개의 함수로 쪼개서 (혹은 한개의 함수로 만들어서), 매우 거대하고 분산된 컴퓨팅 자원에 여러분이 준비해둔 함수를 등록하고, 이 함수들이 실행되는 횟수 (그리고 실행된 시간) 만큼 비용을 내는 방식을 말한다.

우리가 등록한 함수는 특정 이벤트가 발생했을때 실행된다.

• 주기적으로 실행되게끔 설정 할 수 있다. 5분마다, 1시간마다, 하루마다 이런식으로 가능하다. 크롤링 작업, 주기적 처리를 할 때 좋다.
• 웹 요청을 처리 할 수도 있다. 예를 들어서 특정 URL 로 들어오면 어떠한 작업을 하게끔 할 수 있다. 이를 통하여 백엔드 API 를 구성 할 수도 있다.
• 콘솔을 통하여 직접 호출 할 수도 있다.

PaaS와의 주요 차이점

 

서버 시스템에 대해서 신경쓰지 않아도 된다는 점이 PaaS 와 유사하기도 한데요, 가장 중요한 차이점은, PaaS 의 경우엔, 전체 애플리케이션을 배포하며, 일단 어떠한 서버에서 당신의 애플리케이션이 24시간동안 계속 돌아가고 있다는 점 입니다.

반면 FaaS 는, 애플리케이션이 아닌 함수를 배포하며, 계속 실행되고 있는 것이 아닌, 특정 이벤트가 발생 했을 때 실행되며, 실행이 되었다가 작업을 마치면 (혹은 최대 타임아웃 시간을 지나면) 종료됩니다.