원티드 프리온보딩 과제 - 환율 계산기

 

들어가며

원티드 프리온보딩이 시작되었다. 첫날이라서 가볍게 오리엔테이션을 진행하고 끝날 줄 알았는데, 첫날부터 바로 과제가 주어졌다. 😢 원티드 프리온보딩 시간표를 보면 3일마다 과제가 주어지는데, 그게 오늘부터였다니.. 

 

시간표

 

원티드 프리 온보딩을 지원할 당시에는 시간표상에 있는 스케줄이 할만할 줄 알았는데,,, 원티드 프리온보딩을 합격하고 나니 갑자기 해야 할 일이 너무 많아졌다... 우선 Yapp 19기에서 진행했던 북마크 서비스의 2차 개발이 시작되었고, 이번 Yapp 20기에 운영진을 하게 되어서 공식 Yapp 홈페이지를 개편하는 업무를 하게되었다. 또 예전에 진행했던 개발자의 품격2기 멤버들과 개발자 Qna 서비스를 만들기로 했는데, 그게 이번 주부터 시작이다.. 

 

오전 8시부터 오후 4시 30분까지는 공익 근무를 해야 해서,  오후 5시가 되어야 개인 일정을 할 수가 있는데 과연 이 과정을 잘 해낼 수 있을지 걱정이다..!  

 

그럼 이제 본격적으로 오늘 진행했던 과제에 대해서 포스팅해보겠다 😃

 

 

과제 설명

첫 주차의 첫 번째 과제는 환율 계산기를 만드는 것이다. 총 2개의 계산기가 있는데, 그중 내가 맡았던 계산기의 요구 사항은 다음과 같다.

 

• 송금 국가는 미국으로 고정 (통화는 USD)
• 수취 국가는 한국(KRW), 일본(JPY), 필리핀(PHP)
• 수취 국가를 선택하면 환율이 나와야 함
• 환율은 1 USD 기준으로 각각 KRW, JPY, PHP의 대응 금액 이어야 함
• 환율과 수취 금액은 소수점 둘째 자리까지 나와야 함 ex) 123.00
• 환율과 수취 금액은 3자리마다 콤마를 찍어줘야 함 ex) 1,234.00
• 환율 정보는 https://currencylayer.com/ 서비스에서 api를 사용하면 됨
• Submit 버튼을 누르면 수취금액을 보여줘야 함
• 수취 금액을 입력하지 않거나, 0보다 적은 금액, 10,000 USD 보다 큰 금액이면 "송금액이 바르지 않습니다"라고 에러 메시지를 보여줘야 함

 

페어 프로그래밍

이번 과제는 페어 프로그래밍으로 진행해야 한다고 한다. 여기서 페어 프로그래밍이란 다음과 같다.

 

페어 프로그래밍은 두 명이 짝을 지어 프로그래밍을 하는 것이다. 페어 프로그래밍 진행 방법은 기본적으로 한 명이 타이핑을 하고 다른 한 명은 실시간 리뷰를 하는 것이다. 그리고 역할을 주기적으로 변경하며 진행하면 된다.

 

우리는 Vscode에서 제공하는 live share 익스텐션을 이용해서 페어 프로그래밍을 진행했다. 우리는 1명이 코딩을 하면, 1명이 리뷰를 하는 식으로 10분마다 역할을 바꿔가면서 코딩을 했다. 이렇게 페어 프로그래밍을 해본 적은 처음인데, 나름 재밌었다 ㅋㅋ. 팀원이 코딩을 진행하는 과정을 실시간으로 보면서 생각하는 방식을 공유할 수 있었고, 그 과정에서 서로의 로직에 대해서 이야기하면서 더 나은 방안을 찾으려고 노력했었다.

 

조금 아쉬웠던 점은, 10분씩 돌아가면서 코딩을 하다 보니 그 10분 안에 코딩을 많이 해야 한다는 부담감이 조금 있었다. 평소에 혼자서 개발을 할 때는 로직을 짤 때 생각을 하고 싶은 만큼 한 다음에 구현을 시작했는데, 페어 프로그래밍을 하니 왜인지 모르게 내 코딩 차례가 되면 코드부터 치게 됐다. 그래서 다음에 또 페어 프로그래밍을 할 수 있는 기회가 생기면 이런 부담감을 조금 털어내고 내 차례가 되어도 무작정 코드를 치기보다는 고민을 충분히 하고 코딩을 하도록 해야겠다...! (시간도 10분씩은 조금 짧은 거 같기도..?)

 

 

구현 과정

우리는 환율 정보 API를 통해서 USD 기준으로 KRW, JPY, PHP의 환율 정보를 다음과 같은 상태에 저장했다.

const [exchangeRate, setExchangeRate] = useState({
  USDKRW: 0,
  USDJPY: 0,
  USDPHP: 0,
})

const { data } = useExchangeRateLoad(); // 환율 정보 불러오는 hooks

useEffect(() => {
  if (!data) return
  const { USDKRW, USDJPY, USDPHP } = data;
  setExchangeRate({ USDKRW, USDJPY, USDPHP })
}, [data])

 

저장된 환율정보를 통해서 사용자에게 환율을 제공해주고, 송금액을 입력하고 Submit 버튼을 누르게 되면 수취 금액이 나오게 하였다.

 

수취금액을 표현해줄 때 조건이 있었는데, 3자리마다 콤마를 찍어야 하고, 소수점 둘째 자리 까지 나와야 한다. 우리는 Javascript의 문법중 toFixed(2)를 이용하여 소수점 2째자리 까지 나오게 하였고, comma를 찍어주는 util 함수를 이용하였다.

 

// utils/comma.js
export const comma = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");


// components
comma((송금액x환율).toFixed(2))

 

그리고 마지막 구현 사항으로 송금액 validation이 있었는데, 수취 금액을 입력하지 않거나, 0보다 적은 금액이거나, 10,000 USD보다 큰 금액일 경우 에러 표시를 해주는 것이다.

 

이 부분은 Submit 버튼을 클릭했을 때 validation 체크를 해주는 식으로 다음과 같이 if문을 추가하였다.

if (송금액 <= 0 || 송금액 > 10000 || isNaN(송금액)){
  setIsValidAmount(false)
  return;
}

 

 

 

 

 

 

마치며

첫 주차의 첫 번째 과제가 이렇게 마무리되었다. 첫 번째 과제라서 문제의 난도를 어렵지 않게 내주셨다고 한다. 문제는 쉽게 풀었지만 한 가지 이슈가 있었는데, 환율 정보를 제공해주는 api가 http 프로토콜이고, 우리가 배포한 netlify의 프로토콜은 https 였다. 그래서 로컬에서는 api가 잘 받아와 지지만, 배포를 하고 나니 api를 받지 못하는 이슈가 생겼었다. 그래서 우리는 heroku 플랫폼을 이용해서 http 프로토콜을 사용해 배포 상태에서도 api의 값을 잘 받아올 수 있게 해결하였다. 

 

평소에 Typescript로 개발을 오랫동안 해왔었는데, 이번에는 Typescript가 금지여서 오랜만에 Javascript로 개발을 했다. 그러면서 느낀 건 역시나 Typescript가 최고다. Javascript는 디버깅이 너무 힘들다... 그리고 자동 완성도 안되어서 개발 생산성이 너무 떨어지는 거 같다.. ㅠ 그래도 2주 차부터는 Typescript를 가능하게 해 주신다고 하셔서 다행이다 

끝~!