Curt Poem about Computer

웹브라우저를 켤 때마다 마주하는 ‘맞춤형’ 광고는 단순한 운이 아닙니다. 과거에는 써드파티 쿠키(Third Party Cookie, 혹은 크로스 사이트 쿠키cross-site cookies)가 사용자의 웹 활동을 다양한 사이트에 걸쳐 추적해 왔으나, 이는 심각한 개인정보 침해 우려를 초래했습니다. 이에 유럽의 GDPR과 미국의 CCPA 같은 법률이 제정되었고, Apple Safari는 Intelligent Tracking Prevention을 도입해 서드파티 쿠키를 기본 차단하기 시작했습니다. Mozilla Firefox 역시 Enhanced Tracking Protection을 통해 서드파티 쿠키 차단을 기본 정책으로 채택하였고, Chrome은 2025년까지 단계적 완전 폐기를 계획 중입니다.써드 파티..

지난 글에서는 HTTP를 중심으로 웹 통신의 기본 개념과 동작 원리를 다루었습니다. 이번 글에서는 실시간 데이터 전송이 중요한 현대 웹 애플리케이션에서 자주 사용되는 두 가지 기술, WebSocket과 SSE (Server-Sent Events)에 대해 자세하게 알아보도록 하겠습니다.HTTP는 기본적으로 클라이언트가 요청할 때마다 서버가 응답하는 요청/응답 모델입니다. 그런데 채팅, 실시간 알림, 주식 가격 업데이트 등에서는 서버가 발생하는 이벤트를 즉각적으로 클라이언트에 전달할 필요가 있습니다. 이런 서비스에선 양방향 통신 또는 서버 푸시 방식을 통해 실시간으로 통신하는 방법이 필요합니다.WebSocketWebSocket은 기존 HTTP 연결을 업그레이드하여 하나의 전송 통로로 동시에 양쪽 방향으로 통..

프론트 엔드 개발자라면 누구나 자바스크립트를 알고 있습니다. 그리고 HTML과 CSS도 알고 있죠. 하지만 자바스크립트, HTML, CSS가 작동하는 브라우저의 엔진들에 대해서는 모호한 이해를 가지고 있는 경우가 있는 것같습니다. 저도 그랬고요. 그래서 브라우저 내부에 자바스크립트의 해석과 실행, HTML과 CSS의 해석과 이를 기반을 화면을 그리는 렌더링에 대해 알아보기로 했습니다. 물론 실제 코드 분석이나 깊이 있는 내용에 대한 이야기는 브라우저마다 다르기도 하고 저도 잘 이해하지는 못했기에 더 좋은 글들을 찾아보면 좋습니다. 이 글에서는 대략적인 내용들만 다루겠습니다.브라우저는 멀티 프로세서우리가 일상적으로 사용하는 브라우저는 멀티 프로세서입니다. 브라우저 상단의 탭, 주소 표시줄, 뒤로가기 등이 ..

웹 개발자라면 누구나 아는 프로토콜이 있습니다. 세상에서 가장 널리 쓰이고 가장 익숙한 프로토콜 중 하나인 HTTP 프로토콜입니다. HTTP는 TCP 혹은 QUIC(HTTP3) 위에서 동작하는 애플리케이션 레벨의 웹 프로토콜입니다. 프로토콜은 서로 다른 시스템이 정보를 교환할 때 사용하는 규칙과 절차입니다. 이 규칙들은 어떻게 데이터를 전송할지, 어떤 형식으로 데이터를 주고받을지, 통신의 신뢰성을 어떻게 보장할지 등을 정의하여 시스템 간의 원활한 통신을 가능하게 만듭니다. 그렇다면 HTTP는 어떤 규칙과 절차를 가지고 있을까요?HTTP/0.9, 초기 HTTP1989년 당시의 인터넷은 서로 다른 컴퓨터들이 정보를 공유하는 데 어려움이 있었고, 문서와 데이터를 서로 연결하고 교환하는 방법이 명확하게 정의되지..

인터넷은 우리의 일상에서 필수적인 도구가 되었으며, 이를 통해 우리는 다양한 정보와 서비스를 이용합니다. 그러나 인터넷을 통해 주고받는 정보가 안전하지 않다면, 우리의 개인정보와 중요한 데이터가 쉽게 노출될 수 있습니다. 때문에 오늘날에는 거의 모든 인터넷 연결은 HTTPS로 이루어집니다. HTTPS는 HTTP의 보안(Sercure) 버전으로 신뢰할 수 있고 안전한 연결을 보장하는 방법입니다. 그런데 HTTPS는 어떻게 안전한 연결을 보장할 수 있을까요?HTTP(HyperText Transfer Protocol)HTTP는 웹 브라우저와 웹 서버 간의 데이터 전송을 위한 프로토콜입니다. 웹 브라우저와 웹 서버 간의 통신을 담당하며, 인터넷상의 다양한 리소스(웹 페이지, 이미지, 동영상 등)를 전송하는 데 ..

