차근차근

아이폰으로 사파리 브라우저에서 웹 사이트를 테스트 하던 중,전화번호, 팩스번호, 사업자번호 항목이 자동으로 링크로 인식되는 문제가 있어 이 글을 작성하게 되었다. 이런 문제가 생긴 이유는 iOS에서 해당 번호들을 자동으로 인식하여 a 태그로 바꿔주었기 때문이며,간단한 해결방법은 아래와 같다.  meta 태그 추가 nuxt3 인 경우export default defineNuxtConfig({ app: { head: { meta: [{ name: "format-detection", content: "telephone=no" }], }, }, ...}

이미 원격 저장소에 push한 커밋을 수정할 일이 생겨 이 글을 작성하게 되었다.  가장 최근 커밋 메시지 수정git commit --amend -m "새로운 커밋 메시지"  이전 커밋 메시지들 수정1. 먼저 수정하고 싶은 커밋까지의 로그 확인// 자세히 보기git log// 간단히 보기git log --oneline 2. 수정하고 싶은 커밋의 바로 이전 커밋 해시 복사(만약 3개의 커밋이 있고, 두번째 커밋을 수정하고 싶은 경우 첫번째 커밋 해시를 복사) 3. rebase 시작git rebase -i {복사한 커밋 해시} 4. 열리는 에디터에서 수정하고 싶은 커밋 앞의 'pick' 을 'reword'로 변경 후 저장 5. 새로 에디터가 열리면 새로운 커밋 메시지 입력 후 저장 6. 원격 저장소에 pus..

맥에서 인텔리제이 툴을 사용하는 도중 왼쪽 클릭이 안되는 경우가 빈번하게 발생하여 이 글을 작성하게 되었다. 해당 문제는 한글 키로 설정된 상태에서 인텔리제이 툴을 벗어나게 되면 발생되고, 인텔리제이 툴을 재시작하면 해결할 수 있지만 이 방법은 너무 번거로워 다른 방법을 찾아보게 되었다. 찾아본 해결방법은 아주 간단하다. 바로 "한영키" 버튼을 누르면 된다!

canvas를 이용하여 차트를 그렸는데, pc로 볼때는 괜찮던 화질이 모바일로 볼 때 저하되는 현상이 있어 이 글을 작성하게 되었다. canvas에는 두 가지 영역이 존재하는데, 하나는 HTML의 요소 자체의 영역이고, 하나는 실제로 그려지는 영역이다. 영역이 두 개가 존재하기 때문에 canvas의 크기를 지정하기 위해서는 요소의 width, height 속성을 이용하는 방법과, css를 이용하는 방법 총 두 가지가 있다. 요소의 크기와 canvas 그리기 영역의 크기가 다르면 우선 canvas 그리기 영역에 맞춰 그린 뒤에 그 영역을 캔버스 요소의 크기로 맞춰주는데 이를 이용하여 화질 저하 현상을 해결할 수 있다. dpr(기기 픽셀 비율 -> 물리적 픽셀 / 논리적 픽셀)에 맞춰 canvas의 그리기 ..

현재 대시보드를 개발하면서 기록하고 싶은 이슈가 있어 이 글을 작성하게 되었다. 개발 중인 대시보드에는 여러 개의 영역이 있고 각 영역마다 드래그&드롭 하여 위치를 변경할 수 있다. 일반적인 영역의 경우 아무 문제 없이 동작하지만, 차트를 포함한 영역의 경우 드래그 중일 때 차트가 사라지고 드롭 후에 차트가 다시 생기는 문제가 있었다. 나는 드래그는 vue-draggable-next 라이브러리를 사용하였고, 차트는 vue-chartjs를 사용하여 개발하였는데, 처음에는 라이브러리의 문제인 줄 알고 차트와 드래그 기능을 직접 만들어보았지만 여전히 같은 문제가 발생하였다. 원인은 아직 파악하지 못하였고, 드래그 시작 할 때 차트의 canvas 부분을 이미지로 만들어서 그 이미지를 보여주는 방식으로 해결하였다..

전화번호나 핸드폰번호를 입력받았을 때 하이픈(-)을 추가하는 함수는 아래와 같다. 예시 15881588 -> 1588-1588 01011112222 -> 010-1111-2222 025557777 -> 02-555-7777 0315557777 -> 031-555-7777 const contactNum = (n) => { if (!n) return null; const numbers = n.replace(/\D/g, ''); if (numbers.startsWith('02')) { if (numbers.length

Nuxt3로 개발한 프로젝트를 빌드하니 이미지 사이즈가 1.5GB가 되었다. Nginx로만 빌드하면 이미지 사이즈가 200MB 이지만, 난 SSR을 사용해야하기 때문에 Node로 말아주는 작업이 필요하였고, 그 결과 이미지 사이즈가 1.5GB가 되었다. 사이즈가 너무 크면 빌드할 때 문제가 될 수 있으니 이미지 사이즈를 줄여보자! 1. Node 버전 변경 node:18 버전 -> node:18-alpine으로 변경 Dockerfile // Before FROM node:18 // After FROM node:18-alpine 2. .dockerignore 추가 Docker에서 제외되어도 되는 폴더, 파일 제외 .dockerignore node_modules .nuxt .git dist 3. Docker ..

Docker Desktop이 유료화되면서 회사에서 무료로 사용할 수 없어졌기 때문에 대체할 수 있는 Rancher Desktop을 설치해보자. 환경 Mac M3 1. Docker Client 설치 $ brew install docker docker-compose 2. Rancher Desktop 설치 링크: https://rancherdesktop.io/ Rancher Desktop by SUSE Simple Application Configuration Through a user-friendly Preferences dialog, you can easily configure different parts of the application: Configure to auto start Rancher Desk..

Vue3에서 브라우저에서 뒤로가기를 했을 때의 이벤트를 제어해야 할 때 onBeforeRouteLeave를 사용하면 된다. onBeforeRouteLeave((to, from, next) => { if (조건 추가) { next(false); // 실행시킬 함수 추가 } else { next(); } });

한글 조사를 구분하기 위해서는 마지막 문자의 받침 유무를 체크하여 처리하면 된다. 마지막 문자에 받침이 있으면 '-이/-을/-은/-과', 받침이 없으면 '-가/-를/-는/-와'가 된다. 아래는 받침 유무를 체크하는 함수이다. hasFinalConsonant(str) { if (!str) return false; const lastCharCode = str.charCodeAt(str.length - 1); if (!util.isHangul(lastCharCode)) return false; return (lastCharCode - 44032) % 28; }, requestStr: (str) => { return hasFinalConsonant(str) ? '을' : '를'; },