Curt Poem about Computer

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

이미지 처리 작업은 생각보다 리소스를 많이 소모합니다. 특히 사용자가 가지고 있는 고해상도 이미지를 썸네일로 변환하는 과정에서는, 성능뿐만 아니라 메모리 관리까지도 신경 써야 했습니다. 이러한 문제를 해결하기 위해 웹 워커(Web Worker)를 활용한 워커풀(Worker Pool) 클래스를 직접 설계하게 되었는데요, 이 글에서는 그 과정을 정리해보았습니다.워커를 사용하자이미지를 썸네일 크기로 전환하는 것은 아주 빠른 작업이긴 하지만 많은 이미지를 처리한다면 사용자와의 상호작용이 생각보다 오랜 시간 차단될 수 있습니다. 그래서 이미지 처리를 메인쓰레드에서 하는 대신 워커에 작업을 맡겨 메인 쓰레드의 부담을 줄이고 사용자의 상호작용을 차단하지 않게 만들 수 있습니다. 그래서 당연히 Web Worker를 사..

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

같은 줄에 로그 출력 갱신하기터미널에서 npm 패키지를 설치할 때 진행률(%)이 같은 줄에서 갱신되는 것을 본 적이 있을 것입니다. 이러한 방식은 진행률 표시, 로딩 상태 출력 등 실시간 정보를 효율적으로 전달하는 데 유용합니다.하지만 자바스크립트의 console 함수들은 기본적으로 줄바꿈이 포함되어 있으며 이전 줄을 갱신하는 방법도 없습니다. 과연 어떤 방식으로 이런 출력을 구현한 것일까요? Node.js에서는 console.log 대신 process.stdout.write()를 사용하여 같은 줄에 출력을 덮어쓸 수 있습니다. 이를 위해 캐리지 리턴 문자(\r)를 활용하여 커서를 줄의 시작으로 이동한 후 새로운 내용을 출력하면 됩니다.예제 코드const total = 100;let count = 0;c..

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

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

자 지금까지 다양한 종류의 워커를 알아보았습니다. 사실 Shared Worker와 Service Worker는 단순 추가적인 쓰레드를 활용한다기 보다는 특별한 종류의 작업을 처리하는 것에 더 가까운 것같습니다. 제목인 자바스크립트와 "멀티 쓰레드"와는 조금 맞지 않은 부분이 있습니다.(제목을 자바스크립트와 워커들 같은 식으로 지었어야했나봅니다.) 하지만 오늘 다룰 워커는 멀티 쓰레드라는 제목과 가까운 워커입니다. 바로 Dedicated Worker인데요. 한국말로 번역해 보자면 전용 워커 정도가 될 것입니다. Dedicated는 "헌식적인"이라는 뜻도 있지만 "특정한 목적을 위한"이라는 뜻도 있습니다. 그리고 Dedicated Worker는 이 뜻에 훨씬 잘 들어 맞죠. 그리고 별 다른 언급없이 워커를 ..

웹 애플리케이션에서 중요하게 여겨지는 점 중 하나는 네트워크 최적화입니다. 네트워크와 관련해서 다양한 요청을 캐싱하고, 캐싱한 데이터를 적절한 타이밍에 업데이트하고, 인터넷 연결이 불안정한 상황에서도 최소한의 확실한 동작을 보장하는 것이 중요한 문제입니다. AXIOS, Tanstack Query 등 네트워크와 관련한 다양한 라이브러리가 인기있는 이유이기도 합니다. 이번에는 백그라운드에서 네트워크 요청을 다루며, 다양하게 활용할 수 있는 Service Worekr에 대해 다루어보겠습니다. Service WorekrServie Workeer는 다른 Worker들과 마찬가지로 메인 쓰레드가 아닌 별도의 쓰레드에서 관리되는 Worker입니다. 특히, 네트워크 요청 가로채기(intercept), 요청 캐싱 등을 ..

