Outsider's Dev Story

Outsider

웹개발 관련
Rewriting Pierre to be zero-latency : 생산성 도구를 만드는 Pierre에서 Supabase REST API를 사용하다가 로컬 퍼스트 동기화 프레임워크인 Replicache로 완전히 재작성했다. Replicache는 조만간 오픈소스로 공개될 예정이라고 하는데 브라우저에서 IndexedDB에 저장하고 백엔드와 동기화하기 때문에 백엔드와 프론트엔드의 관심사를 분리할 수 있고 인증과 엑세스 제어를 구현자에게 위임하는 것도 큰 장점이었다고 합니다. Pierre에서 Replicache를 구현한 방법을 설명하고 이를 통해 레이턴시가 크게 개선되었다고 한다.(영어)
React Compiler Beta Release : 빌드 타임에 React 앱을 최적화하는 React Compiler의 베타 버전이 발표되었다. React Compiler의 ESLint 플러그인도 공개되었는데 React Compiler와 별개로 사용하고 있고 린터의 사용을 권장하고 있다. 이후 RC를 거친 뒤 GA로 공개될 예정이다.(영어)
How Vercel adopted microfrontends : Vercel의 웹사이트가 점점 커지면서 마이크로프론트엔드를 도입하기로 하고 경로별로 다른 앱을 사용하는 수직 마이크로프로트엔드와 한 화면에 여러 앱이 있는 수평 마이크로프론트엔드 중에서 수직 마이크로프로트엔드를 사용하기로 한다. Next.js였기에 Multi-Zones 기능을 사용해서 수직 마이크로프론트엔드를 사용했고 점진적 마이그레이션을 위해서 기존 코드는 그대로 두고 완전히 새로 만들기로 결정하고 피처 플래그로 점진적으로 전환했다.(영어)
Turbopack Dev is Now Stable : Vercel에서 Turbopack을 만들기 시작한 지 몇 년이 지나 첫 안정 버전을 릴리스했다. 현재 next turbo --dev만 지원하고 next build --turbo로 프로덕션 빌드는 지원하지 않지만, 커뮤니티가 Turbopack을 경험하면서 장점을 느끼게 하려는 의도가 있고 성능이 상당히 개선되었지만 webpack() 구성을 지원하지 않으며 .babelrc 코드를 자동 변환하지 않고 Lightning CSS로 바꾸면서 일부 CSS가 지원하지 않게 되었다.(영어)
Our Journey with Caching : Next.js에서 클라이언트-서버 워터폴로 인한 성능 문제를 해결하기 위해 fetch()를 기본적으로 캐싱하게 하였는데 이에 따라 개발자가 어려움을 겪곤 했다. 실험적으로 이에 대한 해결책으로 "use cache" 지시어를 사용해서 전체 혹은 부분적으로 캐시 여부를 지정할 수 있는 아이디어를 제시했다.(영어)
Make Typescript Typescriptly : TypeScript로 개발하면서 자주 사용하는 패턴을 정리한 글이다. Union이나 유틸리티 타입, as const, Template Literal Types 등 문제 상황에서 어떤 도움이 되는지 정리되어 있다.(영어)
Introducing the new Svelte CLI : Svelte 프로젝트를 관리할 수 있는 새로운 CLI sv가 릴리스 되었다. sv create로 프로젝트를 생성할 때 포맷, 린팅, 테스트 등 다양한 기본 애드온을 사용할 수 있고 sv add로 애드온을 추가할 수 있다.(영어)
State of Frontend 2024 : 프론트엔드 생태계를 전 세계 6000여 명에 설문 조사한 리포트이다. 프레임워크, 라이브러리에 대한 사람들의 관심사 및 TypeScript, 브라우저, 디자인 시스템, 스타일 도구 등 다양한 현황이 정리되어 있다.(영어)
State of CSS 2024 : 9,700 여명에게 설문조사를 한 CSS 생태계의 결과가 나왔다. 각 CSS 기능과 CSS 라이브러리 및 도구 등의 사용현황을 볼 수 있다.(영어)
A Netflix Web Performance Case Study : Netflix에서 비교적 간단한 가입 페이지와 로그아웃된 페이지에서 성능을 개선하기 위해서 React와 라이브러리르 제거하고 사용자가 방문할 것같은 페이지의 리소스를 프리페칭해서 로딩 및 인터랙티브 시간을 크게 줄였다. 이 페이지들은 비교적 간단한 페이지였기에 바닐라 자바스크립트로 전환했지만 서버 측에서는 여전히 React를 사용하고 있다.(영어)
Removing --headless=old from Chrome : 2023년 초 --headless=new로 새로운 헤드리스 모드가 추가되고 chrome-headless-shell도 지원됨에 따라 Chrome 132부터는 --headless=old가 제거된다.(영어)
그 밖의 개발 관련
How we shrunk our Javascript monorepo git size by 94% : Microsoft에서 1JS라고 부르는 엄청 큰 자바스크립트 모노레포가 있는데 패키지 수가 2,500개가 되고 코드 라인도 약 2,000만 라인을 돌파해서 최근 클론은 178GB나 되었다. 용량이 점점 커지면서 원인이라고 생각하는 문제를 막도록 여러 방법을 시도했지만, 성장 속도를 느리게는 했지만, 점점 커지고 있었고 Microsoft에서 가장 큰 모노레포인 Office보다도 커지면서 뭔가 잘못되었다는 것을 알게 되었다. 문제를 자세히 들여다본 결과 git에서 패킹할 때 파일명의 마지막 16자만 검사해서 사실상 다른 파일의 diff를 만들고 있다는 걸 알게 되었고 이를 수정한 뒤에 git repack을 수행하자 178GB가 5GB로 줄어들었다.(영어)
The story of web framework Hono, from the creator of Hono : Hono를 만든 Cloudflare 직원이 Hono를 소개하는 글이다. 2021년 Cloudflare Workers에서 애플리케이션을 만들려고 하다가 자신에게 맞는 프레임워크가 없다는 걸 깨닫고 Trie 트리 기반 라우터로 웹 프레임워크를 만들기 시작했다. Hono는 웹 표준 API만 사용하기 때문에 모든 자바스크립트 런타임에서 실행할 수 있고 쉽게 라우팅을 작성할 수 있으며 RPC를 사용하면 클라이언트도 쉽게 작성할 수 있다. 서버 측 템플릿 엔진으로 여러 기술을 검토했지만, JSX만 Cloudflare Workers를 지원하지 않아서 JSX를 서버에서만 사용하고 있다.(영어)
Ghostty 1.0 is Coming : HashiCorp의 공동창업자이면서 지금은 물러난 Mitchell Hashimoto가 2년간 개발하고 있는 터미널 에뮬레이터인 Ghostty를 12월에 MIT 라이센스로 1.0 버전을 릴리스할 것이라고 공개했다. Ghostty는 macOS와 Linux에서 기존 터미널 앱보다 강력한 대체제가 되길 바라고 있으며 2,000여 명의 베타테스터와 함께 테스트 중이라고 한다.(영어)
소프트웨어 파괴의 미학 : 비즈니스의 복잡성으로 인해 소프트웨어 개발도 불확실한 부분이 많기 때문에 이에 대한 반응으로 무의미한 일이라고 생각하거나 기술에만 집중하는 쉬운 길을 선택할 수도 있지만 그래도 완벽을 추구하는 길을 찾아서 혼돈에 대항하는 방법으로 파괴 지향 개발을 제안한다. 코드가 언젠가 파괴될 것이니 파괴하기 쉽게 만들기 위해 코드를 독립적으로 만들고 가독성을 좋게 하고 통제할 수 있게 하는 접근 방법을 설명한다.(한국어)
Fearless Rebasing : Git 클라이언트를 만드는 GitButler에서 귀찮은 rebase 문제를 해결하려고 고민하다가 Jujutsu에 있는 일급 시민 충돌 개념을 가져왔다. 일급 시민 충돌은 rebase시 충돌이 나면 abort를 하는 대신 해당 커밋을 충돌로 표시하고 리베이스를 이어서 하므로 항상 리베이스가 성공하게 되고 리베이스 후 충돌난 커밋을 해결하면 다시 그 기반으로 리베이스된다.(영어)
Building Bluesky: a Distributed Social Network (Real-World Engineering Challenges): Twitter의 대안으로 알려진 Bluesky가 어떻게 발전해 왔는지를 정리한 글이다. 개발을 시작하고 2~3명이 프로토타입을 만들고 공개 뒤 3개월 만에 90만 명이 증가해서 100만 사용자에 달성하게 된다. 공개 베타테스트 때 AWS에 Postgres로 구축했으나 분산을 위한 페더레이션을 제대로 할 수 있도록 v2 아키텍처를 만들고 데이터베이스도 확장할 수 있는 ScyllaDB와 SQLite로 바꾼 뒤 특정 클라우드에 종속되지 않도록 온프리미스로 갈아타게 된다.(영어)
We're forking Flutter. This is why. : Flutter가 전 세계적으로 큰 인기를 끌고 있지만 예상으로는 구글의 Flutter 팀은 50명 정도라 모바일뿐 아니라 데스크톱 환경까지 이슈를 커버하기엔 부족한 숫자이다. Flutter 팀은 외부 기여를 환영한다고 하지만 실제로 기여해보면 리뷰에도 오래 걸리고 협업이 쉽지 않은 문제 때문에 커뮤니티 기반으로 Flutter를 개발하기 위해 포크해서 Flock을 만들었다.(영어)
Introducing Express v5: A New Era for Node.js Framework : 처음 Pull Request가 등록되고 10년 만에 릴리스 된 node.js 웹 프레임워크인 express의 v5를 소개하는 글이다. 8개월 전 Express를 발전시킬 계획을 발표하고 이번 릴리스는 의도적으로 단순하게 유지되었는데 이는 Express가 다시 움직이고 있다는 것을 생태계에 알리는 것이 목적이었다. v5에서는 Node.js v18 이전의 지원을 중단하고 Promise를 지원하고 보안 문제를 해결하기 위해 안정적인 릴리스가 될 수 있도록 노력했기에 정규표현식 등 보안상 문제 되는 기능을 제거했다.(영어)
인프라 관련
OpenTelemetry Tracing in 200 lines of code : JavaScript로 OpenTelemetry 트레이싱을 직접 구현해 보는 글이다. 로그를 작성하고 스팬을 형식에 맞춰서 이 스팬을 모은 트레이스를 구현한 뒤 분산 환경에도 동작하도록 traceparent 헤더를 이용해서 분산 시스템에서도 동작하게 만든다. 이를 Honeycomb에 JSON으로 보내서 제대로 보이는지 확인한 뒤 OpenTelemetry의 OLTP와 맞추기 위해 JSON을 protobuf로 변환해서 모든 OpenTelemetry 플랫폼과 호환됨을 보여준다.(영어)
Genie: Uber’s Gen AI On-Call Copilot : Uber 내부에서 각 팀에 도움을 요청하는 Slack 채널이 존재하는데 누군가 질문하면 온콜 담당자가 문서를 찾아서 답변을 해주는데 응답시간도 길고 엔지니어링 시간이 낭비되는 문제가 있었다. 이를 해결하기 위해서 사내 위키와 Stack Overflow의 데이터를 가져와서 OpenAI에 임베딩을 만들어서 Terrablob에 넣어서 벡터 데이터베이스로 조회할 수 있도록 만들었다. 환각을 줄이기 위해서 LLM에 프롬프트를 보내는 방식을 사용했고 많은 데이터가 없어서 바로 사용할 수 있는 RAG 방식을 이용했다. 23년 9월 출시 이후 154개 채널에서 7만 개의 질문에 답변 후 48.9%의 유용성을 보여주고 있다.(영어)
Scaling in the Clouds: Istio Ambient vs. Cilium : Cilium은 eBPF와 WireGuard를 사용하지만, sidecarless 모드인 Istio Ambient는 ztunnel를 사용하므로 아키텍처가 상당히 다른데 둘의 성능 비교를 Istio에서 진행했다. 각 100개의 파드로 구성된 500개의 서비스를 구성하고 Istio의 기능과 맞추기 위해 Cilium에서 WireGuard 암호화, L7 프록시, 노드 초기화 등의 기능을 켰고 Istio는 waypoint 프록시를 네임스페이스마다 설치했다. Istio Ambient 모드는 암호화 오버헤드를 켜도 안정성과 적절한 처리량을 유지했고 부하가 클 때는 Istio가 CPU와 메모리를 많이 사용했지만, 부하가 걸리지 않았을 때는 오히려 훨씬 적게 사용했다.(영어)
How we built a new powerful JSON data type for ClickHouse : 컬럼 데이터베이스를 사용하는 Clickhouse에서 JSON 데이터 타입에 대한 컬럼 지향 저장소를 구현해야 했고 같은 필드라도 다른 타입을 저장할 수 있는 문제를 해결해야 했고 너무 많은 필드로 인한 눈사태 문제를 해결하기 위해 새로운 JSON 타입을 만들었다. 이를 이용해서 진정한 컬럼형 JSON 스토리지를 만든 과정을 설명한다.(영어)
AI 관련
GitHub Spark : AI 기반으로 자연어를 입력하면 앱을 만들고 이를 수정할 수 있는 서비스를 GitHub에서 테크니컬 프리뷰로 공개했다.(영어)
Bringing developer choice to Copilot with Anthropic’s Claude 3.5 Sonnet, Google’s Gemini 1.5 Pro, and OpenAI’s o1-preview : GitHub Copilot이 멀티 모델을 지원하게 되어서 OpenAI의 o1-preview와 Anthropic의 Claude 3.5 Sonnet, Google의 Gemini 1.5 Pro도 선택해서 사용할 수 있게 되었다.(영어)
GitHub Models is now available in public preview : GitHub 마켓플레이스에서 머신러닝 모델을 사용할 수 있는 GitHub Models가 공개 프리뷰가 되어 대기하지 않고 사용할 수 있게 되었다.(영어)
볼만한 링크
내 인생 최악의 프로젝트로부터 배운 것 : 정말 하기 싫었던 카카오미니 AI 스피커를 판매하는 업무를 맡게 되면서 이를 잘 팔기 위해 수요를 조사하고 선물하기와 톡채널 메시지를 이용해서 월 3만 대가 안정적으로 판매되도록 만든 과정을 흥미진진하게 설명한다.(한국어)
최악의 프로젝트는 왜 최악이 되었는가? : 윗글 이후 다시 AI 스피커 담당 부서에 이관했으나 몇 달 뒤 담당자의 판단 실수로 너무 많은 재고가 남았다는 것을 알게 되어 다시 재고 처리를 위한 업무를 맡게 되고 이를 처리하기 위한 흥미진진한 과정이 나와 있다.(한국어)
디셉티브 패턴의 역사 : 다크 패턴이 포용적인 용어가 아니라 새로 제안된 디셉티브 패턴의 역사를 다룬 글이다. 사용자를 속여서 원치 않는 행동을 하게 만드는 디셉티브 패턴은 2010년 브리그널이 제안 후 확산되었다. 인간과 컴퓨터의 인터랙션이 생기면서 디자이너가 원하는 행동을 하도록 유도하고 설득하는 "컴퓨터를 활용한 설득 기술"의 줄임말로 B. J. 포크가 캡톨로지를 제안하고 이것이 선하게 쓰이기를 바랐지만 소셜 미디어와 모바일이 대중화되며 설득 기술이 비윤리적으로 활용되었다.(한국어)
The WordPress mess : 이번 워드프레스 사태의 과정을 잘 정리한 글이다. 2003년 b2에서 포트에서 Matt Mullenweg가 WordPress를 만들고 Automattic을 설립해서 호스팅 서비스를 지가하고 재단도 만든 뒤 오픈소스 프로젝트는 WordPress.org도 만들게 된다. 재단이 있지만 상표권은 Automattics에 있는 상황이다. WP Engine은 2010년 워드프레스를 호스팅하는 플랫폼으로 만들어졌고 지난 WordCamp US에서 Matt Mullenweg가 WP Engine이 워드프레스의 상표권을 혼란스럽게 사용하고 있다며 로열티를 요구하면서 시작되었다. 이글에서는 다른 회사처럼 상표권에 비용을 지불하라고 WP Engine과 얘기했지만, 그들이 받아들이지 않았고 WooCommerce라는 플러그인의 수수료를 WP Engine으로 옮기면서 또 다른 쟁점이 되었다.(영어)
Octoverse: AI leads Python to top language as the number of global developers surges : GitHub 데이터를 기준으로 오픈소스 생태계를 살펴보는 Octoverse 리포트가 공개되었다. AI가 개발자를 대체할 것이라고 했지만 실제로는 훨씬 더 많은 사람들이 AI 프로젝트에 참여했고 처음 오픈소스에 기여하는 사람들도 많아졌고 Python이 처음으로 JavaScript을 제치고 가장 인기 있는 언어가 되고 Jupyter Notebooks도 급등했다. 글로벌에서 AI가 크게 떠오르고 있고 아프리카, 라틴 아프리카, 아시아에서 개발자가 빠르게 증가하고 있다.(영어)
Technology Radar : thoughtworks가 2024년 10월 버전으로 업계의 기술 환경을 분석한 보고서를 발표했다. 기술, 플랫폼, 도구, 언어와 프레임워크별로 채택해야 할 기술과 실험해 볼 가치가 있는 기술, 평가, 보류해야 할 기술을 분류해 놓았다. 채택이나 실험해 볼 기술들은 업계에서 어느 정도 주목받는다고 볼 수 있으니 모르는 도구가 있는지 살펴보면 좋다.(영어)
IT 업계 뉴스
Dropbox: An update from Drew : Dropbox의 CEO인 Drew Houston이 전 세계 인력 중 20%인 528명을 감축할 것이라고 발표했다.(영어)
프로젝트
Mountpoint for Amazon S3 : Amazon S3 버킷을 로컬 파일 시스템으로 마운트하는 클라이언트.
Better Auth : TypeScript 인증 라이브러리.
React PDF invoice template : midday에서 만든 React로 생성한 PDF 인보이스 템플릿
uifonts.app : 2가지 폰트가 잘 어울리는지 웹에서 바로 비교해 볼 수 있는 사이트
Lobster : Naver에서 만든 분산 Kubernetes 컨테이너 로깅 시스템.
Open Graph Preview : URL을 입력하면 Facebook, Twitter, LinkedIn, Discord, Slack에서 오픈 그래프가 어떻게 보이는지 보여주는 사이트.
버전 업데이트
Node.js v22.10.0 (Current) : 자바스크립트 런타임, 릴리스 공지
Node.js v23.0.0 (Current) : 자바스크립트 런타임, 릴리스 공지
네이티브 ES 지원
Windows 32bit 시스템 지원 중단
Next.js 15.0 : 서버렌더링 React 애플리케이션 프레임워크, 릴리스 공지
Svelte v5.0.0 : 웹앱 프레임워크, 릴리스 공지
Kargo v1.0.0 : Kubernetes용 배포 도구, 릴리스 공지
Wasmer v5.0 : WebAssembly 런타임, 릴리스 공지
Vitess 21.0 : MySQL 클러스터링 시스템, 릴리스 공지
Zustand v5.0.0 : React 상태관리 라이브러리, 릴리스 공지
Electron v33.0.0 : 크로스 플랫폼 데스크톱 애플리케이션 플랫폼, 릴리스 공지
Chakra UI v3.0.0 : React 컴포넌트, 릴리스 공지
Obsidian v1.0 : 문서 관리 도구, 릴리스 공지
ESLint v9.13.0 : JavaScript 코드 분석 도구, 릴리스 공지
Rust 1.82.0 : 프로그래밍 언어, 릴리스 공지
PyTorch v2.5.0 : Python 딥러닝 프레임워크, 릴리스 공지
Zed v0.159.6 : 코드 에디터, 릴리스 공지
Spring Tools v4.26.0 : Spring 코딩 환경을 위한 도구, 릴리스 공지
Playwright v1.48.0 : Chromium, Firefox, WebKit 브라우저 자동화 Node.js 라이브러리, 릴리스 공지
podman v5.3.0 : 컨테이너 엔진, 릴리스 공지
React Native v0.76.0 : React를 이용한 모바일 앱 개발 프레임워크, 릴리스 공지
재작성한 새로운 아키텍처가 기본적으로 활성화
React Native DevTools 릴리스
React Native visionOS v0.76.0 : Apple visionOS용 React Native, 릴리스 공지
Grafana v11.3 : 매트릭 대쉬보드, 릴리스 공지
Transformers.js v3.0 : 브라우저용 머신러닝 라이브러리, 릴리스 공지
GitButler v0.13 : Git 클라이언트, 릴리스 공지
Node.js v22.11.0 (LTS) Jod : 자바스크립트 런타임, 릴리스 공지
코드네임 Jod로 새 활성 LTS가 된 버전
LogTape v0.7 : JavaScript 로깅 라이브러리, 릴리스 공지
Traefik Proxy v3.2 : HTTP 리버스 프락시/로드 밸런서, 릴리스 공지
TensorFlow v2.18.0 : 기계학습, 딥러닝 라이브러리, 릴리스 공지
댓글 쓰기

기술 뉴스 #257 : 24-11-01

댓글