CS

웹 서비스에서 상태 관리웹 서비스를 개발하거나 기획하다 보면 반드시 마주하게 되는 개념이 있다.바로 “상태(State)”이다.우리는 일상적으로 로그인 상태를 유지하고, 장바구니를 이어서 사용하며, 결제까지 자연스럽게 이어지는 경험을 당연하게 생각한다. 하지만 이 모든 기능은 사실 웹의 기본 구조와는 반대되는 방향 위에서 구현되고 있다.그 출발점은 HTTP의 특징인 “Stateless”에 있다.웹은 왜 Stateless인가HTTP는 기본적으로 무상태 프로토콜이다.즉, 서버는 각 요청을 독립적으로 처리하며 이전 요청의 정보를 기억하지 않는다.사용자가 로그인 요청을 보냈다고 해서, 이후의 상품 조회 요청이나 결제 요청에서 그 사용자를 자동으로 인식하지 않는다. 서버 입장에서는 모든 요청이 “처음 보는 요청”일..

웹 서비스를 운영하다 보면 반드시 등장하는 개념이 있다. CDN(Content Delivery Network) 처음 접하면 흔히 이렇게 생각한다.이미지 저장 서버인가?URL만 바꾸면 CDN인가?라이브에 올린 이미지가 CDN인가?결론부터 말하면 모두 정확하지 않은 이해다이 글에서는 CDN을 개념 → 구조 → 동작 원리 → 실무 구조 → 오해 정리 순서로 정리한다. Chapter 1. CDN이란 무엇인가CDN은 사용자에게 콘텐츠를 빠르게 전달하기 위해 분산된 서버 네트워크다한 줄로 정리하면 가까운 서버에서 대신 전달한다 왜 필요한가[한국 사용자] → [미국 서버] → 응답거리 멀다응답 느리다UX 나빠진다 CDN 적용 구조[한국 사용자] ↓[한국 CDN 서버] ↓ (필요 시)[미국 Origin 서버]가..

CDC(Change Data Capture)는 데이터베이스에서 발생하는 변경 사항을 실시간 또는 준실시간으로 감지하고,그 변경 내용을 다른 시스템으로 전달하는 기술이다. 주로 데이터 동기화, 이벤트 기반 아키텍처, 실시간 분석 파이프라인에서 핵심적인 역할을 한다. 기존의 데이터 연동 방식이 주기적인 배치 작업에 의존했다면,CDC는 “변경이 발생한 순간”을 기준으로 데이터를 처리한다는 점에서 근본적인 차이가 있다. CDC가 필요한 이유현대 서비스 환경에서는 하나의 데이터베이스만으로 모든 요구사항을 처리하기 어렵다.운영 DB는 트랜잭션 처리에 최적화되어 있고, 분석 시스템이나 검색 시스템은 읽기 성능이나 대규모 집계에 특화되어 있다. 이때 운영 DB의 데이터를 다른 시스템으로 복제해야 하는데, 단순한 전체..

한 문장 정의데이터 바인딩은 화면(UI)과 데이터(Model)를 연결하여,데이터가 변경되면 화면이 자동으로 갱신되도록 만드는 구조다.“기획자가 정의한 데이터 상태가 화면에 어떻게 반영되는가”왜 데이터 바인딩을 알아야 하는가기획에서 흔히 이런 말을 한다.“이 값 바뀌면 화면도 같이 바뀌어야 해요”“상태에 따라 버튼이 활성화돼야 해요”“서버 값 오면 자동으로 반영되나요?”이 질문들의 정체가 전부 데이터 바인딩이다.데이터 바인딩을 모르면화면이 왜 안 바뀌는지 모름개발 난이도 판단 불가UX 상태 설계를 감으로 하게 됨데이터 바인딩의 핵심 구성 요소1. Model (데이터)서버에서 내려온 값사용자가 입력한 값계산된 상태 값예:로그인 여부 (isLoggedIn)장바구니 수량 (cartCount)결제 가능 여부 (c..

1) 한 문장 요약브라우저는 보안을 위해 “다른 출처(origin)”에서 온 요청을 제한한다. CORS는 서버가 응답 헤더로 어떤 출처에서의 요청을 허용할지(또는 거부할지) 선언하는 표준 메커니즘이다.2) 용어 정리Origin(출처) = scheme://host:port (예: https://www.example.com, http://localhost:3000)Same-Origin Policy = 브라우저 기본 보안 정책. 동일 출처끼리만 자원 공유 허용CORS = 서버가 응답 헤더로 허용 출처/메서드/헤더 등을 명시해 브라우저가 예외를 허용하게 하는 규칙Preflight(사전요청) = 브라우저가 실제 요청 전에 OPTIONS 요청으로 서버가 허용하는지 확인하는 단계Credentialed request ..

