126. Understanding Routing
npm create vue@latest
이 섹션에서는 사용자 인증과 음악 업로드 기능에 대해 다룹니다.
사용자 인증의 목적은 사용자가 애플리케이션에 음악을 업로드할 수 있게 하기 위함이며, 사용자 계정이 없으면 업로드한 음악을 계정과 연결할 수 없습니다.
이제 음악을 업로드하는 단계로 넘어갑니다.
음악 업로드를 위한 별도의 페이지를 만들 계획입니다.
애플리케이션의 다른 부분들을 위해 별도의 페이지를 생성하는 것은 일반적인 작업입니다.
이 과정을 라우팅이라고 합니다.
- 목적: 사용자가 음악을 업로드할 수 있는 페이지를 만드는 것
라우팅은 간단한 개념으로, 특정 유형의 컨텐츠에 대한 URL이 매핑되어 있습니다.
예를 들어, 이미지나 블로그 포스트에 대한 URL에 방문하면 서버는 해당 컨텐츠를 응답합니다.
전통적으로 라우팅은 서버에서 처리되었습니다.
그러나 최근에는 자바스크립트의 발전과 브라우저의 발전으로 프론트엔드에서도 라우팅을 처리할 수 있게 되었습니다.
이는 Vue, Angular, React와 같은 현대 프레임워크에서 지원되는 기능입니다.
- 라우팅이란?: 특정 URL에 대해 서버가 응답하는 컨텐츠를 매핑하는 것
- 라우팅의 목적: 사용자가 애플리케이션의 특정 부분에 접근할 수 있도록 하는 것
- 라우팅의 종류: 서버 라우팅, 클라이언트 라우팅
- 서버 라우팅: 서버에서 라우팅을 처리하는 것
- 클라이언트 라우팅: 프론트엔드에서 라우팅을 처리하는 것
- 라우팅의 장점: 사용자가 애플리케이션의 특정 부분에 접근할 수 있도록 하는 것
- 라우팅의 단점: 라우팅을 위한 추가적인 코드가 필요하며, 서버 라우팅보다 복잡함
- 라우팅의 구현: Vue Router, React Router, Angular Router 등의 라이브러리를 사용
- Vue Router: Vue에서 라우팅을 구현하기 위한 라이브러리
- React Router: React에서 라우팅을 구현하기 위한 라이브러리
- Angular Router: Angular에서 라우팅을 구현하기 위한 라이브러리
프론트엔드에서의 라우팅은 새 페이지를 로드하는 대신 컴포넌트로 응답합니다.
이 컴포넌트는 컨텐츠의 컨테이너 역할을 합니다.
라우터를 사용하여 특정 URL에 대해 렌더링할 컴포넌트를 구성할 수 있습니다.
컴포넌트가 페이지에 로드된 후, 서버에 데이터를 요청하는 옵션이 있습니다.
이런 흐름은 사용자가 전체 페이지를 다시 로드할 필요가 없기 때문에 더 나은 사용자 경험을 제공합니다.
또한, 이 방식은 대역폭을 절약하는 또 다른 이점을 제공합니다.
전체 페이지를 요청하는 것은 많은 데이터 전송을 필요로 하지만, 데이터 자체만 요청하면 요청이 빨라집니다.
이는 페이지 로딩 시간을 줄이고 전반적인 사용자 경험을 향상시킵니다.
- 라우팅의 장점: 사용자가 전체 페이지를 다시 로드할 필요 없이 컴포넌트를 렌더링하므로 더 나은 사용자 경험을 제공
- 라우팅의 장점: 데이터 자체만 요청하므로 대역폭을 절약하고 페이지 로딩 시간을 줄임
- 라우팅의 단점: 라우팅을 위한 추가적인 코드가 필요하며, 서버 라우팅보다 복잡함
이 강의의 리소스 섹션에서는 Vue Router 공식 문서 링크를 제공합니다.
Vue Router는 Vue의 공식 라우터 패키지입니다.
기본적으로 Vue에는 라우팅 기능이 제공되거나 구성되어 있지 않으므로, 애플리케이션에 라우팅 기능을 추가하려면 모듈을 설치해야 합니다.
Vue Router 라이브러리를 반드시 사용해야 하는 것은 아니며, 프로젝트에 적합하지 않을 수도 있습니다.
이 과정에서는 공식 라우터를 사용할 예정입니다.
Vue Router 모듈 설치는 매우 간단하며, npm i vue-router
, yarn add vue-router
명령어를 실행하면 됩니다.
이미 설치되어 있으므로 별도로 설치할 필요는 없습니다.
다음에 Vue Router 구성에 대해 살펴보도록 하겠습니다.
- 라우팅의 종류: 서버 라우팅, 클라이언트 라우팅
- 서버 라우팅: 서버에서 라우팅을 처리하는 것
- 클라이언트 라우팅: 프론트엔드에서 라우팅을 처리하는 것