[WIL | 항해99] 3주차 회고 DOM과 서버리스(serverless)

🍕DOM은 정확히 무엇인가?

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다.

기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 

▶프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

▶DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

▶DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다.  이 문서에서는 자바스크립트를 주로 사용하였지만, DOM의 구현은 어떠한 언어에서도 가능하다. 

▶Document와 window objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다.  간단하게 설명하자면, window object 는 브라우저와 같다고 할 수 있으며, document object 는 root document 자체라고 할 수 있다.
all ref: MDN 공식 문서

DOM의 이해를 위해선 웹 페이지가 어떻게 빌드되는 지 알아야 한다. 

 

🍕웹 페이지는 어떻게 만들어질까?

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기 까지의 과정을 "Critical Rendering Path"라고 한다. 이 과정은 여러 단계로 나누어져 있지만,  대략 2 단계로 나눌 수 있다. 

첫 번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정합니다. 그리고 두 번째 단계에서 브라우저는 해당 렌더링을 수행합니다.

-> 첫번째 과정을 거치면 "렌더 트리(Render Tree)"가 생성된다. 

렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다. 

브라우저는 렌더 트리를 생성하기 위해 아래와 같은 두 모델이 필요하다.

• DOM(Document Object Model) – HTML 요소들의 구조화된 표현
• CSSOM(Cascading Style Sheets Object Model) – 요소들과 연관된 스타일 정보의 구조화된 표현

DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만 DOM이 갖고있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다. 

• DOM의 개체 구조는 "노드 트리"로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있음 
• 브라우저 뷰 포트에 보이는 것은 "렌더 트리(DOM 과 CSSOM의 조합)"이다. 렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과 다름

참고 자료: https://wit.nts-corp.com/2019/02/14/5522

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

 

🍕서버리스 컴퓨팅이란 무엇인가?

서버리스 컴퓨팅은 사용량에 따라 백엔드 서비스를 제공하는 방법입니다. 서버리스 아키텍처로 사용자는 기본 인프라를 걱정하지 않고 코드를 작성하고 배포할 수 있습니다. 서버리스 업체로부터 백엔드 서비스를 받는 기업은 사용량에 따라 비용을 부과받으며 서비스 규모가 자동으로 결정되기 때문에 고정 대역폭이나 서버 개수를 유지하거나 그에 대한 비용을 지불하지 않아도 됩니다. 네임 서버리스에도 불구하고 물리적 서버는 여전히 사용되지만 개발자는 이를 인식할 필요가 없습니다.

백엔드 서비스를 제공하느 서버가 여전히 있기 때문에 ‘서버리스’라는 용어는 약간 오해를 일으킬 수 있지만 서버 공간과 인프라 문제는 모두 업체가 처리합니다. 서버리스는 개발자가 서버를 전혀 걱정하지 않고 작업할 수 있다는 뜻

 

▶서버리스 컴퓨팅이 제공하는 백엔드 서비스 유형 

대부분의 서버리스 제공 업체는 데이터베이스와 저장소 서비스를 고객에게 제공하며 많은 경우 Cloudflare Workers 같은 FaaS(Function-as-a-Service) 플랫폼도 보유하고 있습니다. 

 

▶서버리스 컴퓨팅의 장점

• 낮은 비용
• 간편한 확장성 // 코드확장을 위한 정책 걱정 X -> 서버리스 업체가 요청에 따라 확장을 모두 처리
• 간단한 백엔드 코드 // 개발자는 FaaS를 사용하여 API호출 같은 단일 목적을 독립적으로 실행하는 간단한 기능을 만들 수 있음
• 시간 단축 // 복잡한 배포 프로세스를 이용하여 버그 수정과 새로운 기능을 배포하는 대신 필요에 따라 코드를 추가하고 수정가능

참고자료: 

https://www.cloudflare.com/ko-kr/learning/serverless/what-is-serverless/

서버리스 컴퓨팅이란 무엇입니까? | 서버리스 정의

 

---

🍕동적, 정적 웹사이트 구분

