2025-02.md

2025-02

📚 링크 & 읽을거리

Oracle Won’t Release ‘JavaScript’ Without a Fight

Deno는 2024년 11월 미국 특허 및 상표청에 Oracle의 Javascript에 대한 상표권을 취소해달라는 청원서를 제출했다. Javascript가 일반적 용어로 널리 인지되고, Oracle이 통제하고 있지 않다는 이유에서였다.

그러나, 최근 Oracle은 이에 "JavaScript"에 대한 상표권을 스스로 포기하지 않을 것이라고 밝혔다.

Cascading Spy Sheets: Exploiting the Complexity of Modern CSS for Email and Browser Fingerprinting

사이버 보안 연구자들이 발표한 논문으로, 현대 CSS의 복잡성을 악용해 이메일과 브라우저 지문 채취가 가능함을 증명했다.

간단한 스타일 지정만으로도 다양한 사용자 정보를 수집할 수 있음을 제시해 보안 측면에서 주목할 만하다.

2024 프런트엔드 뉴스 한 방에 몰아 보기

NHN Cloud Meetup에서 2024년 프런트엔드 관련 뉴스를 간략하게 정리했다.

바빠서 미처 확인하지 못한 작년 FE 소식들을 확인해 보자.

2024 JavaScript Rising Stars

2024 JavaScript Rising Stars는 JavaScript 생태계의 트렌디한 프로젝트를 소개한다.

전체 프로젝트에 있어 shadcn/ui은 2023년부터 지속적으로 1위에 있다. 작년에 이어 큰 인기를 유지하며, 컴포넌트 기반 UI 라이브러리로서의 입지를 확고히 했다.

2023년 2위였던 bun은 32위로 하락하며 상대적으로 주목도가 감소했다. 대신, 2023년 3위였던 Excalidraw가 한 계단 상승해 2위를 차지했다. Excalidraw는 웹에서 간단히 그림을 그릴 수 있는 오픈 소스 화이트보드 툴로, 핸드 드로잉 스타일의 스케치를 쉽게 만들 수 있다는 점이 특징이다.

새롭게 3위에 오른 AFFiNE는 2023년 36위에서 대폭 상승하며 눈길을 끌었다. Notion과 Miro의 강점을 결합한 차세대 생산성 도구로, 강력한 문서 편집 및 시각적 협업 기능이 주목받고 있다.

기술적 트렌드와 개발자들의 필요에 맞춰 성장해 온 만큼, 각각이 주목받은 이유를 살펴보는 것도 의미 있을 것이다.

빌드 시스템 관점에서 본 번들러

Microsoft의 논문 Build Systems à la Carte: Theory and Practice를 토대로, Webpack·esbuild·Vite 등의 번들러를 빌드 시스템 관점에서 분석한 글이다.

빌드 과정의 개념을 이해하면 번들러가 어떤 구조로 동작하는지, 왜 특정 방식으로 설계되었는지 한층 깊이 파악할 수 있다.

좋은 코드란 무엇일까? - 가독성이란 허상에 대하여

좋은 코드란 무엇일까?라는 질문에 대한 대부분의 사람들의 답은 가독성이라는 단어를 포함하고 있다.

그런데 이 사람들이 답하는 가독성은 모두 같은 정답을 향하고 있는 것일까? 애초에 전 세계의 2,600만 명의 소프트웨어 개발자들이 모두 공감할 수 있는 좋은 코드의 정의가 존재할 수 있을까? 모두가 공감할 수 없는 가치라면 애초에 가독성이 좋은 코드라는 것이 세상에 존재하기는 하는 것일까?

이런 가독성에 대한 생각을 시작으로 타인과 나 대해 다시 한번 생각해 보게 한다.

Every HTML Element

100개가 넘는 HTML 요소를 한 페이지에 구현한 글이다.

평소 잘 쓰이지 않는 요소의 사용 예시까지 확인할 수 있어 흥미롭다.

The Ai-Assisted Developer Workflow: Build Faster and Smarter Today

AI를 활용한 개발 도구가 어떻게 개발 방식을 변화시킬 수 있는지 소개한다. V0, bolt, Copilot, Cursor, Cline 등의 여러 도구를 소개하며 각각의 특징과 사용 팁을 알려준다.

짧게 정리하자면 각 도구는 다음 작업에 각각 강점을 갖는다.

• V0: component 개발
• bolt: full stack application 구축
• Copilot, CLINE, Cursor: 점진적 개발

Toss Frontend Fundamentals

토스의 프런트엔드 개발자 8명이 함께 만든 Toss Frontend Fundamentals가 공개되었다. 변경하기 쉬운 프런트엔드 코드를 위한 지침서라는 부제를 내걸고 등장했고, 프런트엔드 개발 업계에 빠르게 공유되었다.

가독성, 예측 가능성, 응집도, 결합도를 기준으로 구체적인 예시와 함께 잘 설명되어 있어서 쉽게 이해할 수 있다.

코드 퀄리티에 대해서 논의하는 깃허브 디스커션도 운영하고 있으니 코드에 대한 고민을 나눠보자.

Do JavaScript frameworks still need portals?

Dialog, popover, CSS anchor positioning 등의 기능으로 portal, teleport 등의 기능을 대체할 수 있음을 알려준다.

Breaking Up with Long Tasks or: how I learned to group loops and wield the yield

