04. 상용 웹 앱을 개발하기 위한 필수 기술들

[jiyeong1004]

• 라우터 & HTTP 통신

< 04-1 뷰 라우터 >

• 라우팅이란?
• 뷰 라우터
• 네스티드 라우터
• 네임드 뷰

< 04-2 뷰 HTTP 통신 >

• 웹 앱의 HTTP 통신 방법
• 뷰 리소스
• 액시오스

[jiyeong1004]

뷰 라우터 실행 결과 화면

fd28e59

• 'Main 컴포넌트로 이동'을 클릭하면 깜박거림 현상 없이 URL의 끝이 'main'으로 바뀐다.
• 마찬가지로 'Login 컴포넌트로 이동'을 클릭하면 URL의 끝이 'login'으로 바뀐다.

[jiyeong1004]

라우터 URL의 해시 값(#)을 없애는 방법

• 뷰 라우터의 기본 URL 형식은 해시 값을 사용합니다. 만약 index.html/login과 같이 해시 값을 없애고 싶으면 히스토리 모드(history mode)를 활용하면 됩니다.

var router = new VueRouter({ mode: 'history', routes });
👆 뷰 라우터 URL의 해시 값을 없애는 속성

[jiyeong1004]

index.html#user 실행 결과 화면

d48bcef

• 첫 화면에는 아무것도 보이지 않으므로 코드를 브라우저에 실행하고 URL 값의 끝에 user를 입력합니다.

[jiyeong1004]

index.html#/user/posts 실행 결과 화면

d48bcef

• 하위 컴포넌트 UserPost가 제대로 표시되는지 확인하기 위해 URL 값의 끝에 '/posts'를 추가하고 실행합니다.

[jiyeong1004]

index.html#/user/profile 실행 결과 화면

d48bcef

• URL 값의 끝을 'profile'로 바꾸고 UserProfile 컴포넌트가 정상적으로 나타나는지 확인합니다.

[jiyeong1004]

45c1158

<router-view>에서 사용한 name 속성은 예약어가 아니라 사용자가 임의로 정의할 수 있는 값입니다. 위에서 사용한 header, footer 값 모두 appHeader, appFooter라고 이름을 변경해도 동일하게 동작합니다. 예외적으로 name 속성을 지정하지 않았을 때의 기본 컴포넌트는 default로 접근합니다.

[jiyeong1004]

0ffb8c8

this.$http.get('https://raw.githubusercontent.com/jiyeong1004/doit-vuejs/master/data/demo.json')
데이터를 요청한 URL을 이렇게 쓰면 프레임워크 목록이 나오지 않는다.

[jiyeong1004]

e98e6e6

this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
데이터를 요청한 URL을 이렇게 쓰면 프레임워크 목록이 잘 나오는 것을 확인할 수 있다.

[jiyeong1004]

액시오스 코드 실행 결과 화면

cbfdee7

액시오스 GET 요청 API : axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')

[jiyeong1004]

액시오스 코드 실행 결과 화면

4523ae9

액시오스 GET 요청 API : axios.get('https://raw.githubusercontent.com/jiyeong1004/doit-vuejs/master/data/demo.json')