[토이] 지인을 위한 직구 대행업 관련 계산 사이트 만들기
•
2024-10-15 23:02
시작한 이유
지인이 직구와 관련된 구매대행업을 하는데
관련한 물건의 가격, 배송비, 환율에 따른 가격 차이 등등 환율 변동사항에 맞게 알 수 있으면 좋을거 같다고 하여
저도 환율을 구해보려고 한적은 없기 때문에 재밌을거 같아 해보기로 하였습니다 ಠಿ_ಠ
어떻게 만들어야 할까?
우선 환율을 원하는 시점에 받아와야 하는데 추후 누군가가 사용하게 될지, 몇명이 사용하게 될지 모르기 때문에
무작정 호출하기엔 횟수제한이 있으니 한번 불러오면 브라우저에 저장한 환율정보를 기반으로 출력 및 계산되게 해야했습니다.
그래서 내린 결론은
1. 사용자가 웹 페이지에 처음 접속하면, 쿠키에 환율 정보를 담당하는 키가 있는지 확인합니다.
2. 쿠키에 해당 키가 없을 경우, 환율 정보를 API를 통해 받아오고, 이를 쿠키에 저장해 둡니다.
3. 쿠키에 키가 있을 경우, 저장된 환율 정보를 useState를 활용하여 상태로 관리합니다.
4. 이후, 사용자가 특정 상품의 가격이나 배송비를 조회할 때, 환율 정보를 기반으로 원화로 변환된 가격을 계산하여 보여줍니다. 이 과정에서, localStorage를 사용해 사용자가 조회한 항목을 저장하여, 추후에도 쉽게 확인할 수 있도록 합니다.
5. 마지막으로, 상품 이미지의 경우에는 이미지 주소(URL)를 입력받아, img 태그의 src 속성에 삽입하여 미리보기를 제공해, 이 방식으로 서버에 이미지를 저장하지 않고도 사용자에게 이미지 미리보기를 보여줄 수 있습니다.
이러한 흐름을 통해, 사용자는 효율적으로 환율 정보를 바탕으로 상품의 총 가격을 조회하고, 이미지 미리보기도 쉽게 확인할 수 있게 됩니다.
환율 API는 어떤것을 사용해야 할까?
어떤것이 있을지 곰곰히 생각해보다가
마침 공공데이터 포털에 여러 api가 있었던것이 생각나
'한국수출입은행 환율 정보'를 받아오려고 하였으나,,,
한국수출입은행 환율 정보 api :https://www.data.go.kr/data/3068846/openapi.do
서버로 호출 시 문제가 발생할 수 있다는 말을 간과하고 그대로 진행하였으나
요청을 해보니 수많은 cors 에러의 향연과 함께
아무래도 화이트리스트에 제 지인이 접속하려는 ip가 포함되도록 요청해야 할거같아 좌절되었습니다,,,ㅠㅠㅠㅠ
그래서 찾은 두번째 API
API Layer라는 api 모음 사이트에 환율정보가 있는것을 발견!
당장 이 프로젝트를 많은 인원들이 사용할것은 아니기 때문에
요청횟수도 한달동안 100회면 나쁘지 않은거 같아 이번 프로젝트에 사용하게 되었습니다
API 주소 : https://apilayer.com/marketplace/exchangerates_data-api#documentation-tab
제작환경
라이브러리 : Vite, React, Axios
스타일링 : SCSS
발생한 문제 및 해결 방안
1. 본문 첫 부분에서 얘기했듯이 처음엔 한국수출입은행 환율정보를 사용해 작업을 진행하였으나
받아온 response의 배열에 맞게 함수를 다 작업해가던 상황에서 CORS 에러를 해결해보려 하였으나 결국 서버 화이트리스트에 포함되어야 해결이 될거같아
다른 api로 교체를 달라진 response를 가지고 어느정도 매핑이 필요했으며
2. 각 API가 주는 환율의 정보 기준이 달랐습니다.
한국수출입은행 환율정보의 경우
{
"result":1,
"cur_unit":"JPY(100)",
"ttb":"894.27",
"tts":"912.34",
"deal_bas_r":"903.31",
"bkpr":"903",
"yy_efee_r":"0",
"ten_dd_efee_r":"0",
"kftc_bkpr":"903",
"kftc_deal_bas_r":"903.31",
"cur_nm":"일본 옌"
}각 나라별 일본의 경우 100엔당 원화가 얼마인지, 미국의 경우 1달러당 원화가 얼마인지 기입이 되어있었으나
API Layer에서 주던 환율정보의 경우
{
"success": true,
"timestamp": 1728940084,
"historical": true,
"base": "KRW",
"date": "2024-10-14",
"rates": {
"JPY": 0.110283,
"USD": 0.000736,
"AED": 0.002704,
"AUD": 0.001095,
"CAD": 0.001016,
"CHF": 0.000635,
"CNH": 0.005223,
"DKK": 0.005035,
"EUR": 0.000675,
"GBP": 0.000564,
"HKD": 0.005714,
"KRW": 1,
"NOK": 0.00795,
"NZD": 0.001208,
"SEK": 0.007668,
"SGD": 0.000963,
"THB": 0.024491
}
}한국의 원화가 1원당 엔화가 얼마인지, 1달러가 얼마인지 기입이 되어있었기에
매핑과 동시에 한국수출입은행의 기준처럼 기입을 해야했습니다.
그래서 입력한 금액을 기준으로 환율을 적용해 환산한 값을 반환해주는 함수를
아래와 같이 하나 만들었습니다.
const calcCurrency = (currency, amount = 1) => { return amount / currency; }
받아온 response를 기존 구조에 맞게 calcCurrency 함수를 사용해 매핑해주는 가공 작업을 하였습니다
const mappingCurrencyList = (data) => {
const filter = data.rates;
return[
{
"result":1,
"cur_unit":"JPY(100)",
"deal_bas_r":calcCurrency(filter.JPY,100),
"cur_nm":"일본 엔"
},
{
"result":1,
"cur_unit":"USD",
"deal_bas_r":calcCurrency(filter.USD),
"cur_nm":"미국 달러"
},
{
"result":1,
"cur_unit":"AUD",
"deal_bas_r":calcCurrency(filter.AUD),
"cur_nm":"호주 달러"
},
{
"result":1,
"cur_unit":"CAD",
"deal_bas_r":calcCurrency(filter.CAD),
"cur_nm":"캐나다 달러"
}
]
}
결과
오른쪽 섹션에는 올릴 상품에 대한 정보를 입력하는 폼을
왼쪽 섹션에는 입력한 정보에 속 환율 및 각 정보에 맞춰 가격을 보여줍니다.
또한 간단하게 각 나라의 환율이 얼마인지 체크해볼수있게
오른쪽 하단에 환율을 조회할수있는 폼을 두었습니다.
이제 이미 계산을 마치고 업로드 해두었던 상품들도
즉각즉각 환율에 맞게 가격을 조정해 올릴 수 있도록 파악할수 있게 되어
만들어준 지인으로써 뿌듯하네용