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

[강의리뷰] 캡틴판교 Vue3 시리즈 강의 후기 | 인프런

회사에서 기존 vue2 프로젝트들을 vue3로 마이그레이션하기 위해 캡틴판교의 vue3 강의들을 학습하게 되었다. [ Vue 3 시작하기 ] 시작편에서는 vue2와의 차이점과 vue의 기본적인 개념 위주로 알려준다. SFC라던가 vue의 문법 등 vue2와 vue3의 공통적인 내용을 배운다. vue2 학습 없이 바로 vue3를 학습하는 사람들을 위한 강의같다고 생각했다. [ Vue 3 중급 - Composition API ] 중급편에서는 본격적으로 vue3의 코어 api레벨인 컴포지션 api에 대해 옵션api와의 비교를 통해 특징과 장단점을 알려준다. 그리고 직접 vue3로 todo list를 만들어볼 수 있다. [ 캡틴판교 Vue3 강의 후기 ] 강의만으론 깊이 있게 배우긴 어렵다고 느꼈다. 또한 몇 ..

• format_list_bulleted 📃 기록/강의
• · 2024. 6. 18.
• textsms

캠핑카 모션그래픽 (phase 툴 활용)

우연히 phase가 출시되었다는 광고를 보게되었다. 무료 모션그래픽 툴이라길래 궁금해서 찍먹해보기로 했다. 마침 한국 phase에서 상금이 달린 모션그래픽 챌린지를 진행하고 있었다. 상금에 눈이 먼 나, 도전! 🤑 1. 스케치 (프로크리에이터) 스케치는 아이패드로 그렸다. 처음부터 자동차 애니메이션을 할 생각은 없었는데 만들다보니까 루프 모션그래픽으로 만들게 되었다. 2. 라인워크 (phase)라인워크(선따기)를 하다보면 스케치보다 좀 더 정갈한 형태가 되도록 노력한다. 불필요한 선과 요소들을 줄이려고했다. 그리고 처음 써보는 phase 였지만 너무 편하고 쉽게 작업했다. 아직 기능이 많이 부족한데, 마스크 기능이 없으면 어떡하나 싶었는데 있어서 다행이었다. 3. 추출하기mp4, gif, json 형식으..

• format_list_bulleted 👨‍🎨 디자인
• · 2024. 6. 13.
• textsms