공부
-
[Vue] 이벤트를 통해 router 경로 이동하기Vue 2021. 9. 21. 16:32
이벤트(특히 click)가 발생할 때, router 경로(특정 컴포넌트)로 이동해야할 때가 많습니다. 이럴 경우, 몇가지 자주 사용하는 방법에 대해 정리하고자 합니다. 1. router-link 사용하기 기존의 a태그를 이용하여 를 사용하는 의미와 동일합니다. 그러나, 태그를 이용할 때는 여러 속성을 추가할 수 있습니다. router link move 그냥 to로 할 경우는 기존의 경로에서 추가되어 "기존경로/path 경로" 로 나타나집니다. 만약 기존경로를 제외하고, 그 경로자체로 이동하고 싶은 경우 아래와 같이 name을 추가하여 이동하고자 하는 컴포넌트 name을 기입합니다. router link move 2. this.$router.push router-link 태그를 사용하기 힘든 경우, 자주 ..
-
[Vue 기초] axios 환경 설정하기Vue 2021. 9. 21. 15:41
안녕하세요. vue-router에 이어서 vue 프로젝트를 진행할 때, 백엔드 서버와 data를 받고 보내기 위해 필요한 axios를 알아보겠습니다. 1. axios란? axios는 promise기반의 http 비동기식 자바스크립트 통신기법입니다. 기존의 ajax는 jquery에 특화되어있고, promise기반이 아니라는 점이 단점인데 axios는 js의 플러그인으로 vue뿐만 아니라 react에서도 훌륭하게 쓸 수 있는 통신기법으로 자리잡았습니다. 또한, 비슷한 통신기법으로 fetch가 있지만 fetch에 비해 다양한 기능을 제공하고 있습니다. 물론 fetch는 별도의 설치가 필요없다는 점에서 아직 불안정한 라이브러리에서 종종 쓰이고 있습니다. ++) ajax / axios / fetch에 대해 추가적..
-
[Vue 기초] vue-cli를 이용하여 프로젝트 생성Vue 2021. 8. 16. 15:23
vue를 배우고 나서 처음으로 글을 작성합니다. 첫글을 무엇으로 작성하면 좋을지 생각을 하다..! vue를 이용하여 프로젝트를 할때, 정말 기본이 되는 vue-cli를 사용하는 방법에 대해 적으면 좋겠다고 생각해서 이에 대해 끄적끄적 해보려고 합니다. ㅎㅎ 앞으로 vue-cli를 기반으로 한 프로젝트를 통해, vue에 대해 알아야 하는 부모-자식간의 통신방법, router사용 등등에 대해 적겠습니다. 1. VUE-CLI는 무엇인가? vue cli는 Vue command line interface의 약자로, vue 개발 환경을 설정해주는 도구입니다. vue cli가 알아서 기본적인, 프로젝트 환경 세팅을 완료해줍니다! (편하고, 멋지죠?) 2. VUE-CLI 설치하기 1) node js 설치하기 vue-c..