수민정의 기술블로그

src api : Axios 콜 components : 비즈니스 로직 등이 담긴 컴포넌트 routes : index.js 로 정의 라우터 정보 기입 store : 도메인 경계별로 모듈화 , index.js 에서 통합 views : 비즈니스 로직을 제외한 라우터에 등록할 컴포넌트기입 vue.config.js : webpack.config.js 파일의 설정을 하는 파일 Router 의 동적 주소 매칭 백엔드 API 와의 호출을 위한 경로 변수, 쿼리스트링을 사용하기 위해서 제공 경로변수의 경우 :name 형태로 기입 에서 변동되는 데이터를 넘겨주면 해당 컴포넌트에서 param 으로 받을 수 있다. // rourte -> index.js { path: '/user/:id', component: UserView..

VSCode 플러그인 Vutur : 싱글파일 컴포넌트 기반 자동완성 제공 TSLint : 타입 에러를 잡아 줌 ESLint : 코드 작성 규칙을 잡아 줌 Auto Close Tag : HTML 태그를 자동으로 닫음 Material Icon Theme : 아이콘을 명확히 잡아 줌 Night Owl : 코드 하이라이팅 Live Server : html 파일 우클릭시 브라우저 갱신 코딩 컨벤션 Style Guide — Vue.js Style Guide — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 변경사항 모듈 생성 키워드 vue create [proj-name] webpack.config.js 노출 X : 대신 vue.config.js 사..

여러가지 속성 들을 분리시키려면 어떻게 해야하는지Vuex.Store({}) 속성의 내용을 ES6의 Modules로 연결시킨다.// store.js import Vue from 'vue' import Vuex from 'vuex' export const store = enw Vuex.Store({ state : {}, getters : {}, mutations : {}, actions : {} });속성 파일의 분리ES6 Modules 의 Export => Import 문을 사용한 속성의 모듈화import Vue from 'vue' import Vuex from 'vuex' import * as getters from './getters' import * as mutations from './mutatio..

개요 mapMutations Vuex 에 선언 된 Mutations 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼 //사용.vue import {mapMutations} from 'vuex' methods: { ...mapMutations({clickBtn:'clickBtn'}), authLogin() {}, displayTable() {} } //store.js mutations: { clickBtn(state) { alert(state.msg); } } //template popup message mapActions Vuex 에 선언 된 Actions 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼 //사용.vue import {mapActions} from 'vuex' methods: ..

개요 mapState Vuex 에 선언된 state 에 더 쉽게 접근시켜주는 방법이다. 객체 전개 연산자로 선언된 Helper 들은 하나의 함수 이다. computed() 속성과 연계된다. 컴포넌트에서 해당 Helper 를 다른 이름으로 쓰고 싶다면 object로 속성을 받아온다. //사용.vue import {mapState} from 'vuex' computed: { //num() { return this.$store.state.num } ...mapState(['num']) // Array literal } ///template {{ this.num }} //다른이름으로 받고 싶다. computed: { ...mapState({ name: 'num' }) } mapGetters Vuex 에 선언된 ..

Helper 기존의 Vuex.Store 에서 정의하던 state , getters, mutations , actions 를 더 쉽게 코딩하는 방법이다. state => mapState getter => mapGetters mutations => mapMutations actions => mapActions 사용 Vuex.Store 에서 각 Helper 함수를 꺼내다 쓴다. 컴포넌트 로직에서 객체전개연산자로 사용가능하다. Vuex.Store 에서 Helper 함수롤 꺼내온 원소 값들은 에서 this. 로 호출이 가능해진다. Vuex.Store 의 속성 값과 해당 컴포넌트의 속성 값을 Mapping 하는 함수라고 보면 된다. this.$store.state.num = Helper > this.num comp..

Actions? 비동기 처리 로직을 기술하는 메서드이다. 동기 로직은 Mutations 가 관리한다. 서버 데이터 요청, Promise, ES6 async 등의 비동기 처리는 전부 Actions 에 선언한다. Actions 에서 Mutations 의 메서드는 Context 로 접근한다. this.$store.dispatch( name ) 으로 사용한다. //store.js new Vuex.Store({ state: { product: {} }, //동기처리 mutations: { setData(state, fetchData) { state.product = fetchData; } }, // 비동기 처리 actions :{ fetchProductData(context) { // store 의 메서드는 co..

Mutations Mutations 는 state 값을 변경시키는 유일한 방법이다. 메서드 형식으로 작성하며 commit( name, args ) 으로 접근하게 된다. getter() 는 제공방식이며 mutations 는 값을 변경시키는 방식이다. commit() 의 arg 속성은 object 로 주어 다양한 인자를 한번에 줄 수 있다. //store.js new Vuex.Store({ state : { num : 10 }, getters: { getNum(state) { return state.num; } }, mutations: { printNumbers(state) { return state.num }, sumNumbers(state, anotherNum) { return state.num + an..

NPM ES6 기반 지원을 많이 하기 때문에 ES6 기반 코딩이 권장된다. package.json 에 해당 의존정보가 기술된다. 관행적으로 루트폴더 아래 store 라는 폴더에 들어가며 store.js 파일로 정의된다. npm i vuex --save "dependencies": { "vue": "^2.5.11", "vuex": "^3.6.0" }, 시작 store.js 의 기본적인 생성 import Vue from 'vue' import Vuex from 'vuex' //use() 는 전역적으로 기능을 추가할 때 사용한다. &store 로 접근 가능하다. Vue.use(Vuex); export const store = new Vuex.Store({ }); main.js 에 등록하여 Root Instan..

개요 JavaScript 비동기 처리 패턴 중 가장 최근에 나온 문법 체계이다. CallBack 함수, Promise 의 단점을 개선하고 클린 코드를 작성할 수 있게 해준다. 클린코드 스스로 생각하기에 클린코드를 짜는 개발자가 정말 대단한 개발자라고 생각하고는 한다. 읽은 그대로, 이해한 그대로 코드를 구성하는 것이 async & await 문법의 탄생 목적이다. var user = { id: 1, name: 'Josh' }; if (user.id === 1) { console.log(user.name); // Josh } // HTTP 통신 코드 라고 가정하였을 시 해당 코드가 async & await 문법 적용 형태이다. var user = fetchUser('domain.com/users/1'); ..