포트폴리오 제작기 2편

저번에는 프록시 설정까지 진행했다.

 

이번에는 화면에 보여줄 문구와, 이미지를 프론트에서 올리는 게 아닌 s3서버 url로 뿌려주기 위해 

Json 파일을 백엔드 프로젝트에서 생성했고, 프론트에서 API 호출을 했을 때 데이터를 가져와 Vuex 스토어에 

값을 저장하도록 했다. 

 

import skils from 'skils.json'

router.get('/', (req, res, next) => {
  res.send(skils);
});

// Node.js 일부 코드

 

지정한 주소에 get을 호출하면 json 파일을 내려주도록 코드를 작성했고,

프론트에서는 Axios를 통해 API를 호출 할 수 있도록 설정해줬다.

 

그 전에 미리 스토어도 사용할 수 있도록 Vuex 설치와 셋팅은 모두 해둔 상태다. 

언제나 처음 셋팅하는 게 제일 힘든 것 같다.. 

 

// Vue 일부 모듈 (Store)의 코드 일부분

export const ACTIONS_SKILS = {
  GET_SKILS: 'GET_SKILS',
}

const _actions = {
  async [ACTIONS_SKILS.GET_SKILS]({ commit }) {
    const req = await apiFunc(getSkils);
    if (req.error) {
      console.log('get skils error', req.error)
      return req;
    }
    const data = _get(req, 'result.data');
    commit(MUTATIONS_SKILS.SET_SKILS, data);
  }
};

 

apiFunc이라는 Promise Function을 받아 Data / Error를 리턴해주는 Util 함수를 하나 만들어뒀고, 

그 함수를 이용해 API 콜을 Vuex Actions에서 하게 해준다. 

 

commit을 통해 state에 값을 저장하도록 했다. 

 

Frontend에서 env, babel, vuex, axios 등의 어느정도 설정은 얼추 다 된 것 같다. 이제 UI/UX를 어떻게 짤 것인지 고민을 해봐야겠다. 
실무에서는 디자이너의 디자인 산출물만 보고 작업하다가, 직접 UI/UX를 고민해보려니...벌써부터 머리가 아프려고 한다.