본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section13] 186. 'afterEach' 전역 가드 # afterEach router에 추가할 수 있는 전역 가드가 하나 더 있다. → 바로 afterEach 가드 afterEach에는 함수가 필요하다. 함수는 어떤 식으로 정의해도 괜찮다. 화살표함수로 정의해도 된다. router.afterEach(function() {}) afterEach는 to와 from을 인수로 취하지만, 한번 실행하면 이동이 승인되기 때문에 next함수는 필요하지 않다. 그래서 afterEach는 이동을 거부하도록 변경할 수 없다. 거부는 before 훅(가드)으로만 가능하다. 대신 afterEach가드는 서버에 분석 데이터를 보내는 데에 유용하다. 이동 액션(action)이나 사용자의 페이지 변경을 로그로 남기는 등을 afterEach로 수행할 수 있다. //main.js ro..
[Udemy Vue 완벽가이드 Section13] 185. 내비게이션 가드 자세히 알아보기 전역 가드만 있는게 아니다. beforeEach(function)는 모든 내비게이션 액션(action)에서 어느 라우트로부터 어느 라우트로 이동하는지는 전혀 상관없이 실행된다. 이걸로 충분할 때도 있지만 그렇지 않을 때도 있다. 개별 라우트를 보호해야할 때가 있다. if검사를 사용해서 to, from 객체를 확인하고 라우트에 따라 다른 로직을 사용해서 개별 라우트를 보호할 수도 있지만 beforeEach 내비게이션 가드를 각 라우트에 설정하는 방법도 있다. # beforeEnter /users 라우트에 설정해보자. /users 라우트 구성에 beforeEnter를 추가하면 된다. 라우트가 하나이므로 beforeEach를 쓰지 않고 beforeEnter를 쓴다. beforeEach와 마찬가지로 인수로 to..
[Udemy Vue 완벽가이드 Section13] 184. 내비게이션 가드 소개 내비게이션 가드는 인증과 같은 기능을 추가할 때 유용하게 쓰인다. 인증하지 않은 사용자가 특정 라우트에 액세스할 수 없도록 방지하는 경우를 예로 들 수 있다. 하지만 일부 코드를 실행하고 싶을 때 페이지 변화를 감지하기에도 유용하며, 사용자가 양식을 수정한 걸 저장하지 않은 상태에서 실수로 페이지를 나가지 않도록 방지하는 데에도 도움이 된다. 내비게이션 가드의 실용적인 사용 예시를 살펴보자. # 가드란? 가드의 정확한 의미는 무엇일까? → 페이지가 바뀔 때 Vue 라우터로 호출하는 함수와 메서드 정확히는 내비게이션 동작이 시작될 때 호출하는 함수와 메서드. 예를 들어, main.js 파일에 생성한 라우터인 이 메인 라우터에서, Vue앱으로 router를 전달하기 전에 router.beforeEach를 호..
[Udemy Vue 완벽가이드 Section13] 183. 스크롤 동작 제어하기 이제 라우트 등록이나 컴포넌트 로딩과 이동을 위한 대부분의 핵심적인 기능을 배웠다. 사용자 경험을 구현하기 위한 유용한 기능 두가지가 더 있다. 바로 페이지의 스크롤 동작과 내비게이션 가드를 제어하는 것. 먼저, 스크롤 동작 제어부터 살펴보자. Teams 페이지를 예시로 보자. 이 페이지에는 팀 정보를 로드한다. Client Consulting팀을 로드하기 위해 스크롤을 내린다. View Members를 클릭하면 컴포넌트를 업데이트하지만 스크롤을 올려야 볼 수 있다. 위 member리스트가 있지만, 스크롤이 자동으로 올라가지 않아 보이지 않는다. 다른 라우트로 이동하면, 자동으로 스크롤이 올라가는게 좋을 것 같다. 라우트를 이동할 때마다 스크롤이 올라가서 사용자가 페이지 하단에 머무르지 않고 항상 전체 ..
[Udemy Vue 완벽가이드 Section13] 182. 이름이 있는(named) router-view로 여러 라우트 렌더링 쿼리 매개변수가 있는 이러한 객체를 to 프로퍼티의 값으로 넣어 이동시키는 기능을 구현해보았다. View Members # 여러 개의 router-view 애플리케이션에서 유용하게 쓰일 또 다른 기능이 있다. 같은 레벨에 생성하는 여러 개의 router-view. 이미 데모 앱에서 여러 개의 router-view를 만들어보았다. App.vue 파일과 TeamsList.vue 컴포넌트에 router-view가 하나씩 있다. TeamList컴포넌트에 있는 는 TeamsList 컴포넌트를 로드하는 route에 속한 중첩 라우트(children)를 위해 만들었다. { name: 'teams', path: '/teams', component: TeamsList, meta: { needsAuth: true }, c..
[Udemy Vue 완벽가이드 Section13] 181. 쿼리 매개변수 사용하기 객체 형태로 위치를 나타내거나 링크의 목적지를 작성하는 방법은 이름을 사용하거나 긴 문자열이 아닌, 보다 쉬운 방법으로 링크를 설정한다는 점 외에도 또 다른 유용한 점이 있다. → 필요한 정보를 추가할 수 있다. 쿼리 매개변수를 사용한다고 가정해보자. # 쿼리 매개변수란? 쿼리 매개변수는 route나 일부 URL의 물음표 뒤에 나타나는 것으로 예를 들어 /t1?sort=asc에서 'sort=asc'와 같은 것. 쿼리 매개변수는 기본적으로 라우트 매개변수에 작성하는 선택사항으로, 컴포넌트를 찾거나 로드할 때 필요한 것은 아니지만 컴포넌트에 정보를 전달할 때 사용할 수 있다. 필수적인건 아니지만 앱이나 페이지에서 유용하게 사용할 수 있다. 링크를 직접 생성할 때 이러한 쿼리 매개변수를 추가할 수 있다. # ..
[CSS] transition (트랜지션) # transition이란? CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 기간(duration)에 걸쳐 일어나도록 하는 것. 아래 div 요소는 기본 상태에서 'hover상태'로 변화할 때, CSS 프로퍼티 border-radius와 background 프로퍼티의 값이 변화한다. 상태 변화에 따라 CSS 프로퍼티가 변경되면 프로퍼티 변경에 따른 변화는 지체없이 즉시 발생한다. 위 예제의 경우, div요소에 마우스가 올라가서 hover상태가 되면, div 요소의 border-radius, background 프로퍼티의 값이 즉시 변경된다. See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen. transition은 상태 변화에 동반하여 변경되는..
[Udemy Vue 완벽가이드 Section13] 180. 이름이 있는 라우트 및 위치 객체 더 알아보기 지금까지 중첩 라우트에 대해 배웠다. 좀 더 규모가 큰 Vue 애플리케이션을 떠올려봐라. 수십, 수백 개의 다양한 라우트와 다른 라우트 내부에 중첩된 라우트가 있는 애플리케이션. 중첩 라우트를 여러 레벨로 만들고 중첩 라우트에도 또 자식 라우트를 만들 수 있으니 이렇게 수많은 중첩 라우트가 있는 애플리케이션을 떠올려 봐라. { path: '/teams', component: TeamsList, children: [{ path: ':teamId', component: TeamMembers, props: true, children: [] }], //children안에 또 children 있고.. }, 그런 앱이 있다면 우리가 작업하는 것처럼 링크를 생성하는 게 복잡해진다. 항상 전체 경로를 추가해야하고, 이..

티스토리툴바