라우터&HTTP 통신

• 상용 웹 앱을 개발할 경우 여러 페이지로 구성되어 있기 때문에 페이지 간에 이동을 돕는 라우터를 사용해야한다.
• 사용자에게 의미 있는 데이터를 보여주기 위해 서버에서 데이터를 가져오는 HTTP 통신도 필요하다.

라우팅

• 웹 페이지 간의 이동 방법을 말함. 
• 싱글 페이지 어플리 케이션(SPA)에서 주로 사용

*싱글 페이지 어플리케이션

• 페이지를 이동할 때마다 서버에 요청하여 새로 갱신하는게 아니라 미리 해당 페이지를 받아 놓음
• 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴

라우팅의 장점

• 화면 간의 전환이 매끄럽다.

뷰 라우터

• 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 라이브러리
• 뷰 라우터를 구현할 때 필요한 특수 태그와 기능
  -<router-link to ="URL 값">
  -<router-view>
  
  

*<router-link to ="URL 값">

• 페이지 이동태그. 화면에서는 <a>로 표시 클릭하면 URL로 넘어간다.

*<router-view>

• 페이지 표시 태그. 변경 되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

router 등록

cdn

컴포넌트 설정

루트 설정

라우터 설정

*mount()

• el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다.
• 인스턴스를 생성할때 el를 넣지 않았더라도 생성하고 나서 mount()를 사용하면 인스턴스를 화면에 붙일 수 있다.
• 공식문서에는 el을 지정하지 않고 $mount()를 붙이는 식으로 안내하고 있다.

*주소의 # 없애기 

주소

• 주소의 hash 값을 없애려면 history mode를 사용한다.

 

여러 개의 컴포넌트 동시 표현하기 

• 네스티드 라우터와 네임드 뷰를 사용한다.

네스티드 라우터

• 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼수 있다.
• 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 되어 있다.
• 네스티드 라우터를 사용하면 URL에 따라 컴포넌트의 하위 컴포넌트가 다르게 표시된다.

컴포넌트 영역 정의

`는 키보드 왼쪽 상단에 있는 문자다! 조심

컴포넌트들 저의

네스티드 라우팅 정의

뷰 라우터 정의

*주소를 하나씩 치고 들어갔을 때 결과

• 첫번째 url 입력 

첫번재 주소

결과값

• user의 하위 컴포넌트 url 입력

두번째주소

결과값

• user의 다른 하위 컴포넌트 url 입력

세번째 주소

결과값

 

네임드 뷰

• 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
• 네스티드 라우터와 달리 같은 레벨에서 여러 개의 컴포넌트를 한번에 표시 

• router-view를 추가하고 이름을 부과한다. script에서 components 속성에 정의하는 컴포넌트와 매칭하기 위함이다.

•  컴포넌트를 생성한다.

• new VueRouter를 하나 정의하고 라우터 정보를 그 안에 정의한다.
  컴포넌트는 router-view의 이름과 동일하게 해준다.

• 인스턴스 해준다.

url

결과값

 

뷰 HTTP 통신

• 웹 앱 HTPP통신의 대표적인 사례는 제이쿼리의 ajax가 존재한다.
• ajax를 지원하기 위한 vue의 라이브러리가 존재한다. -뷰 리소스 , 액시오스-

액시오스

• 가장 많이 사용되는 HTTP 통신 라이브러리
• Promise 기반의 API형식이 제공되어 별도의 로직을 구현할 필요 없이 API만으로도 간편하게 원하는 로직 구현

*Promise

• 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체
• 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 사용
  -자바스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날때까지 기다려주지 않음-
• 데이터를 받아 왔을 때 Promise로 데이터를 화면에 표시하거나 연산을 수행하는 등의 특정 로직을 수행

 

axios CDN

 

• 해당 URL 주소에 대해 HTTP GET ,POST요청을 보낸다. 
• 서버에서 데이터를 받아오면 then()안의 로직이 처리한다.
• 데이터를 받아올 때 오류가 생기면 catch()가 처리한다.

GET POST 요청

 

옵션 정의

컴포넌트 지정

axios,vue cdn

속성 정의

• 결과값을 보면 data 속성이 일반 문자열 형식이 아닌 객체 형태이다.

결과 값