빵 입니다.

Nuxt 프로젝트를 진행하는데 DB로 Firebase의 Cloud Firestore를 사용 중입니다. /board/:boardId로 라우팅했는데, /board/vOvuWpHHefg8ymJXDytZ 형식으로 라우팅되었습니다.Firestore에서 document ID를 기본적으로 랜덤 문자열로 생성하기 때문입니다. 그래서 알아보니 Firestore는 MySQL처럼 auto increment 기능을 기본적으로 제공하지 않았습니다.분산형 NoSQL이기 때문에 숫자 기반 auto increment는 충돌 위험이 크기 때문입니다. 그렇지만 각 게시글이 숫자로 된 고유 ID를 사용할 수 있도록 만들고 싶었습니다.그래서 찾아보았습니다. Firestore에서 공식 지원하는 방법은 아니고...;;;Counter 컬렉션을 ..

D&D 기능을 구현했습니다.직접 만들어볼까~ 하다가 구현해야 할 기능 공수에 비해 시간적 여유가 부족해서 라이브러리를 사용했는데요.3가지 꽤괜 라이브러리를 찾았습니다. 📌 SortableJS VS VueDraggable VS Shopify DraggableSortableJS와 Shopify Draggable는 Vanilla JS 기반이고, VueDraggable는 Vue/Nuxt에 최적화되어 있습니다. 특징을 간략하게 소개하자면... ◾ SortableJSanimation, ghostClass 등 다양한 옵션을 제공하고, VueDraggable보다 커스텀의 범위가 더 자유롭습니다.(당연, Vue와 상관없이 작동함.)다만, 배열을 자동으로 업데이트 해주지 않기 때문에 onEnd 이벤트 발생 시 splic..

📌 Nuxt의 렌더링 모드Nuxt에서는 SSR, CSR 뿐만 아니라 하이브리드 렌더링, 엣지 사이드 렌더링을 지원한다. 브라우저와 서버가 함께 JavaScript 코드를 해석하여 Vue.js 구성 요소를 HTML 요소로 변환할 수 있다. 이 단계를 렌더링이라고 한다. Nuxt는 universal 및 클라이언트 측 렌더링을 모두 지원합니다. 두 가지 접근 방식에는 장단점이 있다. 기본적으로 Nuxt는 더 나은 사용자 경험과 성능을 제공하고 검색 엔진 인덱싱을 최적화하기 위해 universal 렌더링을 사용하지만 한 줄의 구성에서 렌더링 모드를 전환할 수 있다. 📌 Universal RenderingNuxt 공식 홈페이지 https://nuxt.com/docs/guide/concepts/rendering..

📌 컴포저블 함수- 🌟 Composition API 기반으로 작성된 재사용 가능한 함수이다.- 상태 관리가 필요한 경우가 많지만, 반드시 필수는 아니다.- 이름은 보통 useXXX로 작성해 가독성과 목적을 명확히 한다. ◾ 반응형 상태 중심의 컴포저블ref, reactive, computed, watch 같은 Composition API 기능을 활용해 반응형 상태나 로직을 캡슐화한다.상태를 관리하고 컴포넌트에서 상태 변화에 따라 UI가 갱신한다.ex) useCounter() 같은 상태 관리 함수◾ 부수 효과 (Side Effect) 중심의 컴포저블onMounted, onUnmounted, API 호출, 이벤트 리스너 등록 등 Vue의 생명주기나 외부 효과 관리(Side effect)한다.반응형 상태는..

📌 서론지도를 그리려고 합니다!근데 이제 타입스크립트를 곁들인.... 기존엔 Chart.js만 사용했고, Chart.js에서 제공하는 기본 차트만을 사용했습니다.여러 지도 라이브러리가 있었는데, 무료이면서 메르카토르 도법으로 작업이 가능한 것을 찾았습니다.(+커스텀을 위해 자료들이 많은 것도 한 몫함.)그래서 고른 것이 D3.js !더보기더보기D3.js는 오픈 소스 라이브러리이기 때문에, 개인 프로젝트, 상업적 프로젝트, 웹 애플리케이션 등에 제한 없이 사용할 수 있습니다. D3.js 자체는 유료 버전이 없지만, D3.js를 기반으로 한 상용 라이브러리나 플러그인들은 유료로 제공될 수 있습니다.👉🏻 직접 다 그리면 공짜^^~🥰  📌 사용 패키지우선, 제가 사용한 패키지는 2가지입니다. "d3":..