FrameWorks/Vue30

• 

  VueRouter의 Route Component Props 파헤치기 라우트 컴포넌트에 Props 전달하기이전에 route를 통해 props를 꺼내는 방법을 사용했습니다. 아래처럼 말이죠. User {{ $route.params.id }} import User from './User.vue'cosnt router = createRouter({ history: createWebHistory(), routes: [ { path: '/user/:id', component: User, }, ],}) 하지만, User.vue에서 $route에 대한 직접적인 의존성을 제거하기 위해 props를 선언할 수 있습니다. User {{ id }} .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Redirection & Alias 파헤치기 Redirection리다이렉션은 route 설정 시 정의할 수도 있습니다.예를 들어 /home에서 /로 리다이렉션을 시켜보겠습니다.// String으로 작성한 리다이렉션const routes = [{ path: '/home', redirect: '/' }]// 이름이 있는 라우토로 설정한 리다이렉션const routes = [{ path: '/home', redirect: { name: 'homepage' } }]// 함수를 사용한 동적 리다이렉션const routes = [ { // /search/screens -> /search?q=screens path: '/search/:searchText' redirect: to => { return.. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Named View 파헤치기 이름이 있는 뷰때로는 여러 뷰(view)를 중첩하지 않고 동시에 표현해야 할 때가 있습니다.이름이 지정되지 않은 는 기본값으로 default를 가지게 됩니다.하지만, 우리는 에 name속성을 활용하여 원하는 컴포넌트를 추가해 고정시킬 수 있습니다.const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', components: { default: Home, // 두 컴포넌트를 ``의 `name` 속성에 매치 시킴 // key: value로 선언하지 않았지만 `LeftSid.. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Programmatic Navivation 파헤치기 router.push(...)이전까지 우리는 를 이용한 탐색 방법을 사용했습니다.하지만, javascript에서도 window.loacation이 있듯이 프로그래밍 방식으로 페이지를 탐색 할 수 있습니다.한번 비교해볼까요??선언 방식프로그래밍 방식router.push(...)그럼 한번 어떻게 자유분방하게 사용할 수 있는지 예시를 보면서 생각해 보도록 합시다.// String routerouter.push('/users/james')// route(path)를 나타낸 Objectrouter.push({ path: '/usersjames' })// parameter가 존재하는 이름을 가진 routerouter.push({ name: 'user', parmas: { username: 'james' } })//.. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Nested Route 파헤치기 Nested Route(중첩된 라우트)이전 게시글에서 우리는 를 사용해 보았습니다.Vue Router에서는 route를 중첩해서 사용 할 수 있습니다.이게 무슨말이냐??Vue를 공부하면서 부모-자식 관계를 지겹도록 들었을 겁니다.맞습니다. 도 부모-자식 처럼 사용하는 것이죠.음... 일종의 을 상상해 보시죠.우리는 컴포넌트를 삽입하는 거지만, 얼추 그런 느낌이란 뜻입니다. 다른 겁니다.예시를 보면서 이해해 보도록 합시다. 몇가지 컴포넌트를 만들어 봅시다./user/johnny/profile /user/johnny/posts ┌──────────────────┐ ┌──────────────────┐│ User │ .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Named Route 파헤치기 Naming Route우리는 route를 설정할 때 선택적으로 name을 지정할 수 있습니다.const routes = [ { path: '/user/:username', name: 'profile', component: User, }]위에처럼 name을 지정해주면 를 사용시에 to속성에 path정보를 넣지 않고 name을 명시해서 사용할 수 있습니다. 사용자 프로필 name을 이용한 routing은 여러가지 이점이 있습니다.하드코딩된 URL이 없음params의 자동 인코딩URL 오타 방지경로 순위를 우회하여, 같은 경로와 일치하는 하위 순위 라우트를 표시name은 중복될 수 없습니다.같은 name을 사용하는 route가 존재하면 에러를 발생시키죠.Vue .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Route Matching Grammar 파헤치기 parameter에 커스텀 정규식 사용parameter에 커스텀 정규식을 이용하여 사용할 수 있습니다.숫자만 표시하게 한다던지, 뒤에 추가로 붙는 URL을 허용해야하는 경우에 사용할 수 있죠.다음은 일반적인 route를 사용하는 방법입니다.const route = [ { path: '/order/:orderId'}, { path: '/product/:productName'},]하지만 정적섹션 /order or /product를 사용하고 싶지 않을 수 있습니다.만약 :orderId에서는 숫자만, :productName에는 무엇이든 가능하다면 정규식으로 해당 문제를 해결 할 수 있습니다.const route = [ // /:orderId -> 숫자만 매치됨 { path: '/:order.. FrameWorks/Vue 2024. 6. 21.

