FrontEnd/Vue 217 [Vue.js] Axios 라이브러리 Axios 서론 SPA 프레임워크와 관계없이 가장 많이 쓰이는 것으로 알려진 AXIOS 라이브러리입니다. 부트캠프에서 React를 배울 당시 Axios를 쓰지않고, Fetch만을 사용해서 구현해보라는 제한사항이 있었습니다. 따라서 저는 Axios 사용이 처음입니다. 뷰에서는 Axios를 사용하라는 권고가 있습니다. axios이전엔 vue-resourse라는 라이브러리가 공식이었다고 하네요. Axios 사용법 (with 오픈소스 사용법) 오픈소스를 사용하기 전 확인해야 할 가장 중요한 지표는 Star 수 그 다음 커밋수와 컨트리뷰터를 보면 좋다. 마지막으로 최근의 커밋이 언제인지 확인하며 신뢰도를 확인할 수 있다. Axios 깃헙 공식 설명에 따르면 Axios는 Promise기반의 HTTP Client이다.. 2022. 9. 18. [Vue.js] Router 기초 SPA에 필수 요소 Router new VueRouter 로 라우터 인스턴스 생성하고 Vue인스턴스에 router: router로 연결해준다. VueRouter 인스턴스에 routes 배열에 route 정보를 적어둔다. 영역에서 컴포넌트가 뿌려진다. 는 to로 이동하는 Link 태그이다. Login Main 2022. 9. 16. [Vue.js] 같은 레벨의 컴포넌트 간의 데이터 통신 (React의 State 끌어올리기) Vue.js에선 같은 레벨의 컴포넌트 간의 데이터 통신을 어떻게 할까? React의 State끌어올리기를 Vue.js에선 어떻게 구현할까? Vue.js의 컴포넌트간 데이터 통신 방법은 아래로 Props, 위로 Event이다. 이 둘을 이용해서 Event로 올리고, Props로 다시 내리면 같은 레벨 컴포넌트간 통신이 가능하다. {{str}} 2022. 9. 15. [Vue.js] 컴포넌트간 통신, Props, Event Emit Vue에서의 컴포넌트간 통신 흐름 상위 컴포넌트 => 하위 컴포넌트로 Props가 내려간다. (데이터가 내려간다.) 하위 컴포넌트 => 상위 컴포넌트로 Event가 올라간다. Vue에서의 Props 개념은 react의 Props와 같다. 상위 컴포넌트에서 하위 컴포넌트로 전달해주는 데이터! 데이터 흐름 또한 상위 컴포넌트 => 하위 컴포넌트로 같다. props를 던져주는 방법은 v-bind:프롭스 속성 이름 ="상위 컴포넌트의 데이터 이름" Event Emit Vue에서는 하위 컴포넌트에서 상위 컴포넌트로 Event라는것을 보낼 수 있다. 방법은 아래와 같다. 1) 컴포넌트 template에 v-on:click="passEvent" 이런식으로 태그에 달아주고, 하위컴포넌트 methods 객체에 해당 pa.. 2022. 9. 15. [Vue.js] Vue 인스턴스, 전역 컴포넌트, 지역 컴포넌트 Vue 인스턴스 new Vue()를 통해 Vue 인스턴스를 생성하고, 해당 인스턴스를 통해 이미 정의되어있는 Vue의 기능들을 사용할 수 있다. Vue 생성자 함수의 인자로 객체가 들어가는데, 해당 객체에 컴포넌트들을 정의할 수 있다. (지역 컴포넌트) 해당 객체가 아닌 script태그 내에 Vue.component() 방식을 통해 컴포넌트를 정의 할 수도 있다. (전역 컴포넌트) 우리가 생각하는 웹앱 내의 컴포넌트들은 보통 지역 컴포넌트로 선언하고, 플러그인 등은 전역 컴포넌트로 선언한다. 지역 vs 전역 Vue인스턴스를 2개 이상 생성할 수 있는데, 이 때 전역컴포넌트는 어디서든 사용할 수 있지만 지역 컴포넌트는 Vue 인스턴스가 지정한 el 내에서만 사용가능하다. (웹 앱에서 일반적으론 인스턴스 하.. 2022. 9. 15. [Vue.js] 튜토리얼 따라하는데 시작부터 에러 난 단지 헬로 월드만 찍고 싶었을 뿐인데... 시작부터 에러가 많이 나네요. (component name "" Should always be multi-word) 다행히도 검색해보니 이건 별건 아니고, Default로 지정되는 eslint에서 컴포넌트 이름을 multi-word로 하라는 설정이 되어 있어서 그렇다고 하네요. 간단하게 lint를 무시해주려면 아래와 같이 하면된다. // @vue.config.js const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, }); 그러나 경험상 lint는 귀찮지만 도움이 되는 친구이.. 2022. 9. 10. [Vue.js] Vue.js 찍먹을 위한 초기 세팅 Vue2를 레거시로 가진 회사에서 인턴을 하게 되었습니다. 인턴 시작 전 Vue2를 공부하고 세팅 정도는 문제없이 하기 위해 포스팅합니다. 대부분의 출처는 : 한시간만에 배우는 VueJS 입문 입니다. Vue Cli로 프로젝트 생성하는 법 npm i -g @vue/cli 로 vue cli 설치 vue create . 으로 현재 폴더에 프로젝트 설치 (폴더 생성하며 만들려면 vue create 원하는폴더명 ) 이후 선택창에 default (vue2/eslint) (vue3/eslint) 등 선택지 생김, 일단 첨이니까 vue2 Default로 선택 npm run serve 하니 vue로 만든 첫 프로젝트를 만났다! ㅎㅎ react로 팀플 2개 돌려봤더니 vue시작이 엄청 어려울 것 같진 않다. 오히려 새로.. 2022. 9. 10. 이전 1 2 다음
