빵 입니다.

화면별 권한이 필요할 경우, 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와 비슷하게..