• 

  VueRouter의 Dynamic Route Matching with params 파헤치기 :param Data BindingRouter를 통한 화면이동 중 동적으로 데이터를 넘겨주는 방법을 알아보겠습니다.이것은 마치 GET방식의 데이터 전송과 유사한데요. ?key=value&key=valeu&...형식으로 사용하는 것이 아닌 콜론(:)을 사용하는 방법입니다.이 방식은 route의 path에 key를 작성하고 패턴을 적용시키는 방법입니다.query String을 사용하는 방법은 밑에서 알려드리도록 하겠습니다.다음 예시 코드는 User.vue파일로 라우팅시 id라는 key값으로 데이터를 전달하는 방법입니다. 예시를 보겠습니다.import User from './User.vue'const routes = [ { path: '/users/:id', component: User},] .. FrameWorks/Vue 2024. 6. 21.

• 

  VueRouter의 Router Instance 파헤치기 Basic Router Tag간단한 것들만 배워보고 자세한 것들은 다른 게시글에서 상세하게 설명하겠습니다. or 일반적으로 개발을 할 경우 태그의 경우 현재 페이지에서 다른 페이지로 이동하거나, 페이지 안에서 다른 컨텐츠로 이동할 경우 사용하게 됩니다.그 외의 클릭 이벤트의 경우는 을 사용하죠. or 태그를 사용하여 URL변경시 페이지를 다시 로드하지 않고 URL 생성, 인코딩 및 기타 다양한 기능을 처리할 수 있게 하는 컴포넌트를 사용합니다. 홈 소개 Create Router Instanace각 URL에 맞게 페이지를 이동하려고 한다면 routes를 설정해 주어야 하는데요.가장 우선이 되어야 할 건 Router의 Instanace를 생성.. FrameWorks/Vue 2024. 6. 21.

• 

  Vue의 ObjectBinding Object bindingv-textExpects: String태그 안에 text값을 input 시키는 것innerTEXT와 같다(?){{ msg }}v-htmlExpects: String태그 안에 html을 input 시키는 것innerHTML과 같다(?) v-showExpects: Any표현식 값의 진위 여부에 따라 요소를 보이게 or 안보이게 하는 것v-show가 포함되어 있는 요소는 항상 랜더링되어 DOM에 남아있지만, CSS속성만 토글한다.즉, v-if는 랜더링에서 조건이 거짓이면 DOM에 없지만, v-show는 DOM에는 남아 있다.Hello! v-if & v-else & v-else-ifExpects: Any조건문을 사용 할 수 있다.tymleaf의 “th:if”와 같다고 생각하면 된.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 Slot 파헤치기 Slotslot은 컨텐츠 배포 outlet 역할을 하는 커스템 Vue Eelement사용방법App.vue: props 버전 App.vue: slot 버전 Cancel Submit Slot에 default값 적용BaseButton.vue Submit Slot에 값을 제공하면 default 컨텐츠를 override(재정의) 한다.SubmitCancelCancelNamed SlotsSlot이 서로 고유하도록 설정하는 방법Slot에는 사용자 지정 식별자로 지정할 수 있는 named prop이 있다.Scoped Slots자식 props를 부모에서 사용 하고자 할 때 사용하위 Component가 상위 Component가 필요로하는 데이터를 제어하고자 할 때 사용slo.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 Props 파헤치기 Props사용방법type정의 가능한 기본 JavaScript의 데이터 타입→ String→ Number→ Boolean→ Array→ Object→ Date→ Function→ Symbolsrequired필수여부(중요값)defaultdefault값을 설정default값이 설정되어 있으면 required는 필요없다. {{ title }} {{ length }} checkProps: Custom Validation기존 props 정의 방법의 단점다음과 같이 정의되어 있을 때 image 프롭에 다음과 같이 값이 들어온다면??/images/movie-poster.pn/imagesmovie-poster.pngimages/movie-poster.png해당 prop에 있어 요구사항요구사항1 : 이미지는 반드시 루.. FrameWorks/Vue 2024. 6. 12.