React DOM
💻DOM
DOM(문서객체모델)은 문서 하나하나를 객체로 생각하는 모델을 의미한다. 여기서 문서 객체란 html,head,div 등등 이와 같은 태그들을 하나의 객체로 생각하는 것을 말한다. 객체 하위에는 또다른 객체들을 가질 수 있는데 이런 구조를 '트리 구조'라고 한다. 뿐만 아니라 javascript는 이러한 DOM(문서객체모델)을 이용할 수 있다.
정리하면 DOM은 트리구조로 이루어진 문서객체이자, javascript가 이용할 수 있게끔 만든 모델이다.
💻Vitural DOM
가상 DOM은 실제 DOM에서 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 가상 DOM이 등장하게 된 배경은 속도 이슈 때문이다. DOM 자체의 속도는 빠르지만, 요소의 개수가 수백개, 수천개 단위로 늘어나는 큰 규모의 웹애플리케이션에서는 속도 성능 이슈가 발생한다. 정확히 말하자면 웹브라우저 단에서 DOM변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것이 크다.
이러한 문제 때문에 DOM을 최소한으로 조작하기 위해 가상 DOM 방식을 사용했다. 가상 DOM은 실제 DOM의 사본이라고 생각하면 되는데 업데이트를 한다고 가정했을 때 업데이트한 전체 UI를 가상 DOM에 리렌더링 하고 실제 DOM과 생성된 가상 DOM을 비교하여 바뀐 부분만 실제 DOM에 적용하기 때문에 계속적으로 DOM을 건드리지 않아도 된다.
하지만 DOM에 비해 항상 빠른 것은 아니다. 간단한 작업 같은 경우는 DOM을 직접건드리는 게 더 빠를 수도 있다. 따라서 DOM과 가상DOM의 유연한 사용이 필요하다.
💻Severless
서버의 사양, 네트워크 설정 같은 게 미리 되어 있는 서버를 빌려 써 인프라 작업을 할 필요가 없다.
서버리스는 크게 FaaS(Function as a Service)와 BaaS(Backend as a Service)로 나눌 수 있다.
FaaS는 Function, 즉 함수를 서비스로 제공한다.
사용자가 작성한 코드(백엔드)를 서버리스의 서버에 업로드 하게 되면,서버가 업로드한 코드를 함수 단위로 조개어 대기상태로 두고, 요청이 들어오면 함수를 실행시켜 처리하는 구조이다.
쉽게 말하자면 업로드한 코드가 평상시에는 쿨쿨 자고있고, 요청이 들어오면 서버가 코드를 깨워 일을 시킨 후 다시 재운다! 정도로 이해하면 된다.
ex)AWS Lambda
BaaS는 백엔드 개발에 필요한 여러 기능을 API로 제공하는 서비스이다.
쉽게 말하자면 SNS연동이나 DB와 같이 백엔드에 필요한 기능들을 사용자가 직접 구현 할 필요 없이 제공하는 API로 해당 기능을 구현할 수 있게 해 주는 것이다. 클라우드 공급자가 백엔드 개발 환경까지 제공해 준다고 보면 될 것 같다.
ex)Firebase
둘의 차이는 직접 백엔드를 구현했냐 안했냐의 차이!
📂 항해3주차 React개인과제
일주일 평점 남기기(React 기본주차)
https://github.com/dongyunh/hanhae99_weekrating