1. 개념 정의API Gateway(에이피아이 게이트웨이)는 클라이언트(웹, 앱 등)와 서버 간의 통신을 단일 진입점(Single Entry Point)으로 통합해 관리하는 중앙 관리 계층이다.쉽게 말해, 사용자의 모든 요청이 게이트웨이를 거쳐 해당 기능을 담당하는 백엔드 서비스(마이크로서비스, 데이터 서버, 인증 서버 등)로 전달되는 구조다.이는 클라이언트가 여러 서버에 직접 요청하지 않아도 되도록 하여 네트워크 구조를 단순화하고 보안, 인증, 트래픽 제어를 중앙에서 일괄 관리할 수 있게 해준다.2. 등장 배경과거에는 하나의 거대한 서버가 모든 기능을 처리하는 모놀리식(Monolithic) 아키텍처가 일반적이었다.그러나 서비스 규모가 커지고 기능이 다양해지면서, 이를 여러 개의 독립된 마이크로서비스(M..

웹 애플리케이션의 성능과 사용자 경험을 결정하는 핵심 요소 중 하나는 렌더링 방식이다. 주요 렌더링 방식인 클라이언트-사이드 렌더링(CSR)과 서버-사이드 렌더링(SSR)에 대해 깊이 있게 분석하고, 각각의 장단점 및 실무에서의 적용 사례를 제시하여 최적의 기술 선택을 위한 기획 의도를 명확히 한다.클라이언트-사이드 렌더링 (CSR: Client-Side Rendering)CSR은 웹 애플리케이션의 렌더링 로직을 클라이언트, 즉 사용자의 웹 브라우저에서 전적으로 처리하는 방식이다. 동작 원리클라이언트가 서버에 최초 요청을 보낸다.서버는 최소한의 HTML 파일과 함께 JavaScript(JS) 파일을 브라우저로 전송한다.이 초기 HTML은 실제 콘텐츠를 포함하지 않고, JS 파일을 로드하는 스크립트 태그 ..

1. 세션(Session)의 기본 개념세션(Session)은 웹 또는 모바일 서비스에서“사용자가 접속해 있는 동안의 상태 정보(연속된 상호작용)”를 관리하는 단위이다.HTTP는 비연결성(Stateless) 프로토콜이기 때문에,서버는 사용자가 이전에 어떤 페이지를 봤는지, 로그인했는지, 장바구니에 무엇을 담았는지 기억하지 못한다.따라서 서버는 사용자가 방문할 때마다 ‘세션 ID(Session ID)’라는 고유 식별자를 발급해 그 사용자의 일련의 행동을 하나의 흐름으로 인식한다.세션은 브라우저나 앱이 종료되면 사라지는 임시 상태 정보로,일반적으로 쿠키(Cookie) 또는 토큰(Token) 형태로 클라이언트 단에 저장된다.2. 세션의 기술적 동작 흐름사용자가 웹사이트 또는 앱에 접속서버가 새로운 세션 ID를 ..

1. 정의(핵심 개념)익스터널 링크(External Link)는 사용자가 현재 보고 있는 앱 또는 도메인의 내부 페이지가 아니라 다른 도메인/외부 자원(웹 페이지, 외부 서비스, 외부 앱 등) 으로 이동하도록 하는 하이퍼링크를 말한다.모바일 컨텍스트에서는 이 이동이 앱 내부 웹뷰(WebView 등) 에서 열릴 것인지, 또는 디바이스의 기본 브라우저(Chrome/Safari) 로 이관될 것인지에 따라 UX와 보안/추적 요구사항이 크게 달라진다.예: 앱의 이벤트 배너 → 외부 이벤트 페이지, 앱 내 ‘문의하기’ → 외부 헬프센터 도메인, 앱의 상품 클릭 → 제휴사 결제 페이지 등2. 익스터널 링크의 종류(모바일 관점)외부 HTTP/HTTPS 링크: 다른 도메인(www.example.com)으로의 일반 페이지..

Protobuf를 이해하는 핵심: 데이터의 구조와 흐름Protobuf는 데이터를 정의(Definition), 직렬화(Serialization), 그리고 역직렬화(Deserialization)하여 시스템 간에 주고받는 프로세스를 단순화하고 최적화하는 도구입니다. 이를 통해 효율적이고 구조화된 데이터 전송을 가능하게 한다.  1. 데이터 정의 (Definition)데이터 스키마를 정의하는 것이 Protobuf의 첫 번째 단계이다. 이 과정은 시스템이 데이터를 어떻게 구조화할지 명확히 규정한다..proto 파일을 작성하여 데이터의 필드(속성)와 타입을 정의한다.정의된 데이터는 시스템 간 통신에서 사용될 공통 언어 역할을 한다.예:syntax = "proto3";message User { int32 id = ..