🚢 항해99 3주차 회고
본격적으로 React를 배우는 주차에 들어섰다.
늘 새로운 무언가를 배운다는 것은 설렘 반 두려움 반이다.
처음 접한 React는 절대 쉽지만은 않았다.
클래스형 컴포넌트가 뭔지, 함수형 컴포넌트가 뭔지
한쪽만 아는 것도 버거운데 둘을 왔다갔다하면서 사용하니
서로의 문법체계가 처음에는 너무도 헷갈렸다.
헷갈리면 어떻게 해야할까? 뭐, 반복학습 해야지.
const [rate, setRate] = useState(-1); const text = React.useRef(null); import { useHistory } from "react-router-dom";
const history = useHistory();어떤 분야의 전문가가 되기위해서는 최소 1만시간의 훈련시간이
필요하다는 1만시간의 법칙이 있다.
즉, 노력없이 얻어지는건 없다는 말이겠지.
부단히 노력하자. 생각해봐. 지금껏 노력해서 안되는건 없었잖아.
클래스형 컴포넌트를 통해 컴포넌트의 라이프사이클을 대략적으로 이해하고,
이같은 과정을 함수형 컴포넌트에서는 리액트훅을 통해 구현 방법을 알아 보았다.
처음에는 useState가 뭔지, ref가 뭔지 긴가민가한 개념 투성이었지만
개인적인 미니프로젝트 진행과 함께 자꾸 들여다보니 이제는 어느정도 이해가 간다.
이번 주차에서 리덕스의 간단한 개념까지 숙지하는 것을 목표로 잡았는데
직장일과 학업을 병행하다보니 원하는만큼 진도를 빼진 못했다.
우선은 라우터까지 사용하는 방법을 익히고, 리덕스는 다음주차로 넘기기로 했다.
📕 DOM(Document Object Model)이란?
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에
접근하기 위한 일종의 인터페이스다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알면 좋은데,
브라우저는 서버에서 페이지에 대한 HTML 응답을 받으며 화면에 표시되기 전에
많은 단계를 거치게 된다.
웹 브라우저가 원본 HTML 문서를 읽어들인 후,
스타일을 입히고 대화형 페이지로 만들어 뷰포트에 표시하기까지의 과정을
Critical Rendering Path, CRP라고 부르는데
- DOM 트리 구축
- CSSOM 트리 구축
- JavaScript 실행
- 렌더 트리 구축
- 레이아웃 생성
- 페인팅
이러한 CRP 과정은 위와 같이 6단계로 나누어져 있지만,
렌더 트리 구축을 기점으로 크게 대략 두 단계로 나눌 수 있다.
첫번째 단계: 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정. (이 단계를 거치면 렌더 트리가 생성)
두번째 단계: 브라우저가 해당 렌더링을 수행.
이때 말하는 렌더 트리란, DOM(Document Object Model) : HTML 요소들의 구조화된 표현 에 CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현 을 더한 것을 말하는 것이고
결국에 DOM이란 것은 이러한 과정 속에서 원본 HTML 문서의
객체 기반 표현 방식을 뜻하며, DOM의 개체 구조는 노드 트리구조로 표현 된다.
📗 서버리스(serverless)
Q. 서버리스? 서버가 없나? DB도 백엔드 개발도 안해도 되는건가?
A. 으악... 아니야! 서버는 필요하지! 단지 서버를 내가 만들 필요 없다는거지!
서버리스란 마치 서버가 없는것처럼 (서버를 관리할 필요 없이) 애플리케이션을 실행할 수 있는 환경을 뜻한다.
클라우드 제공업체가 서버인프라에 대한 유지 및 관리,
스케일링 등의 일상적인 작업을 처리하고, 개발자는 배포를 위해 코드를
컨테이너에 패키징하여 사용하면 된다.
서버리스 애플리케이션은 배포 후에 필요에 따라 자동으로 스케일 업 되거나 다운된다.
서비스가 항상 구동되어 있는 상태가 아니라, 요청이 있을때만
실행 되다가 더 필요하지 않은 시점에 종료된다는 점에서
요건에 맞춰서 구동된 시간과 처리된 데이터만큼만 비용을 지급한다는 특징이 있고
또 클라우드 제공업체가 클라우드 인프라와 애플리케이션의 스케일링을 모두 관리한다는 점에서 클라우드 컴퓨팅 모델과 차이를 보인다.
이 같은 서버리스 컴퓨팅 서비스는 일반적으로 BaaS (Backend as a Service) 혹은 FaaS (Function as a Service) 에 의존하여 작업을 처리하게 되는데
BaaS 를 제공하는 서비스 중에선, Firebase, Kinvey 등이 있고,
FaaS 를 제공하는 서비스 중에선, AWS Lambda, Google Cloud Functions 등이 잘 알려져 있다.
