안녕하세요 ^_~ ;
저는 Lamine입니다. ViteConf 2024의 하이라이트를 탐구하는 첫 번째 기술 기사를 공유하게 되어 기쁘게 생각합니다. 기술 문서 작성에 관심을 갖고 있는 기술 애호가로서 향후 콘텐츠를 개선하는 데 도움이 되는 피드백과 제안을 기대합니다.
컨퍼런스 세부 사항을 살펴보기 전에 Vite와 ViteConf가 무엇인지 살펴보겠습니다.
Vite는 Vue.js 창시자인 Evan You가 만든 차세대 프런트엔드 빌드 도구입니다. 기본 ES 모듈을 사용하는 개발 서버를 통해 초고속 HMR(핫 모듈 교체)을 제공하여 웹 개발 경험을 크게 향상시킵니다. 간단한 구성으로 Vite는 Rollup을 사용하여 코드를 묶고 효율적인 코드 변환을 위해 SWC(Speedy Web Compiler)를 활용합니다.
ViteConf는 Vite 커뮤니티를 참여적이고 대화형 형식으로 하나로 모으는 연례 무료 온라인 이벤트입니다. 전문가와 매니아가 모여 지식을 공유하고 새로운 기능을 선보입니다. 올해(2024년 10월 3~4일)는 12시간 마라톤에서 43개의 워크숍이 진행되는 세 번째 행사였습니다.
기술적인 세부 사항이 많아 12시간 분량의 콘텐츠를 요약하는 것은 어렵습니다. 하지만 중요한 내용은 생략하지 않고 최대한 요약하려고 노력했습니다. 기사를 단순화하기 위해 대부분의 ViteConf 강연의 원래 제목을 유지하고 8개의 주요 섹션으로 구성했습니다.
저희 이벤트에서는 Vite의 미래를 위한 길을 닦는 몇 가지 중요한 발표가 있었습니다. 비전 있는 발표자들은 웹 개발을 재편할 수 있는 잠재력을 지닌 판도를 바꾸는 도구와 플랫폼을 소개했습니다. 하이라이트를 살펴보겠습니다!
Evan You는 차세대 JavaScript 도구 구축에 주력하는 새로운 회사인 Void Zero를 발표했습니다. 이 회사는 개발자 도구 분야의 숙련된 창립자들의 참여를 통해 Accel 및 Amplify Partners가 주도하는 시드 자금에서 460만 달러를 모금했습니다. Void Zero는 JavaScript 개발을 위해 런타임에 구애받지 않는 통합된 고성능 구성 가능한 도구 체인을 생성하려는 Evan의 비전을 실현하기 위해 노력하고 있습니다. Evan은 또한 Void Zero의 현재 진행 상황에 대해 논의하고 놀라게 될 몇 가지 인상적인 테스트 벤치마크를 공유했습니다.
StackBlitz의 공동 창립자인 Eric Simons는 StackBlitz의 WebContainer 기술의 확립된 기능을 활용하여 웹 개발 환경을 재편할 혁신적인 도구인 Bolt.new를 발표했습니다. Bolt.new는 최첨단 대규모 언어 모델 Claude 및 V0를 기반으로 즉각적인 프로젝트 생성, 디버깅, 오류 수정 및 배포가 가능한 풀 스택, 브라우저 내 환경을 개발자에게 제공합니다.
Eric은 Bolt.new가 설정 시간을 없애기 위해 어떻게 설계되었는지 설명했습니다. 개발자는 간단한 프롬프트를 입력하여 완전히 구성된 애플리케이션을 브라우저에서 직접 생성할 수 있으며, 이는 진정한 판도를 바꾸는 일입니다. 통합된 패키지 관리 및 종속성 처리를 통해 그의 강연에서 보여준 힘은 비교할 수 없을 만큼 뛰어났습니다. 그 잠재력을 파악하는 가장 좋은 방법은 Bolt.new를 직접 사용해 보는 것입니다.
Eric은 이 발표에 멈추지 않고 또 다른 주요 업데이트도 공개했습니다. Bolt.new Core는 이제 오픈 소스이며 github에서 사용할 수 있습니다.
Evan이 OXC 및 Rolldown과 향후 Vite 환경과의 통합에 대해 소개한 후 Oxc 프로젝트 창시자인 Boshen Chen은 Rust로 작성된 야심차고 고성능이며 완전히 통합된 JavaScript 도구 체인인 OXC를 소개했습니다. 성능과 개발자 경험을 향상시킵니다. 구성은 다음과 같습니다.
향후 계획된 구성 요소는 다음과 같습니다.
Boshen은 또한 OXC를 핵심 엔진으로 사용하는 Vite의 미래 번들러인 Rolldown을 소개했습니다. 롤다운은 고성능을 제공하며 트리 쉐이킹, 코드 분할, 플러그인 호환성 등 다양한 기능을 지원합니다.
다음 단계에는 OXC 및 Rolldown과의 Vite 통합이 포함되어 있어 성능이 크게 향상되고 개발자 경험이 더욱 일관되며 더 크고 복잡한 웹 애플리케이션을 처리할 수 있는 능력이 향상됩니다.
Matias(Patak)는 Vite의 유연성과 성능을 향상시키기 위해 설계된 획기적인 발전인 Environment API를 공개했습니다. 이 API를 사용하면 개발자는 단일 Vite 프로젝트 내에서 여러 환경(예: 클라이언트, 서버, 에지)을 정의하여 개발 및 배포 프로세스를 간소화할 수 있습니다. 그는 ViteConf의 첫 해부터 Nuxt, Remix, TanStack과 같은 메타 프레임워크의 유입에 주목했습니다.
강연의 주요 내용은 다음과 같습니다.
Tomek은 JavaScript 생태계에서 대화형 튜토리얼 생성을 재정의하는 혁신적인 오픈 소스 도구인 TutorialKit을 출시했습니다. 현재 문서의 한계를 해결하기 위해 TutorialKit은 사용자 가이드와 구조화된 데모 및 연습을 통합하는 엄선된 실습 학습 경험을 제공합니다.
WebContainers로 구동되는 TutorialKit은 Svelte, Angular 및 Nuxt와 같은 프레임워크의 통찰력을 기반으로 구축되었습니다. npm create tutorial라는 단일 명령을 사용하여 개발자는 강의 설명, 코드 조각 및 실시간 미리 보기가 포함된 완전한 튜토리얼 프로젝트를 1분 이내에 신속하게 생성할 수 있습니다.
TutorialKit은 어둡고 밝은 테마와 대화형 터미널을 제공하여 학습자가 자료에 완전히 참여할 수 있도록 사용자 정의가 가능합니다. 이 도구를 사용하면 개발자, 교육자, 커뮤니티 모두가 브라우저에서 직접 더욱 매력적인 교육 리소스를 만들 수 있습니다.
Mohammad는 npm 라이브러리 관리자와 사용자가 복잡한 설정 없이 출시되지 않은 분기, 수정 사항 또는 기능을 미리 볼 수 있는 도구인 pkg.pr.new를 도입했습니다. 다음과 같은 간단한 명령으로:
npm i https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
개발자는 지속적인 릴리스와 같은 번거로운 방법을 우회하여 특정 버전을 즉시 테스트할 수 있습니다.
다음 단계에는 CDN 지원 및 사용자 정의 UI를 위한 ESM.sh와의 통합이 포함되어 pkg.pr.new의 기능을 Deno 및 Vue Playground와 같은 환경으로 확장합니다.
이 섹션에서는 Vite의 적응성을 더욱 향상시키는 새로운 통합을 살펴보겠습니다. Angular 지원부터 향상된 테스트 및 CI 워크플로우에 이르기까지 이러한 업데이트는 Vite가 어떻게 범위를 확장하고 개발자 경험을 단순화하는지 보여줍니다.
Chromatic의 Storybook 관리자인 Yann Braga는 Vite 및 Vitest와의 중요한 새로운 통합을 공개하여 UI 구성 요소 개발 및 테스트를 혁신했습니다. 이번 업데이트에는 Storybook 스토리를 기능 테스트로 변환하는 Vitest 플러그인이 도입되어 추가 테스트 케이스 없이 코드 적용 범위를 쉽게 늘릴 수 있습니다. 플러그인의 시각적 디버깅 기능을 통해 개발자는 CI 환경에서 실패한 테스트를 실시간으로 검사하여 원활한 팀 협업을 촉진할 수 있습니다.
버전 9에서 Storybook은 시각적, 접근성 및 기능 테스트를 응집력 있는 UI로 통합하고 ESM 전용 빌드로 전환하여 설치 크기를 줄이고 성능을 향상시킬 계획입니다. 이러한 발전은 효율적이고 간소화된 프런트 엔드 워크플로와 포괄적인 구성 요소 테스트에 대한 Storybook의 노력을 강화합니다.
Nx의 수석 엔지니어인 Katerina Skroumpelou는 Nx가 Vite 프로젝트에 제공하는 효율성을 강조했습니다. 그녀는 Nx가 CI 워크플로를 최적화하고 복잡한 작업을 자동화하여 빌드 프로세스를 더 빠르고 간소화하는 방법에 대해 논의하는 것으로 시작했습니다.
다음으로 그녀는 React Vite 프로젝트에서 Nx를 사용하는 방법을 시연했습니다. 데모에서는 Nx가 캐싱 및 Nx Cloud 통합과 같은 기능을 통해 성능을 향상시키는 방법을 보여주었습니다. Nx Cloud는 확장 및 작업 재생을 지원하고 병렬 실행을 제공하여 속도를 높입니다. "nx 영향을 받음" 명령도 포함되어 코드베이스의 수정된 부분에 대해서만 작업을 지능적으로 실행하여 CI를 더욱 최적화했습니다.
Katerina는 ESLint 및 Vite용 플러그인과 같은 Nx 플러그인이 기존 구조를 방해하지 않고 마이그레이션을 단순화하고 코드를 원활하게 유지한다고 강조했습니다. 그녀는 CI용 GitHub Actions 설정 방법을 보여주고 에이전트 전체에 작업을 효율적으로 배포하는 Nx의 능력을 보여주며 마무리했습니다.
컨설팅 회사 Evil Martians를 운영하는 Irina Nazarova는 Vite Ruby가 Rails 애플리케이션의 개발자 경험을 어떻게 변화시켜 Rails의 "No Build" 접근 방식에 대한 더 나은 대안을 제시했는지 공유했습니다. Vite Ruby는 Power Home Remodeling Group 및 ClickFunnels와 같은 회사에서 성공적으로 구현되어 Rails의 개발자 친화적 철학을 유지하면서 더 복잡한 프런트엔드 설정을 가능하게 했습니다.
Bit의 소프트웨어 엔지니어이자 Vue.js Conf 팀원인 Zhao Jinjiang은 Bit의 Webpack/Jest에서 Vite/Vitest로의 전환에 대해 논의했습니다. 이 스위치는 통합 테스트, 최적화된 빌드 및 테스트 워크플로, Node API를 통한 향상된 유연성을 갖춘 맞춤형 개발 환경을 허용함으로써 구성 요소 중심 개발을 촉진했습니다.
이 섹션에서는 Vite가 SolidJS, Svelte 및 Remix와 같은 주요 프레임워크를 어떻게 지원하는지 살펴보겠습니다. 이러한 개발은 Vite가 각 프레임워크의 요구 사항에 맞는 새로운 기능과 성능 개선을 어떻게 추진하고 있는지 보여줍니다.
SolidJS의 창시자인 Ryan Carniato는 SolidStart(5월 버전 1.0 출시)가 클라이언트와 서버 개발을 통합하기 위해 어떻게 발전했는지 공유했습니다. Vite, Vinxi 및 Nitro를 기반으로 구축된 SolidStart는 서버 기능을 도입했으며 라우터 없는 단순화된 아키텍처를 갖춘 최초의 JavaScript 프레임워크가 되어 놀랍도록 가벼운 4.7KB 번들 크기를 달성했습니다.
Ryan과 Alexis는 Chrome 팀의 자금 지원을 받아 비동기 데이터 및 스트리밍을 처리할 수 있는 강력한 직렬화 도구인 Seroval을 개발했습니다. 이로 인해 작업과 데이터 가져오기를 하나의 원활한 요청으로 효율적으로 결합하는 단일 비행 돌연변이라는 중요한 혁신이 이루어졌습니다. 그들은 성능 향상을 보여주는 대화형 Trello 보드 데모를 통해 이 개념을 시연했습니다.
Ryan은 또한 신속한 프로토타이핑을 가능하게 하는 Vite 생태계의 중요성을 강조하고 이것이 Solid 2.0 개발에 어떤 영향을 미쳤는지 강조했습니다.
Lukas Taegert-Atkinson은 최근 및 향후 롤업 개선 사항을 발표했습니다.
Pedro Cattori와 Mark Dalgleish가 Remix를 Vite로 마이그레이션하여 개선된 점을 발표했습니다.
Pedro는 서버 코드 격리에 중점을 두고 클라이언트 번들에서 서버 코드를 제거하기 위해 트리쉐이킹에 의존하는 방식에서 어떻게 전환했는지 설명했습니다. 대신 명시적인 Remix 변환을 구현하고 서버 코드가 클라이언트에 유출될 수 있는 경우 명확한 빌드 시간 오류를 제공하는 .server 파일 접미사를 도입했습니다.
Mark는 CSS 처리 개선 사항을 다루면서 Vite의 내장 기능을 활용하기 위해 Remix의 원래 URL 기반 CSS 가져오기에서 어떻게 발전했는지 보여주었습니다. 여기에는 Rollup을 통한 향상된 CSS 청킹과 CSS 가져오기에 Vite의 URL 쿼리 문자열을 사용하는 개발 모드용 솔루션이 포함되어 있어 스타일 플래시를 피하면서 개발과 생산 간의 일관된 동작을 보장합니다.
이러한 변경으로 인해 Remix 프레임워크에 더 나은 개발자 환경, 더 강력한 코드 분리, 더 효율적인 CSS 처리가 가능해졌으며, Vite 마이그레이션을 통해 어떻게 핵심 아키텍처를 개선할 수 있었는지 입증되었습니다.
Shai Reznik은 자신을 기술적인 능력에 대해 인상적인 주장을 하는 "전설적인 쇼맨"으로 묘사하면서 재미있고 유쾌한 소개로 강연을 시작합니다.
강연에서 Shai는 수분 공급의 필요성을 제거하여 앱 성능을 최적화하도록 설계된 JS 프레임워크인 Qwik에 중점을 둡니다. 클라이언트에서 JS를 다시 실행하여 앱을 대화형으로 만들기 위해 하이드레이션에 의존하는 기존 서버 측 렌더링 프레임워크와 달리 Qwik은 "JavaScript 스트리밍"을 사용합니다. 이 프로세스는 앱을 작은 세그먼트로 나누고 서버 측 렌더링 중에 앱의 구조와 이벤트 리스너를 인코딩합니다. 그런 다음 이러한 세그먼트는 클라이언트로 전송되며, 클라이언트에서 Qwik은 필요한 코드를 백그라운드에서 버퍼링합니다. 결과적으로 JS가 로드될 때까지 기다리지 않고 사용자가 앱과 상호작용하는 즉시 앱이 대화형 상태가 됩니다.
Shai는 Qwik이 이 프로세스를 자동으로 처리하므로 동적 가져오기 및 지연 로딩과 같은 수동 최적화가 필요하지 않다고 설명합니다. 이는 로드 시간을 단축하여 사용자 경험과 SEO를 향상시킵니다. 그는 또한 Qwik의 원활한 확장 능력을 강조하여 단순한 마케팅 사이트와 복잡한 앱 모두에 적합합니다. Shai는 Qwik이 인증, 테스트, 배포를 위한 통합을 포함하여 성장하는 커뮤니티와 생태계를 통해 안정적이라고 청중을 안심시킵니다.
또한 Shai는 예측 버퍼링, 데드 코드 제거와 같은 AI 기반 최적화, 자동 리팩토링과 같은 미래 기능을 도입하여 개발 프로세스를 더욱 간소화하고 앱 성능을 향상시킵니다.
Volar.js의 창시자인 Johnson Chu는 Vue.js, React, Svelte 및 Vite 생태계에 통합된 도구와 같은 다양한 환경에서 임베디드 언어를 지원하는 언어 도구를 구축하기 위한 획기적인 프레임워크를 도입했습니다. 현재 널리 채택되고 있는 Volar.js는 효율성과 모듈성을 강조하여 특히 Vite로 구축된 프로젝트에서 개발 워크플로를 최적화하는 데 필수적인 부분입니다.
Johnson은 Volar의 아키텍처를 분석하여 다음을 강조했습니다.
Svelte 팀의 Rich는 개발자들 사이에서 인기가 있음에도 불구하고 Svelte 반응형 시스템의 핵심 제한 사항을 해결하는 것을 목표로 Svelte 5의 대대적인 재작성을 발표했습니다. 그는 Svelte의 현재 구조를 네 가지 요점으로 설명했습니다.
Chris Manson이 13년 된 프런트엔드 프레임워크인 Ember.js가 Vite 통합을 통해 어떻게 발전하고 있는지 설명합니다. Ember의 레거시 빌드 시스템인 Broccoli는 코드 분할과 같은 최신 최적화에 대한 과제를 제기했습니다. 이 문제를 해결하기 위해 Embroider가 도입되어 Ember의 레거시 빌드 시스템과 최신 번들러 간의 격차를 해소했습니다. 이는 Ember의 전통적인 브로콜리 트리를 최신 번들러에서 처리할 수 있는 보다 깔끔한 구조로 전처리합니다. Embroider의 초기 버전은 Webpack과 작동했지만 안정적이지 않아 Vite와 호환되도록 하기 위한 추가 작업이 진행되었습니다.
주요 과제는 Vite의 모듈 우선 접근 방식을 Ember의 기존 AMD 기반 모듈과 함께 작동하도록 조정하는 것이었습니다. 솔루션에는 Vite가 Vite를 실행하는 Ember CLI가 아닌 Ember 플러그인을 사용하여 빌드를 구동하는 빌드 프로세스 재설계가 포함되었습니다. Embroider Vite 플러그인은 모듈 해상도와 메타데이터를 처리하여 보다 원활한 통합을 보장하기 위해 만들어졌습니다.
그 결과 Vite를 사용하여 Ember 앱을 구축할 수 있는 작업 시스템이 탄생했으며, 이를 새 프로젝트의 기본 환경으로 만들기 위한 노력이 계속되고 있습니다.
이 섹션에서는 Vite의 성능을 새로운 차원으로 끌어올리는 도구와 기술에 대해 논의하겠습니다. Nitro v3, Rollup의 Rust 통합 및 로컬 우선 SQLite 앱에 대한 강연에서는 더 빠르고 효율적인 애플리케이션을 구축하기 위한 전략을 보여줍니다.
CrabNebula의 X 리드이자 Tauri 작업 그룹 및 SolidJS DX 팀의 핵심 기여자인 Atila는 Tauri 기술을 사용하여 웹 애플리케이션을 기본 데스크톱 및 모바일 앱으로 변환하도록 설계된 새로운 SDK인 Taurify를 소개했습니다.
5가지 주요 기능:
라이브 데모:
Nuxt 핵심 팀 리더인 Daniel Roe는 Vite 및 Nuxt를 사용하여 웹 글꼴 성능을 최적화하는 혁신적인 방법을 제시했습니다. 그는 레이아웃 변경 및 성능 문제와 같은 웹 글꼴의 문제점을 설명했습니다. Roe는 3가지 도구를 소개했습니다:
Daniel은 Vite의 강점, 특히 Nuxt와 같은 프레임워크와 Vite 팀 간의 원활한 협업을 가능하게 하는 다형성 특성을 강조했습니다.
AnalogJS의 창시자이자 NgRx 관리자인 Brandon Roberts가 Vite에 구축된 Angular용 메타 프레임워크인 AnalogJS를 소개합니다. 그는 풀 스택 솔루션을 위해 Vite, Nitro 및 Nx와 같은 도구를 사용하여 Angular 생태계를 향상시키는 것을 목표로 하는 AnalogJS V1.8의 출시를 발표했습니다. Analog는 독립 실행형 구성 요소 및 향상된 서버 측 렌더링(SSR)과 같은 최신 Angular 기능을 활용하여 파일 기반 라우팅, 정적 사이트 생성 및 통합 API 경로를 제공합니다.
주요 기능 및 통합:
• SSR 및 정적 생성: 다양한 플랫폼(Node, Edge, Vercel 등) 지원
• API 경로: 구성 요소와 함께 서버 엔드포인트를 쉽게 정의합니다.
• 테스트 도구: Vitest 및 Playwright와의 통합으로 Angular를 최신 테스트 방식에 맞게 조정합니다.
• Storybook 등: Vite는 Storybook과 같은 구성 요소 라이브러리와의 통합을 강화합니다.
Roberts는 또한 클라이언트-서버 데이터 처리 단순화를 목표로 하는 SFC(아날로그 단일 파일 구성 요소) 및 양식 작업을 포함한 실험적 기능을 소개했습니다.
Bjorn Lu는 웹 앱 성능 개선 전략에 대해 알아보기 전에 '성능 신화'에 대해 농담을 하며 유머러스하게 시작했습니다. 그들은 세 가지 주요 측면을 강조했습니다.
Cloudflare의 소프트웨어 엔지니어이자 전 Angular 기여자인 Igor는 기존의 모놀리식 웹 애플리케이션(폴리리식 애플리케이션은 유연성과 견고성을 향상시키기 위해 독립적으로 작동하는 많은 구성 요소로 구성됨)의 대안으로 "웹 폴리리스"의 개념에 대해 논의합니다. 그는 일반적으로 단일 진입점이 있고 성능 문제, 비효율성 및 보안 위험을 초래할 수 있는 모놀리식 애플리케이션과 대조하면서 다양한 컨텍스트에서 작동할 수 있는 여러 개의 독립적인 구성 요소로 구성된 폴리리식 애플리케이션의 이점을 강조합니다.
핵심 사항은 다음과 같습니다.
• 모놀리식 애플리케이션의 현재 상태: SPA 및 Node.js 앱과 같은 오늘날의 많은 애플리케이션은 모놀리식이므로 성능 저하 및 취약성 증가와 같은 다양한 단점이 있습니다.
• 폴리리식 아키텍처의 장점: 이러한 애플리케이션은 별도의 배포와 공유 상태를 줄여 공격 표면을 줄이므로 더 빠르고 안전하며 이해하기 쉽습니다.
• 복잡성 고려 사항: 폴리리스에는 분명한 이점이 있지만 구성, 구축 및 배포가 복잡해집니다. 그러나 개발자는 특히 풀 스택 애플리케이션에서 의도치 않게 폴리리스를 생성하는 경우가 많습니다.
• Vite v6의 역할: Vite v6의 새로운 환경 API는 압도적인 복잡성 없이 여러 환경과 독립적인 빌드를 지원하고 핫 모듈 교체(HMR)와 같은 기능을 제공하여 폴리리식 애플리케이션 생성을 단순화합니다.
UnJS 및 Nitro의 창시자인 Pooya Parsa는 강력한 API를 사용하여 배포에 구애받지 않는 서버를 구축하기 위한 서버 툴킷인 Nitro v3를 출시했습니다. Nitro는 모든 공급자를 위한 애플리케이션 컴파일 및 번들링을 단순화합니다.
주요 구성 요소:
Nitro v3는 Node.js 지원을 유지하면서 웹 표준 및 엣지 플랫폼과의 호환성을 우선시합니다. 새로운 API는 서버 정의를 단순화하고 구성 가능성, 관찰 가능성 및 테스트 가능성을 향상시킵니다.
Pooya는 또한 Nitro v3과 함께 출시된 H3 v2를 발표했습니다. 이 버전은 웹 표준을 완벽하게 기반으로 하여 더 작은 번들 크기와 더 빠른 응답 처리 기능을 제공합니다. 향후 업데이트에서는 엣지 플랫폼에서 더 나은 호환성과 성능을 위해 Vite 통합과 하이브리드 네이티브 폴리필을 탐구할 것입니다.
이 섹션에서는 디버깅 및 테스트 간소화를 위한 업데이트를 다루겠습니다. Chrome DevTools, Vitest 및 Vue Devtool Kit의 새로운 기능은 개발자에게 더 강력한 제어 기능을 제공하여 개발 프로세스를 단순화하는 데 도움을 줍니다.
Chrome DevTools 팀의 Jecelyn은 더 빠르고 효과적인 디버깅을 위한 네 가지 필수 도구를 소개했습니다.
3차례의 기술 심층 분석에서 Vitest 핵심 팀 구성원인 Vladimir(Vitest 및 Vite 팀 구성원), Ari(Vitest 핵심 팀 및 StackBlitz 엔지니어), Misha Kaletsky(expect-type 작성자)는 Vitest에 대한 업데이트를 공유했습니다. 는 JavaScript를 위한 빠르고 현대적인 테스트 프레임워크로, 지난 한 해 동안 주간 다운로드 수가 세 배인 약 600만 건을 기록했습니다.
또한 이번 강연에서는 Vitest의 사용 용이성과 효율성을 강조하면서 이러한 기능의 실제 시연도 선보였습니다. 발표자들은 최신 JavaScript 및 TypeScript 개발에 Vitest를 사용할 때의 이점, 특히 개발 워크플로를 가속화하고 코드 품질을 보장하는 기능을 강조했습니다.
Vue.js 핵심 팀원인 Guillaume Chau는 Vue.js, Nuxt 및 기타 프레임워크 전반에서 디버깅 도구의 개발 및 호환성을 간소화하고 향상시키는 통합 프레임워크인 Devtool Kit를 소개했습니다. 기능은 풍부하지만 호환되지 않는 Nuxt 및 Vue Devtools로 인해 공통 유틸리티 및 API 세트로 통합하는 것을 목표로 하는 Devtool Kit가 탄생했습니다.
주요 목표는 유틸리티와 API를 표준화하여 Devtools 간의 원활한 상호 운용성을 허용하고 Vue.js 또는 Nuxt를 넘어 모든 프레임워크에 대한 새로운 Devtool 생성을 촉진하는 동시에 브라우저, Node.js 서버 또는 Node.js 서버와 같은 다양한 환경을 지원하는 것입니다. 독립형 애플리케이션.
Devtool Kit에는 4개의 모듈이 있습니다.
메인 모듈: 페이지 모듈을 등록하고 전반적인 기능을 제어합니다.
페이지 모듈: 사용자 애플리케이션 컨텍스트 내에서 작동하여 앱 상태와 상호 작용할 수 있습니다.
보기 모듈: 사용자에게 정보를 표시하는 시각적 인터페이스를 관리합니다.
서버 모듈: 개발 중 서버측 상호 작용을 처리합니다.
Devtool Kit는 postMessage 및 WebSocket과 같은 기술을 사용하는 양방향 형식 통신 시스템을 갖추고 있어 상황에 관계없이 모듈 간의 원활한 상호 작용을 가능하게 합니다.
Vue.js, Nuxt는 물론 Pinia나 Tailwind와 같은 타사 도구의 기능을 통합하여 고도로 맞춤화된 Devtools 환경을 제공하는 모듈식 "애플릿"을 잊지 마세요.
Node.js 기여자인 Joyee는 더 나은 ESM 지원 및 개발자 경험에 중점을 두고 Node.js 모듈 로딩 시스템의 최근 및 향후 개선 사항을 소개합니다.
require()의 ESM(실험적)
o CommonJS 모듈은 이제 ES 모듈을 require()할 수 있습니다.
o 제한사항: 최상위 수준의 지원이 없습니다.
o Node.js 23 안정 버전으로 출시됩니다.
개발자 개선
o .js 파일에서 ES 모듈을 자동 감지합니다.
o 더 빠른 로딩을 위한 모듈 컴파일 캐시.
o 최상위 대기 없이 내장 모듈 감지.
o 문제가 있는 최상위 대기 코드를 찾는 도구입니다.
패키지 관리:
o 이중 패키지 문제를 방지하기 위한 새로운 수출 조건
o CommonJS에서 ESM으로의 마이그레이션 지원 개선
개발자 도구:
o 동기식 모듈 로더 후크
o 환경 설정을 위한 런타임 구성 파일
이전 버전과의 호환성과 개발자 경험을 유지하면서 ESM 지원을 개선하는 데 중점을 두고 있습니다.
이 섹션에서는 Vite의 실제 응용 프로그램을 살펴보겠습니다. Excalidraw, Shopify 및 기타 프로젝트의 사례 연구에서는 Vite의 속도, 유연성 및 개발자 경험이 생산 환경에 어떻게 변화를 가져오는지 강조합니다.
Excalidraw의 관리자인 Aakansha는 더 빠른 빌드 및 HMR 시간, 더 높은 유연성, 더 나은 유지 관리에 대한 요구로 인해 CRA(Create React App)에서 Vite로 프로젝트를 마이그레이션한 경험에 대해 논의합니다.
마이그레이션 프로세스는 Patak이 2021년 Vite를 Excalidraw에 통합한 후 시작되어 팀의 관심을 끌었습니다. 그들은 Vite의 더 빠른 빌드 시간, 더 나은 핫 모듈 교체 및 성장하는 커뮤니티로 인해 마이그레이션하기로 결정했습니다. 문제는 다음과 같습니다.
그러나 팀은 배포 후 심각한 문제에 직면했습니다. 즉, 대용량 파일에 대한 HMR의 성능이 크게 저하되었습니다. 이는 개발자 경험에 부정적인 영향을 미쳐 되돌리기로 이어졌습니다. 플러그인을 조사하고 제거한 후 문제를 해결하고 성공적으로 배포할 수 있었습니다.
상당한 커뮤니티의 도움으로 완료된 Excalidraw의 Vite 마이그레이션은 개발자 경험을 향상시키고 빌드를 간소화했습니다.
Shopify의 가장 큰 React 코드베이스(TypeScript 500만 줄 및 800개 경로)를 작업하는 Jason Miller 개발자는 Webpack에서 Vite로 마이그레이션할 때의 이점을 강조했습니다. 이 마이그레이션을 통해 시작 시간은 15초로 단축되었고, HMR 성능은 12초에서 5밀리초로 감소했으며, 모듈 수는 18,000에서 2,300으로 최적화되었습니다. 이러한 개선을 통해 팀은 클라우드 기반 IDE에 의존하지 않고 로컬 개발로 전환할 수 있었습니다.
Christoph Nakazawa, 게임 개발자 Christoph는 Vite를 통해 어떻게 214,000줄의 JavaScript가 포함된 크로스 플랫폼 게임인 Athena Crisis를 구축할 수 있었는지 설명했습니다. Vite는 vite-plugin-pwa를 통해 30ms의 핫 리로딩, 오프라인 지원을 제공하고 프런트엔드와 백엔드 코드 모두의 원활한 번들링을 허용하여 여러 플랫폼에 걸쳐 3분이라는 빠른 배포 주기를 제공했습니다.
Storyblok의 개발자 경험 엔지니어이자 TresJS 라이브러리의 창시자인 Alvaro Sabu가 ViteConf 랜딩 페이지에서 3D 퍼즐을 만드는 여정을 공유했습니다. 통합 코드 편집기를 통해 사용자가 풀 수 있는 이 대화형 퍼즐은 Vue 기반 3D 라이브러리인 TresJS를 사용하여 제작되었습니다.
Alvaro는 퍼즐 디자인의 주요 단계인 사면체 및 팔면체 조각 만들기, 쿼터니언 및 애니메이션 프레임으로 회전 논리 구현, 웹페이지에 원활하게 통합 등을 설명했습니다. 눈에 띄는 기능은 WebContainers를 사용하여 페이지 내에 Vite 개발 서버를 삽입함으로써 사용자가 퍼즐 뒤에 있는 JavaScript를 실시간으로 편집할 수 있다는 것입니다.
Alvaro는 또한 연속 순환을 위한 임시 그룹 사용 및 성능 최적화와 같은 문제 극복에 대한 통찰력을 제공했습니다. 이 프로젝트는 몰입감 있고 편집 가능한 3D 웹 경험을 생성하는 TresJS 및 WebContainers의 기능을 강조합니다.
이 섹션에서는 Vite 생태계의 미래와 커뮤니티 초점에 대해 논의하겠습니다. 문서화, 오픈 소스 원칙 및 프레임워크 융합에 대한 논의에서는 협력적이고 미래 지향적인 개발자 커뮤니티를 구축하는 데 있어 Vite의 역할을 강조합니다.
Ben Holmes는 '로컬 우선' 앱을 선보이며 브라우저에서 완전히 실행될 수 있는 잠재력을 보여주었습니다. 그는 Astro를 사용하여 이를 시연하고 SQLocal과 같은 라이브러리를 사용하여 클라이언트 측에서 SQLite를 관리하고 브라우저에 데이터를 안전하게 저장하는 방법을 강조했습니다. 주요 내용은 다음과 같습니다.
검색 기능:
. 기본 검색: 처음에는 SQL의 LIKE 연산자를 사용하여 텍스트 검색을 구현했습니다.
. AI 기반 검색:
의 범용 문장 인코더 통합
지능적인 유사성 기반 검색을 위한 TensorFlow를 사용하면 사용자가 모호한 용어로도 관련 문서를 찾을 수 있습니다.
기술적 통찰: 브라우저에 대규모 AI 모델을 로드하는 등의 문제와 성능 향상을 위해 웹 워커를 사용하는 것의 중요성에 대해 논의했습니다.
사용자 경험: 데모에는 접근성을 위한 브라우저 기본 요소와 보기 전환이 포함된 부드러운 애니메이션이 포함되어 검색 경험이 향상되었습니다.
결론적으로 Ben은 로컬 우선 애플리케이션에서 온디바이스 AI 계산의 흥미로운 미래를 강조했습니다.
Netlify의 CEO인 Mat Bilmann은 웹 개발이 모놀리식 구조에서 Jamstack 및 최신 프레임워크로 전환되는 과정을 설명하면서 프런트엔드와 백엔드를 분리하여 유연성과 확장성을 높이는 이점을 강조했습니다. Gatsby, Next.js, Nuxt.js와 같은 초기 프레임워크는 워크플로를 간소화했지만 복잡성도 추가했습니다.
Bilmann은 이제 보다 맞춤화된 웹 애플리케이션을 허용하는 더 작고 구성 가능한 기본 요소로의 전환을 옹호합니다. Vite는 Astro, TanStack Start 및 Vike와 같은 새로운 프레임워크를 촉진하는 견고한 기반을 제공하면서 이러한 변화에서 핵심적인 역할을 합니다. 이러한 프레임워크는 단순성, 모듈성 및 성능을 우선시하여 개발자가 효율적이고 유지 관리가 가능한 웹 애플리케이션을 구축할 수 있도록 지원합니다.
Google의 Angular 제품 책임자인 Minko Gechev가 Angular와 React의 유사점과 프런트엔드 프레임워크의 미래 동향에 대해 논의합니다. 그는 서로 다른 구문(템플릿과 JSX)을 사용함에도 불구하고 두 프레임워크가 변경 감지 및 최적화를 위해 어떻게 유사한 접근 방식을 활용하는지 설명합니다.
Minko 강연의 핵심 초점은 Vue, Solid 및 Svelte와 같은 프레임워크에서도 사용되는 기본 요소인 Signals의 소개입니다. Angular의 신호 구현은 데이터 종속성을 추적하고 불필요한 재렌더링을 최소화하여 성능을 향상시켰습니다.
Minko는 성능 최적화를 공유하고 개발자 경험을 향상시키는 것을 목표로 하는 Google의 Wiz 프레임워크와 Angular의 협력을 강조합니다. 주목할만한 예로는 상호작용 공백을 효율적으로 해결하는 이벤트 재생과 페이지 로드 성능을 향상시키는 증분 하이드레이션이 있습니다.
그는 프레임워크가 사용자 경험을 향상시키기 위해 세분화된 코드 로딩 및 이벤트 재생에 지속적으로 수렴하고 프레임워크를 선택할 때 안정성, 생태계 및 개인 선호도를 강조할 것이라고 예측합니다.
OpenSauced 프로젝트의 핵심 인물인 Brian Douglas(B Dougie)가 Vite 생태계의 문화와 성장에 대해 이야기합니다. 그는 Vite가 현재 주당 1,500만 건의 다운로드를 기록하고 있으며 이는 인상적인 이정표라고 강조합니다.
Dougie는 또한 Vite 커뮤니티의 주요 기여자를 식별하기 위해 그의 팀에서 개발한 도구인 StarSearch를 소개하고 Anthony Fu, Patak, Brandon Roberts, Toby와 같은 인물이 Vite의 개발 및 채택을 주도한 역할에 대해 조명합니다. Dougie는 Evan Yu의 말을 인용하며 훌륭한 기여자가 Vite 성공의 열쇠이며 Vite가 개발자 경험과 문제 해결에 중점을 두는 것이 프런트엔드 생태계 전반에서 성장하는 데 핵심이라는 점을 강조하며 결론을 내립니다.
Anthony Fu는 강연 중에 오픈 소스 도구 개발의 진보성 개념을 탐구했습니다. 주요 내용은 다음과 같습니다.
좋은 오픈소스 도구란 무엇입니까?
Sarah Rainsberger의 강연에서는 문서가 커뮤니티 성장을 위한 강력하면서도 종종 간과되는 도구임을 강조했습니다. 잘 관리되고 접근 가능한 문서에 투자하면 참여도가 높고 지속 가능한 커뮤니티가 조성되어 프로젝트 전반이 강화됩니다.
그녀는 문서를 통해 활발한 오픈 소스 커뮤니티를 조성할 수 있는 방법을 설명합니다.
이 섹션에서는 Vite를 새로운 기능으로 이끄는 선구적인 프레임워크를 살펴보겠습니다. Vike에 대한 강연, WebAssembly 통합 및 Zero to One에서는 Vite가 어떻게 차세대 웹 애플리케이션을 형성하는 혁신적인 접근 방식을 구현하는지 보여줍니다.
프레임워크를 0에서 1로 재창조
Nathan Wienert는 두 가지 주요 기능으로 차별화되는 새로운 React 프레임워크인 "One"을 도입했습니다.
설정은 간단합니다. npx one을 사용하여 One 앱을 생성하면 Vite 플러그인으로 작동하여 쉽게 구성할 수 있습니다. One은 다양한 렌더링 모드(서버측, 정적 또는 클라이언트측)를 지원하고 최적화된 스타일을 위해 Tamagui로 웹 기능을 향상합니다.
프레임워크는 더 빠른 빌드 시간을 위해 Babel을 대체하는 SWC를 사용하여 서버와 클라이언트 간의 데이터 가져오기 및 동기화를 효율적으로 처리합니다. 플랫폼별 확장 기능을 통해 여러 기기에서 고유한 경험을 제공하여 정적 및 동적 애플리케이션 모두에 대한 다양성을 보여줍니다.
Nathan의 세션에서는 웹과 기본 앱 개발을 원활하게 연결하여 Zero가 공개 베타에 접근하면서 현재 사용할 수 있도록 하는 One의 목표를 강조했습니다.
Microsoft Azure의 JavaScript 개발자 경험 부문 수석 리더인 Natalia Venditto가 WebAssembly를 사용하여 클라이언트측과 서버측 JavaScript 환경 모두에서 고성능 코드 실행을 지원하는 방법에 대해 설명합니다.
주요 기술 포인트
웹어셈블리 기본
o C/Rust와 같은 언어의 코드를 이식 가능한 바이너리로 컴파일합니다.
o WebAssembly 바인딩을 통해 JavaScript와 완벽하게 통합됩니다.
o 컴퓨팅 집약적인 작업을 보다 효율적으로 실행합니다.
개발 도구
o WebAssembly 통합을 위한 Vite 플러그인.
o 브라우저 및 VS Code에서 디버깅을 지원합니다.
o 컴파일된 코드를 소스 수준에서 직접 디버깅합니다.
컴포넌트 모델
o 더 나은 교차 언어 지원을 위한 새로운 아키텍처.
o 숫자 이상의 복잡한 데이터 유형을 처리합니다.
o JavaScript에서 WebAssembly로의 컴파일을 활성화합니다.
마지막으로 그녀는 개발 시 이식성과 구성 측면에서 WebAssembly의 잠재력을 강조하고 개발자가 Vite 생태계에서 사용할 수 있는 진화하는 도구와 플러그인에 참여할 수 있도록 초대합니다.
Rom Brillout은 유연성을 위해 설계된 차세대 프런트엔드 프레임워크인 Vike를 선보였습니다. 그는 Vike가 Next.js 또는 Nuxt와 유사하지만 개발자가 모든 UI 프레임워크를 사용할 수 있도록 고도로 사용자 정의 가능한 확장 기능을 제공한다고 설명했습니다. 예를 들어 Vike는 동일한 프로젝트에서 React, Solid 또는 Vue 2와 3을 혼합하여 앱을 실행할 수 있습니다. 모든 렌더링 전략(SPA, SSR, SSG)을 지원하고 다양한 데이터 가져오기 방법(RPC, REST, GraphQL)과 통합됩니다.
주요 차별화 요소는 MIT 라이선스에 따른 Vike의 오픈 소스 모델입니다. Vike는 전통적인 상업 모델이 아닌 기업이 기업용으로 선택한 만큼 비용을 지불할 수 있는 독특한 접근 방식을 제공합니다. 목표는 Vike를 100% 오픈 소스로 유지하여 지속 가능한 비즈니스 모델을 제공하는 동시에 모든 개발자의 접근성을 보장하는 것입니다. 유연성과 사용자 정의 옵션에도 불구하고 Brillout은 Vike가 이미 프로덕션 용도로 안정적이며 곧 버전 1.0을 출시할 계획이라고 강조했습니다.
기사를 끝까지 읽어주셔서 감사합니다! 이 정보가 ViteConf 2024의 흥미로운 발전에 대한 유용한 정보와 새로운 통찰력을 얻었기를 바랍니다.
이 기사는 토요일에만 작업할 수 있었기 때문에 계획보다 게시하는 데 시간이 조금 더 걸렸습니다. 하지만 좋은 일에는 시간이 걸리죠? ?
콘텐츠를 검토하고 다듬는 데 도움을 준 사랑하는 친구와 출판을 격려해준 모든 분들께 특히 감사드립니다. ChatGPT와 Claude에게 특별히 감사드립니다. 제 영어 실력을 다듬는 데 도움이 되었으니 잘 전달되길 바랍니다.
이 글은 저의 첫 번째 기술 기사입니다. 여러분의 지원은 저에게 정말 큰 의미가 있습니다. 앞으로도 더 많은 글을 쓰고 개발자 커뮤니티와 지식을 계속 공유할 수 있기를 기대합니다.
여러분의 생각과 피드백을 자유롭게 공유해주세요. 여러분의 의견을 듣고 싶습니다! 다음에서 저를 찾으실 수 있습니다:
X(트위터): @Mohamed_LamineF 또는 LinkedIn: mohamedlaminef.
위 내용은 ViteConf 혁신, 발표 및 앞으로의 길의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