프론트 엔드 분야는 React나 Vue를 이용한 SPA가 가장 유명합니다. 그러나 프론트 엔드 분야를 처음 접하면 CSR(Client Side Rendering)과 SSR(Server Side Rendering)이라는 용어도 함께 접해 본적이 있을 것입니다. 각각의 방식은 최초의 DOM tree가 어디서 생성되느냐에 따라 구분 지은 것입니다. Client Side Rendering(CSR) CSR은 서버에서 JS파일을 가져와 브라우저(Client)가 화면을 그리는(Render)방식을 뜻합니다. CSR은 초기 로드 시 클라이언트는 빈 HTML 페이지를 받고, JavaScript를 사용하여 필요한 DOM element를 구성하여 화면에 렌더링합니다. 이로 인해 초기 로딩 속도가 느릴 수 있지만, 한 번 로딩..

REST는 자원(Resource), 행위(Verb), 표현(Representaions)로 나뉩니다. 이전에 자원은 URI에서 식별이 가능하여야 하고 표현은 응답(Respone)의 본문(body)에서 확인할 수 있다고 하였습니다. 그리고 리소스와 분리가 되는 행위가 있다고 했죠. 그렇다면 행위는 무엇이고 어디서 찾을 수 있을까요? 행위는 요청(request)에서 찾을 수 있습니다. URI에 주어진 리소스에 대하여 어떤 행동을 할지 정의하는 역할을 합니다. 현재 가장 널리 사용되는 HTTP의 주요 메서드는 다섯 가지가 있습니다. GET, POST, PUT, PATCH, DELETE입니다. 그 외에도 HEAD, OPTIONS, CONNECT, TRACE 메서드가 존재합니다. GET 서버에서 리소스를 조회할 것..

클라이언트와 서버가 통신을 할 때 요청이 성공적으로 완료되었는지, 오류가 있어 요청이 실패하였는지 알 수 있어야합니다. 위의 사진처럼 모든 응답에 대해 같은 HTTP 상태 코드를 반환하면 어떤 상황인지 알아보기 힘들어집니다. 그래서 서버는 클라이언트에 응답을 보낼 때 각각의 상황에 맞는 상태코드를 포함하여 응답합니다. HTTP 응답으로 주어지는 상태 코드를 통해 요청이 성공적으로 수행되었는지, 실패했다면 이유가 무엇인지에 대한 정보를 대략적으로 알 수 있습니다. HTTP의 응답은 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고 서버 에러의 5개 그룹으로 나누어집니다.상태코드는 세 자리의 숫자로 나타내며, 첫 번째 숫자는 그룹을, 나머지 숫자는 상세한 코드를 나타냅니다.정보 응답 혹은 조건부 ..

인터넷은 정보들을 하이퍼텍스트로 연결하여 정보를 공유합니다. 각 정보는 HTML의 형식으로 표현되며, URI(Uniform Resource Identifier)를 통해 정보를 식별합니다. 우리는 정보의 식별자인 URI에 프로토콜을 조합하여, 정보의 위치를 나타내는 URL(Uniform Resource Locator)을 이용하여 원하는 정보에 접근할 수 있습니다. 웹서비스에서의 프로토콜은 대부분 HTTP(HyperText Transfer Protocol)를 사용하죠. 참고로 HTTPS는 HTTP에 암호화를 더해 보안이 강화된 버전입니다. REST란 기존의 HTTP를 기존의 WEB과 충돌하지 않으면서도 더 나은 방법으로 사용하기 위해 만들어졌습니다. 더 나은 방법이란 서버와 클라이언트의 독립적인 진화를 의미..

들어가기 전에... 해당 포스팅에서 클라이언트와 (크롬과 같은)웹 브라우저는 같은 의미로 사용한다. 쿠키 웹 브라우저는 작은 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송하는 데, 그 작은 데이터 조각들을 쿠키라고 한다. 쿠키는 서로 다른 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다. 쿠키의 동작 방식 클라이언트가 웹 페이지를 요청하면 웹 서버는 쿠키를 생성하여 응답 헤더에 이를 포함하여 클라이언트측에 전송 클라이언트는 전송받은 쿠키를 KEY-VALUE의 데이터 형식으로 저장 클라이언트는 쿠키를 저장했던 서버와 동일한 서버로 다시 요청을 보낼 때, 저장되어 있는 쿠키를 함께 전송 쿠키의 목적 상태가 없는(stateless) HTTP ..