Shared Worker와 Service Worker는 이전 글에서 언급하였듯이 데이터 공유와 비동기 작업을 효율적으로 처리하기 위해 제공되는 Web Worker의 확장된 인터페이스입니다. 두 Worker모두 메인 쓰레드와 분리되어 독립된 스레드에서 실행되며, 성능 최적화를 통한 사용자의 경험 향상을 위해 사용할 수 있습니다.Shared WorkerShared Worker는 동일한 출처(origin)에서 실행되는 여러 브라우저 탭, iframe, 또는 웹 애플리케이션 간에 공유될 수 있는 Worker입니다. 만약 브라우저의 서로 다른 탭(tab)이더라도 같은 출처를 가진다면 모두가 동일한 Worker에 접근 가능합니다. 그래서 만약 여러 개의 탭이나 윈도우 창이 켜져있더라도 모두 같은 데이터를 공유받거나..

자바스크립트는 싱글 쓰레드 언어로 널리 알려져 있습니다. 하지만 브라우저의 Web Worker, 노드의 Worker Thread를 활용하면 멀티 쓰레드 환경을 구현할 수 있습니다. 자바스크립트로 멀티 쓰레드 환경을 구현하는 방법을 알아보기 전에 멀티 쓰레드 환경을 구현할 수 있음에도 싱글 쓰레드 언어라고 소개하는 지 짚어보고 넘어가도록 하겠습니다.자바스크립트는 싱글 쓰레드 언어?자바스크립트의 기본 실행 환경은 단일 쓰레드 환경입니다. 즉, 자바스크립트는 하나의 호출 스택에서 한번의 하나의 작업이 처리된다는 뜻입니다. 이런 작업의 처리는 브라우저든, Node 환경이든 메인 이벤트 루프에서 관리되며 순차적으로 처리됩니다. DOM 조작, 이벤트 처리, UI 업데이트 등의 거의 모든 자바스크립트 동작은 메인 쓰..

최근 취업을 하면서 안드로이드 개발자로 경력을 시작하게 되었습니다. 기존에는 자바스크립트(타입스크립트)와 리액트를 통한 웹 프론트엔드 개발을 공부해 왔었는데요. 코틀린은 2011년에 공개된 프로그래밍 언어로 최신 프로그래밍 언어라고 볼 수 있습니다. 최근에 만들어진 언어를 사용해 보면서 자바스크립트의 최신 라이브러리나 프레임 워크를 사용할 때와 비슷한 느낌을 받기도 하였고 특히 안드로이드 컴포즈를 사용하면서 더 많이 느껴진 점이 있습니다. 이런 점이 최근 개발 업계에서 전반적으로 추구하는 개발 방향이라고 느껴졌고 이 점을 한 번 정리해보고 싶어 글을 작성하게 되었습니다.요즘 언어들더 쉽게, 더 편하게최근 개발 경향성은 "더 쉽게, 더 편하게"라는 말로 요약할 수도 있겠다 싶을 정도로 간단하고 쉬워지는 것..

트라이는 트리 기반의 자료 구조로 문자열의 탐색을 효율적으로 수행할 수 있도록 도와줍니다. 특히 공통 접두사를 공유하는 데이터를 다룰 때 유용하여 자동완성, 사전 검색 등 주로 문자열의 탐색에서 많이 응용하는 자료 구조입니다.트라이(Trie)자동완성 혹은 사전의 단어 검색에서 검색창에 어떤 문자를 입력하면 해당 문자로 시작하는 단어를 찾아주어야 합니다. 예를 들어 영어 사전에서 "prefix"라는 단어를 찾을 때 p, r, e, f, i, x의 문자들을 순서대로 입력할 것입니다. 그러면 각 입력마다 "p"로 시작하는 단어들, "pr"로 시작하는 단어들, "pre"로 시작하는 단어들 ... 을 사용자가 완성할 단어로 판단하며 단어를 미리 완성하여 아래에 표시해 줍니다. 이를 컴퓨터에서 효율적으로 검색할 수..

