빵 입니다.

현재 작업 중인 프로젝트에 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..

Vue2가 2023년 12월 31일부로 지원이 중단됐다.(EOL) 회사에서 진행하는 프로젝트에서 Vue2를 사용하고 있었기에 Vue3로 업그레이드 시키는 작업을 시작했다. 이전에 실무 작업을 할 땐, 항상 UI 컴포넌트를 직접 작업했었는데, 이번 프로젝트에선 꼭 UI Framework 사용하기로 마음 먹었다. 우선, 기존 프로젝트에서 Vue2, Vuex, Bootstrap-vue 등 Vue2에 최적화 된 패키지들을 걷어내고 Vue3에 최적화 된 패키지들을 검토했다. Vue-router는 그대로 사용하고, 상태 관리 라이브러리는 Pinia로 변경했다. 빌드 도구는 Vite를 선택했다. UI Framework를 선택해야 하는데... UI Framework 상위 3개를 비교했다. 각 버전 1부터 현재 버전까지..

동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라지는 경우 동일한 component를 재사용하게 된다. (하나의 component의 parmas를 구분해서 데이터 값을 변경해 주고 있다.) 그러나! 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅은 한 번 더 호출하지 않기 때문에, component의 데이터 값이 바뀌지 않는다. 문제 게시판 1, 게시판 2 두 개의 게시판을 만드는데 동적 라우팅을 이용하고, 동일한 UI를 사용하기 때문에 공통 component를 사용한다. 메뉴를 이동해도 route만 변경되고 본문 내용은 바뀌지 않는다. 해결 과정 route 변경 시 onUpdated에서 데이터를 재호출 해보았다. const boardType = route.params.b..

template과 slot을 어떻게 쓸 수 있는지 너무 헷갈려서 검색해 보았다. 막연하게 사용했었는데, 위 두 태그가 HTML 태그 기반이라는 것을 알았다. 사용 방법은 Vue에서 사용하던 것과 같다. 다만, 좀 더 구체적으로 두 태그를 알게 되었다. HTML 태그 : 콘텐츠 template 요소 엘리먼트는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공한다. (페이지가 load 될 때, HTML 코드 조각을 담아 놓는 안 보이는 요소이다.) 엘리먼트는 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너 페이지를 불러오는 동안 구문 분석기가 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링..

문제 에 있는 을 ref 로 가져오는데, 자꾸 null 찍힌다. => onMounted() 함수 안에서는 ref 값을 잘 가져온다. => setup() 안에 바로 변수를 만들어 할당한 후, section.value를 할당한다. 이유 setup()은 라이프 싸이클 중 create 시점에 실행되는데, 그 시점엔 을 읽기 전이다. 아직 html이 읽히지 않았기 때문에 항상 null 이 찍힌다. html DOM 가져오는 는 beforeMount 시점에 데이터를 가져온다. ref는 mounted 시점에 html 데이터를 가져올 수 있다. => 데이터 가져오는 시점보다 더 빨리 변수를 선언하니까 항상 null 문제 해결 1. setup에 변수를 선언만 해놓고, mount 될 때 데이터를 push해준다. 2. dom..

a태그 => 화면 전환 => 리소스 처음부터 끝까지 다시 호출. router-link => 기존 리소스 그대로 사용하기 때문에 새로 불러오지 않고, 사용할 컴포넌트만 불러옴 => 태그 생성. => 선언적 방식. 클릭 시 url 로 이동만 한다. 📌 router.push는 router-link 를 클릭 할 때 내부적으로 호출되는 메소드 ===> router-link를 클릭하면 router.push를 호출하는 것과 같다. router.push() => 자바스크립트로 주소창만 변경해주고, 히스토리 쌓고, 컴포넌트만 변경한다. => 주소 추가하기 위해 onClick과 같은 이벤트 핸들러와 같이 사용된다. => , 등 어떤 태그에 이벤트를 발생시켜 주소를 추가해서 => window.history API와 비슷하게..