IT & 개발 (58) 썸네일형 리스트형 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"이 같이 적용돼서 메뉴가.. Framework7 + TailwindCSS로 커스텀 다이얼로그 만들기 Framework7을 사용하다 보면 기본 다이얼로그(Alert, Confirm 등)의 스타일을 커스터마이징하고 싶을 때가 있습니다. 하지만 Framework7의 기본 다이얼로그는 HTML 커스터마이징이 어렵기 때문에, 을 활용하여 TailwindCSS 기반의 커스텀 다이얼로그를 직접 만들어보겠습니다.✅ 왜 대신 을 쓰나요?Framework7의 다이얼로그는 빠르게 만들 수 있지만:내부 마크업이 고정되어 있음TailwindCSS로 직접 커스터마이징하기가 제한적임반면 은 완전히 내 마음대로 마크업을 구성할 수 있어서,디자인 자유도와 유연성이 매우 높습니다.🧱 Step 1. 커스텀 다이얼로그 컴포넌트 만들기components/CustomDialog.vue 파일을 만들어 아래와 같이 작성합니다: .. 모바일에서도 PC처럼 보이게 만드는 웹사이트 뷰포트 설정 방법 요즘 대부분의 웹사이트는 반응형 웹을 채택하고 있어, 화면 크기에 따라 레이아웃이 자동으로 조정됩니다. 하지만 경우에 따라서는 모바일에서도 PC와 동일한 고정 해상도로 보여주고 싶을 때가 있습니다.예를 들어,모바일에서 너무 간단하게 축약된 UI가 마음에 들지 않을 때특정 서비스나 데모 사이트를 PC 기준으로만 설계했을 때디자인 시안 그대로 모바일에서도 유지하고 싶을 때이 글에서는 HTML, CSS, 그리고 뷰포트 설정을 통해 모바일에서도 PC와 동일한 해상도로 고정해서 보여주는 방법을 소개합니다.✅ 뷰포트(Viewport)란?모바일 브라우저는 기본적으로 태그를 이용해 웹사이트가 어떻게 보여질지를 결정합니다.이 설정을 바꾸면 모바일 화면이 PC 화면처럼 축소되어 보이도록 만들 수 있습니다.✅ 고정 해상도.. Git Checkout 충돌 해결: 유실을 감수하는 방법 vs 안전한 방법 Git을 사용하시다 보면 브랜치를 전환하려 할 때, 아래와 같은 에러 메시지를 마주하실 수 있습니다:error: Your local changes to the following files would be overwritten by checkout: some/file.txtPlease commit your changes or stash them before you switch branches.이 메시지는 로컬에서 수정한 파일이 전환하려는 브랜치에서도 변경되어 있어서, Git이 해당 파일의 변경사항을 잃지 않도록 막고 있다는 의미입니다.하지만 때로는 해당 변경사항이 불필요하거나 유실되어도 괜찮은 경우가 있고, 반대로 절대로 놓치고 싶지 않은 중요한 작업일 수도 있습니다. 이 글에서는 두 경우 모두를 안.. 😲 “((” 이게 다르다고? — 괄호의 숨겨진 정체 어느 날, ((와 같은 괄호가 텍스트 치환이 안 되는 이상한 상황을 마주했습니다. 분명 코드에서는 "("를 잘 인식하고 있었는데, 현실에서는 작동하지 않더군요. 왜 그럴까요?✅ 괄호도 다를 수 있다?우리가 흔히 쓰는 괄호 (와 )는 키보드에서 쉽게 입력할 수 있습니다. 그런데 문제는 문서나 입력기, 환경에 따라 비슷해 보이지만 완전히 다른 문자로 인식될 수 있다는 데 있습니다.예를 들어 아래 두 괄호를 보세요:( (반각 괄호, ASCII)（ (전각 괄호, Full-width)🔍 실제로 확인해보자: 유니코드 비교괄호의 정체를 확인하는 가장 확실한 방법은 유니코드 코드포인트를 살펴보는 것입니다.문자 이름 유니코드(반각 소괄호 (half-width)U+0028（전각 소괄호 (full-width)U+FF08?.. 🚫 Nginx 413 Request Entity Too Large 오류 해결 방법 웹 서버에서 파일 업로드 또는 대용량 데이터를 전송하려 할 때, 아래와 같은 오류를 마주한 적 있으신가요?413 Request Entity Too Large이는 클라이언트가 서버로 보낸 요청 본문(request body)의 크기가 Nginx가 허용하는 최대 크기를 초과했을 때 발생하는 오류입니다. 기본적으로 Nginx는 1MB까지만 허용합니다.📌 에러 상황 예시저는 /api/parse 라는 경로로 Flask 앱에 요청을 보내는 환경에서 이 문제를 겪었습니다. POST 요청으로 PDF나 이미지 같은 데이터를 전송할 때 발생했죠.location /api/parse { proxy_pass http://localhost:8088/parse; ...}🔧 해결 방법: client_max_body_si.. Laravel 외래 키 삭제 처리 – onDelete() 옵션 정리 Laravel에서 테이블 간 외래 키(foreign key)를 설정할 때, 부모 테이블의 데이터가 삭제되면 자식 테이블에 어떤 영향을 줄지 설정할 수 있습니다. 이때 사용하는 메서드가 바로 onDelete()입니다.이 글에서는 Laravel 마이그레이션에서 외래 키 삭제 동작을 제어하는 방법을 간단히 소개합니다.🧨 기본 예시php복사편집$table->foreignIdFor(ProductGroup::class) ->nullable() ->constrained() ->onDelete('set null'); 위 코드는 다음을 의미합니다:product_group_id 컬럼은 product_groups 테이블의 id를 참조합니다.부모 데이터가 삭제되면 외래 키 값을 null로 변경합니다.⚙️ onDelete 옵.. 이전 1 2 3 4 ··· 8 다음
