#Web

Figma와 Google Earth는 왜 브라우저에서도 빠를까? WebAssembly의 실체와 Rust로 WASM 모듈을 만들어 JavaScript에서 호출하는 전 과정을 파헤쳐봤다.

수천 개의 JS 파일을 하나로 합치는 마법. Tree Shaking, HMR, Code Splitting의 원리와 차세대 번들러(Vite, Turbopack)의 등장 배경.

any를 쓰면 타입스크립트를 쓰는 의미가 없습니다. 제네릭(Generics)을 통해 유연하면서도 타입 안전성(Type Safety)을 모두 챙기는 방법을 정리합니다. infer, keyof 등 고급 기법 포함.

HTTP로 접속하는 사용자를 단순히 HTTPS로 리다이렉트하는 것만으로는 부족합니다. 중간자 공격(MITM)에 취약하기 때문이죠. 브라우저에게 '이 사이트는 무조건 HTTPS로만 접속해!'라고 각인시키는 HSTS(HTTP Strict Transport Security)의 원리와 적용 방법을 정리합니다.

어느 날 내 서비스가 낯선 도메인의 iframe 안에서 돌고 있는 걸 발견했습니다. Clickjacking 공격을 막기 위해 HSTS, X-Frame-Options, CSP, Permissions-Policy 등 필수 보안 헤더 6가지를 상세히 설명하고, Nginx와 Next.js에 적용하는 방법을 공유합니다.

싱글 페이지 애플리케이션(SPA)의 SEO 문제를 해결하기 위해 등장한 SSR. 그리고 정적 생성(SSG)과 점진적 재생성(ISR)의 진화. 이제는 서버 컴포넌트(RSC) 시대.

REST의 6가지 제약조건, 리차드슨 성숙도 모델, 상태 코드 가이드, HATEOAS, 캐싱 전략, 보안 가이드(JWT, OAuth), 그리고 GraphQL 비교.

나는 그냥 재미있어 보이는 링크를 눌렀을 뿐인데, 내 이름으로 송금이 되었습니다. 로그인된 상태를 악용하는 교묘한 공격, CSRF를 이해하기까지의 여정.

로딩이 3초 넘으면 사용자의 53%가 이탈합니다. 구글이 중요하게 보는 3가지 지표(LCP, INP, CLS)와 최적화 기법.

시각 장애인, 마우스가 고장 난 사용자, 그리고 미래의 나를 위한 배려. `alt` 태그 하나가 만드는 큰 차이.

클래스 이름 짓기 지치셨나요? HTML 안에 CSS를 직접 쓰는 기괴한 방식이 왜 전 세계 프론트엔드 표준이 되었는지 파헤쳐봤습니다.

최신 문법(ES6+)을 구형 브라우저(IE)가 알아듣게 번역해주는 통역사. 컴파일러와는 묘하게 다른 트랜스파일러의 세계.

React의 영원한 숙제, 상태 관리. 할아버지 컴포넌트에서 손자 컴포넌트로 데이터를 줄 때 왜 전역 상태(Redux, Zustand)를 써야 할까?

서버 사이드 렌더링(SSR)의 핵심 과정. 메말라 비틀어진 HTML(정적)에 수분(JS)을 공급해서 생동감 넘치는 앱(인터랙션)으로 만드는 마법.

서버에서 완성된 요리를 주기(SSR) vs 재료만 주고 브라우저가 요리하기(CSR). SEO와 초기 로딩 속도의 트레이드오프. Next.js가 둘을 합친 이유.

웹이 앱처럼 부드러워진 비결(SPA)과 옛날 방식(MPA)의 장단점. 그리고 이 둘을 합친 넥스트(Next.js)의 등장.

진짜 집을 부수고 다시 짓는 건 비쌉니다. 설계도(가상돔)에서 미리 그려보고 바뀐 부분만 공사하는 '똑똑한 리모델링'의 기술.

버튼을 눌렀는데 부모 DIV까지 클릭되는 현상. 이벤트는 물방울처럼 위로 올라갑니다(Bubbling). 반대로 내려오는 캡처링(Capturing)도 있죠.

HTML은 그저 글자일 뿐입니다. 브라우저가 이걸 이해하고 조작하려면 '트리 구조의 객체(DOM)'로 바꿔야 합니다.

백엔드: 'API 다 만들었어요.' 프론트엔드: '어떻게 써요?' 이 지겨운 대화를 끝내주는 Swagger(OpenAPI)의 마법.

텍스트에서 바이너리로(HTTP/2), TCP에서 UDP로(HTTP/3). 한 줄로서기 대신 병렬처리 가능해진 웹의 진화. 구글이 주도한 QUIC 프로토콜 이야기.

매번 3-Way Handshake 하느라 지쳤나요? 한 번 맺은 인연(TCP 연결)을 소중히 유지하는 법. HTTP 최적화의 기본.

빨간색 에러 메시지를 보고 당황하셨나요? 브라우저가 당신을 괴롭히는 게 아니라 보호하고 있는 겁니다.

함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하는 현상. React Hooks의 원리이자 정보 은닉의 핵심 키.

미국 본사 서버에서 영상을 쏘면 버퍼링 때문에 망합니다. Akamai가 만든 '인터넷 배달 지점' 혁명부터, 일관된 해싱(Consistent Hashing), Edge Computing까지 심층 분석합니다.

React나 Vue 프로젝트를 빌드해서 배포했는데, 홈 화면은 잘 나오지만 새로고침만 하면 'Page Not Found'가 뜨나요? CSR의 원리와 서버 설정(Nginx, Apache, S3)을 통해 이를 해결하는 완벽 가이드.

HTTP는 무전기(오버) 방식이지만, 웹소켓은 전화기(여보세요)입니다. 채팅과 주식 차트가 실시간으로 움직이는 기술적 비밀.

페이스북은 왜 REST API를 버렸을까? 원하는 데이터만 쏙쏙 골라 담는 GraphQL의 매력과 치명적인 단점 (캐싱, N+1 문제) 분석.

프론트엔드 개발자가 알아야 할 4가지 저장소의 차이점과 보안 이슈(XSS, CSRF), 그리고 언제 무엇을 써야 하는지에 대한 명확한 기준.

서버가 보내는 신호등. 200번대는 성공, 400번대는 네 탓, 500번대는 내 탓.

HTTP는 엽서라서 우체부가 내용을 훔쳐볼 수 있습니다. HTTPS는 봉투에 밀봉해서 보내는 기술입니다.

Request하면 Response가 옵니다. 하지만 기억상실증(Stateless)이 있어서 1초 전에 누구였는지 기억 못 합니다. 그래서 쿠키라는 메모지를 만들었습니다.

HTTP는 기억상실증 환자입니다. 서버가 클라이언트를 기억하게 만드는 두 가지 방법론의 차이와 현대의 JWT 인증 방식 비교.

www.naver.com을 치면 일어나는 일. Recursive Query부터 Root 서버의 역할, DNS 레코드 타입(A, CNAME, MX), TTL, 그리고 DNS 캐시 포이즈닝 공격까지 심층 분석합니다.

HTML 파싱부터 DOM, CSSOM 생성, 렌더 트리, 레이아웃(Reflow), 페인트(Repaint), 그리고 합성(Composite)까지. 브라우저가 화면을 그리는 6단계 과정과 치명적인 렌더링 성능 최적화(CRP) 가이드.