Day 3: 웹 개발 기본 개념과 리액트 여정의 시작
이게 다 무슨 소리야(?) 일단 최대한 간단하게 생각하자.
아프리카를 떠나기 전 옐로카드(황열병 예방 주사를 맞은 기록)가 있어야 한다고 하는 것처럼, 옐로카드만 들었을 때는 도통 무슨 소리를 하는 것인지 알 수 없다. 코드도 동일하다.
먼저 웹 기반으로 생각하는 바를 구현하고자 하기 때문에 왜? 어떻게? 와 같은 질문보다는 여행을 떠나기 위해서는 여권과 나라별 필수품을 준비하듯 나만의 결과를 만들어 내기 위해 이런 흐름으로 진행되고, 작성이 되는구나 정도를 복기한다.
현재 듣고 있는 코배투 강의 기준 웹 개발의 기본 개념을 짧게 정리하면 아래와 같다.
웹 아키텍처 개요
브라우저 → 프런트엔드 서버 → 백엔드 서버 + 데이터베이스
핵심 개념
SPA (Single Page Application, 단일 페이지 애플리케이션)
CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)
SSG (Static Site Generation, 정적 사이트 생성)
배포 방법
CloudFlare Pages, AWS S3 + CloudFront + Route53, Vercel
각 장단점이 있다. 생각하는 아이디어 구현 정도에 따라 다르지만 시작하는 단계에서는 CloudFlare Pages를 많이 사용한다.
리액트
컴포넌트 기반의 선언적 UI 라이브러리로, 효율적인 상태 관리와 가상 DOM을 활용하여 빠르고 동적인 웹 애플리케이션을 구축할 수 있도록 도와준다. 여행 가이드정도로 보면 될 듯하다.
모든 걸 다 해주지는 않고, 아래 그림과 같이 실행이 된다.
그냥 모르고 보면 어렵다. 리액트 클래스 컴포넌트의 생명주기라 불리는데, 작동 원리(?)라고 이해하면 쉬울 듯하다.
1. 마운팅(Mounting) 컴포넌트가 처음 생성되어 DOM에 삽입될 때 실행되는 과정.
constructor → 컴포넌트가 생성될 때 실행되는 생성자 함수 (초기 state 설정, 이벤트 바인딩 등 수행)
render → UI를 생성하여 브라우저에 표시
componentDidMount → 컴포넌트가 마운트 된 후 실행됨 (API 호출, 비동기 데이터 로딩 등 가능)
2. 업데이팅(Updating) 컴포넌트의 state나 props가 변경되면 리렌더링이 발생하며 실행.
render → 새로운 props나 state를 반영하여 UI를 갱신
React updates DOM and refs → 실제로 DOM이 업데이트됨
componentDidUpdate → 컴포넌트가 업데이트된 후 실행됨 (이전 props/state 비교 가능, API 호출 가능)
업데이트는 다음과 같은 경우에 발생
새로운 props가 전달될 때
setState()를 호출할 때
forceUpdate()를 호출할 때
3. 컴포넌트가 더 이상 필요하지 않아 DOM에서 제거될 때 실행.
componentWillUnmount → 컴포넌트가 언마운트되기 직전 실행(타이머 정리, 이벤트 리스너 해제 등)
코딩은 새로운 여정을 떠나는 여행과 같다는 생각에 글을 쓰고 있지만, 제대로 즐기고 놀기 위해서는 많은 시간이 소요되는 것은 진짜 똑같다는 것을 다시 느꼈다.
