Web/Frontend13 [Vue.js] vuex state - data getters, mapgetters - computed mutations, actions - methods Vuex - Vue.js application에 대한 상태(data)관리패턴 + 라이브러리 - application 모든 component들의 중앙 저장소 역할 (데이터 관리) - 상위(부모) 하위(자식)의 단계가 많이 복잡해진다면 데이터의 전달하는 부분이 매우 복잡해짐 - application이 여러 구성 요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제 발생 => 매우 복잡해짐 - application 구성이 복잡해졌을 때 사용하는 것이지 무조건 사용하는건XXX 부모-자식 컴포넌트간의 data 전달 동위 컴포넌트간의 data 전달 vuex 상태관리패턴 new Vue(.. 2022. 11. 14. [Vue.js] vue-router vue-router - 라우팅: 웹 페이지 간의 이동 방법 - Vue.js의 공식 라우터 - 라우터는 컴포넌트와 매핑 - Vue를 이용한 SPA를 제작할 때, 유용 - URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여줌 vue-router 이동 및 렌더링 - 네비게이션을 위해 router-link 컴포넌트를 사용 - 속성은 'to' prop를 사용 - 기본적으로 는 태그로 렌더링 HOME 게시판 - 현제 라우트에 맞는 컴포넌트가 렌더링 이름을 가지는 라우트 - 라우트는 연결하거나 탐색을 수행할 때 이름이 있는 라우트를 사용 - Router Instance를 생성하는 동안 routes 옵션에 지정 프로그래밍 방식 라우터 - 를 사용하여 선언적 네비게이션용 anchor 태그를 만드는 것 외에도 라우터.. 2022. 11. 11. [Vue.js] axios 비동기 1. XTMLHttpRequest (JavaScript) - 0~3 : 처리중 - 4 : 정상처리 (readystatus) - 200번대, 400번대, 500번대... => 이 방식이 복잡해서 나온게 fetch 2. fetch (JavaScript 기본으로 내장되어 있음) - Promise기반의 라이브러리를 리턴 1) 성공 (resolve) : then 2) 실패 (reject) : catch 3) 무조건 실행 : finally 3. JQuery AJAX 4. axios - Promise기반 - CDN 방식 - npm 방식 npm install axios axios (비동기) : HTTP 통신 - Vue에서 권고하는 HTTP 통신 라이브러리' - Promise 기반의 HTTP 통신 라이브러리이며 .. 2022. 11. 10. [Vue.js] 컴포넌트 모듈로 분리 전역 컴포넌트 지역 컴포넌트 컴포넌트 데이터 공유 * 템플릿을 줄 때는 반드시 루트 엘리먼트에 묶여 있어야 함 $emit 이벤트 실행순서 2022. 11. 8. 이전 1 2 3 4 다음
