vite (4) 썸네일형 리스트형 웹 빌드 도구 비교: Webpack vs Vite vs Rollup 그리고 etc 모던 웹 개발에서 빌드 도구는 필수적입니다. 수많은 JavaScript 파일과 CSS, 이미지 등의 에셋을 최적화하고 번들링하여 브라우저가 효율적으로 로드할 수 있도록 만들어주죠. 하지만 선택지가 너무 많아서 어떤 도구를 써야 할지 고민되시나요? 이 글에서 주요 빌드 도구들을 비교하고, 여러분의 프로젝트에 가장 적합한 도구를 찾는 방법을 알려드리겠습니다.1. Webpack - 검증된 강자특징Webpack은 2012년부터 시작된 가장 성숙한 번들러입니다. 모든 것을 모듈로 취급하며, JavaScript뿐만 아니라 CSS, 이미지, 폰트 등 모든 에셋을 번들링할 수 있습니다.장점강력한 생태계: 수천 개의 플러그인과 로더 보유높은 커스터마이징: 복잡한 요구사항도 세밀하게 설정 가능코드 스플리팅: 동적 impo.. Vite: 차세대 프론트엔드 개발 도구 Vite란 무엇인가?Vite(프랑스어로 "빠르다"는 뜻)는 Evan You(Vue.js 창시자)가 만든 차세대 프론트엔드 빌드 도구입니다. 기존의 Webpack이나 Parcel 같은 번들러들이 가진 느린 개발 서버 시작 속도와 느린 HMR(Hot Module Replacement) 문제를 해결하기 위해 탄생했습니다.왜 Vite가 필요할까?기존 번들러 기반 개발 환경의 문제점을 이해하면 Vite의 필요성이 명확해집니다.전통적인 번들러의 한계느린 서버 구동: 프로젝트가 커질수록 개발 서버를 시작하는 데 수 분이 걸리기도 함느린 업데이트: 파일 하나를 수정해도 전체 번들을 다시 빌드해야 하는 경우가 많음비효율적인 리소스 사용: 필요하지 않은 모듈까지 번들링하여 메모리 낭비Vite의 핵심 원리1. ESM(ES .. 📱 Framework7로 만든 앱을 Android APK로 패키징하는 방법 Framework7은 Vue, React, Svelte 등과 통합해서 사용할 수 있는 강력한 모바일 UI 프레임워크입니다. 이번 글에서는 Framework7 + Vue + Vite 조합으로 만든 프로젝트를 Android에서 실행 가능한 APK 파일로 패키징하는 전 과정을 소개합니다.✅ 1. 프로젝트 빌드 준비먼저 프로젝트 내 웹 자산을 빌드합니다. Vite 기반이라면 아래 명령어로 빌드하면 됩니다:npm run build이 작업을 통해 www 또는 dist 폴더에 index.html과 번들된 자바스크립트 파일들이 생성됩니다.✅ 2. Capacitor 설정 및 Android 플랫폼 추가웹 앱을 네이티브 앱으로 감싸기 위해 Capacitor를 사용합니다.npx cap init질문에 답하며 앱 이름과 ID (.. Laravel Sail + Nginx 리버스 프록시 환경에서 Mixed Content 오류 해결기 Laravel을 Docker 기반의 Sail로 운영하고, Nginx를 호스트 서버(Ubuntu)에 리버스 프록시로 구성해 SSL을 적용했는데도, 브라우저에서 Mixed Content: HTTP 리소스를 요청했기 때문에 차단됨이라는 경고를 받았습니다.빌드 결과에는 HTTPS가 잘 적용되어 있었는데, 도대체 왜 이런 문제가 발생했을까요?💡 문제 상황 요약Laravel Sail은 Docker 컨테이너 내부에서 실행호스트 서버는 Nginx를 설치해 SSL(HTTPS) 적용 및 리버스 프록시 설정vite.config.js에 base: 'https://도메인/build/' 명시하고, NODE_ENV=production으로 빌드도 완료public/build/manifest.json에도 http://는 없음그럼에도 .. 이전 1 다음
