이번 포스트에서는 lazy loading route 즉 지연 로딩 경로라는 것에 대해서 알아보자. lazy loading route 우리는 SPA Vue의 큰 특징은 SPA 즉 Single Page Application이다. 이녀석은 "최초 사이트에 요청 시 전체 애플리케이션에 대한 내용을 가져오고 이후에는 데이터만 이동하기 때문에 매우 효율적이다"라고 학습한 적이 있다. https://goodteacher.tistory.com/545 [vue 3] 01.SPA & SFC & Vite 이번 포스트에서는 SPA와 SFC 그리고 이를 구현하기 위한 Vite에 대해서 살펴보자. SPA vs MPA 정의 SPA(Single Page Application)과 MPA(Multi Page Application)이라는..

이번 포스트에서는 route의 meta field를 활용한 dynamic layout에 대해 살펴보자.  기존의 layout named view를 이용한 layout 구성앞서 우리는 named view를 이용해 페이지의 layout을 구성한 바 있다.{ path:"/named/home", components:{ header: HeaderView, footer: FooterView, default:SiteMainView, }}, 또는 Header와 Footer는 고정하고 SiteMainView만 RouterView의 형태로 작성해 볼 수도 있다. 하지만 이때의 문제는 각 뷰 마다 layout이 "고정적"이라는 데 있다.  어떻게 하면 필요에 따라 여러가지 레이아웃을 구성해 볼 수 있을..

이번 포스트에서는 src/assets에 저장한 이미지를 가져오는 방법에 대해 살펴보자. assets 이미지 가져오기 정적 로딩 assets 아래의 이미지를 정적으로 가져오려면 그냥 js를 참조하듯이 경로를 작성해주면 된다. 또는 파일을 import 해서 사용하는 방법도 제시한다. import staticImg from '@/assets/images/123.png' 개별 파일 동적 로딩 반면에 동적으로 로딩하기 위해서는 좀 복잡한 절차를 거쳐야 한다. 기존의 Vue 2.x는 WebPack을 사용해서 require 함수를 이용해서 로딩했었는데 Vue 3.x에서는 Vite로 변경되면서 URL 객체를 사용하는 방식으로 변경되었다. https://ko.vitejs.dev/guide/assets.html#new-u..

이번 포스트에서는 내비게이션 가드에 대해 살펴보자.   navigation guard navigation guard란?navigation guard는 router를 이용한 경로 탐색 과정에서 라우터가 동작하기 전/후에 추가적인 동작을 실행하게 해 준다.예를 들면 로그인하지 않은 사용자에게 로그인을 유도한다든가, 권한이 없는 사용자의 접근을 차단하거나 경로 탐색 이력을 로그로 작성하는 일등이 가능하다.여기까지 개념을 backend에서 생각해 보면 servlet의 filter나 spring의 interceptor를 떠올릴 수 있는데 딱 들어맞는다. navigation guard는 router에 적용하는 filter 또는 interceptor이다. 테스트 시나리오navigation guard 예제를 위한 시나..

이번 포스트에서는 작지만 유용한 라우팅 기법들에 대해 살펴보자.  reidrect와 alias redirectredirect는 어떤 경로로 요청이 들어왔을 때 다른 경로로 연결하는 기법을 의미한다. 예를 들어 링크 설계는 이미 되었지만 아직 컴포넌트 구현은 되지 않은 경우 404로 처리하는 대신 EmptyComponent로 redirect를 요청할 수 있다.{ path:"/etc/nextstep1", redirect: "/under"},{ path:"/etc/nextstep2", redirect: {name:'underconstruction'}}redirect 할 때에는 일반적으로 redirect 된 route의 component를 사용하면 되기 때문에 component 속성이 불..

이번 포스트에서는 liveserver를 실행할 때 개발자 도구를 활성화 시킨 상태에서 실행하는 방법을 알아보자! 시간 절약! liveserver 실행 시 개발자 도구 활성화 하기 귀차니즘 liveserver란 vscode의 extension으로 간단히 html을 테스트 해볼 수 있는 서버이다. 문제(사실은 귀차니즘)는 요즘 html에서 동작하는 javascript를 많이 작성하는데 실행시킬 때마다 계속 개발자 도구를 켜야한다는 점이었다. 한참 개발중인데 자동으로 개발자 도구를 실행시킬 수는 없을까? Chromium 실행 flag 다행히 chromium 계열의 브라우저(chrome 부터 edge, brave 등)에는 실행 시 다양한 옵션을 flag로 전달할 수 있다. https://peter.sh/expe..

이번 포스트에서는 중첩 경로와 이름 있는 뷰에 대해 살펴보자. 중첩 경로(nested route) 중첩 경로란?중첩 경로란 상위 컴포넌트에 하위 컴포넌트를 포함하는 구조를 의미한다.페이지를 구성하다 보면 상위 요소가 선택되어야 의미가 있는 하위 요소들이 있다. 예를 들어 특정 사용자의 프로필을 본다든가, 그 사람이 작성한 글을 보는 상황을 생각해 보자. 이 페이지들은 [사용자 선택]이 없다면 아무 의미가 없는 행동들이다. 이런 경우 상위 컴포넌트에 하위 컴포넌트를 포함시키는 중첩 경로 즉 nested route를 구성할 수 있다. Router 작성중첩 경로를 작성하기 위해서는 상위 경로에 children이라는 속성을 이용해서 중첩 경로 정보를 작성해주면 된다. children은 []로 여러 개의 중첩 컴..

이번 포스트에서는 다양한 방식으로 경로를 매칭하는 방법에 대해 알아보자.  파라미터를 활용한 동적 라우팅 params와 query가끔 동일한 컴포넌트를 주어진 경로의 패턴에 따라 동작시켜야 하는 경우가 있다. 예를 들어 사용자의 프로필을 표현하는데 /profile/hong , /profile/jang 형태로 불리는 경우이다. 당연히 이 과정에서 개인의 profile을 보여주는 component는 동일하고 뒤에 있는 /profile/[사용자이름]의 경로가 처리될 필요가 있다. 이를 위해 route에는 파라미터라는 것을 사용하는데 :을 이용해서 표현한다. 마치 스프링에서 path variable과 유사하다.{ path: '/profile/:id', component: DynamicPathView..