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년 당시의 인터넷은 서로 다른 컴퓨터들이 정보를 공유하는 데 어려움이 있었고, 문서와 데이터를 서로 연결하고 교환하는 방법이 명확하게 정의되지..

모두가 아시다시피 컴퓨터는 이진수를 사용합니다. 그리고 하나의 데이터를 저장하는 공간은 한정되어 있습니다. 이로 인해 작은 숫자를 표현할 때는 오차가 발생하게 됩니다. 이 오차가 바로 개발자 면접의 단골질문인 0.1 + 0.2 == 0.3의 결과가 false가 되는 원인이 되는 오차입니다.이진법으로 소수점 이하의 숫자 표현하기이진법에서 소수점 이하의 숫자를 표현하는 방법은 십진법과 같습니다. 십진법에서 소수점 오른쪽 자리가 10의 음의 거듭제곱을 나타내듯이 소수점 오른쪽에 있는 자리는 2의 음의 거듭제곱으로 표현됩니다. 예를 들어, 0.1(이진수)는 1/2를 의미하며, 0.01(이진수)은 1/4, 0.11(이진수)은 1/2 + 1/4로 3/4을 나타냅니다. 진법의 문제로 일부 십진법 숫자들은 이진법으로 ..

인터넷은 우리의 일상에서 필수적인 도구가 되었으며, 이를 통해 우리는 다양한 정보와 서비스를 이용합니다. 그러나 인터넷을 통해 주고받는 정보가 안전하지 않다면, 우리의 개인정보와 중요한 데이터가 쉽게 노출될 수 있습니다. 때문에 오늘날에는 거의 모든 인터넷 연결은 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과 충돌하지 않으면서도 더 나은 방법으로 사용하기 위해 만들어졌습니다. 더 나은 방법이란 서버와 클라이언트의 독립적인 진화를 의미..

TCP/IP TCP/IP(Transmission Control Protocol/Internet Protocol) 흔히 TCP/IP라고 알려진 인터넷 프로토콜 스위트 (Internet Protocol Suite)는 인터넷과 이와 유사한 컴퓨터 네트워크 사이에서 정보를 주고받는 데 이용되는 통신 프로토콜의 모음입니다. 프로토콜? 프로토콜은 시스템과 애플리케이션 프로그램에서 정보를 교환할 수 있도록 하는 메시지 형식 및 프로시저에 대한 규칙 세트입니다. 우리가 이용하는 앱과 기기는 정보를 전송하고 수신하기 위해 이러한 규칙을 따라야 합니다. 인터넷 서비스 대부분이 TCP/IP를 기반으로 만들졌습니다. 데이터 전송의 과정에서 TCP와 IP 각각 담당하는 작업이 있지만, HTTP, FTP, SMTP 등 TCP를 ..

OSI모델? OSI 모델이 뭐길래 네트워크 파트에서 가장 먼저 소개할까요? OSI(Open Systems Interconnection, 개방형 시스템 상호 연결)란 국제표준화기구(ISO)에서 개발한 모델로, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나눠서 설명하는 모델입니다. OSI 모델은 네트워크 통신의 복잡한 프로세스를 간단한 계층으로 분리하여 네트워크가 작동하는 방식을 설명합니다. 이런 계층적 접근 방식은 작업과 책임을 별개의 계층으로 나누어 네트워크 통신의 복잡성을 단순화하고, 초보자가 데이터 전송과 관련된 다양한 기능을 더 쉽게 파악할 수 있도록 해줍니다. 결과적으로 OSI 모델은 (실제 프로토콜은 종종 레이어 간의 경계를 모호하게 만들기 때문에)항상 실제 네트워크를 완벽하게 표현하는 ..

데이터나 값을 미리 복사해 놓는 임시 장소 캐시 컴퓨터 구조에서 캐시는 중앙 처리 장치(CPU)와 주기억장치(메인 메모리) 사이에 위치한 고속의 임시 데이터 저장소를 의미한다. 원래 데이터에 접근하는 시간이 오래 걸리는 경우나 자주 사용하기에 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간없이 더 빠른 속도로 데이터에 접근할 수 있다. 필요성 컴퓨터는 프로그램을 실행하거나 데이터에 접근할 때, 데이터가 임시 저장되어 있는 메인 메모리(RAM)에서 정보를 가져온다. 그러나 RAM에서 데이터에 접근하는 속도는 CPU의 처리 속도에 비해 현저히 느리다. 이러한 속도 차이 때문에 CPU는 작동하지 않고 RAM에서 데이터를 가져다 줄 때까지 기다리..

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

ERD란? 데이터베이스에 저장된 객체를 개체(entity)와 관계(relationship)을 중심으로 작성한 다이어그램 엔터티가 상호 작용하는 방식을 보여주는 개념적 데이터 모델 또는 스키마 직사각형, 다이아몬드, 타원형 및 이들을 연결하는 선등 미리 약속된 기호들을 사용하여 각 엔터티의 속성과 관계를 나타낸다. 쉽게 표현하자면, 데이터베이스의 구조를 시각적으로 표현하는 도구이다. 이러한 모델 구조를 기반으로 API를 작성하면, 각 개체(DB의 테이블) 간의 관계를 효과적으로 표현하여 데이터베이스 설계를 돕는 역할을 한다. 개체(Entity, 엔터티) 엔터티는 특정 사람, 자동차, 집, 직원 등 물리적 존재를 갖는 객체, 혹은 회사, 직업, 대학 과정 등 개념적 존재를 갖는 객체를 뜻한다. 사진, 그래픽..

동기와 비동기동기한 작업이 다른 작업에 종속되어 순차적으로 실행되는 개념프로그램이 실행 될 때, 한 작업이 완료되고 나서야 다음 작업이 실행된다면 동기적인 것이다.작업(코드)의 순서가 곧 실행 순서이다.동기는 실행 순서가 보장되어 있다.비동기한 작업의 완료를 기다리지 않고, 다른 작업을 동시에 실행하도록 하는 프로그래밍 개념비동기적인 코드는 작업이 완료될 때까지 대기하지 않고, 다른 작업을 계속해서 진행한다.처리에 오랜 시간이 걸리는 작업(네트워크 통신, 파일 입출력, 웹 요청 등)이 존재할 시, 다른 작업을 실행함으로 효율적인 작업처리에 도움을 준다.작업(코드)의 순서와 실행의 순서가 다를 수 있다.동기는 실행 순서가 보장되어 있지 않다.실행 순서가 보장되어 있다?프로그래밍에서의 실행은 작업의 시작, ..

어떤 프로그래밍 언어를 배우던 간에 표현식이라는 단어를 접해본 적이 있을 것이다.그다지 중요하지 않게 보고 넘어갈 수도 있겠지만, 표현식은 프로그래밍의 가장 기본적인 조각이다.표현식(expression)이란?일단 단어 자체의 뜻부터 파헤쳐 보자.표현이란, "눈앞에 나타나 보이는 사물의 이러저러한 모양과 상태"를 뜻한다.이 뜻을 참고하면 표현식은 모양과 상태를 나타내는 식이라고 볼 수 있다.그렇다면 식은 무엇인가? 사실 프로그래밍에서는 표현과 식은 비슷한 의미를 가진다.'식'을 광의적으로 해석한다면 '표현'이며,기본적인 구문 요소와 연산(operation)을 조합시킨 문법 단위를 가리킨다. MDN에서는 표현식을 어떤 값으로 이행하는 임의의 유효한 코드 단위로 정의하고 있다.결국 표현식이란 특정한 값을 ..