웹 사이트는 서버측 스크립트를 사용한다, 안한다의 유무를 차이로 동적 웹사이트, 정적 웹사이트로 나눌 수 있습니다. 

서버측 스크립트 예시: PHP, JSP, ASP...
정적 자원: HTML, JS, CSS

 

🐱‍👤Amazon S3를 통해서 리액트 프로젝트 배포를 해봤다!

▶Amazon Simple Storage Service(S3)

• 온라인 스토리지 서비스이다. 온라인이라는 글자가 붙는 이유는 데이터 조작에 HTTP/ HTTPS를 통한 API가 사용되기 때문!
• REST, SOAP과 같은 단순한 웹 서비스 인터페이스를 사용한다. 저장하는 데이터 양에 대한 비용도 저렴, 저장할 수 있는데이터 양이 무한에 가깝다. 
• S3는 FTP 서버처럼 단순한 파일 저장 영역으로 사용할 수도 있고, 다양한 AWS 서비스의 사용로그 저장, 정적 웹 사이트 호스팅 기능 등을 가지고 있다. -> 나는 여기서 정적 웹사이트 호스팅 기능을 사용하여 리액트 프로젝트를 배포해봤다. 

▶S3을 사용하는 이유? 

• S3는 저장 용량이 무한대이며 파일 저장에 최적화되어 있다. 용량을 추가하거나 성능을 높이는 작업 필요X 
• 비용은 EC2와 EBS로 구축하는 것보다 훨씬 저렴( 비용적 측면에서 우수 )
• 동적 웹페이지와 정적 웹페이지가 섞여있을 때 동적 웹페이지만 EC2에 서비스하고 정적 웹페이지는 S3를 이용하면 성능도 높이고 비용도 절감됨 
• 웹하드 서비스와 비슷하지만, 별도의 클라이언트 설치나 ActiveX를 통하지않고 HTTP 프로토콜로 파일 업로드/다운로드 처리 
• S3 자체로 정적 웹서비스 가능 ✔

🤦‍♂️회고...

S3를 사용하래서 사용했었는데 이유를 찾아보니 정적 웹서비스가 가능해서였음 근데 이제는 다른 개념이 좀 헷갈리기 시작한다.. 서버리스와 클라우드 서비스(e.g.EC2) 클라우드 스토리지 서비스는 비슷한 개념같은데 다른 거 같고 그냥 여러 클라우드 서비스에 회사마다 각각 추가해놓은 기능이 다른건지.. 머리가 복잡하다. 

 

   서버쪽보단 프론트 쪽이라 지금 집중해야하는 건 리액트인데 사실 저번주에 리액트를 진행하면서 멘탈이 깨장창 날라갔다. 구현하라는 기능을 전부 구현하지 못했을 뿐더러 리액트 개념이 아예 안잡혔기 때문^^ ! 강의에서 계속 리액트 쉽죠? 라고 말씀하시는데 들을 때마다 화가 나는 나, 정상인가요?

   이 상태로 또 다른 과제가 주어졌다. 이건 또 어떻게 만들어내냐.. 사람마다 템포가 다르다는데 잘 구현해내는 사람들이 보이니 마음이 자꾸 불안해진다😞(stop 잘함ing). 일요일에 강의를 다 들어야지!했는데 오후 2시에 깨버렸다(정말 미쳤는지?) 흑흑.. 밥먹고 운동다녀오니까 저녁시간이 됐다. 그냥 리프레쉬한다 치고 지금 WIL 작성하고 있는데 리액트를 생각하니 또 마음이 싸늘해졌음(싫은게 아니라 못해서 분함) 그 치 만? 못하면 안되니까 그냥 아무생각없이 공부해야겠지.. 고민을 해서 무얼하나~ 그냥 해야지~ 

일요일은 푹 쉬었으니 월요일부터 열심히 공부해서 이번에는 직접 기능 구현해보고 싶다 아z ㅏ!

ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ 

+ 아 참고로 엄청 비관맨이었는데 운동하고 나서 뭔가 긍정맨으로 변했음 다들 운동하세요 화이팅!