그린티_

서론Next.js 13 이후로 서버 컴포넌트가 도입되면서 기존의 전역 상태 관리 패턴이 그대로 통하지 않게 됐습니다.클라이언트 전용 상태 관리 라이브러리(Zustand, Jotai 등)를 서버 컴포넌트와 어떻게 조합해야 할까라는 생각에 찾아봤습니다.프로젝트를 진행하던 중 이런 상황이 마침 발생해서 직접 적용해봤습니다.우선 페이지를 이동할 때마다 큰 변화가 없는 데이터에 대한 API 호출은 비효율적이라고 생각했고 한번 불러서 저장해서 사용해보도록 했습니다.그 중 가장 간단하고 쉽게 할 수 있는 Zustand를 활용하게 됐습니다.서버 컴포넌트 vs 클라이언트 컴포넌트의 역할구분서버 컴포넌트클라이언트 컴포넌트실행 위치서버브라우저데이터 요청가능 (fetch 직접 사용)불가능 (보통 React Query 사용)상..

SPA (Single Page Application)단일 HTML 파일에서 동작하는 웹 애플리케이션페이지 전환 시 브라우저가 전체 페이지를 다시 요청하지 않고 자바스크립트가 라우팅을 처리하고 필요한 데이터만 받아와서 화면을 갱신history.pushState 등으로 브라우저 주소만 바꾸고 JS를 통해 DOM을 조작하여 뷰를 갱신전체 새로고침 없음대표 프레임워크: React, Vue, Angular예: example.com/dashboard → 전체 페이지 새로고침 없이 JS로 화면만 변경⸻MPA (Multi Page Application)페이지마다 별도의 HTML 파일을 서버에서 받아오는 전통적인 웹 방식URL이 바뀔 때마다 서버에 새 요청을 보내고 전체 HTML 페이지를 새로 로드대표 프레임워크: Sp..

ISR이란?SSG의 장점(빠른 속도, 정적 파일)은 유지하면서도 변경된 데이터만 백그라운드에서 새로 갱신할 수 있는 렌더링 방식Next.js가 제공하는 고유한 하이브리드 렌더링 전략정적으로 생성된 HTML을 일정 주기마다 서버에서 재생성사용자는 항상 빠른 정적 페이지를 보지만 서버는 필요 시 최신 데이터로 자동 업데이트함⸻작동 흐름사용자가 페이지 요청 → 기존에 캐시된 정적 HTML 제공서버는 백그라운드에서 새 데이터 기반으로 페이지를 다시 생성새 HTML이 완성되면 다음 사용자부터는 최신 버전으로 제공단, 이미 해당 페이지를 보고 있는 사용자는 갱신된 HTML을 받지 않음같은 URL로 다시 접속하거나 새로고침해야 최신 콘텐츠를 볼 수 있음즉, 사용자는 항상 빠른 응답을 받고 데이터는 자동으로 갱신되는 ..

