태그: Vue
8편
-
Vite 빌드 도구: ESM 개발 서버·esbuild·Rollup 구조와 설정·플러그인·Webpack 비교
Vite가 개발 중에는 네이티브 ESM과 esbuild 사전 번들링으로, 프로덕션에서는 Rollup으로 빌드하는 구조를 설명하고, vite.config 설정, 환경 변수와 mode, React·Vue 프로젝트 구성, 플러그인 훅, 코드 분할과 빌드 튜닝을 예제로 다룹니다.
-
Tauri 데스크톱 앱 개발: Rust 백엔드 호출, 빌드·배포, Electron과 비교
Rust 기반 데스크톱 앱 프레임워크 Tauri를 정리합니다. Chromium을 번들하지 않고 OS의 WebView를 쓰기 때문에 설치 파일이 작아지는 구조, React/Vue 프론트에서 Rust 명령을 호출하는 방법, 빌드·배포와 Electron과의 차이를 예제로 다룹니다.
-
Vue 3를 내부부터 이해하기: Proxy 반응형, Virtual DOM 패치, 컴파일러 최적화, 운영 패턴
Vue 3의 ref·reactive·computed·watch 사용법에서 시작해 Proxy가 track과 trigger로 의존성을 추적하는 방식, Virtual DOM 패치와 블록 트리, 정적 호이스팅·패치 플래그 같은 컴파일러 최적화, shallowRef·v-memo를 쓰는 운영 패턴까지 다룹니다.
-
Testing Library로 사용자 관점 테스트: 쿼리 우선순위, User Events, 비동기 대기, 폼, Vue
Testing Library로 사용자 중심 테스트를 작성하는 방법. 설치와 설정, React 기본 테스트, 쿼리와 변형(getBy·queryBy·findBy), User Events, 비동기 테스트, 폼 테스트, Vue 통합을 예제로 정리합니다.
-
Storybook으로 컴포넌트 개발하기: Story 작성, Args·Actions, Decorators, Addons, 비주얼 테스트
Storybook으로 UI 컴포넌트를 개발하고 문서화하는 방법. 설치와 설정, Story 작성, Args와 Actions, Decorators, Parameters, Addons, Vue 통합, 비주얼 테스트를 예제로 정리합니다.
-
Swiper로 터치 슬라이더 만들기: React·Vue 통합, 반응형 breakpoints, 효과, 이벤트
Swiper를 Vanilla JS로 붙이는 기본 설정부터 autoplay·pagination·navigation 모듈, React의 Swiper와 SwiperSlide 컴포넌트, Vue 통합, 화면 폭별 breakpoints, fade·cube 전환 효과, 슬라이드 이벤트 처리까지 예제로 구현합니다.
-
Nuxt 3로 풀스택 Vue 앱 만들기: 파일 라우팅, Composables, Server Routes, SSR·SSG·CSR
Nuxt 3로 풀스택 Vue 앱을 만드는 방법. 프로젝트 생성, 파일 기반 라우팅, Composables, Server Routes, Middleware, Layouts, 배포, SSR·SSG·CSR 렌더링 모드의 내부 동작을 정리합니다.
-
Leaflet으로 인터랙티브 지도 만들기: 마커·팝업, GeoJSON, React·Vue 통합, 좌표계
Leaflet으로 지도를 띄우고 마커·팝업과 GeoJSON 레이어를 그리는 방법, React Leaflet과 Vue 통합, markercluster로 많은 마커를 처리하는 법, EPSG:3857 좌표계의 내부 동작과 SSR 환경에서의 주의점을 다룹니다.