개발 & IT/프론트엔드 (14) 썸네일형 리스트형 웹 빌드 도구 비교: 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 .. Vue3 Carousel에서 화면 줄어들 때 이전 슬라이드가 겹쳐 보이는 문제 해결하기 프로젝트에서 Vue3 Carousel을 사용하다 보면, 해상도가 작아지거나 브라우저 창 크기를 줄였을 때 이전/다음 슬라이드가 화면에 겹쳐서 보이는 문제가 발생할 수 있습니다.처음에는 캐러셀 자체 버그인가 싶었는데, 원인은 뷰포트 영역이 슬라이드 밖 컨텐츠를 잘라내지 못한 것이었습니다.문제 상황아래와 같은 상황이 자주 발생합니다.데스크톱 풀스크린에서는 정상적으로 보임하지만 모바일이나 작은 화면에서는 이전/다음 슬라이드의 일부가 비쳐 보임특히 Motion 애니메이션(x: '50%') 같이 좌우로 이동하는 요소가 있으면 더 심해짐해결 방법해답은 의외로 간단했습니다.뷰포트 영역에 overflow:hidden을 강제로 주는 것만으로 문제를 해결할 수 있었어요..carousel__viewport { overfl.. Vue + Tailwind에서 반응형 메뉴 구현 시 흔히 겪는 문제와 해결법 웹사이트에서 상단 메뉴를 구현할 때, PC에서는 hover로 메뉴가 열리고, 모바일에서는 클릭으로 메뉴가 열리는 방식을 자주 사용합니다.Vue 3 + + TailwindCSS 환경에서 반응형 디자인이 아닌 PC와 동일한 디자인을 적용할 때 겪은 시행착오와 해결 방법을 정리합니다.문제 상황모바일에서 동작을 위해 상위 메뉴 클릭시 모바일 여부와 메뉴 오픈 여부를 체크하여 하위메뉴를 보여주도록 적용한 뒤, PC에서는 hover로 하위 메뉴가 열리지만, 마우스를 아래로 내리는 순간 메뉴가 사라짐모바일에서는 클릭으로 하위 메뉴를 열어야 하는데, viewport가 고정되어 있어 window.innerWidth로는 모바일인지 구분이 안 됨v-show로 메뉴를 열어도 class="hidden"이 같이 적용돼서 메뉴가.. Capacitor에서 앱 아이콘과 스플래시 이미지 자동 생성하기 앱을 배포하려면 각 플랫폼(Android/iOS)에서 요구하는 다양한 해상도의 아이콘과 스플래시 이미지를 준비해야 합니다. 수십 개의 리소스를 직접 만드는 건 너무 번거롭죠.Capacitor는 @capacitor/assets 패키지를 통해 아이콘과 스플래시를 자동으로 생성할 수 있는 기능을 제공합니다. 이번 글에서는 Capacitor 앱에서 아이콘/스플래시를 한 방에 생성하고 앱에 반영하는 방법을 정리합니다.✅ 1. @capacitor/assets 패키지 설치먼저 프로젝트 루트에서 아래 명령으로 필요한 패키지를 설치하세요:npm install @capacitor/assets이 패키지가 있어야 아이콘/스플래시를 생성할 수 있는 capacitor-assets 명령을 사용할 수 있습니다.✅ 2. 원본 이미지 .. ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS) 🔧 ref로 제어하는 커스텀 다이얼로그 만들기 (Framework7 + TailwindCSS)이번에는 을 활용한 커스텀 다이얼로그를 직접 만들고, ref를 통해 프로그래밍적으로 제어할 수 있도록 구성해봅시다.✅ 구현 목표다이얼로그의 열기/닫기 기능을 ref로 제어title, message, confirmText, cancelText를 동적으로 전달onConfirm, onCancel 같은 이벤트 핸들러도 동적으로 바인딩🧱 Step 1. CustomDialog.vue 컴포넌트 구현 {{ state.title }} {{ state.message }} {{ state.cancelText }} .. Framework7 + TailwindCSS로 커스텀 다이얼로그 만들기 Framework7을 사용하다 보면 기본 다이얼로그(Alert, Confirm 등)의 스타일을 커스터마이징하고 싶을 때가 있습니다. 하지만 Framework7의 기본 다이얼로그는 HTML 커스터마이징이 어렵기 때문에, 을 활용하여 TailwindCSS 기반의 커스텀 다이얼로그를 직접 만들어보겠습니다.✅ 왜 대신 을 쓰나요?Framework7의 다이얼로그는 빠르게 만들 수 있지만:내부 마크업이 고정되어 있음TailwindCSS로 직접 커스터마이징하기가 제한적임반면 은 완전히 내 마음대로 마크업을 구성할 수 있어서,디자인 자유도와 유연성이 매우 높습니다.🧱 Step 1. 커스텀 다이얼로그 컴포넌트 만들기components/CustomDialog.vue 파일을 만들어 아래와 같이 작성합니다: .. 모바일에서도 PC처럼 보이게 만드는 웹사이트 뷰포트 설정 방법 요즘 대부분의 웹사이트는 반응형 웹을 채택하고 있어, 화면 크기에 따라 레이아웃이 자동으로 조정됩니다. 하지만 경우에 따라서는 모바일에서도 PC와 동일한 고정 해상도로 보여주고 싶을 때가 있습니다.예를 들어,모바일에서 너무 간단하게 축약된 UI가 마음에 들지 않을 때특정 서비스나 데모 사이트를 PC 기준으로만 설계했을 때디자인 시안 그대로 모바일에서도 유지하고 싶을 때이 글에서는 HTML, CSS, 그리고 뷰포트 설정을 통해 모바일에서도 PC와 동일한 해상도로 고정해서 보여주는 방법을 소개합니다.✅ 뷰포트(Viewport)란?모바일 브라우저는 기본적으로 태그를 이용해 웹사이트가 어떻게 보여질지를 결정합니다.이 설정을 바꾸면 모바일 화면이 PC 화면처럼 축소되어 보이도록 만들 수 있습니다.✅ 고정 해상도.. 이전 1 2 다음
