이런개발

Nuxt3 프로젝트를 진행하며 사용자 알림용 소리나 효과음을 넣을 일이 종종 생깁니다. new Audio('/alarm.mp3')처럼 간단히 구현할 수 있지만, 한 가지 문제가 있습니다:✅ 버튼을 여러 번 누르면 이전 오디오가 겹쳐서 동시에 재생되는 현상!이 글에서는 이 문제의 원인과 해결 방법, 그리고 오디오 관련 속성인 preload, load()의 개념까지 정리해보겠습니다.📌 문제: 오디오가 겹쳐 재생된다?다음과 같은 코드가 있다고 가정해봅시다:const audio = new Audio('/alarm.mp3')audio.play() 이 코드를 버튼 클릭 시마다 실행하면, 매번 새로운 Audio 인스턴스가 생성되어 각각 따로 재생됩니다. 그래서 버튼을 여러 번 누르면 소리가 겹쳐 들리게 됩니다.✅ ..

퍼블분께서. . . 모든 페이지마다 header/contents/footer 영역을 모두 추가해두셨다.  탭1 탭2 탭3 ... ... ...  오 마이 갓 ~~~  처음엔 한두페이지 뿐이었던 관리자 화면이어서 그냥 뒀는데, 일이 커지기 전에 고쳐본다.   1. definePageMeta란?Nuxt 3에서는 definePageMeta를 사용하여 페이지의 메타 데이터를 설정할 수 있다. 이 메타 데이터에는 레이아웃(layout), 미들웨어(middleware), 캐시 설정(cache) 등 여러 설정이 포함될 수 있다.✅ 기본 ..

🚀 NuxtLink를 써야 하는 이유1️⃣ 클라이언트 사이드 네비게이션 (CSR) 적용 태그는 기본적으로 서버에 요청을 보내고 새로고침(F5)하면서 페이지를 이동함.반면 는 페이지를 새로고침 없이 Vue Router를 이용하여 이동하기 때문에, 앱처럼 부드럽게 작동함.NuxtLink를 쓰면 라우트가 변경될 때 Vue의 가상 DOM을 활용하여 필요한 데이터만 업데이트함.✅ 결과적으로 속도가 빠르고 UX가 좋아짐.📌 비교 예시 About 페이지로 이동 About 페이지로 이동2️⃣ 자동 프리페치(Pre-fetch) 기능 지원를 사용하면, 브라우저가 화면에 보이는 링크를 미리 로드할 수 있음.Nuxt 3에서는 기본적으로 prefetch 기능이 활성화되어 있어, 사용자가 클릭하기 전에 이미 데이터를 로드함..

갑자기 다시 넉스트를 하고 있는 시키는 거 걍 다 해야 하는 노예 등장.  넉스트에 이미지 추가도 가능한 텍스트 에디터가 필요했다. 마치 이 티스토리 글쓰기 페이지 같은.... 이런 것 만드는 것이다.  공식 문서는 아래.환경에 맞게 필요한 패키지들 설치하면 된다. https://tiptap.dev/docs/editor/getting-started/overview   나는 특별한건 필요 없고, 글씨 정렬이나 볼드체, 글씨 크기, 순번 리스트.. 이 정도만 구현했다. ..