SSG란? (정적 사이트 생성)페이지를 빌드 시점(build time)에 HTML 파일로 미리 생성해두고 요청 시에는 서버가 아닌 CDN이나 정적 호스팅을 통해 즉시 제공하는 방식사용자가 웹 사이트 접속 시 브라우저는 완성된 HTML을 그대로 제공추가 페이지 요청 시 미리 생성해 둔 해당 페이지의 HTML을 내보냄데이터가 자주 바뀌지 않는 페이지에 매우 적합Next.js, Gatsby, Hugo 등에서 사용 가능CDN분산된 서버 네트워크사용자에게 더 빠르게 콘텐츠 제공ex) 한국 사용자가 미국에 있는 서버에서 사이트를 열면 거리만큼 느려짐그래서 CDN은 한국, 일본, 싱가포르 등 아시아 지역에도 서버가 있어서 가장 가까운 서버에서 콘텐츠를 전달함정적 호스팅정적 호스팅은 정적인 파일(HTML, CSS, J..

SSR이란?사용자의 요청이 들어올 때마다 서버에서 HTML을 실시간으로 생성해서 브라우저에 전달하는 렌더링 방식브라우저가 요청하면 서버는 미리 데이터를 가져와 완성된 HTML을 생성해 응답브라우저는 HTML을 바로 렌더링 → 초기 화면 표시 속도가 빠름이후 자바스크립트를 로드해 클라이언트에서도 동작 가능하게 함 (hydration)hydration? - 서버에서 생성된 정적인 HTML에 자바스크립트 기능을 연결(활성화)하는 과정빠르게 HTML을 보여주긴 하지만 브라우저에서 Hydration이 완료되어야 실제로 클릭, 입력 등의 인터랙션이 가능해짐⸻작동 흐름브라우저 → HTML 요청 → 서버가 데이터 fetch 후 HTML 생성 → 브라우저에 응답↓브라우저는 완성된 HTML 렌더링 → JS 파일 실행 → ..

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

🌐 RESTful API 개념REST란?REST(Representational State Transfer)는HTTP 프로토콜 기반에서 자원을 URI로 표현하고, 표현(Representation)을 통해 상태를 주고받는 아키텍처 스타일2000년 로이 필딩(Roy Fielding)이 논문에서 제안클라이언트-서버 구조에서 리소스를 일관되고 예측 가능한 방식으로 조작하기 위한 설계 기준⸻REST의 구성 요소자원(Resource) → URI예: /users, /posts/123행위(Verb) → HTTP MethodGET : 조회POST : 생성PUT : 전체 수정PATCH : 부분 수정DELETE : 삭제표현(Representation) → JSON, XML 등클라이언트와 서버는 데이터를 특정 포맷으로 주고받..

📡 Fetch vs Ajax개념 정리Ajax란?AJAX(Asynchronous JavaScript and XML)는 웹페이지를 새로 고침하지 않고 서버와 비동기적으로 통신할 수 있게 해주는 기술초기에는 XML을 주고받았지만, 현재는 대부분 JSON을 사용Ajax를 구현하는 대표적인 방법은 XMLHttpRequest 객체(XHR)를 사용⸻Fetch API란?Fetch API는 Promise 기반으로 비동기 HTTP 요청을 처리하는 최신 표준 API코드를 더 간결하고 직관적으로 작성할 수 있고, async/await과도 잘 어울림XMLHttpRequest의 복잡함을 대체하는 방식으로 등장했으며, 대부분의 최신 브라우저에서 기본 제공됨⸻예제 코드 비교XMLHttpRequest (XHR)const xhr = ..

🔁 이벤트 루프 (Event Loop)먼저 알아야 할 개념자바스크립트는 싱글 스레드 언어즉, 한 번에 한 가지 작업만 수행할 수 있음그런데도 동시에 여러 작업이 진행되는 것처럼 보이는 이유?→ 이벤트 루프(Event Loop) 덕분!⸻자바스크립트 런타임 구성 요소메모리 힙 (Memory Heap)객체(참조 타입)가 저장되는 공간예: 배열, 객체, 함수 등은 이곳에 저장됨구조적으로는 비정형적이고 동적으로 할당되는 큰 공간자바스크립트 엔진이 필요에 따라 동적으로 할당하고 관리함const obj = { name: '보성' }; // obj는 Heap에 저장됨⸻콜 스택 (Call Stack)자바스크립트 코드가 실행될 때, 함수 호출이 쌓이고 처리되는 공간함수 실행 → 스택에 push → 실행 완료 → popL..

DOM vs BOM📚 DOM이란?DOM(Document Object Model)웹 페이지의 HTML 문서를 객체(트리) 형태로 표현한 구조브라우저는 이 DOM을 통해 페이지 내용을 읽고, 변경하고, 추가하고, 삭제할 수 있음HTML은 원래 단순한 “문자열”이지만, 브라우저는 이걸 JS가 다룰 수 있도록 객체 트리 구조로 변환해줌트리 구조 : 요소들이 부모-자식 관계로 구성됨실시간 조작 가능 : JS로 DOM을 수정하면 즉시 화면에 반영됨이벤트 바인딩 : 특정 요소에 클릭 등 이벤트를 연결할 수 있음⸻DOM 예시 코드// 문서에서 요소를 찾고 텍스트 변경document.querySelector('h1').textContent = '👋 안녕, DOM!';// 배경색 변경document.body.styl..