프론트엔드 (4) 썸네일형 리스트형 Vue 개발자가 Next.js를 배우며 겪은 혼란: Server Component와 Client Component 이해하기 Vue와 Nuxt에 익숙한 개발자로서 Next.js를 처음 접했을 때, 가장 혼란스러웠던 부분은 "왜 데이터를 fetch 했는데 화면이 업데이트되지 않는가?"였습니다. Vue에서는 당연하게 작동하던 반응형 시스템이 Next.js에서는 전혀 다른 방식으로 동작했고, revalidatePath라는 낯선 함수를 호출해야 했습니다.이 글은 Vue/Nuxt 개발자가 Next.js의 Server Component와 Client Component를 이해하는 과정을 담았습니다.첫 번째 혼란: 왜 화면이 업데이트되지 않는가?Vue/Nuxt에서의 당연함Vue나 Nuxt에서 개발할 때, 반응형 시스템은 너무나 자연스럽게 작동합니다. {{ post.title }} 이 코드는 예상대로 작동합니다. 게시글을 추가하면 .. Vue3 Carousel에서 화면 줄어들 때 이전 슬라이드가 겹쳐 보이는 문제 해결하기 프로젝트에서 Vue3 Carousel을 사용하다 보면, 해상도가 작아지거나 브라우저 창 크기를 줄였을 때 이전/다음 슬라이드가 화면에 겹쳐서 보이는 문제가 발생할 수 있습니다.처음에는 캐러셀 자체 버그인가 싶었는데, 원인은 뷰포트 영역이 슬라이드 밖 컨텐츠를 잘라내지 못한 것이었습니다.문제 상황아래와 같은 상황이 자주 발생합니다.데스크톱 풀스크린에서는 정상적으로 보임하지만 모바일이나 작은 화면에서는 이전/다음 슬라이드의 일부가 비쳐 보임특히 Motion 애니메이션(x: '50%') 같이 좌우로 이동하는 요소가 있으면 더 심해짐해결 방법해답은 의외로 간단했습니다.뷰포트 영역에 overflow:hidden을 강제로 주는 것만으로 문제를 해결할 수 있었어요..carousel__viewport { overfl.. 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 파일을 만들어 아래와 같이 작성합니다: .. 이전 1 다음
