이번 ViteConf 2024에서 Vite의 창립자 Evan You는 기조연설에서 Vite의 성과와 자바스크립트 도구들의 미래에 대해 발표했다. Vite는 매주 1500만 다운로드를 기록하며 JavaScript 생태계의 필수 도구로 자리 잡았고, Vitest도 Jest를 대체하며 인기를 끌고 있다.
그러나, 다양한 도구의 결합으로 비효율성과 대규모 앱의 네트워크 오버헤드 문제가 발현되었고, 이를 해결하고자 통합 툴체인 개발을 위해 VoidZero를 설립하고, Oxc와 Rolldown을 개발하였다. Oxc는 빠르고 메모리 효율적이며, Rolldown은 대규모 프로젝트의 성능을 크게 개선할 수 있도록 설계되었다. 이를 통해 빠르고 일관성 있는 개발 환경을 제공하고, 통합된 툴체인을 구축하려는 비전을 발표했다.
총 43개의 세션들 중 인기 있는 5개 세션을 소개한다.
- Evan You | Keynote: Vite and the Future of JavaScript Tooling | ViteConf 2024
- Ben Holmes | The Future of the Web is Local First | ViteConf 2024
- Rich Harris | Svelte 5: Beyond Components | ViteConf 2024
- Boshen Chen | Oxc and Rolldown | ViteConf 2024
- Ryan Carniato | Crossing the Network Chasm | ViteConf 2024
ViteConf 2024에서 발표한 내용과 같이, Evan You는 JavaScript 생태계의 고성능 통합 툴체인 구축을 위해 VoidZero를 창업했다.
Vite는 개발자 경험을 크게 개선했지만 내부적으로 많은 문제가 있었고, 이를 해결하기 위해 새로운 번들러인 Rolldown을 설계하면서, 당면한 문제가 JavaScript 생태계 전체의 문제임을 인식하고 이를 해결하기 위해 VoidZero를 설립하였다. 이 글을 통해 VoidZero의 성과와 자세한 비전을 알 수 있다.
이번 Next.js Conf 2024에서 Guillermo Rauch는 기조연설을 통해 지난 1년 동안의 발전이 전적으로 커뮤니티의 공헌 덕분이라며 깊은 감사의 마음을 전했다. 그는 Next.js의 복잡성을 인정하면서, 이를 더 쉽게 이해하고 사용할 수 있도록 개선해 나가고 있다고 강조했다. 또한, Turbopack의 속도 개선, 데이터 캐싱 및 렌더링 방식의 최적화, 그리고 개발자 경험을 향상시키기 위한 에러 메시지 개선 등을 발표하며 Next.js의 지속적인 발전 방향을 제시했다.
총 9개의 세션들 중 인기 있는 3개 세션을 소개한다.
- Next.js Conf 2024 Opening Keynote
- AMA: Next.js Team
- React Server Components: Elevating speed, interactivity, and user experience
Adobe에서 내부적으로 공유된 번들러의 과거, 현재, 미래에 대한 영상이다. 스크립트 태그와 스타일 시트를 사용하던 초기 시절부터 최신 웹 툴링의 복잡한 환경까지의 발전 과정, 번들러를 사용하는 이유, 그리고 해결된 문제들을 설명한다. CJS/AMD 같은 모듈 시스템의 등장부터 Browserify, Webpack, Parcel, esbuild, 그리고 Parcel 2까지의 발전을 다루며, 향후 전망도 제시한다.
이 글은 현대 웹 개발에서의 기술 스택 과잉이 불필요한 복잡성을 초래하고 있으며, 그 결과로 성능 저하와 사용자 경험의 악화를 불러일으키고 있다고 비판한다.
JavaScript는 ES2015부터 기본값 매개변수를 지원했다. 이 사실은 알았지만, 이전의 형제 매개변수 자체를 기본값으로 활용할 수 있다는 사실을 최근에 알게 된 저자가 MDN의 기본 사용법뿐만 아니라 시나리오를 통해 클래스 생성자에서 이를 유용하게 활용하는 방법을 소개한다.
일반적으로 사용되는 기술 용어, 개념, 프로그래밍 언어 전문 용어에 대한 설명과 이와 관련된 추가 자료를 위한 링크가 제공된다. 오픈 소스이며 광고가 없다.
웹 브라우저는 어디에나 있지만 어떻게 작동할까? 이 책은 웹 브라우저의 작동 원리를 배우고 이해하고자 하는 사람들을 위한 책이다. 네트워킹부터 렌더링, JavaScript까지 기본적이면서도 완벽한 웹 브라우저를 수천 줄의 파이썬으로 구축하는 방법을 설명한다.
브라우저 확장 프로그램에서 샌드박스 탈출을 허용하는 Chrome 웹 브라우저의 취약점인 CVE-2024-6778과 CVE-2024-5836을 어떻게 발견했는지 자세히 설명한다. 공격자는 이 버그를 통해 단순히 비밀번호를 훔치고 브라우저를 손상시키는 데 그치지 않고 전체 운영 체제를 제어할 수 있었다.
Text fragments를 사용하면 웹 문서의 특정 텍스트 부분에 직접 연결할 수 있다. 브라우저에서 색상 강조 표시와 페이지 스크롤을 지원하며 사용자가 서로에게 전달할 수 있는 효과적인 콘텐츠 공유 링크를 생성하는 데 사용될 수 있다.
https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
- 특정 텍스트 부분에 대한 링크를 생성하는 기능은 이미 Chromium 기반 브라우저에 내장되어있다.
React 프로젝트 구조에 고민이 많다면, 이 글에서 소개하는 5단계 접근법을 고려해 보자. 작은 프로젝트에서 시작해 점차 규모를 키워가는 과정을 설명하며, React 컴포넌트를 효율적으로 정리하고 구성하는 방법을 제시한다.
저자의 경험을 바탕으로 작성된 내용이기에 모든 상황에 꼭 맞지는 않겠지만, 가이드로 삼기에 충분히 참고할 만하다.
- Single React File
- Multiple React Files
- From Files to Folders in React
- Technical Folders in React
- Feature Folders in React
Deno는 Node.js의 창시자 Ryan Dahl이 2018년 JSConf EU에서 발표한 '10 Things I Regret About Node.js' 를 통해 소개되었다. Deno는 Node.js의 보안, 타입스크립트 지원, 패키지 관리 등 여러 단점을 개선하고자 하였으나, 이미 Node.js에 익숙한 개발자들은 쉽게 Deno로 전환하지 못했다.
그러나 이번 Deno 2.0 업데이트를 통해 Node.js 및 npm 호환성을 충분히 지원하며, package.json과 node_modules를 공식적으로 지원하게 되어 더 많은 사용자를 유치할 수 있게 되었다.
이외에도 다양한 새로운 기능과 개선 사항들이 소개되었다.
이 글에서는 Back-End 사용에 있어 Node.js와 Bun의 벤치마크 테스트를 통해 확인한다. Bun은 공식 홈페이지에서 Node.js보다 최대 5배 이상의 요청을 처리할 수 있다고 주장한다. 그래서 저자는 실제로 이렇게 성능이 차이가 나는지 직접 테스트를 진행한다. 테스트 결과 데이터베이스의 사용 여부가 성능에 큰 영향을 미쳤는데, 이유가 무엇인지 설명한다.
이 글에서는 Bun이 C 코드를 JavaScript에서 직접 컴파일하고 실행하는 방법을 소개한다. 특히 기존 N-API와 WebAssembly의 한계를 지적하며, Bun이 어떻게 더 나은 성능과 효율을 제공하는지 설명한다.
ESLint가 JSON 및 Markdown 파일에 대한 린팅 지원을 추가했다. 이를 통해 이제 프로젝트 내에서 문서와 설정 파일 등의 일관성도 관리할 수 있을 것으로 보인다. ESLint는 웹 개발에 필요한 모든 형식에 대한 린팅 지원을 목표로 해왔으며, 이번 업데이트는 그 방향으로 나아가는 단계라고 설명한다.
이 글에서는 JavaScript Blob과 File 객체의 특징과 사용 예제를 통해 차이점을 쉽게 설명한다. 그리고 예제를 통해 언제 어떤 것을 사용해야 할지 이해할 수 있다.
Create React App은 de facto 처럼 사용되었다. 최근 업데이트가 중단되었고, 유지 보수와 성능에 문제를 일으킬 가능성이 커졌다. 저자는 CRA로 만들어진 ReCalendar를 Vite로 전환하는 과정에서 생긴 문제와 해결 방법을 작성하고 CRA를 Vite로 전환하는 것을 추천하였다.
저자는 애니메이션이 인터랙션 디자인의 중요한 요소이기 때문에 마스터하기 어려운 분야라고 설명한다. 이에 따라 저자가 얻은 이해를 바탕으로 가이드를 제시한다. 단일 요소 애니메이션, 복수 요소 애니메이션, 레이아웃 변경 애니메이션을 다루고, 나아가 애니메이션이 언제 선호되는지와 CSS와 JS 기반 애니메이션의 차이점까지 설명한다.
대규모 Front-end 애플리케이션 구축에 관련된 모든 내용을 한 번에 배울 수 있는 무료 동영상 강좌다. 4개의 큰 챕터로 구성되어 있으며, 단순하게 특정 애플리케이션을 복제해 개발을 학습하지 않고 아키텍처 관점과 설계 관점을 다루고 있어, 기본기를 높이는 데 도움이 될 수 있다.
신규 기능이 추가되지는 않았으나, 번들 사이즈가 절반 이하로 줄었다.
deprecated 상태의 기능들과 오래된 것들이 제거되었다. UMD/SystemJS, ES5 지원 또한 중단되었다.
24년 1월 소식을 통해 공유했었던 Oxc 프로젝트에서 새로운 트랜스파일러를 공개했다.
Chrome 확장 프로그램을 통해, 웹 사이트에서 누락된 ARIA 라벨, 잘못 사용된 ARIA 역할, 불완전한 키보드 지원을 쉽게 발견하고 테스트할 수 있다.
입력한 NPM 패키지가 갖고 있는 의존성 패키지들을 시각화해 표현해 준다.