배열 순회 시에 배열의 .forEach(), .map() 등을 사용하면 동기적인 실행만 가능하기 때문에 느린 INP(Interaction to Next Paint)를 유발할 수 있다.

이 글에서는 해당 문제를 해결하는 방법을 소개한다.

Boosting Multithreaded Performance with Atomics.pause in JavaScript

ECMAScript의 새로운 API Atomics.pause()를 소개하며, 멀티 스레드 애플리케이션에서 성능을 향상시키는 방법을 설명한다.

해당 기능은 stage 3 단계이며, 제한된 최신 브라우저만 지원한다.

JavaScript Temporal is coming to browsers

Brian Smith가 MDN 블로그에서 JavaScript Temporal API의 브라우저 적용 소식을 전했다.

기존 Date 객체의 한계를 보완해 날짜·시간·타임존 연산을 보다 정확하고 편리하게 처리할 수 있도록 도와주는 차세대 API로 기대된다.

🕹 튜토리얼

Build your first WebAssembly project

C / C++ 코드를 WebAssembly로 만드는 방법을 소개한다.

해당 포스트는 시리즈로 작성된 튜토리얼 중 일부이다.

더 깊게 알고 싶다면 시리즈의 다른 포스트도 함께 읽어보자.

I built a DeepSeek R1 powered VS Code extension…

아주 간단한 VSCode Extension을 처음부터 만드는 과정을 소개한다.

📦 코드와 도구

Tailwind CSS v4.0

Tailwind CSS v4.0이 출시되었다. v3.0 이후 3년 만의 메이저 버전 업데이트이다.

주요 변경점으로 엔진 변경으로 인한 5배에서 100배 이상(incremental build 시)의 성능 향상과 최신 css 기능 지원 추가 등이 있다.

Standard Schema

Standard Schema는 Zod, Valibot, ArkType의 제작자들이 설계한 새로운 명세로, 모든 TypeScript 스키마 라이브러리를 위한 공통 인터페이스를 제공하는 것을 목표로 한다.

Type Validation Library 간의 이동 장벽을 낮출 수 있을 것으로 기대된다.

Announcing ArkType 2.0

TypeScript 스키마 검증 라이브러리인 ArkType의 2.0 버전이 출시되었다. 이번 업데이트에서는 Standard Schema 명세를 완벽하게 지원한다.

Zod 대비 최대 100배 빠른 런타임 성능과, TypeScript와 유사한 타입 정의 문법이 특징이다.

Trae

Trae는 틱톡의 개발사로 유명한 ByteDance에서 개발한 AI 기반 코드 에디터이다.

Cursor처럼 VSCode를 클론해서 만들었으나 모습은 JetBrain의 Fleet과 유사하다.

ChatGPT-4o, Claude 3.5 Sonnet 모델을 지원하지만 놀랍게도 요금이 부과되지 않는다.

飞冰 (ICE)

<View x-if={condition}>Hello</View>
<View x-elseif={anotherCondition}>World</View>
<View x-else>NothingElse</View>
<tag x-for={(item, key) in foo}>{key}: {item}</tag>

Alibaba에서 개발한 React 프레임워크이다.

Github Star 기준으로 Next.js, Remix를 이어서 3번째로 많은 Star를 받은 React Framework이다.

Micro frontend가 지원되며, JSX+라는 특이한 JSX 문법을 지원한다.

KRDS

대한민국 디지털 정부 서비스의 편의성, 일관성, 접근성, 사용성을 보장하기 위해 설계된 디자인 시스템이다.

2025년 1월 16일 "디지털 정부 서비스 UI/UX 가이드라인"에서 "한국 디자인 시스템(KRDS)"이라는 이름으로 새롭게 변경되었다.

개발자를 위한 튜토리얼과 빠른 시작을 위한 Component Kit이 제공된다.

🧑🏻‍💻 from NAVER Front-end

[DAN 24] 데이터 기반으로 지속 성장이 가능한 네이버 검색 FE 시스템 구축하기

네이버 검색 FE 시스템 구축 과정에서 반복 작업, UI 재사용 문제, 데이터 부족, 피드백 주기 문제를 해결하기 위해 서버 주도 UI, 디자인 시스템, 데이터 기반 접근 방식을 도입해 개발 효율성과 유지 보수성을 크게 향상시켰다.

서버 주도 UI는 비즈니스 로직과 UI를 분리하여 유연성을 높였고, 디자인 시스템은 일관된 UI 요소를 재사용 가능하게 만들었다. 데이터 기반 접근 방식은 개선 작업의 방향성을 명확히 하고, 피드백 주기를 단축시켜 효율성을 극대화한 과정을 확인해 볼 수 있다.

GitHub Actions를 이용한 코드 리뷰 문화 개선기

네이버 스마트에디터 팀은 코드 리뷰 문화를 개선하기 위해 GitHub Actions를 도입했다. PR merge 시간이 길고 리뷰 참여율이 낮은 문제를 해결하기 위해 데이터 수집 및 분석을 통해 개선 방향을 찾았다.

평균 응답 시간을 줄이기 위해 Slack 알림을 활용한 notify-pr-review와 request-pr-review 액션을 개발했다. 또한, PR merge 데드라인을 설정하고 D-n 룰을 도입하여 merge 시간을 단축했고, 이로 인해 리뷰 응답 시간과 merge 시간이 크게 감소하고, 리뷰 참여율이 향상되었다.