1.DOM (Document Object Model)
- 브라우저의 url을 통해 서버로부터 응답받은 파일들을 (html,css등등) 브라우저의 렌더링엔진에의해 파싱(구문분석)된상태의 자료구조를 의미한다.
- HTML에서의 계층적구조와 정보들을 그대로 담고있으며,이를 제어할 수있는 API를 제공한다.
- 노드들의 트리구조형태로 이루어진다.
1) 노드
- 서버로부터 전달받은 HTML에서 각 태그들을 브라우저의 렌더링엔진에의해파싱되어, DOM을 구성하는 노드로 변환된다.
위와같은 html태그가 존재한다고하면, div는 요소노드, class = "emotion"은 어트리뷰트노드, Happy는 텍스트 노드로 변환된다.( 어트리뷰트노드는 요소노드를 가리키고, 텍스트노드는 요소노드의 자식노드로 구성된다)<div class = "emotion">Happy</div>
2. 서버리스(Serverless)
서버가 없다는 의미보단 "서버의 존재를 신경쓰지않아도 된다"를 의미한다. 데이터를 관리해주고, 웹 어플리케이션을 실행시는 등의 일을직접 하지않아도 된다. 서버리스는 BaaS와 FaaS로 나뉜다.
1) BaaS (Backend as a Service)
보통 우리가 웹어플리케이션을 만들떄 백엔드와 프론트엔드로 나뉘어서 개발을한다.이떄 백엔드의 역할을 대신해주는걸 의미한다. 유저가 늘어나게되면 서버의 확장도 고려해야하고, 보안성도 생각해야하지만 이러한 작업을 대신해준다. 대표적인 예로는 Firebase가 존재한다. 이 firebase는 앱 개발에 필요한 기능들을 (데이터베이스,소셜서비스연동(로그인),파일시스템등) API형태로 제공한다.
장점
- 개발시간이 단축된다(인건비 절감)
-> 백엔드의 지식이 없이도 빠른 속도로 개발이 가능해진다. - 어느정도의 용량까지는 무료로 사용할 수있기떄문에, 소규모 프로젝트에선 매력적이다.
단점
- 복잡한 쿼리가 불가능하다.
-> Firebase 를 통하여 다음과 같은 작업은 할 수 있습니다
2022년 1월 1일 ~1월 31일 사이에 작성된 글 조회
OOO 가 작성한 글 조회
그런데 이런건 못합니다.
OOO 가 1월 1일 이후에 작성한 글 조회 - 규모가 커지면 직접 구현했을떄대비 비용이 상당하다.
FaaS(Function as a Service)
백엔드쪽의 코드를 서버리스 제공자의 서버에 업로드하게되면
서버는 업로드된 코드들을 함수단위로 쪼개서 대기상태로 둔다. 이상태에서 요청이 들어올떄마다 함수를 실행시키고 작업이 끝나게되면 다시 대기상태로 돌려놓는다. 비용은 함수가 요청되는 횟수를 기준으로 청구된다.
장점
- 서버를 하루종일 켜놓는것이아니라 요청횟수에따라 비용이 청구되기떄문에 비용이 절약된다.
- 확장성면에서 뛰어나다. ( 사용자가 늘어남에따라 서버의 갯수를 늘리는방식이아닌 함수의 호출횟수에만 의존함으로)
단점
- 코드들을 함수로 쪼개서 작업을하기떄문에, 함수에서 사용할 수있는 자원에 제한이있음.
FE developer 🙂