Curt Poem about Computer

Biome은 자바스크립트/타입스크립트 생태계를 위한 차세대 린터/포매터(toolchain) 도구입니다. Rust로 작성되어 멀티스레드를 활용하기 때문에 기존 자바스크립트 기반 도구보다 훨씬 빠른 성능을 냅니다. Prettier와 비교하였을 때 최대 35배 빠른 성능을 낸다고 합니다. Biome은 Rome 이라는 프로젝트의 후계자라고 소개하는데, Rome은 React를 만든 메타의 개발자 중 한 명인 Sebastian McKenzie가 만든 자바스크립트 생태계의 개발 도구를 하나로 통합하려는 프로젝트였습니다. 따라서 Biome의 철학은 기존 Rome과 동일하게 “웹 개발용 도구는 하나로 통합되어야 한다는 것입니다 한 도구에 코드 포맷팅(Prettier)과 린팅(ESLint)을 모두 담는 통합 방식을 추구하..

개발자들에겐 없어서는 안될 서비스 중 하나인 GitHub를 얼마나 잘 활용하고 있으신가요? 단순 Git의 원격 저장소로써 팀원들의 코드를 한 곳에 합쳐두는 용도로만 사용하고 있나요? 토이 프로젝트를 팀 단위로 수행할 때 GitHub를 조금 더 똑똑하게 활용하는 방법을 소개해 보겠습니다. (대부분 이미 알고 있을)현직자 분들보단 취업 준비를 하며 프로젝트를 진행하는 분들에게 도움이 되었으면 좋겠습니다.Pull Requests의 병합 방식 정하기토이 프로젝트라도 Git을 더 많이 활용해 보겠다는 생각을 가졌다면 기능별/작업 유형 별 브랜치를 나누어 개발을 한 뒤, 최종적으로 main브랜치에 코드를 합칠 것입니다. 이를 위해 커밋 메시지 규칙도 정하고 브랜치 이름 규칙도 정하겠죠. 하지만 (Git이 아닌) G..

웹브라우저를 켤 때마다 마주하는 ‘맞춤형’ 광고는 단순한 운이 아닙니다. 과거에는 써드파티 쿠키(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함수에 전달..