[Udemy Vue 완벽가이드 Section13] 167. 라우팅 개념 및 사용목적

라우팅이란 무엇일까?

현재 Vue앱은 크게 두 가지 영역인 Teams와 Users로 나뉜다.

내비게이션 상, 두 개의 버튼이 있고 버튼 클릭 시 아래 해당 페이지로 바뀐다.

둘다 클릭이 가능하며, Teams에서는 View Members를 통해서 각 멤버도 볼 수 있다.

굉장히 간단한 프로젝트이다.

유심히 볼 점이 하나 있다.

버튼을 클릭하면 화면에 표시되는 스크린은 바뀌지만, URL(localhost:8080)은 바뀌지 않고 있다.

계속 동일한 URL로 나온다.

 

 

Vue를 이용해서 JS기반 클라이언트사이드 웹애플리케이션을 구축할 수 있는데, 이 웹 애플리케이션은 브라우저에서 실행되는 JS로 완전히 제어한다.

또한, 현재 SPA를 구축하고 있는데,

 

SPA란 fetching되는 단일 HTML파일에 작성하는 모든 JS코드 스크립트의 import가 포함되어있다. teams와 users폴더에 작성한 .vue코드가 아니라, 해당 코드들의 변형 및 최적화 버전 코드가 포함된다.

그리고 CLI가 이 모든 것을 백그라운드에서 관리한다.

 

결국, 브라우저에서 실행되는 JS코드가 화면에 표시되는 모든 것을 관장하게 된다. 지금과 같은 앱을 Single Page Application이라고 부르는 이유이다.(index.html 즉, html파일이 단 한개이므로!)

이렇게 하나의 HTML파일만을 가지고 해당 파일의 JS코드가 화면에 나오는 모든 것을 제어한다.

 

하지만 현재 방식에는 문제가 하나 있다. 페이지의 모든 영역에 대해 동일한 URL을 쓴다는 점.

다시 말해, 이 Users페이지를 다른 사용자와 공유한다고 했을 때, 지금 보이는 일반적인 URL(localhost:8080), 지금 사용하고 있는 '도메인 이름만 있는 이 도메인'을 공유하면 항상 시작페이지가 나온다.

즉, 이 애플리케이션의 '시작 페이지'만 공유할 수 있다는 의미.

 

 

Users버튼을 클릭하면 페이지가 달라지는 것은 JS기반 동작으로, 사실 URL과는 아무런 관련이 없다.

단지 버튼 클릭에 따른 올바른 동작일 뿐이다.

이 모든 동작이 제대로 작동하고, 애플리케이션도 작동하지만 실제로 이 앱이 우리의 클릭과 클라이언트의 JS코드를 통해 작동하도록 설정하는 것이 좋다.

동시에 URL과는 interact상태여야, 위치한 페이지를 나타내는 URL을 다른 사용자와 공유할 수 있다.

즉, Users페이지를 다른 유저와 공유할 수 있다.

 

 

물론 하나 이상의 HTML파일을 생성해서 다른 HTML파일을 가리키도록 해볼 수도 있다. localhost:8080/users.html 이렇게.

하지만 Vue앱을 이런식으로 구축할 순 없다.

여러 HTML파일을 생성하면, 추가된 HTML파일이 로드한 스크립트 코드는, 다른 스크립트 코드와 관계가 없는 것으로 인식된다.

 

바로 이런 문제를 라우팅이 해결할 수 있다.

 

패키지를 추가로 하나 설치해서 사용할 수 있는 도구인데, 브라우저에서 JS로 URL의 변경사항을 관리하고 동일한 SPA상에 URL이 변경되거나 해당 URL을 기반으로 화면에 이를 로드한다.

이 패키지를 이용해 URL을 변경할 수도 있다.

애플리케이션에서 다른 위치로 이동할 때, URL이 해당 위치를 반영할 수 있다. 이것이 바로 라우팅이며 앞으로 활용해 볼 개념.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.