 |  |
|---|
📋 구현내용
| 환율계산기1 | 환율계산기2 |
|---|---|
| ✔ 선택된 수취국가에 맞는 환율정보 제공 ✔ 송금액 입력 후 submit버튼 클릭 시 하단에 수취금액 제공 ✔ 환율과 수취금액은 소수점 둘째자리까지 노출, 3자리 이상일경우 콤마 추가 ✔ 송금액을 입력하지 않거나, 0보다 작거나, 10,000보다 크거나, 숫자가 아닐경우 에러메세지 제공 | ✔ 1000이상을 입력할경우 세번째자리마다 콤마 추가, 10,000이하 숫자만 입력 가능 ✔ 드롭다운 메뉴에서 선택된 국가는 하단 탭메뉴에서 제외, 선택된 나라를 제외한 5개 국가 노출 ✔ 드롭다운, 탭메뉴에서 선택되는 국가에 따라 변경된 환율정보 제공 ✔ 날짜포맷 수정 |
✨ 느낀점
👩 프리온보딩코스에서 첫 번째 과제로 진행했던 환율계산기 2가지 중 쉬운버전. 당시에는 폴더분리, styled-component, git 등등 팀으로 협업하면서 지켜야하는 사항들이 다 새로운 것들이라 일단 그런 부분들을 배우는 시간이 필요했고, 2명씩 팀을 이뤄 협업하는 과제라서 양해를 구하고 다른 팀원이 진행하는 것을 보며 배워야했다. 그래서 이 당시 내가 작성한 코드는 한 줄도 없다.
👩 그때는 못했지만 이제라도 만들어보면서 배우기위해 혼자 작업해보았다. 쉬운 난이도의 과제였어서 혼자서도 api 이슈를 빼고는 구현할 수 있었다. 물론 코드가 지저분해서 개선할 부분이 많겠지만.. 시간이 되는대로 팀원들이 짠 코드도 분석 비교해보고 리팩토링 하는 시간을 가져야겠다. 다른 버전 계산기도 만들어서 추가해야지.
👩 드디어 두번째 계산기를 구현했다! 약간 억지로 끼워넣은듯한 느낌이 없지않지만.. 혼자 완성했다는 사실만으로 마냥 기쁘다 ㅎㅎ
이번에는 인풋 타입을 text로 설정하고 입력값이 숫자가 아닐경우엔 입력이 되지않도록 하기위해 정규표현식(\D)과 .test()함수를 이용했다. 정규표현식을 처음 봤을 땐 정말 너무 어려워보였는데 그래도 한번 사용해보니 조금 가까워진 느낌이다. 역시 뭐든 사용해보는게 중요한 것 같다.
👩 배포를 했지만 환율정보를 받아오는 api가 http라서 Mixed Content 오류가 발생했다.
해결방법으로 meta 태그를 이용해 http를 https로 요청하는 방법이 있었지만 요청사이트가 https를 지원하지 않아서 해결하지 못했다.. 직접 서버를 구축해서 받아온 뒤 다시 요청하는 방법으로 작업하신 분도 있던데 이 방법은 좀 더 공부를 해봐야 할 것 같다.
👩 AWS S3를 이용해서 http로 연결되도록 배포에 성공했다. EC2로 배포하는 방법을 한참 따라하다가 계속 실패해서 멘붕이던중 이전에 과제할 당시에 다른분들이 공유해줬던 정보가 생각나 슬랙을 뒤져보았다. 다행히 아직 기록이 남아있어서 S3를 이용하면 된다는 사실을 발견할 수 있었다. 다행히 S3를 이용한 배포 방법도 간단해서 금방 끝낼 수 있었다. 덕분에 아마존을 이용한 배포방법이 굉장히 다양하다는 사실과, https 페이지에서는 http 페이지에서 데이터를 받아올 수 없다는 사실을 알 수 있었다.
기록하며 공부하기