실제 프로젝트 구축시에 자주 사용했던 JS 메소드와 Vue 기능들을 정리해보려고 합니다.
기술스택은 Vue,Vuex,NodeJS Express,MySQL 입니다.
클라이언트 화면에서는 정적인 페이지, 상품 페이지(목록, 상세) 관리지 화면에서는 상품 관리(CRUD) 위주로 구성 되었습니다.

vue proxy 설정

vue.config.js 파일에 있는 설정입니다.
NodeJS 서버의 API를 호출하기 위해 설정합니다.
outputDir 옵션에서 빌드시에 사용하는 폴더를 설정할 수 있습니다.

vue.config.js

const path = require('path')

module exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    outputDir: '../backend/public',
}

axios.spread

Vue내에서 사용하며 여러 API에서 데이터를 가져올 때 사용합니다.

this.axios.spread

mounted() {
    this.$http.all([
        this.$http.get('API1'),
        this.$http.get('API2')
    ])
    .then(this.$http.spread((RES1, RES2) => {           
        console.log(RES1, RES2);
    }))
},

store login

로그인시에 store의 actions을 사용합니다.
로그인에 성공했을시 토큰을 저장하고 다음 API 호출시마다 토큰을 함께 보냅니다.

store/index.js

LOGIN({commit}, user) {
    return new Promise((resolve, reject) => {
        axios.post('/api/user/login', {user})
            .then((res ) => {
                const { data } = res;
                if (data.status == 'success') {
                    commit("SET_TOKEN",data.token);
                    axios.defaults.headers.common['Authorization'] = `${data.token}`;
                    resolve();
                } else {
                    reject(data.message);
                }
                }).catch(error => {
                    reject(error);
                })
            })
        },

배열과 배열 합치기

기존 배열에 배열을 추가합니다.

Array.prototype.push.apply()

var fruit = ['banana','apple','orange'];
var color = ['red','blue','green'];

Array.prototype.push.apply(fruit, color);
// fruit = ['banana','apple','orange','red','blue','green']

배열 그대로 복사

배열을 그대로 복사합니다.

slice()

var fruit = ['banana','apple'];
var fruit2 = fruit.slice();
// fruit2 = ['banana','apple']

중복값 없는 배열

ES6의 Set()으로도 중복값을 없앨 수 있습니다.
단 객체형태로 변환됩니다.

reduce()

var fruit = ['banana','orange','apple','banana','cherry','orange'];

function uniqArray(arr) {
    return arr.reduce(function (a, b) {
        let count = 0;
        if (a.indexOf(b) < 0) {
            a.push(b);
        } else {
            count++;
        }
        return a;
    }, []);
}

fruit = uniqArray(fruit);

// ['banana','orange',apple','cherry']

new Set()

    var fruit = ['banana','orange','apple','banana','cherry','orange'];

    fruit = new Set(fruit);