모두가 아시다시피 컴퓨터는 이진수를 사용합니다. 그리고 하나의 데이터를 저장하는 공간은 한정되어 있습니다. 이로 인해 작은 숫자를 표현할 때는 오차가 발생하게 됩니다. 이 오차가 바로 개발자 면접의 단골질문인 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을 나타냅니다. 진법의 문제로 일부 십진법 숫자들은 이진법으로 ..

타입스크립트를 사용할 때 타입을 조금 더 편하게 사용할 수 있는 팁들을 준비해보았습니다.Roll 타입으로 예쁘게 펼쳐보기type Roll = { [K in keyof T]: T[K];};// & {};Matt Pocock이 고안한 Roll이라는 타입은 네이버의 infer, never만 보면 두려워지는 당신을 위한 타입 추론에서 알게된 핵입니다. 다음과 같이 복잡한 타입을 사용하면 개발자는 해당 객체에 들어있는 타입이 정확히 무엇인지 확인하기 힘든데요. Roll을 이용하면 객체를 해부하여 볼 수 있게 됩니다.type A = { a: string; b: number; c: boolean;}type B = { d: boolean; e: number; f: string[];}t..

리액트의 context의 API는 Prop Drilling을 해결하기 위한 한 가지 방법으로 상위 컴포넌트에서 관리하는 상태를 자식 컴포넌트가 props을 받지 않고 해당 상태를 사용할 수 있게 만들어줍니다. 먼저 간단한 사용법을 알아보겠습니다.Context API의 사용방법context 만들기context api를 사용하기 위해 가장 먼저해야할 일은 context를 만드는 일입니다. 깊이 중첩되어 있는 자식에게 전달할 상태를 정하는 작업입니다.const MyContext = createContext({ count: 0, increase: () => { console.log("provide없음"); },});context의 생성은 위와 같이 아주 간단합니다. createContext함수에 전달..

리액트에서 리스트를 이용해 컴포넌트를 렌더링하도록 하면 key prop을 붙이는 것을 권장하고 있습니다. 만약 key를 사용하지 않으면 다음과 같은 에러를 콘솔에 출력하고 내부적으로는 인덱스를 key로 사용하게 됩니다.리액트에서 Key는 어떤 역할을 하길래 리스트의 렌더링에 필수적으로 사용하여야 할까요?리스트 항목을 순서대로 유지공식 문서에 따르면 리스트에서 key prop의 역할은 리스트 항목을 순서대로 유지하기 위해서입니다. key를 사용한다면 리스트의 각 요소를 식별하여 올바른 순서를 유지할 수 있도록 만듭니다. 그런데 리스트의 항목을 순서대로 유지한다는 것은 무슨 말일까요? 리스트라는 자료 구조 자체에서 이미 순서를 유지하기 때문에 key를 사용하지 않아도 순서는 유지되는 데 말입니다.key의 작..

지난 글에서 태스크 큐를 통해 자바스크립트의 코드 실행 순서를 알아보았습니다. 하지만 한 가지 의문점이 생겼는데요. Promise 객체는 마이크로 태스크 큐로 들어가지만 만약 await 키워드를 사용한다면 어떻게 될까요? 함수의 실행을 일시 정지하고 Promise가 resolve(혹은 reject) 될까지 기다린다는 사실은 알고 있을 겁니다. 하지만 이벤트 루프에서 어떻게 처리가 될까요? Promise가 fullfilled 혹은 rejected 될 때까지 이벤트 루프의 작동도 멈출까요?async / awaitasync와 await는 JavaScript에서 비동기 처리를 보다 읽기 쉽게 작성할 수 있도록 도와주는 문법입니다. 기본적으로 비동기 코드를 처리할 때 주로 Promise를 사용하게 되는데, asy..