Vue route의 의존성 해제 간단 정리 | props 속성 허용

route의 props를 허용하여 라우트 컴포넌트에 속성 전달🔓$route에 의존된 컴포넌트const routes = [{ path: '/user/:id', component: User }]- 컴포넌트에서 $route객체(param 등)를 사용하면 특정 url에서만 사용할 수 있게 되어서 의존적이다.(url이 '/user/tay' 에서만 'tay'에 대한 User 컴포넌트를 가져올 수 있음)즉, 해당 url이 아닌 곳에서는 User 컴포넌트를 불러올 수 없게 된다.  🔓속성을 전달하여 $route에 의존성 해제 const routes = [{ path: '/user/:id', component: User, props: true }]- 필요에따라 어디서든 컴포넌트를 사용할 수 있도록 하려면 route에..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 15.
• textsms

Vue Router의 프로그래밍 방식 네비게이션

Vue Router의 프로그래밍 방식 네비게이션🪐선언적 방식과 프로그래밍 방식 비교 선언적 방식 프로그래밍 방식 router.push(...) - 를 사용하여 선언적 네비게이션용 태그를 사용하는 것 외에 라우터 인스턴스 메서드를 사용하여 페이지 이동 가능하다.  🪐router.push(url) 사용법- push를 통해 다른 url로 이동 가능하다.- 히스토리 스택에 넣어서 뒤로가기 시 이전 url로 이동한다.- 사실 의 내부 메소드라서 기능이 동일하다. ※ router.push 파라미터는 문자열 경로 또는 객체가 가능(1) 리터럴 문자열 경로 → router.push('/users/tay')(2) 경로가 있는 개체  → router.push({ path: '/users/tay' })(3) 이름을 가..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 14.
• textsms

Vue 동적 세그먼트 활용 동적 라우트 매칭 (+404 Not Found Route)

Vue Router의 동적 세그먼트를 활용한 동적 라우트 매칭🍀 동적 세그먼트란?- 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야할 때 사용한다.  예를 들면 ...사용자 목록/users사용자 상세/users/tay사용자 목록인 /users 에 매핑된다면, 사용자 상세는 /users/tay 처럼 사용자별로 같은 컴포넌트에 매핑되어야 한다.이럴 때 vue router 경로에서 '동적 세그먼트'를 사용하여 해결한다.  🍀 route의 param으로 동적 세그먼트 /users/:id - 동적 세그먼트는 콜론(:)으로 표시한다. - 컴포넌트에서 동적 세그먼트의 값은 $route.params로 접근할 수 있다. route의 param 동적 세그먼트 접근 방법(1) vue router 설정한다. → ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 13.
• textsms

Vue Router 간단 정리 (router-link와 router-view)

Vue Router의 router-link와 router-view 간단 정리🌩️Vue Router란?- 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 공식 라우터 라이브러리- url에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리  🌩️RouterLink 페이지 이동 컴포넌트- RouterLink는 Vue Router 에서 페이지를 이동할 때 a 태그 대신 사용하는 컴포넌트다.- 목표 위치를 to prop으로 지정한다.- 실제로 a태그를 사용하면 등으로 하드코드되서 를 더 선호된다.- 는 href를 갖는 태그로 렌더링된다. RouterLink의 기본 props이동- to: 링크의 대상을 전달한다.- replace: 클릭시 router.push() 대신 router.replace()를 ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 12.
• textsms

[강의리뷰] 짐코딩 Vue3 시리즈 강의 후기

짐코딩의 Vue3 완벽 마스터 시리즈Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"강의 길이는 7시간 47분 Vue와 Composition API 대한 기본적인 개념을 알려준다. 반응형, 데이터 바인딩, 양방향 바인딩, 기본 디렉티브, 데이터 주고받기 등을 학습한다. Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"강의 길이는 6시간 41분 실전에서 사용하는 기술들을 알려준다. 예를 들면 router나 네비게이션가드, 플러그인, 컴포저블, 상태관리 방법인 pinia 등을 학습한다. 강의 수강 후기듣게된 계기는 '프론트엔드 날개달기' 무료 강의를 수강하고 너무 좋아서 vue3 강의도 듣게되었다. 짐코딩의 vue강의는 기본편과 실전편으로 나뉘어졌다. 기본편은 쉽겠구나 하고 만만하게 봤다가 큰코다..

• format_list_bulleted 📃 기록/강의
• · 2024. 7. 4.
• textsms