개발로그

해당 글은 인프런 [Vue.js 완벽가이드] 강좌에 올린 질문과 그에 대한 답변을 기록하였습니다. 질문 안녕하세요. 강의 잘 듣고 있습니다 :) 강의 중에 this.$store.state.user 부분을 줄이기 위해 computed를 사용하시면서 템플릿 부분 텍스트를 깔끔하게 하기 위해 computed를 거치는 것은 Vue.js 공식가이드에 나와있는 방식이라고 하셨는데, 그러면 mapState나 mapGetters는 언제 써야 하는것인가요? 물론 모든 방법이 다 의도한대로 작동할 것임은 알지만 제가 vuex 공식문서에서 본 바로는 "컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야하는 경우 계산된 속성을 모두 선언하면 반복적이고 장황해집니다. 이를 처리하기 위해 우리는 계산된 getter 함수..

오늘 한 일 Vue.js 완벽 가이드 강의 2개 수강. 공부 내용 동적 라우트 적용하는 방법을 배웠다. { path: '/user/:id', component: UserView } routes>index.js 파일에 path를 "/user/:id" 이런식으로 정의해주면 /user/뒤에 오는 값이 파라미터로 인식되어서 $route.params.id로 데이터를 가져올 수 있다. 해당 라우트에 연결하기 위해서는 컴포넌트에 태그를 사용한다. {{ item.user }} 위와 같이 router-link 태그의 to 속성에 해당 path를 연결하여 해당 유저의 아이디 값을 동적으로 매핑해준다. vuex를 사용하면서 약간 애매한 부분이 생겼다. 컴포넌트 템플릿에 데이터를 바인딩할 때, this.$store.state..

오늘 한 일 Vue.js 완벽가이드 인프런 강좌 [중간정리 및 스타일링]까지 30% 수강 및 실습. 자바스크립트 노랭이 책 [7장 함수표현식] 완독. 공부 내용 axios / Promise axios는 Promise 객체를 반환하므로 .then과 .catch를 이용하여 비동기 처리를 할 수 있다. Promise 객체는 ES6에서 정의된 것으로, 콜백함수지옥을 해결해 줄 수 있다. new Promise로 객체 인스턴스를 만드는 순간 Promise는 대기 상태에 있게 된다. 그리고 http호출을 통해 값을 받아오게 되면 response를 가진 이행 상태가 된다. 그러나 값을 받아오지 못하면 실패 상태가 된다. 이것을 코드로 표현하면 다음과 같다. new Promise(function(resolve, reje..

오늘 한 일 내일 윤아씨와 약속이 있기 때문에 전에 받았던 소스를 분석해보고자 급 Vue.js 공부를 시작했다. Vuex에 대해 검색하다가 인프런에 있는 캡틴판교님의 Vue.js 완벽 가이드 강의를 급 결제함. 강의 듣기 전, Vuex 공식문서를 일단 한 번 읽어보기로 함. 공부 내용 Vuex Vuex는 Vue.js를 위한 상태 관리 저장소이다. 한마디로 모든 컴포넌트가 접근 가능한 상태값이 저장되어 있는 전역 저장소! 이것은 반응형이라서 저장소 내의 상태가 변경되면 해당 상태를 의존하는 컴포넌트들이 모두 업데이트 된다. 이것에는 5가지 핵심 컨셉이 있다. 1. State Vuex는 단일 상태 트리로서 하나의 어플리케이션에는 하나의 상태 저장소만 존재한다. 저장소에 접근할 때는 'store.state.상..