[항해99] 3주차 회고

한 주에 대한 정리

3주차는 드디어 자신이 정한 주특기를 배우는 주차였습니다.

제가 선택한 주특기는 리액트였습니다. 

 

3주차에 집중적으로 배운 것은 리액트의 기초와 라이프 사이클, 라우팅이였습니다.

리액트에서 리액트 요소가 화면에 그려지고 사라는진데 까지의 사이클

SPA에서 라우팅 등 어떻게 리액트가 그려지고 작동하는지를 배울 수 있었습니다.

 

아래에서는 라이프 사이클을 이해하기 위해 필요한 DOM과 

프로젝트를 만들 때 서버에 대한 고민을 줄여줄 수 있는 서버리스에 대해 알아보겠습니다.

 

 

DOM

먼저 DOM은 Documnet Object Model로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스를 의미합니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각 요소에 접근하는 방법을 제공합니다.

DOM의 특징

 

1. 위의 그림은 WC3의 DOM 표준 객체 모델입니다. DOM의 구조는 노드 트리고 표현되며

하나의 부모 줄기가 여러 개의 자식을 가지는 구조로 이루어져 있습니다.

 

2. 또한, DOM은 HTML 문서로 생성되지만 꼭 일치하는 것은 아닙니다.

 

• HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성
  (최초에 화면을 그릴때 사용하는 설계도)
• DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용됨
  (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)

3. DOM은 브라우저에서 보이는 것이 아닙니다.

브라우저 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합입니다. 

렌더 트리에는 렌더링 되는 요소만 관련이 있고 스크린에 그려지는 것으로 구성되어 있습니다.

렌더 트리는 보이지 않는 요소들은 제외되기 때문에 DOM과는 다릅니다.
(DOM은 보이지 않는 요소를 포함하고 렌더 트리는 제외합니다.)

4. DOM은 개발도구에서 보이는 것이 아닙니다.

개발도구의 요소 검사기에 보이는 것이 DOM과 가장 비슷한 모습을 보이지만

개발도구의 요소 검사기는 DOM이 가지고 있지 않은 정보를 가지고 있습니다.

::befor, ::after의 선택한 가상 요소가 렌더 트리를 구성하는 요소 중 하나이지만, 

DOM은 HTML문서로부터 빌드됩니다.

 

서버리스

 

서버리스는 서버가 없다는 뜻이 아니라 서버를 관리할 필요없이 app을 실행할 수 있도록하는

클라우드 네이티브 개발 모델입니다.

 

서버리스는 서버가 존재하지 않는 것이 아니라, 누군가 이미 구축해둔 서버를 사용하는 것입니다.

서버리스를 사용하는 이유는 개발자가 클라우드나 온프레미스 서버 또는 런타임 관리와 운영에 대해 시간을 쓰지않고 오로지 핵심 제품에 집중할 수 있기 때문입니다.

 

그러나 서버리스는 클라우드 서비스에 종속적이고, 트리거에 의해 서버를 실행하고 종료하기를

반복하기 때문에 실행 대기 시간이 오래걸리는 단점이 있습니다.

 

 

여기까지 DOM과 서버리스에 대해 간단하게 알아보았습니다.

이후에는 더 자세하게 공부하고 포스트하겠습니다.

 

 

정리

항해의 3주 차는 리액트를 시작하는 기간이었습니다.

리액트가 어떻게 화면을 그려내는지 컴포넌트가 언제 업데이트 되는지 등알 수 있었던 시간이었습니다.

 

다음주는 리액트에 대해 더 자세하게 알 수 있을 것 같습니다.!