난생처음 만드는 Vite 플러그인│인프콘2024
INFCON 2024 인프런 · YouTube
AI 핵심 요약
Vite가 JSX나 Vue 파일을 브라우저가 실행할 수 있는 JavaScript로 바꾸는 과정과 플러그인의 역할을 설명한다. Rollup과 호환되는 플러그인의 핵심 훅인 resolveId, load, transform을 살펴보고, 환경 변수 치환과 가상 모듈을 이용해 빌드 타임에 데이터를 생성하는 예제를 구현했다. 빌드 타임 계산 결과만 번들에 포함하면 런타임 작업을 줄일 수 있지만, 데이터 크기와 사용 상황을 따져야 한다. 플러그인은 무조건 도입하기보다 해결할 문제에 맞춰 선택하고, 직접 만들어 보며 작동 원리를 익히는 것이 중요하다는 점을 강조한다.
- Vite 플러그인은 Rollup 플러그인과 호환성이 높아 기존 플러그인 생태계와 유사한 방식으로 작성할 수 있다.
- resolveId는 모듈 처리 여부를 판별하고, load는 내용을 제공하며, transform은 코드를 변환한다.
- 가상 모듈을 활용하면 실제 파일 없이도 플러그인이 생성한 JavaScript 모듈을 import할 수 있다.
- 빌드 타임에 계산한 결과를 번들에 넣으면 런타임 작업을 줄일 수 있지만, 결과 데이터가 지나치게 크지 않은지 고려해야 한다.
- 플러그인은 기술 자체를 먼저 적용하기보다 해결할 문제를 정한 뒤 적합한 도구인지 판단하고, 작은 프로젝트에서 실험하는 것이 좋다.
소개
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 난생처음 만드는 Vite 플러그인 - 이은재 우리가 개발할 때 사용하는 Vite라는 도구는 어떻게 돌아갈까요? 우리가 작성하는 .jsx, 혹은 .vue 파일들은 어떤 과정을 거쳐 .js 파일로 변환되는 걸까요? 분명히 Vite 플러그인을 여러 개 설치하면 되기는 하는데, 이게 왜 어떻게 되는 걸까요? Vite 플러그인을 같이 작성해 보면서 Vite 플러그인에 대해 아무것도 모르셨던 분도 그 구조와 작동 흐름에 대해 이해할 수 있게 될 거예요. Vite 플러그인은 다양하게 쓰이는데요. 예를 들어 이를 잘 활용하면 굳이 런타임에 할 필요 없는 연산을 빌드 타임에 미리 함으로써 런타임을 빨라지게 할 수도 있습니다. 번들러는 우리에게 겁을 주는 대표적인 존재인데요. 이 발표를 통해...
비슷한 학습 자료
컨퍼런스 INFCON 2024
React Native와 함께 인프런 앱 새로 만들기│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 React Native와 함께 인프런 앱 새로 만들기 - 권건우, 이문기 왜 React Native를 사용했는지, 플레이어는 어떻게 만들었는지 등 인프런 앱을 만들면서 했던 선택들을 공유합니다. 그리고 React Native와 Native를 함께 다루면서 미리 알았다면 좋았을 문제들을 나눕니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
모바일 앱 개발
컨퍼런스 INFCON 2024
멀티패러다임 프로그래밍 언어의 시대: 객체지향과 함수형을 섞어야할 때!│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 멀티패러다임 프로그래밍 언어의 시대: 객체지향과 함수형을 섞어야할 때! - 유인동 함수형, 객체지향 패러다임을 모두 제공하는 멀티패러다임 언어를 효율적으로 사용하는 법 - 타입스크립트로 Tagged Templates를 만들면서 멀티패러다임 개발 패턴을 소개합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
프로그래밍 언어
컨퍼런스 INFCON 2024
달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정 - 조성륜 실제 운영되고 있는 서비스의 레거시 코드(Express.js 기반 Vanilla.js)를 모던 리액트 환경으로 마이그레이션을 하기위한 인프런 프론트파트의 여정을 공유합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
웹 개발 프론트엔드
컨퍼런스 INFCON 2024
AI 시대 디자이너의 실험: 사용자 행동 분석에 AI를 활용해 보기 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 AI 시대 디자이너의 실험: 사용자 행동 분석에 AI를 활용해 보기 - 박주형, 이동연 AI를 통해 사용성 테스트를 진행하고 유의미한 인사이트를 찾아내기 위한 실험을 진행해 보았습니다. 프로토타입에서 다양한 시나리오 검토를 통해 인사이트를 얻을 수 있었고 이를 통해 AI가 우리가 디자인하는 방식을 어떻게 변화시킬 수 있을지 살펴보았습니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
UI/UX 프로덕트 지표 · 실험
컨퍼런스 INFCON 2024
개발자 손 꼭 붙잡고 기획하기 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 개발자 손 꼭 붙잡고 기획하기 - 송은택 개발자들의 의견을 더 많이 듣고 싶지만 어떻게 그들의 의견을 끌어내야할 지 모르겠는 PM, 디자이너 그리고 비즈니스와 제품 기획에 더 많이 관여하고 싶은 개발자들을 위해 준비한 내용입니다. 최근에 인프랩 ucc셀에서는 프로젝트 초기 기획 과정에서부터 엔지니어들도 함께 참여했습니다. 진행하는 프로젝트의 전체적인 맥락을 초기부터 공감하고, 디테일한 정책 설계까지 함께했는데요. 높은 몰입도를 보여주었습니다. 프로젝트를 진행할수록 엔지니어들은 초기 기획보다 더 참신한 방안을 계속해서 제시하고, 실행했습니다. 프로젝트를 진행하며 어느 순간 각자의 생각이 모두 일치하는 경험을 했습니다. 불필요한 커뮤니케이션은 자연스럽게 감소했고요. 어떤 ...
프로덕트 매니지먼트 애자일 · 협업
컨퍼런스 INFCON 2024
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...
웹 개발 프로그래밍 언어