#http
노트 37개
Frontend › JavaScript
AJAX와 HTTP 요청페이지를 새로고침하지 않고 서버와 비동기로 데이터를 주고받는 AJAX. fetch의 Response·본문 형식·FormData, URL·URLSearchParams, 스트림으로 읽는 다운로드 진행률과 업로드 진행률, AbortController 취소·타임아웃, 나머지 fetch 옵션(credentials·cache·keepalive 등), 업로드 재개, axios, 자주 만나는 오류, 클라이언트에서 보이는 CORS와 프록시, 브라우저 코드가 공개된다는 전제의 API 키 관리.
Frontend › React
실시간 채팅 앱의 데이터 흐름: REST와 WebSocket 역할 나누기채팅 앱은 상태 조회·변경은 REST로, 새로 생기는 이벤트 전달은 WebSocket으로 나눈다. 리소스 계층이 드러나는 URL 설계, 소켓 연결의 수명 관리, optimistic UI와 중복 방지, 긴 메시지 목록의 렌더링 최적화 포인트를 정리한다.
Frontend › React
SWR로 서버 데이터 가져오기캐시를 먼저 보여 주고 백그라운드에서 재검증하는 데이터 패칭 훅 SWR의 사용 패턴. mutate 옵션 객체와 optimisticData로 캐시를 갱신하고, SWR 캐시로 로그인 상태를 판단해 보호된 페이지를 만든다.
Frontend › Web
데이터 최소화와 프라이버시 실천개인정보는 모으지 않는 것이 가장 안전하다. 수집하지 않기 → 뭉개서 모으기(구간화·무작위 응답·차등 프라이버시) → 쓰고 지우기(Clear-Site-Data) → 왜 필요한지 설명하기 순으로 효과가 크고, 조직에서는 데이터 목록 문서화·정기 감사·목적 외 사용 차단으로 유지한다.
Frontend › Web
브라우저 실시간 통신: 롱 폴링, SSE, WebSocket 클라이언트서버가 먼저 보내는 데이터를 브라우저에서 받는 세 가지 방법의 클라이언트 쪽 구현을 정리한다. 재요청 루프로 만드는 롱 폴링, HTTP 위의 텍스트 스트림인 SSE(EventSource의 메시지 형식·자동 재연결·Last-Event-ID와 fetch로 직접 읽는 방법), 그리고 WebSocket API의 바이너리·버퍼·종료 코드·재연결까지.
Frontend › Web
서드파티 쿠키와 브라우저 추적 방지사파리 ITP와 파이어폭스 Total Cookie Protection은 서드파티 쿠키를 막거나 사이트별로 분할하고, 크롬은 단계적 폐지를 철회해 일반 창에서는 사용자 설정에 맡긴 뒤 Privacy Sandbox API 대부분을 정리했다. 브라우저를 가리지 않고 동작하려면 임베드 상태는 CHIPS(Partitioned)로, 꼭 필요한 교차 사이트 접근은 Storage Access API로 처리한다.
Frontend › Web
서드파티와 프라이버시: 감사와 Referrer·Permissions 정책광고·임베드·분석·스크립트·패키지 같은 서드파티는 IP·Referer·쿠키를 받고, 스크립트는 페이지 전체 권한을 가진다. 기술·비기술 감사로 실제 요청을 파악하고, 정적 공유 링크·퍼사드·nocookie 임베드로 줄이며, Referrer-Policy·Permissions-Policy·CSP Report-Only로 범위를 묶는다.
Frontend › Web
웹 보안: CSRF와 XSS사용자의 권한을 도용하는 CSRF와 악성 스크립트를 주입하는 XSS의 원리와 방어법. 문자열 HTML을 innerHTML에 넣을 때의 위험과 setHTML·DOMPurify·Trusted Types도 다룬다.
Frontend › Web
이미지 CDN과 Accept 헤더 협상이미지 CDN은 원본 한 장을 올려 두면 URL 매개변수로 크기·자르기·품질·형식을 바꾼 변형을 만들어 캐시한다. 브라우저의 Accept 헤더를 보고 AVIF·WebP 중 지원하는 가장 효율적인 형식을 주므로 picture·type 없이 srcset·sizes만으로 형식 대체가 된다. 같은 URL이 형식마다 다른 응답이 되므로 Vary: Accept로 캐시를 나눠야 하고, 비용이 주된 단점이다.
Frontend › Web
쿠키와 세션상태가 없는 HTTP에서 브라우저와 서버가 사용자를 기억하기 위해 쓰는 쿠키와 세션.
Frontend › Web
프라이버시를 위한 암호화: 전송·저장·종단 간사용자 데이터를 남이 읽지 못하게 하는 세 겹의 암호화. 전송 중은 HTTPS·리다이렉트·HSTS로, 저장 중은 클라우드 기본 암호화와 직접 관리 키로, 운영자조차 못 읽게 하려면 Web Crypto로 클라이언트에서 암호화하는 종단 간 암호화로 지킨다. 각 층이 막는 위협과 한계를 정리한다.
Frontend › Web
HTTPS 전환: 인증서 고르기부터 리다이렉트까지사이트를 HTTPS로 옮기는 실무 흐름. 인증서는 검증 수준(DV·OV·EV)과 도메인 범위(단일·다중·와일드카드)로 고르는데, 웹사이트에는 ACME로 자동 발급·갱신하는 DV가 표준이다. 설치 뒤 301 리다이렉트·혼합 콘텐츠 제거·HSTS·서버 설정 점검까지 해야 전환이 끝난다.
Frontend › Web
TTFB 줄이기: 리디렉션·HTML 캐시·압축·CDN페이지의 첫 요청인 HTML이 빨리 와야 FCP·LCP가 기준을 넘는다. 리디렉션 체인을 없애고, HTML은 짧게 캐시하거나 ETag로 재검증하고, Server-Timing으로 서버 시간을 재고, 텍스트 자원은 Brotli로 정적 압축하고, CDN 엣지에서 내려 준다.
Backend
클라이언트의 요청을 받아 비즈니스 로직을 처리하고 데이터를 저장·제공하는 서버 쪽 개발 지식 모음.
Backend › Web Basics
세션 기반 인증과 토큰 기반 인증로그인 상태를 서버 저장소에 두는 세션 방식과, 서명된 토큰(JWT)에 담아 클라이언트가 들고 다니는 토큰 방식의 흐름·장단점을 비교하고, 토큰 탈취 대책(짧은 만료, 슬라이딩 세션, 리프레시 토큰 회전)과 선택 기준을 정리한다.
Backend › Web Basics
웹 서버, WAS, 그리고 Nginx정적 자원을 내주는 웹 서버(Apache·Nginx)와 동적 처리를 맡는 WAS(Tomcat 등)의 역할 분담, 리버스 프록시·로드밸런싱, Nginx의 마스터-워커 구조와 겸하는 역할(웹 서버·프록시·캐시·TLS 종료), 그리고 Nginx의 location·rewrite·proxy_pass로 404를 다른 서버로 넘기는 설정.
Backend › Web Basics
웹 앱의 요청·응답 구조브라우저·프론트엔드 서버·백엔드(API) 서버·데이터베이스가 요청과 응답을 주고받는 웹 애플리케이션의 기본 흐름과, 한 컴퓨터 안에서 프로세스를 구분하는 포트의 역할.
Backend › Web Basics
웹훅과 폴링다른 서비스의 변화를 알아내는 두 방법. 폴링은 내가 주기적으로 묻고, 웹훅은 상대가 이벤트가 생길 때 내 엔드포인트를 호출한다. 동작 흐름과 장단점, 고르는 기준, 웹훅을 받는 쪽이 갖춰야 할 서명 검증·빠른 응답·멱등 처리·재시도 대비를 정리했다.
Backend › Web Basics
API 보안 체크리스트API를 공개하기 전에 점검할 보안 항목을 전송·입력·인증과 인가·노출 범위·운영 단계로 묶었다. 한 가지 방어에 기대지 말고 여러 겹을 쌓는 게 핵심이다.
Backend › Web Basics
API 아키텍처 스타일: SOAP·REST·GraphQL·gRPC·WebSocket·WebhookAPI는 시스템끼리 기능과 데이터를 주고받는 약속이다. 대표적인 여섯 가지 스타일(SOAP, REST, GraphQL, gRPC, WebSocket, Webhook)을 통신 방향·데이터 형식·잘 맞는 곳으로 비교하고, REST·GraphQL·gRPC를 계약·응답 모양·전송·스트리밍·오류 처리·캐시·브라우저 지원·버전 관리 등 축별로 나란히 놓았다. API와 SDK의 차이, 공개 범위에 따른 API 종류, API를 배울 때 거치는 주제 지도도 정리했다.
Backend › Web Basics
API 키와 HMAC 요청 서명서버끼리 호출하는 API에서 요청마다 '누가 보냈고 중간에 바뀌지 않았나'를 증명하는 HMAC 요청 서명. 앱 ID·액세스 키·시크릿 키의 역할, 서명할 문자열을 만드는 법, 타임스탬프와 논스로 재전송을 막는 법, 서버의 검증 순서, 토큰 방식과의 비교를 정리했다.
Backend › Web Basics
Base64 인코딩바이너리 데이터를 ASCII 문자 64개만으로 바꿔 텍스트용 채널로 안전하게 보내는 인코딩. 6비트씩 끊어 변환하는 원리, 패딩, 약 33% 커지는 비용, 이미지를 API에 보내는 예를 정리한다.
Backend › Web Basics
CORS다른 출처(origin)의 프론트엔드가 API를 호출할 수 있도록 서버가 허용 범위를 알려 주는 브라우저 보안 정책.
Backend › Web Basics
GraphQLGraphQL은 타입 스키마 위에서 클라이언트가 필요한 필드를 골라 질의하는 API 질의 언어이자 런타임이다. 쿼리·뮤테이션·구독, REST 대신 고를 때의 기준, N+1·캐시·악성 쿼리 같은 약점과 대책, 클라이언트 래핑·BFF·모놀리식·페더레이션 네 가지 도입 패턴, 등록된 쿼리로 운영하는 방식을 정리했다.
Backend › Web Basics
gRPC: Protocol Buffers로 정의하는 RPCgRPC는 .proto 파일로 서비스 계약을 정의하고, 생성된 스텁으로 원격 메서드를 로컬 함수처럼 부르는 HTTP/2 기반 이진 RPC 프레임워크다. Protocol Buffers의 태그·varint 직렬화와 JSON 비교, 네 가지 호출 방식, Node.js 예제, 브라우저 제약과 도입 판단 기준을 정리했다.
Backend › Web Basics
REST API 설계자원을 URI로 표현하고 HTTP 메서드로 행위를 나타내는 API 설계 방식과 그 규칙. REST의 여섯 제약과 균일한 인터페이스(자기 서술적 메시지·HATEOAS), PUT·PATCH·POST 고르기, URI 규칙과 자원 원형, 상태 코드 선택과 오류 응답(RFC 9457), 멱등 키·버전 관리 방식·비동기 요청·조건부 요청·응답 모양 같은 실무 설계 팁까지.
Computer Science
네트워크네트워크 기초(물리 전송·변조·다중화 포함)와 OSI 계층 모델부터 IP·서브넷·NAT·멀티캐스트, QoS, 가입자망과 광역망(MPLS), 무선 네트워크, TCP·UDP, HTTP·HTTPS, DNS·CDN·HTTP 캐시와 프록시, 리눅스 네트워크 네임스페이스, RFC 읽는 법, WebSocket과 WebRTC까지 네트워크 노트 모음.
Computer Science › Network
브라우저에 URL을 입력하면 일어나는 일주소창에 URL을 입력한 뒤 화면이 그려지기까지의 흐름. HSTS·서비스 워커·HTTP 캐시 확인, DNS 조회, TCP 연결, TLS 핸드셰이크, HTTP 요청·응답, 렌더링을 순서대로 잇고 각 단계의 상세 노트로 연결한다.
Computer Science › Network
프록시: 포워드 프록시와 리버스 프록시클라이언트와 서버 사이에서 요청을 대신 주고받는 프록시 서버. 누구를 대리하느냐에 따라 나뉘는 포워드 프록시와 리버스 프록시의 차이, 리버스 프록시가 맡는 일(TLS 종료·로드 밸런싱·캐시), VPN·NAT와의 관계, 원래 클라이언트 IP를 전달하는 헤더를 정리한다.
Computer Science › Network
HTTP 캐시Cache-Control, ETag·Last-Modified로 브라우저와 CDN이 응답을 재사용하는 HTTP 캐시. 신선도와 재검증, 자주 쓰는 지시어, 자산별 캐시 전략을 정리한다.
Computer Science › Network
HTTP 프로토콜웹 통신 규약 HTTP의 Stateless·Connectionless 성질, 요청·응답 메시지 형식, 아홉 가지 메서드와 안전·멱등(PUT·PATCH·POST의 차이), 상태 코드(API에서 자주 쓰는 코드와 비표준 코드), 헤더 종류, URL의 구성 요소와 URI·URL·URN의 차이, HTTP/1.1·2·3 비교와 HTTP/2가 빠른 이유.
Computer Science › Network
HTTPS와 TLSHTTP를 TLS로 감싸 도청·변조·위장을 막는 HTTPS. 대칭키·공개키를 섞어 쓰는 TLS 핸드셰이크, 첫 HTTP 요청의 빈틈을 막는 HSTS와 preload, HTTPS만으로는 부족한 경우를 정리한다.
Computer Science › Network
RFC와 요구 수준 키워드인터넷 표준 문서인 RFC가 무엇이고 어떻게 읽는지, 그리고 명세에서 MUST·SHOULD·MAY가 정확히 무엇을 뜻하는지 정한 RFC 2119·8174의 요구 수준 키워드를 정리한다.
Computer Science › Network
WebSocket한 번 맺은 연결로 서버와 브라우저가 양방향 실시간 통신을 하는 WebSocket. OS 소켓과의 차이, HTTP Upgrade 핸드셰이크와 버전, 프레임과 텍스트·바이너리, ping/pong, 압축 확장, 폴링·SSE·HTTP/2와의 비교, 보안과 인증, 로드 밸런싱·프록시·우아한 종료, 라이브러리 선택과 디버깅을 정리한다.
AI & Data
웹 크롤링 전략: 정적·동적 판별과 수집 방식 고르기크롤링은 먼저 페이지가 정적인지 동적인지 판별하고, 공식 API → 숨은 데이터 엔드포인트 직접 호출(네트워크 리버싱) → 헤드리스 브라우저 순으로 가벼운 방식을 고른다. 브라우저 자동화는 편하지만 느리고 무거우며, 엔드포인트를 찾으면 훨씬 가볍고 빨라진다. 로그인 페이지의 쿠키·세션·CSRF 토큰, 브라우저 자동화의 암묵적·명시적 대기, 멀티프로세싱·스레드·비동기로 병렬 수집하는 법도 다룬다.
Tools › Chrome DevTools
DevTools Network 패널리소스가 실제로 오가는지, 헤더·페이로드·응답·쿠키가 무엇인지, 어느 단계에서 시간이 드는지 확인하는 패널. 기록·필터·검색으로 요청을 좁히고, 캐시 끄기·스로틀링·오프라인·요청 차단으로 조건을 바꾸고, HAR·fetch·cURL로 내보내거나 다시 보낸다. HTTPS·혼합 콘텐츠·서드 파티 쿠키는 개인 정보 보호 및 보안 패널에서 본다.
Tools › Dev Environment
로컬 개발 환경에 HTTPS 적용하기localhost는 대부분 보안 컨텍스트로 취급되지만 Secure 쿠키·HTTP/2·커스텀 호스트가 필요하면 로컬 HTTPS가 필요하다. mkcert로 내 기기만 믿는 로컬 CA를 만들어 인증서를 발급하고, 웹 서버·Node·프레임워크 개발 서버에 붙인다.