금융감독원 API 사용하기!

적금저금 프로젝트에 시중에 판매되고 있는 적금상품이 있어야 한다고 생각해

금융감독원에 인증키를 신청했고 프로젝트에 쓸 수 있었다!

API를 사용해 보자

금융감독원에 있는 설명을 보고 내가 원하는 요청변수를 적어 요청을 보내야 한다! 

금감원 api 요청변수

나는 적금/json/인증키/권역코드/페이지번호/은행명 이렇게 적었고 아래를 보면 알 수 있다! 

(은행명은 한글로 적거나 UTF-8로 적어도 된다!)

// URL은 변수에 담아
const JUK_URL = `https://finlife.fss.or.kr/finlifeapi/savingProductsSearch.json?auth=${process.env.API_KEY}&topFinGrpNo=020000&pageNo=1&financeCd=%ED%95%98%EB%82%98`
// Axios 요청! 
const api = await axios.get(JUK_URL);

 

이런 식으로 요청을 받아 잘 받아와졌다!

"result": {
    "err_msg": "정상",
    "baseList": [
      {
        "kor_co_nm": "중소기업은행",
      },
      {
        "kor_co_nm": "IBK적금(자유적립식)",
      },
    ],
    "optionList": [
      {
        "rsrv_type_nm": "자유적립식",
      },
      {
        "rsrv_type_nm": "자유적립식",
      },
    ]
  }

 

 

데이터 합치기

나는 map 함수를 써 컴포넌트를 뿌려주려 했기에 baseList와 optionList가 합쳐진 데이터가 필요했고 결국 데이터를 합치기로 했다! 

 

1차 시도 처음에는 아래처럼 스프레드 문법을 썼다.

// 따로 변수로 담아서
	const bankBaseList = api.data.result.baseList
	const bankOptionList = api.data.result.optionList
// 이런식으로
	const combined = [... bankBaseList, ...bankOptionList];

하지만 이렇게 되면 하나의 배열 안에는 들어가지만 내가 원하는 모양인

데이터가 하나의 객체로 모이지는 않기 때문에 고민이 필요했다. 

// 결과 
[
	{
      "aa": "bb"
    },
    {
     "cc": "dd"
    }
]
// 내가 원하는 모양
[
	{
      "aa": "bb",
      "cc": "dd"
    }
]

2차 시도 이번에는 많이 돌아가보기로 했다. (좋은 방법이 있다면 조언 부탁드립니다!ㅜㅜ 제발요..)

// 먼저 받아온 데이터에서 두 배열을 따로 변수에 담은 뒤 
	const bankBaseList = api.data.result.baseList
	const bankOptionList = api.data.result.optionList

// bankBaseList와 bankOptionList 합치는 함수를 만들고 
    function combine(base, options) {
        return options.map(option => {
          const baseObj = base.find(item => item.fin_prdt_cd === option.fin_prdt_cd);
          return { ...baseObj, ...option };
        });
      }
// 위 함수를 활용해서 optionList를 baseList와 합친 optional 배열 생성!
	const optional = combine(bankBaseList, bankOptionList);

이렇게 하니 optional 변수에 내가 원하는 데로 하나의 배열 안에 두 객체를 합칠 수 있었다! 

하지만 아직 충분하지 않았다. 이유는 다이나믹렌더링을 사용해야 하기 때문이다! 

 

2탄에서 계속..