nuxt.js를 이용해 달력 만들기 2

기존 구현한 기능

• 캘린더 월별로 해당하는 일자가 뜨는 것
• 이전 달 날짜 뜨는 것
• 선택한 날짜 조회 시 해당 날짜는 다른 색으로 뜨는 것
• 이전 달 다음달 조회 하는 것

추가 구현한 기능

• 토요일은 파란색, 일요일은 빨간색으로 표시 (달력 / 테이블 모두)
• 국경일 공공데이터 포털에서 오픈 API를 받아서 예/아니오 표시
• 날짜를 클릭하면 선택한 날짜에 표시
• vuex를 이용해서 store에 data와 computed, method를 관리하고, 컴포넌트 분리 작업
• 라우터를 이용하여 다음과제로 넘어갈 수 있게 함
• vue bootstrap을 이용해서 pagination 만들기

오류가 나서 오래걸렸던 부분

오픈 API axios를 이용해서 가져올 때 proxy설정

axios를 통해 오픈 api 가져오는 코드

• store > index.js > state

nationalDayList: []

• store > index.js > action

getNationalList({commit}, currentYear) {
      let url = "http://localhost:3000/api";
      let ServiceKey = '?_type=json&ServiceKey={APISERVICE키}&solYear=';

      axios.get(url + ServiceKey + currentYear.toString(), {headers: {"Accept": "application/json"}})
        .then(res => {
          let nationalDayList = res.data["response"]["body"]["items"]["item"];
          commit('getNationalList', nationalDayList);
        }).catch(err => {
        console.log("error : ", err);
      })

    }

• store > index.js > mutations

getNationalList(state, data) {
      state.nationalDayList.push(data);
    }

axios 비동기 처리는 action 에서 이루어 져야 하기 때문에,
action부분에서 처리하고 데이터를 mutation으로 커밋 해서 처리하였다.

url부분에 api주소값을 직접 넣으면 CORS오류가 발생하여,
proxy설정을 해줬다. 그래서 url부분에 api주소가 있는게 아니라,
http://localhost:3000/api 가 있는 것이다.

proxy 설정

proxy: {
    '/api': {
      target: 'http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getHoliDeInfo',
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        '^/api': ''
      }
    }
  }

/api로 접근하면 target으로 보내겠다는 뜻
여기서 오류가 계속 나서 axios코드 부분을 계속 수정하고 했는데,
알고보니 오류는 proxy설정에서 난 것 이였다.
pathRewrite설정을 해주지 않아서 주소에 자꾸 api가 들어가서 오류가 났던것 ㅠ..

다음엔 오류가나면 크롬 개발자모드를 통해서 주소값이 어디를 향하고 있는지 확인을 해야 겠다.

VUE Bootstrap pagination 색상 변경

부트스트랩이 색상을 자동으로 지정하기 때문에,
css값을 넣어도 변경되지 않았다.

색상 변경 방법

• node_modules > bootstrap > dist > css > bootstrap.css
  에서 색상을 변경해주면 된다.
• 변경한 코드

  .page-item.active .page-link {
   z-index: 3;
   color: #fff;
   background-color: #42b983;
   border-color: #42b983;
  }

  VUE Bootstrap b-table에서 row color변경

  b-table로 만든 테이블이라 for문을 따로 돌리지 않아서
  row color는 어떻게 넣을지 막막했다.

  row color 지정 방법

  items [{ }] 안에 _rowVariant:'primary' 이런식으로 넣으면 된다.