빵 입니다.

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

📌 컴포저블 함수- 🌟 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":..

현재 작업 중인 프로젝트에 Typescript를 도입해서 사용 중인데 type-check를 해보니 정말 개판인거에요.(네. 제가 개판으로 사용했습죠...) 그래서 에러 뜬 파일들을 일일이 열어서 수정을 했는데... 소스도 깨끗하지 않더라고요. props를 가져올 때의 default 값도 제각각~ 대충 알고 막연하게 사용했던 자신을 반성하며... 정리를 해보았습니다! 여기서 default❗defineProps({ list: { type: Array as () => { label: string; value: number }[], default: () => [] }, paginationValue: { type: Object as () => PaginationValue, default..

라인 차트를 사용하는데, 기본적으로 흐린 라인이었다가 포커스가 가면 Point Dot과 라인에 색상이 입혀지는 디자인이 나왔다. 어찌저찌 레퍼런스에서 라인 색상 hover 전, 후를 대응하는 속성값들을 찾아서 적용했는데,아무리 찾아도 툴팁 레이블 색상과 레전드의 레이블 색상을 변경하는 방법을 모르겠더라. 그래도 똑같이 구현하고 싶고, 또 전혀 없을 것 같은 내용은 아니라 열심히 찾아보았다.역시나 없을리가 없지~다른 분들의 시간 절약을 위해 공유해 보겠습니다. 우선, 차트 마우스오버 효과를 주기 위한 설정값들입니다.import { type ChartData } from 'chart.js'const lineChartData = reactive>({ labels: ['January', 'February', ..

const options = reactive({ plugins: { }, scales: { x: { ticks: { font: { size: 16 } } }, y: { ticks: { font: { size: 16 } } } }})

화면별 권한이 필요할 경우, vue-router에서 제공하는 네비게이션 가드를 이용해 화면에 접근 후 발생하는 이벤트들을 관리할 수 있다. 📌네비게이션 가드 vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용한다. 🧿전역 가드 router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있다. 🧿라우트 별 가드 beforeEnter 가드를 라우트의 설정 객체에 직접 정의 할 수 있다. 나의 경우 전역 가드와 라우트 별 가드 둘 다 설정했다. 프로젝트에 JWT를 적용했는데, 토큰 유무뿐만 아니라 토큰이 있어도 유효 기간이 만료된 경우도 있어서 일괄 처리를 위해 전역 가드를 사용했고 , 사용자가 이미 로그인한 상태에서 다시 로그인 화면..

💻서비스 환경💻 Vue3(setup 문법 사용) => ^3.3.11 vue-router => ^4.2.5 Typescript => ~5.3.0 pinia => ^2.1.7 axios => ^1.6.7 😒문제😒 axios에서 router를 불러오면 에러를 반환했다. [Vue warn]: inject() can only be used inside setup() or functional components. 😥문제 시나리오😥 JWT(JSON Web Token)을 이용하여 로그인 하고, 로그인 유지를 작업했다. 로그인 성공하면 서버에서 Access Token을 반환하고, 반환된 토큰값을 이용해 토큰 유효기간을 생성한 후 cookie에 저장하는 방식으로 작업했다. 로그인 유지를 체크하지 않으면 기본적으로 Toke..