Web Almanac은 커뮤니티 운영 프로젝트인 HTTP Archive 팀이 매년 발행하는 웹 기술에 대한 종합 보고서로 1천7백만개 웹사이트 메타데이터를 분석한 결과를 바탕으로 한다.
총 19개 챕터로 구성되어 있으며, 페이지 콘텐츠별 분석부터 성능, 퍼블리싱과 배포 등에 이르기까지 다양한 주제에 대한 세부적인 분석을 확인할 수 있다.
보고서를 통해 확인할 수 있는 몇 가지 흥미로운 사실들은 다음과 같다.
- 페이지당 23개의 JavaScript 파일이 요청되고 있다.
- HTML content-encoding은 52 ~ 53%가 gzip을, 36 ~ 37%가 Brotli를 사용하고 있다.
- HTTP/2가 70 ~ 71%로 가장 많이 사용되며, HTTP/3는 아직 10% 미만이다.
우리는 종종 벤치마크를 통해 코드 성능을 측정한다. 하지만, 그 결과는 얼마만큼 신뢰할 수 있을까?
JavaScript의 JIT 컴파일러의 동작에 따라 측정에 영향을 받을 수 있으며, 엔진은 타이밍 공격을 방지하기 위해 의도적으로 타이밍을 부정확하게 만들기도 한다.
또한 벤치마크를 위해 사용하는 엔진의 종류(V8, JavaScript Core, SpiderMonkey 등)에 따라 결괏값이 달라질 수 있으며, 이는 엔진에 따라 코드의 최적화 방식의 다름에 기반할 수 있다.
저자는 Dart와 Rust로 비동기 프로그램을 작성하면서 비동기로 인한 버그를 피하기 위한 멘탈 모델을 구축했고, 비동기 프로그램을 특정 방식으로 생각해 버그를 발견하는 것에 중점을 둔다.
5개의 주요 비동기 작업 항목(Call graph, task, co-operative scheduling, IO, Task vs Threads) 들에 대한 기본 개념을 설명하며, 사례를 통해 버그를 발견하고 예방하는 방법을 설명한다.
Slack이 기술적 변화를 어떻게 관리하고, 유행과 혁명을 구분하여 성공적인 기술 도입을 이루는지에 대한 전략을 소개한다. 기술 선택에 있어 일부 리더에 의존하지 않고, 적극적으로 새로운 기술을 탐색하고 유용하지 않은 실험은 빨리 중단한다고 한다.
새로운 기술 채택을 위해 3단계로 구성된 프로세스를 소개하며 React와 Hacklang, Vitess 도입의 성공적 사례와 함께 LibSlack(크로스 플랫폼 C++ 라이브러리)의 실패 사례도 소개한다.
TypeScript의 코어 개발자 중 한 명인 덴마크 출신의 Anders Hejlsberg가 TypeScript 컴파일러를 어떻게 작성했는지를 설명하는 5분 분량의 짧은 다큐멘터리로 TypeScript의 기원과 개발 과정을 들어볼 수 있다.
저자는 디자인 시스템 프로젝트를 전문으로 수행하는 디지털 에이전시 Big Medium 소속으로 다양한 경험을 바탕으로, 디자인 시스템에 질문에 대한 답변을 제공한다.
그중 하나의 질문인, "디자인 시스템이라는 용어가 오용되고 있다고 생각하시나요? 그리고 앞으로 다른 이름을 채택하는 것을 고려해야 할까요?"에 대해선 "User Interface System"이 더 정확하다는 의견을 제시한다.
[참고] 저자가 작성한 관련 ebook도 참고해 볼만하다.
Tailwind v4 Beta가 지난 11월 공개되었다. 이번 릴리스는 밑바닥부터 새롭게 재작성되어 빌드 시간이 3.78 ~ 182배 빨라졌다고 한다.
이 글은 주요한 변경사항들에 대한 저자의 생각을 소개하는 형식으로, 각 변경사항들을 통해 주요한 변화들을 이해할 수 있다.
Rust 기반의 Lightning CSS 도구를 채택한 것, 기존의 tailwind.config.js 설정 파일에서 CSS 파일 설정의 변화 등을 살펴볼 수 있다.
유명한 UX 리서치 컨설팅 회사인 Nielsen Norman Group에서 선정한 2024년 최고의 UX 비디오 10개를 볼 수 있다. 흥미 있는 주제 몇 가지는 다음과 같다.
달과 지구는 어떤 관계일까? 이 글은 달의 궤도, 중력, 조수 그리고 일식을 설명하며 지구와의 상호작용을 이해하는 데 도움 되는 다양하고 멋진 시각적 도구와 시뮬레이션을 제공한다.
Konfig는 OpenAPI 사용을 기반으로 API 통합을 쉽게 만들어 주는 개발자 도구로, 2022년 시작한 스타트업이었다. 그러나 성공하지 못하고 3년 만에 종료하게 되었고 그 과정에서 배운 교훈들을 설명한다.
실패에도 불구하고 기술이 다른 사람들에게 도움이 될 수 있기를 바라며 전체 코드 베이스를 공개했다.
이 글은 Meta에서 신입사원으로 시작한 Evan King이 어떻게 3년 만에 스태프 엔지니어(E6)로 성장할 수 있었는지 그 과정을 소개한다. 커리어 관점에서 성장하기 위해 필요한 것들이 무엇일까? 개발자는 개발과 기술만 잘 알면 되는 것일까?
정답은 아니겠지만, 글을 통해 좀 더 폭넓은 시야를 갖게 될 수도 있다.
구글이 웹 콘텐츠를 크롤링하고 색인하는 방법이 어떻게 발전했는지 살펴보며, 크롤링 동작에 대한 실험을 바탕으로 아래와 같은 오해에 대해 분석한 내용을 소개한다.
- 구글은 JavaScript 콘텐츠를 렌더링 할 수 없다.
- 구글은 JavaScript 페이지를 다르게 취급한다.
- 렌더링 대기열과 타이밍이 SEO에 큰 영향을 미친다.
- JavaScript가 많은 사이트는 페이지 검색 속도가 느리다.
저자는 트윗을 통해 Comfy Deploy 대시보드를 Next.js에서 React로 마이그레이션 하며 빌드 시간을 3분에서 18초로 개선한 과정에 대한 상세한 내용을 설명한다. 모든 프로젝트에 Next.js가 필요한 것은 아니며 Next.js 없이 React를 사용하는 것이 더 효율적이고 간단할 수 있다는 점을 강조한다.
GitHub의 Recoil 저장소가 25년 1월 2일을 기점으로 archived 상태로 전환되었으며, 이에 따라 Recoil 프로젝트는 개발이 중단된 것으로 보인다.
개발 중단에 대한 조짐은 꽤나 오래전부터 보였었다. 주요 개발자였던 Douglas Armstrong이 23년 1월, 뒤이어 Mengdi Chen이 23년 6월에 해고되었고, 저장소의 마지막 커밋도 23년 9월에 이루어진 후 더 이상 업데이트가 없었다.
또한 Meta의 코드 관리 시스템인 Sapling에서도 Recoil에 대한 의존성을 Jotai로 변경(24년 2월) 한 상황을 통해서도 이를 확인할 수 있다.
Chrome 131+부터 개발자 도구를 통해 구글의 AI 모델인 Gemini와 직접 채팅하며 문제점의 해결을 도와주는 AI Assistance 패널이 추가되었다. 스타일, 네트워크, 소스와 성능 영역에서 활용이 가능하다.
AI를 활용해 디버깅하고 문제를 해결할 수 있는 데모 프로젝트를 통해 실제 사용법을 익혀볼 수 있다.
성능 트레이스를 분석 시, 긴 작업이나 불필요한 부분 또는 강조 표시 등의 작업이 필요하다고 가정해 보자. 그리고 이러한 분석을 나중에 참고하기 위해 메모를 작성하거나 공유하고 싶을 수도 있다.
가장 좋은 방법은 무엇일까? 과거에는 수동으로 이 작업을 수행하던 때도 있었다.
이제 개발자 도구의 성능 패널에서 직접 주석을 추가하고, 작업 간의 연결 메모를 추가할 수 있으며, 이를 다른 이와 공유할 수도 있다.
브라우저가 웹 페이지와 그 하위 리소스를 로딩할 때 내부에서 많은 일이 일어나게 된다.
render/parsing blocking resources, preload 스캐너의 사용, resource hints, loading modifiers(async/defer/module), fetchpriority... 등 이러한 모든 신호를 기반으로 HTTP/2 및 HTTP/3 연결을 최적으로 활용하기 위해 어떤 리소스를 언제 로드할지의 결정 과정이 진행된다. 그리고 모든 브라우저가 똑같은 방식으로 이 작업을 수행하지 않는다.
이 세션을 통해 브라우저 내부에서 어떤 일이 일어나는지 더 깊이 이해할 수 있으며, 오늘날 브라우저와 리소스 로딩 기능에 존재하는 다양한 문제와 기이함에 더 잘 대처할 수 있게 될 것이다.
[참고] 발표 슬라이드
브라우저 콘솔에 SVG와 HTML을 렌더링 할 수 있다는 것을 알고 있었는가? 이 글은 콘솔에서 CSS, SVG, HTML을 활용해 다양한 시각적 효과와 링크, 반응형 디자인 등을 구현할 수 있는 방법을 소개한다.
[참고] CSS Style Console Log를 이용하면 비교적 쉽게 console 메시지 스타일링을 할 수 있다.
Porffor는 JavaScript로 작성된 AOT JavaScript 엔진으로 wasm과 네이티브 바이너리로 컴파일도 가능하다. ECMAScript 명세 지원 적합성 테스트인 Test262 기준으로, 현재 55% 수준의 지원율을 보이고 있다.
[참고] 다음의 팟캐스트를 통해 개발자인 Oliver Medhurst가 소개하는 Porffor의 좀 더 자세한 이야기를 들어볼 수 있다.
간단한 코드만으로 parallax 효과가 적용된 눈이 내리는 애니메이션을 만들 수 있다.
Transformers.js로 머신러닝 모델을 활용해 로컬에서 이미지의 배경을 제거할 수 있는 도구다.
이 프로젝트는 약 40만 개 이상의 GitHub의 다양한 프로젝트를 시각적으로 탐색할 수 있는 지도를 제공한다. 지도의 각 점들은 프로젝트를 의미하고, 근접성은 동일한 이들에게 스타를 받았음을 표현한다.
간단한 CLI 도구로 명령어의 출력이 중단된 지점에 구분선을 추가해 줘서, 출력을 구분하기 쉽게 해준다.
타임라인을 통해 역사적인 장소를 찾아보고 오래된 지도를 검색해 볼 수 있다.
WebLLM은 하드웨어 가속을 통해 웹 브라우저에 직접 언어 모델 추론을 제공하는 고성능 인브라우저 LLM 추론 엔진으로, 모든 것이 서버 지원 없이 브라우저 내부에서 실행되며 WebGPU로 가속된다.
다음의 온라인 플레이 그라운드를 통해 직접 사용해 볼 수 있다.
TanStack Start는 TanStack Query와 TanStack Router의 개발자들이 풀스택 React 개발에 대한 새로운 시각을 제시한다. 타입 안전성, 개발자 경험, 생산성에 중점을 둔 TanStack Start는 직관적인 도구와 강력한 기본 요소의 균형을 보여준다.
npm 레지스트리에서 "높은 영향력"을 갖는 패키지들의 이름의 목록을 반환해 주는 패키지다. 여기서 "높은 영향력"이란, 다음의 2가지 조건 중 최소 하나를 충족시키는 경우에 한한다.
- 주간 다운로드 수가 1M 건 이상일 때
- 500개 이상의 패키지에서 의존성을 가질 때
Web Components 및 JSX로 웹 애플리케이션을 구축하기 위한 최소한의 라이브러리로, 단순함을 추구하며 다음의 2개 코어 기능에 집중한다.
- createElement: JSX를 사용하여 HTML 마크업을 작성하며, 가상 노드를 반환
- applyDiff: JSX로 생성된 가상 노드를 실제 DOM에 효율적으로 병합