[FE News] 2025-05
GitHub 에서 소식 보기:
https://github.com/naver/fe-news/blob/master/issues/2025-05.md
📚 링크 & 읽을거리
State of AI 2025
2025년 기준으로 프런트엔드 개발에서 AI 도구가 얼마나 사용되고 있는지를 다양한 항목별로 정리한 설문 결과다. 코드 생성, 리팩토링, 문서 작성, 테스트 작성 등 개발 프로세스 전반에 걸쳐 AI가 어떻게 활용되고 있는지 시각적으로 잘 보여준다. 각 프레임워크별 AI 도구 사용 현황도 확인할 수 있어, 현재 AI 활용 흐름을 파악하는 데 참고하기 좋다.
LLM-first Web Framework
이 글은 LLM(대규모 언어 모델) 친화적인 웹 프레임워크를 설계하고 구현하는 과정을 다룬다. 기존 프레임워크에서 발생하는 문제(예: API 버전 불일치, 학습 데이터 부족)를 해결하기 위해 간단하면서도 익숙한 구문과 세밀한 반응성을 기반으로 한 새로운 디자인 접근 방식을 채택했다. 특히, Revolt를 기반으로 이 프레임워크를 설계했으며, 텍스트 노드와 속성값을 getter 함수로 호출하도록 변경하여 정적 값과 반응형 값을 동일하게 처리하도록 개선했다.
Revolt는 이벤트 루프를 기반으로 한 프레임워크로, 정적 값과 반응형 값을 동일하게 처리할 수 있는 기능을 제공한다. 이를 통해 LLM이 정적 값과 동적 값을 구분하지 않고도 코드를 생성할 수 있도록 돕는다. 또한, Revolt를 중간 표현(IR)으로 사용하여 Angular나 React와 같은 일반적인 프레임워크로 변환하는 방법도 제안하며, 상호 운용성을 강화하는 가능성을 탐구한다.
Model Context Protocol (MCP): A Deep Dive
2024년 11월 Anthropic에서 Model Context Protocol(MCP)를 공개하였다. MCP는 LLM에 컨텍스트를 제공하는 방식을 표준화하는 개방형 프로토콜이다. 이 글은 MCP가 등장한 이유와 생성형 AI 발전에 미치는 의미를 설명한다. MCP는 서비스와 도구를 모듈화, 표준화하여 시스템 간 연결성과 재사용성을 높이며, 이를 통해 개발자는 빠르고 효율적인 맞춤형 AI 환경을 구축할 수 있고, 사용자는 더 강력한 에이전트를 경험할 수 있다. 이 글은 MCP의 기술적 기반과 그로 인해 열리는 새로운 AI 활용 가능성을 탐구한다.
React Compiler RC
React 팀이 오랜 시간 준비해 온 자동 최적화 컴파일러가 드디어 RC(Release Candidate) 단계에 도달했다. 이 컴파일러는 useMemo, useCallback 없이도 성능 최적화를 컴파일 단계에서 자동으로 수행해, 코드 유지보수의 부담을 줄이면서도 퍼포먼스를 확보할 수 있게 해 준다.
현재 Babel, Vite, Next.js(v15.3.1 이상), Remix, Webpack, Metro(React Native), Rspack, Rsbuild 등 다양한 빌드 환경에서 통합이 가능하며, 특히 Next.js는 Babel뿐 아니라 swc 기반 설정도 공식 지원한다.
React Reconciliation Deep Dive
React의 핵심 개념 중 하나인 Reconciliation에 대해 깊이 있게 다룬 글이다. 가상 DOM의 변경을 실제 DOM에 반영하는 과정에서 어떤 기준으로 노드가 비교되고 재사용 또는 삭제되는지를 구체적인 예시와 함께 설명한다. 특히 key의 역할, 자식 요소 재정렬 시의 비용, 리렌더링 최적화를 위한 실전 팁 등 실무에 유용한 내용이 많다. React 내부 동작 원리를 명확히 이해하고 싶은 개발자에게 추천할 만하다.
Impossible Components
서버와 클라이언트의 로직을 결합한 컴포넌트를 만드는 어려움과 이를 해결하기 위한 컴포넌트 설계 패턴에 대해 다룬다. Dan Abramov는 컴포넌트를 Back-end와 Front-end로 나누고, Back-end에서 데이터를 처리해 프런트엔드에 전달하여 상호작용을 구현한다. 이를 통해 데이터 로딩과 로컬 상태를 독립적으로 관리할 수 있고, 구성할 수 있는 컴포넌트를 만들 수 있다. 이러한 패턴은 컴포넌트 재사용성과 상호작용성을 높이며, React와 같은 프레임워크에서 새로운 설계 가능성을 제시한다.
ECMAScript 2025: JavaScript standard takes shape
ECMAScript 2025 사양이 구체화되기 시작했다. Observable, Pipeline operator, Set methods 등 현재 Stage 2 이상에 도달한 여러 제안들이 포함될 가능성이 있으며, 일부는 이미 실험적 구현이 진행 중이다. JavaScript의 다음 스펙이 어떤 방향으로 나아갈지를 미리 엿볼 수 있는 정리 글이다.
Features That Every JavaScript Developer Must Know in 2025
2025년 JavaScript 개발자가 알아야 할 주요 기능들을 소개한다.
Iterator helpers, Promise.withResolvers(), structuredClone(), Array.prototype.at() 등 알아두면 실무에서 유용하게 쓸 수 있는 최신 JavaScript 기능들을 정리한 글이다. 각각의 기능은 짧은 설명과 함께 예제로 소개되어 있어, 간단히 개념을 익히고 필요한 곳에 바로 활용해 볼 수 있다.
proposal-record-tuple is withdrawn
JavaScript에 깊은 불변성을 갖는 복합 원시 타입을 도입하려던 Record와 Tuple 제안이 TC39에서 철회되었다. 이 제안은 객체와 배열의 불변 버전을 제공하여 값 기반 비교를 가능하게 하려는 목적이었으나, 복잡한 제약과 제한된 활용성으로 인해 충분한 합의를 얻지 못했다.
이에 대한 대안으로 Composite 제안이 등장했다. Composite는 불변 객체를 생성하며, Composite.equal()을 통해 깊은 값 비교를 지원한다. 이는 Map, Set, Array.prototype.includes 등에서 구조 기반의 키 비교를 가능하게 하여, 동일한 구조를 가진 객체들을 동일하게 취급할 수 있다. 또한, Composite는 객체의 프로토타입을 지정할 수 있어, 메서드를 포함한 구조체 정의도 가능하다.
이러한 접근은 JavaScript에서 값 기반의 데이터 구조를 더욱 유연하게 다룰 수 있는 가능성을 열어준다. 다만, Composite 제안은 아직 초기 단계로, 향후 TC39의 논의와 발전 방향을 지켜볼 필요가 있다.
Wasm I/O 2025
지난 3월 27~28일, 2일간 스페인 바르셀로나에서 진행된 웹 어셈블리 콘퍼런스의 영상이 공개되었다.
주요 세션은 다음과 같다.
Moving Beyond Containers - Introducing Boxer (발표 슬라이드) Boxer 프로젝트를 소개하며, 컨테이너의 장점을 유지하면서 WebAssembly의 이점을 활용하는 새로운 접근 방식을 제시한다.
The Future of Write Once, Run Anywhere: From Java to WebAssembly (발표 슬라이드) Oracle Labs에서 개발한 Java에서 WebAssembly로의 미래를 보여주는 새로운 프로젝트인 GraalVM을 소개한다. 이 프로젝트는 GraalVM용 WebAssembly 백엔드를 활용하여 Java 코드를 WebAssembly로 컴파일하는 것을 목표로 한다.
Smarter Operating Systems Will Use Wasm - The Coming OS Revolution K23은 기존 운영체제의 한계를 극복하고, 웹 어셈블리의 장점을 활용하여 새로운 운영체제를 구축하려는 시도다. K23은 커널과 웹 어셈블리 런타임으로 구성된 아키텍처를 채택하고 있다. 커널은 가상 메모리 등의 하위 수준 기능을 제공하고, 그 위에 웹 어셈블리 런타임이 위치하여 모든 것을 웹 어셈블리 환경에서 실행한다.
🕹 튜토리얼
Building a composite Web Component library with Vite, Tailwind CSS and daisyUI
Vite, Tailwind CSS 및 daisyUI를 사용하여 composite 웹 컴포넌트 라이브러리를 구축하는 방법을 다룬다. 저자는 초기 구현부터 UI 라이브러리 생성 과정까지를 설명하며, UI 컴포넌트의 Shadow DOM 생성과 스타일링을 간단한 예시를 통해 보여준다.
글에서는 Vite와 Tailwind CSS 설치 방법 및 daisyUI의 설치 및 활용을 다루며, 이를 통해 복합 UI 요소를 효율적으로 만들 수 있다고 주장한다. 또한 기본 구성 요소 스타일링 및 라이브러리 배포 구성 방법도 포함되어 있다.
[참고] 전체 코드는 이곳에서 확인할 수 있다.
How I Reduced My React Bundle Size by 30% (With Real Examples)
React 프로젝트에서 번들 크기를 줄이기 위해 실전에서 적용할 수 있는 방법들을 간결하게 정리한 글이다. date-fns와 같이 기능 단위로 임포트 가능한 라이브러리로 교체하거나, lodash 대신 lodash-es를 사용해 불필요한 코드 포함을 줄이는 방식 등이 소개된다. 또한 아이콘 라이브러리는 필요한 것만 선택적으로 불러오고, React.lazy를 활용한 코드 스플리팅과 이미지 최적화를 병행해 총 30%의 번들 크기를 감소시켰다.
익숙한 내용이지만 구조화된 예시를 통해 실무 적용 시 놓치기 쉬운 부분을 다시 확인하는 데 유용하다.
Automated Visual Regression Testing With Playwright
Playwright를 활용해 시각적 회귀 테스트(Visual Regression Testing)를 자동화하는 방법을 소개하는 글이다. Playwright의 toHaveScreenshot() 기능을 사용하면 특정 컴포넌트나 화면의 스냅숏을 찍고 변경 여부를 손쉽게 확인할 수 있다. 예를 들어, 디자인 시스템의 컴포넌트가 의도치 않게 변경되는 경우를 감지하는 데 유용하다. 이 글에서는 실제 테스트 코드 예제와 함께 구성법을 설명하며, CI 파이프라인에 통합해 자동으로 시각적 차이를 추적할 수 있는 실용적인 팁도 제공한다.
Hiding elements that require JavaScript without JavaScript
JavaScript가 비활성화된 환경에서도 사용자에게 적절한 UI 경험을 제공하기 위한 방법을 소개하는 글이다. <script> 태그의 type 속성을 이용해 문서의 가장 앞부분에서 type="application/please-no" 같은 임의의 타입을 설정하고, 이후 CSS에서 해당 태그가 렌더링 되었는지를 기반으로 JavaScript가 실행 가능한지를 감지한다. 이를 활용해 JS가 필요한 요소는 초기 렌더링 시 감춰둘 수 있다.
간단하지만 창의적인 방식으로, JS가 꺼진 상황에 대한 fallback을 고민해야 하는 경우라면 참고할 만한 접근이다.
📦 코드와 도구
Oxlint Beta
Rust 기반의 고성능 JavaScript 분석 도구 Oxc에서 새로운 린터 Oxlint의 베타 버전을 공개했다. 기존의 ESLint를 대체하는 것이 목표로, 빠른 속도와 메모리 효율성을 내세운다. 린트 규칙은 현재 140여 개가 구현되어 있으며, 대부분 TypeScript도 지원한다. 또한 ESLint와의 호환성을 고려해 --report-unused-disable-directives와 같은 CLI 옵션이나 --format 포맷터 설정도 가능하다. 향후에는 ESLint 규칙 마이그레이션 툴도 제공할 계획이다.
Oxlint는 빠른 속도와 함께, ESLint보다 더 정밀하고 안전한 규칙을 도입할 수 있는 가능성도 있어, 퍼포먼스를 중요시하는 프로젝트에서는 눈여겨볼 만하다. Biome, Rome과 유사한 방향성을 가지며, 린트 도구에 관심 있는 개발자라면 직접 테스트해 보는 것도 추천한다.
[참고] Oxc GitHub 저장소
린트 외에도 트랜스파일러, 파서, 포매터 등 다양한 도구를 포함하고 있다.
Announcing Rsdoctor 1.0
Webpack 기반 번들링 문제를 시각적으로 분석할 수 있는 툴인 Rsdoctor가 1.0을 정식 출시했다. 이 릴리스에서는 기존 CLI 중심에서 벗어나, 더 직관적인 웹 대시보드 중심의 분석 환경을 제공하는 것이 핵심이다. 주요 기능으로는 웹 기반 시각화 도구, 과다 포함 모듈 탐지, 원인 분석 트리, 범용적 성능 점수 및 가이드를 포함한다. 특히 번들 크기 증가의 원인을 자동 분석해 주며, 코드 수정 없이 설정만으로 적용 가능하다는 점이 장점이다. 대형 프로젝트의 번들링 병목을 해결하려는 팀에게 매우 유용한 도구다.
[참고] Rsdoctor는 Rspack과도 호환되어 Rspack 기반 프로젝트의 분석에도 사용할 수 있다.
Poku
Poku는 Node.js, Deno, Bun과 호환되는 경량화된 테스트 러너로, CommonJS, ES Modules, TypeScript 파일을 지원하며 설정 없이 사용할 수 있다. 기존 테스트 러너와 달리 JavaScript의 본래 실행 흐름을 보존하며, 모든 테스트 보일러 플레이트와 Hook을 선택적으로 사용할 수 있다. 이를 통해 자바스크립트의 본질을 테스트에 반영하려는 철학을 기반으로 설계되었다.
import { describe, it } from 'poku';
describe('My Test', async () => {
console.log('Started');
await it(async () => {
// async test
console.log('Test 1');
});
await it(async () => {
// async test
console.log('Test 2');
});
console.log('Done');
});이 코드는 Poku를 사용해 비동기 테스트를 순차적으로 실행하며, JavaScript의 본래 실행 순서를 보존한다. 모든 JavaScript 런타임에서 동일한 테스트 스위트를 사용할 수 있도록 지원하는 것이 특징이다.
JAWSM - JavaScript to WASM compiler
JAWSM은 JavaScript를 Web Assembly(WASM)로 컴파일하는 도구다. WASM GC와 예외 처리를 활용하여 JavaScript의 주요 기능을 WASM으로 구현하며, 메모리 사용량을 줄이고 성능을 향상한다.
bare
Bare는 데스크톱과 모바일에서 작동하는 작고 모듈화 된 JavaScript 런타임이다. Node.js와 유사하지만, 임베딩과 크로스 디바이스 지원을 핵심으로 설계되어 네트워크 기반의 P2P 애플리케이션에 적합하다.
mcp.so
MCP는 AI 시스템이 외부 데이터 소스와 도구에 안전하게 연결할 수 있도록 하는 오픈소스 프로토콜로, 이 서비스는 다양한 MCP서버와 클라이언트들을 모아놓은 디렉터리로 필요한 MCP 도구들을 찾아볼 수 있다.
🧑🏻💻 from NAVER Front-end
커넥트 라운지 X 북토크: 책 쓰는 네이버 개발자들의 이야기
지난 3월 네이버 사옥에서 진행되었던 북토크 형식의 세션으로, "나는 네이버 프런트엔드 개발자입니다" 책의 저자들과 함께 출간 과정 및 8인 저자들의 다양한 프런트엔드 커리어 경험담을 들어볼 수 있다.
State of FE·JS Korea 2025
이 설문조사는 국내 개발자들이 어떤 FE/JS 환경에서 개발하고 있는지를 파악하고, 이를 공유해 국내 생태계에 도움을 주고자 기획되었다. 설문조사의 주요 목적은 다음과 같다:
어떤 기술 영역에서 집중이 필요한지 판단할 수 있는 지표를 공유
국내 개발자들의 FE/JS 환경을 확인해 기술 스택 선택을 도와주는 역할
설문조사 참여하기!
조사 기간 : 2025년 4월 7일(월) ~ 5/16(금)