currencylayer에서 제공하는 환율 정보를 이용한 환율 계산기입니다
배포 링크
Table of Contents
👑 윤희준 (팀장) | 정서영 | 염상권 | 김재원 |
2번 환율 계산기 개발 | 2번 환율 계산기 개발 | 1번 환율 계산기 개발 | 1번 환율 계산기 개발 |
currencylayer에서 제공하는 API를 사용해 만든 환율 계산기입니다.
- 환율 계산기 전환
- 1번 환율계산기
- 2번 환율계산기
- 상단 버튼을 클릭해 환율 계산기의 종류를 교체할 수 있다.
- 사이트에 접속할 시 localStorage를 확인해, localStorage에 환율 정보가 저장되어 있지 않거나 localStorage를 마지막으로 갱신한 시간으로부터 24시간 이상이 지났다면 API에 요청을 보내 환율 정보를 갱신하고 localStorage에 저장한다.
- 1번 환율 계산기 구현
- 한국(KRW), 일본(JPY), 필리핀(PHP) 중 하나의 수취국가를 select box로 선택할 수 있다.
- 수취국가를 선택하면 해당 국가의 통화와 달러(USD) 사이의 환율이 표시된다.
- 올바른 송금액(0~10000 사이의 숫자)을 입력하고 submit 버튼을 누르면 수취금액이 표시된다.
- 수취금액은 소수점 아래 2번째 자리까지, 3자리마다 콤마를 찍은 형식으로 표기된다.
- 올바르지 않은 송금액을 입력하고 submit 버튼을 누르면 “송금액이 바르지 않습니다" 라는 에러 메시지가 하단에 표시된다.
- 2번 환율 계산기 구현
- 1000 이상의 숫자가 입력될 경우 자동적으로 "1,000"으로 변경된다.
- 숫자 이외의 입력(알파벳, '-', '+' ...)은 처리되지 않는다.
- 드롭다운 메뉴로 가지고 있는 통화의 종류를, 탭으로 바꿀 통화의 종류를 지정할 수 있다.
- 드롭다운 메뉴에서 선택한 통화를 제외한 통화들만이 탭에 나타난다.
- 숫자 입력, 드롭다운 메뉴 클릭, 탭 클릭을 할 경우 변경될 통화의 종류와 환전 금액이 하단에 표기된다.
- 환전 금액은 소수점 아래 2번째 자리까지, 3자리마다 콤마를 찍은 형식으로 표기된다.
- npm
npm install npm@latest -g
- https://currencylayer.com/ 에 가입한 후 access key를 발급받아 root에 다음과 같이 .env파일을 추가한다.
REACT_APP_API_END_POINT=http://api.currencylayer.com/live
REACT_APP_API_ACCESS_KEY=YOUR_ACCESS_KEY
- Repo를 clone한다
git clone https://github.com/gml9812/wanted-frontend-pre-on-boarding-mission.git
- NPM pakage들을 설치한다
npm install
- localhost에서 프로젝트를 실행한다
npm start
Distributed under the MIT License. See LICENSE
for more information.