XState의 창시자인 David Khourshid가 소개하는 useState 패턴에서 벗어나는 방법에 대한 YouTube 영상이다. useState 사용을 피하는것이 좋은 케이스를 보이며, 더 나은 상태 관리 패턴과 접근 방식을 제시한다. 복잡한 상태 로직을 더 효과적으로 처리하고 코드의 가독성과 유지 보수성을 향상시키는 방법을 다룬다.
David Khourshid는 3년 전 useEffect에서 벗어나는 방법을 설명했다. Goodbye UseEffect 영상을 참고하자.
URL의 검색 파라미터를 일급 상태로 다루는 방법에 대한 TanStack 블로그 포스트다. 전통적인 접근 방식에서 발생하는 문제점들을 설명하고, TanStack Router가 라우트 레벨 스키마 검증을 통해 상태 조정 문제를 어떻게 해결하는지를 다룬다. URL 파라미터와 컴포넌트 상태 간의 동기화 문제, 타입 안전성 확보, 그리고 복잡한 상태 관리 시나리오에서의 최적화 방법을 제시한다.
URL 타입 안전성의 복잡한 문제들을 빙산에 비유하여 설명하는 nuqs 블로그 포스트다. 기본적인 읽기 안전성을 넘어서 쓰기 안전성, 시간 안전성(브라우저 제한), 불변성 문제 등 URL 상태 관리의 숨겨진 복잡성을 다룬다. 브라우저의 속도 제한, 히스토리 스택 관리, 동시성 문제 등 실제 프로덕션 환경에서 마주치는 다양한 엣지 케이스들을 상세히 분석한다.
패스키에 대한 종합적인 설명 글이다. 피싱에 강한 인증 방식으로서의 패스키의 장점, 다양한 플랫폼에서의 설정 과정, 보안상의 이점을 일반인도 이해하기 쉽게 설명한다. 전통적인 비밀번호 방식의 한계를 지적하고, 패스키가 어떻게 더 안전하고 편리한 인증 경험을 제공하는지 실제 사용 예시와 함께 다룬다.
React 생태계와 커뮤니티 현황에 대한 광범위한 분석 글이다. React의 발전 과정, Vercel의 영향력에 대한 커뮤니티 우려, 프레임워크 추천 사항, 서버 컴포넌트 등을 다룬다. Meta와 Vercel 간의 관계가 React 생태계에 미치는 영향과 개발자들이 앞으로 고려해야 할 사항들을 심도 있게 분석한다.
Andrej Karpathy가 AI와 LLM의 등장으로 소프트웨어 개발 패러다임이 어떻게 변화하고 있는지 설명한다. 전통적인 프로그래밍 방식에서 프롬프트 엔지니어링과 AI 협업으로 개발자의 역할이 진화하고 있음을 다룬다. 개발자가 코드를 직접 작성하던 시대에서 AI와 함께 문제 해결에 집중하는 방향으로 바뀌고 있으며, 이로 인한 소프트웨어 산업 전반의 변화를 심도 있게 분석한다.
소프트웨어가 다시 한번 근본적으로 변화하고 있으며, 이는 업계에 진출하기에 매우 특별하고 흥미로운 시기임을 의미한다. 지난 70년간 소프트웨어는 몇 차례의 큰 변화를 겪었으며, 현재 우리는 또 다른 변혁의 시대를 맞이하고 있다.
소프트웨어는 크게 세 가지 패러다임으로 나눌 수 있으며 1.0은 컴퓨터를 위해 작성하는 코드, 2.0은 신경망의 가중치, 그리고 3.0은 LLM을 프로그래밍하는 프롬프트로 정의할 수 있다.
JavaScript에서 오류 처리는 매우 중요한 개발 기술이지만, 종종 코드 작성 시 간과되기 쉽다. 이 글에서 저자는 JavaScript의 내장 Error 객체와 다양한 오류 타입(SyntaxError, TypeError, RangeError 등)의 효과적인 활용법을 설명한다. 특히 커스텀 에러 클래스를 생성하여 사용자 정의 오류 처리의 중요성을 강조하며, 이를 통해 더 구체적이고 의미 있는 오류 메시지를 제공할 수 있음을 보여준다.
또한 try-catch 구문을 사용한 오류 핸들링과 함께, 비동기 코드에서의 오류 처리 방법, 그리고 TypeScript를 활용한 타입 안전성 개선에 대해서도 다루고 있다. 좋은 오류 처리는 단순히 코드 실패를 방지하는 것을 넘어, 디버깅 시간을 줄이고 코드 품질을 향상시키는 필수적인 요소라는 점을 강조한다.
빌 게이츠, 스티브 발머, 사티아 나델라 세 CEO의 리더십을 중심으로 마이크로소프트의 50년 역사를 다룬 다큐멘터리다. PC 시대부터 클라우드 컴퓨팅, 최근 AI 혁명까지 기술 트렌드에 회사가 어떻게 적응하고 위기를 극복해왔는지 보여준다. 특히 나델라 체제에서 클라우드 중심 기업으로의 성공적인 전환과 OpenAI 투자를 통한 AI 분야 선점 노력이 상세히 다뤄진다.
2025년 6월 25일, Ecma International의 129차 총회에서 ECMAScript 2025 언어 사양이 공식적으로 승인되었다.
이번 버전에는 8가지 주요 기능이 추가되었으며, 특히 모듈 시스템의 개선과 Iterator 관련 기능이 크게 강화되었다. 주요 추가 기능으로는 JSON 모듈을 지원하는 Import attributes, 함수형 프로그래밍을 지원하는 Iterator helper methods, Set 객체의 수학적 연산을 지원하는 새로운 메서드들, 정규 표현식의 인라인 플래그와 duplicate names capture groups, Promise 체인을 시작하는 Promise.try(), 16-bit floating point(Math.f16round(), New element type for the Typed Arrays API) 지원 등이 포함되어 있다. 이러한 기능들은 JavaScript 개발자들이 더욱 효율적이고 표현력 있는 코드를 작성할 수 있도록 도와준다.
링크 문서에서는 새롭게 추가된 각 명세들에 대한 소개와 간단한 예제들이 제공되어 새로운 명세를 빠르게 이해할 수 있다.
JSON modules와 Import attributes가 모든 최신 브라우저에서 사용할 수 있게 되었다.
이제 일반 import 구문이나 fetch() → Response.json() 같은 작업 없이 import 구문에 JSON attribute를 지정하면 JSON 타입을 미리 인지해 별도 변환 작업없이 즉시 사용할 수 있다. 이는 JSON 데이터를 다루는 방식을 크게 단순화한다.
// apod.json
{
"explanation": "Can you find the Rosette Nebula? The red ...",
"title": "Rosette Nebula Deep Field",
"url": "https://apod.nasa.gov/apod/image/2506/RosettaDeepRed_Mendez_960.jpg"
}import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };
const {explanation, title, url} = astronomyPictureOfTheDay;[참고] 데모를 실행해 직접 확인해 볼 수 있다.
FE News 24/7월 소식을 통해 소개했었던 브라우저와 관련 표준, 그리고 웹 엔진 주제들을 집중적으로 다루는 Web Engines Hackfest 2025 콘퍼런스가 지난 6월2~4일, 스페인 Galicia에서 진행되었다.
전체 세션들의 목록과 소개는 다음과 같다.
- Compiling JavaScript ahead-of-time - Oliver Medhurst (발표 슬라이드) 오늘날 모든 JS 엔진은 기본적으로 적시 컴파일을 지원하지만, C++나 Rust처럼 미리 컴파일하는 것은 어떨까? 이전에는 무시되었지만, 이 강연에서 설명할 Porffor와 같은 새로운 오픈 소스 프로젝트와 함께 다시 부활하고 있다.
- WinterTC: a standard for server-side runtimes - Andreu Botella & Luca Casonato (발표 슬라이드) 서버측 및 엣지 JavaScript 런타임(예: Node.js, Deno, Bun, Cloudflare Workers...)은 시간이 지남에 따라 점점 더 많은 웹 API를 채택하고 있다. 그러나 이러한 API를 정의하는 웹 사양은 일반적으로 서버 측 런타임을 크게 고려하지 않고 브라우저를 염두에 두고 작성되기 때문에 구현마다 차이가 발생한다. 2022년 시작된 WinterCG는 서버 및 엣지 런타임 위한 최소 공통 API 표준화 작업위한 W3C 커뮤니티 그룹이다.
- JSR: under the hood & native support in the ecosystem - Leo Kettmeir (발표 슬라이드) JSR(JavaScript Registry)은 pnpm, Yarn, Deno에서 기본적으로 지원되는 npm의 최신 대안이지만 아직 npm과 Node.js에서는 지원되지 않아 모듈 생태계에 공백이 생기고 모듈 작성자가 불편을 겪고 있다. 이 세션은 JSR의 다양한 측면, 기능 및 특징, 현재 툴링이 이를 지원하는 방법, 그리고 기본적으로 지원을 추가할 수 있는 방법에 대해 다룬다.
- Bridging CommonJS and ESM in Node.js - Joyee Cheung (발표 슬라이드) ESM은 2020년부터 Node.js에서 안정화되었지만 생태계에서의 채택은 예상보다 느린 것으로 판명되었고, CommonJS와 ESM 간의 상호 운용성은 개발자들에게 공통된 고통의 원인이었다. 흥미롭게도 중요한 요인 중 하나는 Node.js에서 require(esm)을 지원하지 않는다는 것이었고, 이 격차는 2024년부터 메워지기 시작해 2025년 5월에는 지원되는 모든 Node.js 릴리스 라인이 require(esm)을 지원하게 되었다. 이 세션은 CommonJS/ESM 상호 운용성의 역사, Node.js에서 require(esm)가 내부적으로 어떻게 작동하는지, 그리고 출시 과정에서 직면한 문제를 살펴본다.
- Cross-Engine Contributions at Scale: How newcomers accelerated Temporal... - Haukenes, Barash & Carr (발표 슬라이드) 스파이더몽키, V8, 보아에서 TC39 제안을 구현하는 여정에 대한 이야기를 소개한다. 신규 기여자가 각 프로젝트에 참여하는 것이 얼마나 쉬운지 또는 어려운지 살펴보고, 엔진 내부를 탐색할 때의 어려움과 이를 극복하는 데 도움이 된 요소, 그리고 이러한 경험을 커뮤니티 중심의 튜토리얼로 전환한 방법을 중점적으로 다룬다.
- Versioned Web Components - Christian Ulbrich (발표 슬라이드) 웹 컴포넌트가 완전히 새로운 것은 아니지만, 마이크로 Front-end를 위한 컨테이너이자 프레임워크에 구애받지 않는 UI 라이브러리를 구축하는 방법으로서 다양한 사용 사례에 점점 더 많이 채택되고 있다. 가장 큰 문제 중 하나는 기존 웹 컴포넌트를 재정의할 방법이 없거나, 더 정확하게는 특정 태그 이름에 대해 사용자 정의 요소를 한 번만 정의할 수 있다는 것이다. 범위 지정 사용자 정의 요소 레지스트리라는 이 문제를 완화하기 위한 제안이 있지만, 실제로 실현되지 않았고 몇 가지 문제가 있는데, 웹 컴포넌트의 버전 관리 방법, 즉 웹 애플리케이션의 수명 주기에서 동일한 태그를 가진 사용자 정의 요소를 "버전 관리"할 수 있는 방법에 대한 제안을 다룬다.
- Jumping Over the Garden Wall – WPE WebKit on Android - Adrián Pérez de Castro (발표 슬라이드) WPE-Android 프로젝트의 소개와 역사, 그리고 유연하고 임베딩 가능한 웹 엔진을 통해 예상치 못한 플랫폼에서 작동할 수 있게 되어 원래의 Android 시스템 웹 엔진을 되살린 방법에 대해 설명한다.
- Automating Assistive Tech with Standards - Mike Pennisi (발표 슬라이드) AT Driver는 스크린 리더와 같은 보조 기술(AT - Assistive Technology)을 제어하기 위한 프로토콜이다. 이 세션은 AT 자동화의 고유한 과제를 살펴보고, 최신 구현 현황을 공유하고, AT 사용자의 경험을 표면화하는 동시 표준 작업을 검토하고, 이러한 노력의 미래를 논의한다.
- Built-in AI APIs for the Web - Thomas Steiner (발표 슬라이드) 오디오 트랜스크립션, 이미지 설명, 작문 지원, 텍스트 교정, 콘텐츠 번역 등 다양한 용도로 AI 모델을 활용하는 사용 사례는 매우 많다. 이러한 사용 사례를 실현하기 위해서는 크게 세 가지 옵션이 있다. 1. 클라우드의 강력한 서버 어딘가에서 실행 중인 AI 모델에 데이터를 전송하거나, 2. 대용량 모델 파일을 클라이언트로 다운로드하여 로컬에서 실행하거나, 3. 기기나 브라우저에 내장된 공유 모델을 사용하는 방법이 있으며, 이 세션은 이 영역에 포함되는 다양한 API 들의 제안들을 소개한다.
서버나 데이터베이스 없이 Astro에서 관련 포스트를 구현하는 기술적 가이드다. Hugging Face의 transformers.js를 사용하여 벡터 임베딩을 생성하고, 의미론적 유사성을 통해 관련 포스트를 추천하는 완전한 TypeScript 구현을 제시한다. 정적 사이트 생성 시점에 모든 처리를 완료하여 런타임 의존성을 제거하는 혁신적인 접근 방식을 소개한다.
React에서 세밀한 반응성(fine-grained reactivity)을 구현하는 방법을 설명하는 튜토리얼이다. 전통적인 React의 컴포넌트 단위 리렌더링과 달리, 상태 변화시 정확히 필요한 부분만 업데이트하는 효율적인 시스템을 35줄 미만의 코드로 구현한다. 프록시를 활용한 반응형 스토어 패턴과 computed 값 자동 갱신, 의존성 추적 등 Solid.js나 Vue.js와 유사한 반응성을 React에서 구현하는 실용적인 접근 방식을 제시한다. useState와 useEffect의 복잡한 의존성 관리 없이도 성능 최적화와 깔끔한 코드 구조를 동시에 얻을 수 있는 방법을 다룬다.
마이크로소프트에서 제공하는 Model Context Protocol(MCP) 한국어 학습 자료로, AI 모델과의 효과적인 상호작용을 위한 표준화된 방법을 배울 수 있다. 기본 개념부터 실제 응용까지 단계별로 설명하여 AI 개발 입문자에게 적합하다. LLM과의 효과적인 프롬프트 작성법과 컨텍스트 관리 방법을 체계적으로 학습할 수 있어 AI 애플리케이션 개발에 관심 있는 개발자에게 유용한 자료다.
$ yarn i18n:check --locales locales --source en-en -f next-intl -u src
i18n translations checker
Source: en-en
Found missing keys!
┌──────────────────────────────┬────────────┐
│ file │ key │
├──────────────────────────────┼────────────┤
│ messageExamples/de-de.json │ richText │
│ messageExamples/de-de.json │ nesting1 │
│ messageExamples/de-de.json │ key1 │
└──────────────────────────────┴────────────┘
Found invalid keys!
┌──────────────────────────────┬─────────────────────┐
│ file │ key │
├──────────────────────────────┼─────────────────────┤
│ messageExamples/de-de.json │ multipleVariables │
└──────────────────────────────┴─────────────────────┘React와 Next.js 애플리케이션의 국제화(i18n) 설정을 검증하는 CLI 도구다. react-intl, react-i18next, next-intl, next-i18next 라이브러리를 지원하며, 번역 파일에서 누락된 키, 잘못된 키, 사용되지 않는 키, 정의되지 않은 키 등을 감지한다. GitHub Actions와 통합하여 CI/CD 파이프라인에서 번역 품질을 자동으로 검증할 수 있으며, 프로그래밍 방식의 API도 제공한다.
Lingo.dev 컴파일러는 어떤 React 앱이더라도 빌드 시점에 다중 언어를 지원할 수 있도록 만들어 주는 미들웨어로, 기존 React 컴포넌트를 수정할 필요가 전혀 없다.
Next.js의 경우라면, 다음과 같이 디폴트 언어(영어)를 스페인어와 프랑스어를 지원하도록 할 수 있다.
import lingoCompiler from 'lingo.dev/compiler';
const existingNextConfig = {};
export default lingoCompiler.next({
sourceLocale: 'en',
targetLocales: ['es', 'fr'],
})(existingNextConfig);
YOYO는 Vibe Coding을 위한 형성관리 도구이다. 일반적인 버전관리는 코드의 변경에 따라 커밋을 생성하지만, YOYO는 AI 모델의 변경 사항을 추적하고 관리하는 데 중점을 둔다. AI 모델의 버전 관리를 통해 개발자는 모델의 성능을 지속적으로 개선하고, 이전 버전으로 쉽게 롤백할 수 있다. YOYO는 AI 개발자들이 모델의 실험과 결과를 체계적으로 관리할 수 있도록 도와준다.
컨셉과 사용에 대한 예제는 다음의 동영상을 통해 확인해 보기 바란다.
Model Context Protocol(MCP) Containers는 AI 모델과 애플리케이션 간의 통신을 표준화하는 컨테이너 솔루션이다. 다양한 AI 모델을 일관된 방식으로 패키징하고 배포할 수 있어 개발 과정이 간소화된다. 컨텍스트 처리와 프롬프트 관리를 위한 통합 인터페이스를 제공하여 개발자가 모델 간 호환성 문제를 효율적으로 해결할 수 있으며, AI 애플리케이션 개발 과정의 복잡성을 크게 줄여준다.
코드 포매터 Prettier의 3.6 버전으로 실험적 고성능 CLI 옵션(--experimental-cli)을 도입했다. Rust 기반 OXC 파서를 사용하는 @prettier/plugin-oxc와 Hermes 엔진 기반 Flow 지원을 위한 @prettier/plugin-hermes 플러그인이 새로 추가되었다. JavaScript, TypeScript, CSS, HTML, Angular 등 다양한 도구 및 환경에서 개선이 이뤄졌다.
프론트엔드 빌드 도구 Vite의 7.0 버전이 출시되었다. 이번 버전은 Node.js 20.19+ 또는 22.12+가 요구되는데, node.js에서 별도의 flag 없이 ESM 모듈을 require 하기 위한 조치이다. 기본 브라우저 타겟이 'modules'에서 'baseline-widely-available'로 변경되어서 유의가 필요하다. Rust 기반의 고성능 Rolldown 번들러를 선택적으로 사용할 수 있다. Vite 6에서 실험적으로 추가된 Environment API는 여전히 실험적인 상태를 유지하며 생태계의 리뷰를 충분히 받겠다는 메시지를 전달했다.
Dia Browser는 Arc Browser의 개발사인 The Browser Company가 개발한 AI 중심 브라우저로, 작년 돌연 개발 중단한 Arc Browser의 후속작이다. AI를 브라우저 경험의 핵심에 배치하여 URL 바에서 직접 챗봇과 상호작용할 수 있으며, "탭과 채팅하기" 기능을 통해 현재 열린 탭들의 내용을 기반으로 질문에 답변 받을 수 있는 것이 특징이다. Skills 시스템으로 반복 작업을 자동화하고, 개인 맞춤 설정이 가능하다. 현재 베타 단계이며 macOS M1 이상에서만 사용 가능하다.
npm 패키지를 설치 없이 바로 테스트해볼 수 있는 온라인 서비스다. 개발자가 새 라이브러리를 프로젝트에 도입하기 전에 기능과 API를 빠르게 확인할 수 있어 시간을 절약해준다. 브라우저에서 직접 코드를 작성하고 실행할 수 있으며, 여러 버전 간 비교도 가능하다. 특히 다양한 라이브러리를 효율적으로 평가하려는 프론트엔드 개발자에게 실용적인 도구로 활용된다.
Hurl은 간결한 텍스트 형식으로 HTTP 요청을 정의하고 실행할 수 있는 커맨드 라인 도구다. curl과 유사하지만 강력한 테스트 및 검증 기능이 내장되어 있어 REST API를 테스트하고 디버깅하는 데 특화되어 있다. HTTP 응답의 상태 코드, 헤더, 본문 등을 자동으로 검증할 수 있으며, 변수를 사용해 동적인 요청도 구성할 수 있다. CI/CD 파이프라인에 쉽게 통합되어 API 자동화 테스트를 간소화하며, 복잡한 시나리오도 간결한 문법으로 표현할 수 있어 개발자의 생산성을 크게 향상시킨다.
pkg.vc는 JavaScript와 TypeScript 모듈을 클라우드에서 즉시 테스트할 수 있는 온라인 플레이그라운드 서비스다.
개발자가 로컬 환경 설정 없이 브라우저에서 바로 npm 패키지의 동작을 검증하고 다양한 사용 시나리오를 테스트할 수 있어 시간을 절약해준다. 라이브러리의 API를 빠르게 탐색하고 여러 버전 간의 차이점을 비교할 수 있으며, 코드 예제를 손쉽게 공유할 수 있는 기능도 제공한다. 특히 오픈소스 기여자나 라이브러리 메인테이너에게 효율적인 개발 도구로, 의존성 문제나 호환성 이슈를 사전에 발견할 수 있어 개발 생산성을 크게 향상시킨다.
애플이 WWDC25 행사를 통해 공개한 liquid glass 디자인을 적용할 수 있는 react 컴포넌트로 세부 배경 필터와 SVG 변위 매핑을 사용해 멋진 액체 유리 효과를 손쉽게 만들 수 있다.
[참고] CSS만을 사용한 구현 방법을 확인하고 싶다면, 다음 링크를 참고하라.
지난 2025년 4월 7일부터 5월 16일까지 국내 FE/JS 개발자를 대상으로 진행되었던 'State of FE·JS Korea 2025' 설문조사 결과를 확인해 볼 수 있다.
국내 FE 개발자들이 사용하는 개발/기술 스택 환경 등과 함께 AI 도구에 대한 의견까지 다양한 영역에서 인사이트를 얻을 수 있는 다채로운 데이터를 확인해 볼 수 있다.