본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section13] 179. 중첩 라우트 사용하기 router에 route를 설정할 때, 구성할 수 있는 사항은 다양하다. 예를 들어, 중첩 라우트와 같은 유용한 기능이 있다. 일부 애플리케이션에서 라우터 안에 또 다른 라우터를 설정하고 싶을 수 있다. 예시를 보자. 팀원 정보를 개별 페이지에서 로드할 수 없다고 가정해보자. 대신 'View Members'버튼을 클릭하면 선택한 팀의 팀원 정보를 팀 목록 위에 띄우려고 한다. 이를 위해 같은 페이지에 선택한 팀원 정보를 임베딩하자. Vue 라우터를 이용하면 구현할 수 있는 작업이다. 여기 팀원 정보를 로드하는 라우트가 준비되어 있다. { path: '/teams/:teamId', component: TeamMembers, props: true } 현재는 /teams 라우트와 같은 '개별 라우트'로서 모든..
[Udemy Vue 완벽가이드 Section13] 178. 리디렉션 및 "Catch All" 라우트 지금까지 작업한 데모 앱에는 한 가지 문제점이 있다. Teams 버튼과 Users 버튼에는 문제가 없고 팀원도 확인할 수 있지만 실제로 사용자 대부분은 도메인 주소(localhost:8080/)를 입력해서 페이지에 접속한다. 도메인 주소로 페이지에 접속하면 오류가 생기지는 않지만 화면에 아무것도 뜨지 않는다. 이러한 원인은 콘솔에서 확인할 수 있다. → 라우터가 '/'라는 경로를 찾지 못하기 때문. 즉, '도메인 주소/'와 일치하는 라우트를 못 찾는다. 빈 페이지가 기술적 오류는 아니지만 우리가 원하는 결과도 아니다. 이 문제를 해결해서 화면에 무언가를 출력해야한다. 물론 만드는 앱의 특성과 적용할 라우트에 따라 달라진다. 어쩌면 이 페이지에 컴포넌트를 출력할 수도 있다. 1/ 새 라우트 추가 + 컴포넌..
[Udemy Vue 완벽가이드 Section13] 177. 매개변수를 프로퍼티(props)로 전달하기 TeamMembers.vue 컴포넌트에는 단점이 될 수 있는 부분이 있다. 라우팅을 통해서만 로드된다는 점이다. 그 이유는 코드에서 $route를 사용하고 있으므로. created()와 watch에서 모두 사용한다. 다른 컴포넌트의 템플릿에 임베딩해서 사용하고 싶은 경우, 예를 들어 애플리케이션을 수정해서 이 컴포넌트를 다른 방식으로 사용하고 싶다거나 한번은 라우팅을 통하고 다른 한번은 템플릿의 태그를 통해 로드해서 다른 위치에서 사용하고 싶다면 문제가 될 수 있다. # 라우트 대신 props를 이용한 화면 로드 TeamMembers를 로드할 때 props를 사용하는 쪽이 낫다. teamId를 props로 갖게 하는 방식. 라우팅을 거치지 않고 이 컴포넌트를 로드할 때는 이렇게 하면 된다. // Team..
[Udemy Vue 완벽가이드 Section13] 176. 감시자(Watcher)로 매개변수 데이터 업데이트하기 라우트 매개변수는 유용하지만, 사용하기 까다로울 수도 있다. 애플리케이션에서 라우트 매개변수 활용 시, 발생할 수 있는 문제 상황을 하나 만들어 보자. # 라우트 매개변수 활용 시, 문제상황 TeamMembers.vue파일의 컴포넌트는 라우트를 매개변수와 함께 로드한다. 그런데 모종의 이유로 router-link태그를 사용해야 한다고 치자. 텍스트는 'Go to Team 2'로 설정하고, 링크는 항상 '/teams/t2'로 가도록 연결하자. Go to Team 2 어디까지나 만들어낸 상황이지만, 이런 일이 있을 수도 있다. 애플리케이션에서 특정 매개변수에 대해 로드된 페이지가 있는데 바로 그 페이지에서 매개변수의 다른 값에 대한 페이지로 가야할 수도 있다. 지금 만든 상황이 그런 경우를 가정한 것. 파일..
[Udemy Vue 완벽가이드 Section13] 174. 내비게이션 및 동적 경로 버튼이 작동되게 하려면, TeamsList.vue 컴포넌트를 봐야한다. 보면 이 렌더링된 것을 확인할 수 있다. TeamsItem.vue파일을 보면, 링크가 연결된 View Members 버튼이 있다. 지금 링크는 평범한 앵커 태그()이다. View Members a 태그 대신에 뭘 쓰면 좋을까? 라우트로 연결되는 를 쓰면 된다. 다만, TeamsItem 항목마다 각기 다른 id를 붙여준다. 따라서 a태그 대신 를 쓰고, to프로퍼티를 추가할 거다. to에 어떤 값을 넣어줘야 할까? 이전에는 '/teams'만 쓰면 됐지만, 이제는 링크에 /개별id를 추가해야한다. 항목별로 id가 다르게 설정되므로 props배열에 id도 추가해야한다. //TeamsItem.vue export default { props:..
[Udemy Vue 완벽가이드 Section13] 173. 라우트 매개변수를 사용하여 데이터 전달하기(동적 세그먼트) 다양한 형태의 내비게이션을 추가해보았다. 이번엔 라우트 구성에서 무엇을 더 할 수 있을지 알아보자. const router = createRouter({ history: createWebHistory(), routes: [ { path: '/teams', component: TeamsList }, { path: '/users', component: UsersList }, ], linkActiveClass: 'active', }); 여러 앱에 필요한 기능 중, 특히 중요한게 하나 있다. TeamMembers 컴포넌트가 있다. 해당 컴포넌트에서 선택한 팀에 따라 다른 멤버를 렌더링하려고 한다. 이건 현재는 사용하고있지 않은 더미 컴포넌트이다. 내장 더미 데이터를 가진 컴포넌트로, 어디에서도 렌더링하지않고 있..
[Udemy Vue 완벽가이드 Section13] 172. 프로그래밍 방식 내비게이션 TheNavigation.vue를 보자. 앱 내부에서 페이지의 다른 부분으로 이동하는데 router-link를 사용하고 있다. 다른 페이지로 연결되는 다른 링크를 가진다. Teams 아주 평범한 이동 방식이다. 그런데 어떨때는 프로그램 자체에서 이동해야 할 때가 있다. UsersList페이지의 태그 위에 'Confirm'이라는 '버튼'이 있다고 해보자. Confirm 이 버튼을 클릭하면 어떠한 코드를 실행한다 치고, methods옵션에 'confirmInput'메서드를 하나 만들어보자. 그럼 이 메서드에서 변수에 일부 데이터를 저장하거나 서버에 데이터를 보내거나 등 중요한 무언가를 실행한다. 그 작업을 하고난 후, 페이지를 변경하고싶다. 아주 흔한 시나리오다. 작업이 완료되면 그 위치를 변경하는 것. 이..
[Udemy Vue 완벽가이드 Section13] 171. 활성 링크 스타일링하기 router-link에 의해 추가된 특수 css클래스를 a태그에 사용해보자. TheNaveigation파일로 가서, hover와 active규칙에 새 선택자를 추가해준다. router-link-active 클래스가 있는 a태그. 이 스타일을 해당 css클래스를 갖는 모든 a태그에 적용해야한다고 알린다. a:hover, a:active, a.router-link-active { /*router-link-active클래스가 있는 a태그*/ color: #f1a80a; border-color: #f1a80a; background-color: #1a037e; } 저장 후 확인해보면, 활성화되어있는 Users가 highlight 되어있다. 'Teams'를 누르면 Teams가 강조된다. 이렇게 현재 활성화된 링크가..

티스토리툴바