저번 포스팅에서 Vue 컴포넌트와 컴포넌트간의 통신방법에 대해 살펴보았습니다.
오늘은 Vue라우터와 HTTP 통신라이브러리인 axios, 더 나아가 비동기 처리방식들을 알아보겠습니다.
이전 포스팅👀
[Vue.js] 알아보기(2) : Vue Component
안녕하세요! 저번 포스팅으로 Vue.js가 무엇이고 왜 사용하는지 더 나아가 Vue Instance에 대해서 알아보았습니다. 오늘은 Vue 컴포넌트와 컴포넌트간의 통신방법에 대해 알아보겠습니다. 이전 포스��
yeonzzy.tistory.com
💬
프론트앤드 개발자가 되기위해 vue에 처음 입문하게된 초보 개발자입니다. 많은 강의들을 찾아봤지만 Vue.js는 입문자들이 배우기엔 정보가 부족한 것 같아 인프런 '캡틴판교 (장기효)'님의 Vue.js 시작하기를 보며 공부하고 있습니다. 따라서 포스팅 내용이 '캡틴판교 (장기효)'님 강의를 참고하여 작성되어집니다!
1. Vue Router 란?
뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현하거나 페이지 간의 이동할 때 사용하는 라이브러리.
뷰 라우터를 사용하기 위해 CDN을 사용하거나 npm을 이용하여 설치.
- CDN 방식
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script
뷰 라우터 CDN 방식으로 사용할 경우, Vue.js CDN을 먼서 넣어준 뒤, Vue Router CDN을 넣어줍니다.
<!--Vue.js CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--Vue.js Router CDN-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- npm 방식
npm install vue-router
Vue Router 문법
Vue Router를 사용할 때는 뷰 인스턴스를 꼭 ! 생성해야 합니다.
var router = new Router({
// 라우터 옵션 ( routes / mode ) - routes : 라우팅할 URL과 컴포넌트 값 지정
* path: 페이지의 url 이름
* component : 해당 url에서 표시될 컴포넌트
(해당 페이지 마다 뿌려질 컴포넌트는 무조건 하나이기에 component !!)
- mode : URL 허쉬 값(#)제거 속성
mode: 'history' = 허쉬 값이 빠진 깔끔한 URL
});
new Vue({
router : router
});
Vue Router에서는<router-view>와 <router-link>라는 태그를 사용할 수 있습니다.
<router-view>는 페이지 url이 변경또는 이동되었을때 url에 따라 뿌려지는 영역을 정의할 수 있는 router태그로 Vue Instance에 router을 연결했을 경우에만 사용가능.
<router-link>는 사용자 입장에서 페이지의 이동을 link로 받아야 할 때 사용되는 router태그로 최종적으로 anchor태그로 변화 <a href=""></a>
<body>
<div id="app">
<div>
<!--
사용자 입장에서 페이지의 이동을 link로 받아야 할 때 사용되는 router태그.
최종적으로 anchor태그로 변화 <a href=""></a>
-->
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
<!--<router-view>
페이지 url이 변경또는 이동되었을때 url에 따라 뿌려지는 영역을 정의할 수 있는 router태그.
Vue Instance에 router을 연결했을 경우에만 사용가능
-->
<router-view></router-view>
<!--최종적으로 router-view에는 <div>login</div>가 들어감-->
</div>
<!--Vue.js CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--Vue.js Router CDN-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>Login</div>'
}
var mainComponent = {
template: '<div>Main</div>'
}
var router = new VueRouter({
// routes : 페이지의 라우팅 정보 = []배열로, 페이지의 개수만큼 객체필요
routes: [
// 첫번째 페이지 : 로그인 페이지 정보
{
// 페지이지의 url 이름
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},
// 두번째 페이지 : 메인 페이지 정보
{
path: '/main',
component: mainComponent
}
]
});
new Vue({
el: '#app',
// Router만의 속성값 : router 변수이름
router: router
});
</script>
</body>
2. Axios 란?
뷰에서 권고하는 HTTP 통신 라이브러리, promise 기반의 HTTP 통신 라이브러리로 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양해 활용도가 높음.
** promise 개념을 알아야 사용이 용이합니다.
** promise는 자바스크립트의 비동기적 패턴으로 아래에서 좀 더 자세히 다루겠습니다.
axios 오픈소스를 많이 활용하는 이유는 사용방법, API 및 속성 설명, 에러 핸들링 등 다양한 정보를 제공.
아래의 링크를 통해 axios를 깊게 살펴 볼 수 있습니다.
axios/axios
Promise based HTTP client for the browser and node.js - axios/axios
github.com
오픈 소스를 활용 할 경우 살펴보야할 점
- star의 수 : 많은 사람들이 사용했다는 인지도
- commit 과 contributors의 수
- 수정된 commit 이력들 : 최근까지 수정이 되어 있다면, 아직까지 수정-보완이 이루어지기 때문에
<body>
<div id="app">
<!--button 클릭시 getData 메소드 호출-->
<button v-on:click="getData">get user</button>
<!--data의 속성을 화면에 나타내기-->
<div>
{{ users }}
</div>
</div>
<!--Vue.js CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--axios CDN-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: []
},
methods: {
getData: function() {
var vm = this;
// 호출하기전의 this는 기본적인 인스턴스나 컴포넌트를 바라봄
// console.log(this);
//약 10개의 샘플 사용자 정보
//jsonplaceholder : 자바스크립트로 API를 요청할 때 테스트할 수 있는 사이트
axios.get('https://jsonplaceholder.typicode.com/users/')
//.then .chatch - promise의 개념을 익혀야함.
//성공시 then으로 진입
.then(function(response) {
console.log(response.data);
// 여기서의 this는 비동기적 처리에 의해 들어오는 callBack함수
// 실행 컨텍스트가 바뀌면서 자연스럽게 바뀜.
// console.log(this);
vm.users = response.data;
})
// 실패시 catch로 진입
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</body>
3. 기본 웹 서비스 구조
웹 서비스에서 클라이언트와 서버와의 HTTP 통신 구조를 알아두면 후에 개발을 할 때, 백엔드와의 소통 뿐만아니라 로직을 이해하기 쉬움
HTTP는 axios를 이용하여 HTTP 프로토콜 클라이언트와 서버간의 데이터를 주고 받기 위한 약속, 규칙
<브라우저 → 서버>로 어떠한 데이터를 요청했을 때, 서버에서 특정 백엔드 로직을 통해 DB로 들어가 해당 데이터를 가지고 나오면서 한번 더 특정 백엔드 로직을 거쳐 <서버 → 브라우저>로 응답하게 됩니다.
4. 크롬 개발자도구로 네트워크 패널보기
웹 서비스의 기본 구조가 이해가 간다면 Front-end가 필수적으로 보게될 네트워크 패널을 볼 줄 알아야 합니다.
개발자도구 - Network 패널로 들어가면 ALL 부터 XHR, js, CSS, img 등의 메뉴 중 XHR(비동기의 데이터 통신)을 살펴보아야 합니다. 무언가의 요청이 왔을 때, 어떤 응답이 왔는지를 볼 수 있는 네트워크 패널입니다.
XHR 메뉴의 Header / Privew / Response ... 의 중 Header는 HTTP의 hedaer을 의미, 일반적인 정보들과 요청에 대한 부가적인 정보를 볼 수 있는 곳으로 Header안에는 General / Response Header / Request Header로 분류되어 있습니다.
- General : Request URL, method, status code (status code:200은 성공을 의미 : 정상적으로 데이터를 받음)
- Response Header : 서버에서의 여러가지 응답 정보
- Request Header : 실제로 브라우저의 정보, 브라우저의 부가적 정보
5. 비동기 처리 방식이란 ?
💬 '캡틴판교(장기효)님'의 자바스크립트 비동기 처리와 콜백함수 정리본을 요약했기때문에 자세한 내용은 링크를 이용해주세요!
axios를 사용하기 위해서는 비동기 처리 방식에 대한 이해가 필요합니다.
비동기 처리 방식이란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실핼하는 자바스크립트 특성.
❔ 왜 그런 특성이 필요할까
화면에서 서버로 데이터를 요청했을 경우, 서버가 언제 요청에 대한 응답을 줄지 모르고 마냥 다른 코드를 실행하지 않고 기다릴 수 없기 때문!
비동기 처리의 대표 사례들은 jQuery.ajax()와 setTimeOut() 등이 있는데 아래의 setTimeOut()으로 살펴보겠습니다.
// #1
console.log('Hello');
// #2
setTimeout(function() {
console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');
비동기 처리에 대한 이해가 없다면 'Hello'출력 → 3초 후 'Bye'출력 → 'Hello Again'출력 으로 생각할 수 있습니다.
하지만 실제의 출력은 'Hello'출력 → 'Hello Again'출력 → 3초 후 'Bye'출력 의 결과값이 나옵니다.
setTimeOut()이 비동기 방식으로 실행되기 때문에, 3초 후 다음 코드를 실행하는 것이 아닌 setTimeOut()을 실행 후 바로 다음 코드인 console.log('Hello Aagin'); 으로 넘어감.
이에 따라 'Hello Again'을 출력 후 3초가 지나면 'Bye'가 출력.
비동기 방식은 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드들을 먼저 실행. 만약 특정 로직이 끝났을 때 원하는 동작을 실행시키기 원한다면? 콜백함수를 사용하여 해결가능.
하지만, 콜백함수를 사용함에도 콜백지옥(Callback Hell)이라는 단점이 발생.
**콜백지옥(Callback Hell) : 콜백함수를 연속해 사용할 때 발생되는 문제로 가독성이 떨어지고 로직을 변경하기 어려움.
$.get('url', function(response) {
parseValue(response, function(id) {
auth(id, function(result) {
display(result, function(text) {
console.log(text);
});
});
});
});
이러한 콜백지옥을 해결하기 위해서 위의 엉켜져있는 콜백 함수들을 분리하거나 Proimse나 Async을 사용.
function parseValueDone(id) {
auth(id, authDone);
}
function authDone(result) {
display(result, displayDone);
}
function displayDone(text) {
console.log(text);
}
$.get('url', function(response) {
parseValue(response, parseValueDone);
});위의 코드는 콜백 함수들을 분리한 콜백지옥예시 코드입니다. 위와 같은 코딩 패턴으로 콜백 지옥을 해결 가능하지만 Proimse나 Async을 이용하면 더 편하게 구현이 가능합니다.
promise와 async & await을 활용한 비동기 처리 방식은 아래의 링크를 통해 더욱 자세히 살펴 볼 수 있습니다.
자바스크립트 Promise 쉽게 이해하기
(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법
joshua1988.github.io
자바스크립트 async와 await
(중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법
joshua1988.github.io
부족함이 많은 초보 프론트앤드 개발자에게 좀 더 좋은 방법이나 팁, 조언해주실만한 얘기들이 있다면 거침없이 남겨주세요..
오늘도 조금이라도 성장할 수 있는 초보 개발자였습니다 !
'study > vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트 : 맨위로 버튼(Scroll Top Button) 만들기 (0) | 2024.01.05 |
|---|---|
| [Vue.js] 알아보기(4) : Vue 탬플릿문법과 Watch, 최신 Vue CLI (0) | 2020.09.25 |
| [Vue.js] 알아보기(2) : Vue Component (0) | 2020.09.07 |
| [Vue.js] 알아보기(1) : Vue.js 란 (0) | 2020.09.04 |
| [Vue.js] 시작하기 : 기본 개발환경 설정하기 (6) | 2020.09.01 |
