IT & 개발/etc (15) 썸네일형 리스트형 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.. MySQL에서 특수문자(①~⑩) 검색 및 제거하는 방법 (버전별 정리) 데이터베이스를 사용하다 보면 데이터 정제가 필요한 경우가 자주 발생합니다. 특히 사용자 입력값이나 외부 데이터에 ①②③④⑤⑥⑦⑧⑨⑩ 같은 불필요한 특수문자가 포함되어 있을 수 있습니다.이런 특수문자를 검색하고 제거하는 방법을 MySQL 8.0 이상 / 이하 버전으로 나누어 정리해 보겠습니다.MySQL 8.0 이상 사용 시MySQL 8.0 이상에서는 정규표현식 함수 REGEXP_REPLACE()와 REGEXP 검색을 사용할 수 있어 훨씬 깔끔하게 처리할 수 있습니다.1. 특수문자 포함 여부 검색SELECT * FROM your_table WHERE your_column REGEXP '①|②|③|④|⑤|⑥|⑦|⑧|⑨|⑩'; REGEXP는 해당 정규표현식에 하나라도 일치하면 해당 행을 반환합니다.2. 특수문자.. Git에서 'Permission denied' 오류 해결 방법 Git을 사용하다 보면 cannot update the ref 'refs/remotes/origin/dev': unable to append to '.git/logs/refs/remotes/origin/dev': Permission denied 오류를 만날 수 있습니다. 이는 파일 접근 권한 문제로 인해 발생하는데, 이를 해결하는 방법을 단계별로 정리해 보았습니다.1. 파일 권한 확인 및 수정우선, 문제가 발생한 파일의 소유권과 권한을 확인해야 합니다.ls -l .git/logs/refs/remotes/origin/dev결과를 확인했을 때, 파일 소유자가 현재 로그인한 사용자와 다르다면 소유권을 변경해야 합니다.sudo chown -R $(whoami) .git/또는 Git 폴더 전체에 쓰기 권한을 부여.. 윈도우에서 하위 폴더 파일 일괄 이름 변경하는 방법 윈도우 탐색기에서 하위 폴더에 있는 파일의 이름을 일괄적으로 변경하는 것은 종종 필요한 작업입니다. 기본적으로 윈도우 탐색기에서는 이 기능을 지원하지 않지만, PowerShell을 이용하면 매우 쉽게 수행할 수 있습니다. 오늘은 PowerShell을 사용하여 하위 폴더의 파일 이름 패턴을 변경하는 방법을 소개하겠습니다. 1. PowerShell 열기먼저, PowerShell을 열어야 합니다. 시작 메뉴에서 "PowerShell"을 검색하거나, 시작 버튼을 우클릭하고 "Windows PowerShell"을 선택합니다.2. 작업할 폴더로 이동하기PowerShell이 열리면, 파일 이름을 변경하고자 하는 폴더로 이동해야 합니다. 예를 들어, C:\YourFolder 폴더로 이동하려면 다음 명령어를 입력합니다:.. 이전 1 2 다음
