IT & 개발 (56) 썸네일형 리스트형 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 옵.. 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://는 없음그럼에도 .. [SSH] 접속 오류 해결: “REMOTE HOST IDENTIFICATION HAS CHANGED!” 메시지가 떴을 때 서버에 SSH 접속을 시도했는데 아래처럼 무시무시한 경고 메시지를 본 적 있으신가요?@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Someone could be eavesdropping on you right now (man-in-the-middle attack)!...Host key verification failed.처음 보는 분들은 해킹인가? 싶은 생각이 드실 수도 있습니다. 이 글에서는 이 경고 메시지가 왜 뜨는지, 실제로 위험한 .. 이전 1 2 3 4 ··· 7 다음
