그린티_

서론웹 개발이랑 면접에서 기술면접에서 CSR, SSR이라는 용어가 자꾸 나옴React는 CSR이고, Next.js는 SSR도 지원한다고 함처음엔 "둘 다 HTML인데 뭐가 달라?" 싶었지만, 찾아보니 장단점이 확실히 다름그래서 CSR과 SSR이 정확히 뭐고, 언제 뭘 써야 하는지 정리해봄본론CSR (Client Side Rendering) 이해하기CSR은 렌더링을 클라이언트(브라우저)에서 함서버는 빈 HTML과 JavaScript만 보내고, 브라우저가 나머지 일을 함CSR의 흐름1. 유저가 웹사이트 접속 ↓2. 서버가 빈 HTML 파일 전송 ↓3. 브라우저가 JavaScript 다운로드 및 실행 ↓4. JavaScript가 DOM을 동적으로 생성 R..

CSR이란?HTML, CSS, JavaScript를 모두 클라이언트(브라우저)에서 처리해 화면을 구성하는 방식최초 요청 시 서버는 빈 HTML 껍데기와 JavaScript 파일만 전달이후 브라우저가 JavaScript을 실행시키면서 데이터를 불러오고 화면을 브라우저에서 동적으로 구성추가 페이지 요청 시, 전체 페이지를 다시 로드하는 대신 피룡한 데이터만 서버에서 받아와서 해당 부분만 업데이트React, Vue, Angular 등의 SPA(Single Page Application) 프레임워크가 사용하는 기본 렌더링 방식⸻작동 흐름브라우저 → HTML 요청 → 서버는 기본 HTML + JS 응답↓브라우저는 JS 실행 → API로 데이터 요청 → 받은 데이터를 화면에 렌더링예를 들어 React에서 다음과 같..

React란?React는 Facebook에서 만든 UI 라이브러리로, 사용자 인터페이스를 컴포넌트 기반으로 구축할 수 있게 도와줌!대부분의 React 프로젝트는 SPA(Single Page Application) 형태로 개발됨 SPA는 하나의 HTML 파일로 시작해서, 필요한 화면을 브라우저에서 JavaScript로 동적으로 렌더링하는 구조특징컴포넌트 기반: 화면을 작은 단위로 나눠 재사용 가능Virtual DOM: 효율적인 렌더링을 위한 가상 돔 구조CSR 방식 기본: 초기 로딩 이후 빠른 사용자 경험 제공SPA란?SPA(Single Page Application)는 말 그대로 하나의 HTML 페이지에서 모든 화면을 구성하는 웹 애플리케이션 구조특징최초에 서버에서 index.html 한 장만 내려받음이..