1주차 첫 과제 - 환율 계산기 구현하기

👉 원티드 프리온보딩 프론트엔드 코스 과정 시작!

원티드 프리온보딩 프론트엔드 코스 과정 중 첫 과제가 진행되었습니다.

4명의 인원으로 구성된 팀에서 2명씩 짝을 이뤄 스타일과 기능이 조금씩 다른 환율 계산기 1, 2를 구현하는 것입니다.

 

제가 맡았던 계산기는 베이스가 되는 통화는 select 로 고르고

바꿀 통화는 tab을 만들어 클릭하면 해당 통화로 환율이 계산되어 나오는 계산기였습니다.

 

구현했던 계산기 완성 모습

👉 구현해야 하는 부분

- 숫자가 1000 이상 입력되었을 때에는 "1,000"으로 입력값을 바꿉니다.

- 결과값은 세 자리마다 콤마(,)가 찍혀야 하고 소수점은 2자리까지 보여줍니다. (1,000 이라도 1,000.00 으로 표기)

- select 에서 통화를 선택하면 해당 통화는 아래 탭 목록에서 사라지고 탭 목록에 있던 선택한 통화는 탭 목록에서 사라집니다.

(예 : USD 에서 CAD 로 변경하면, 아래에 있던 CAD 탭은 사라지고 CAD 자리에 USD 탭이 생깁니다)

 

👉 과제를 진행하며 어려웠던 점

과제에서 요구하던 문제 자체는 크게 어려운 부분은 없었지만,

은근히 어려웠던 부분이 input의 입력값의 type을 관리하는 것이었습니다.

 

input은 바꿀 금액을 입력받아야 하고 1000 이상을 입력할 시에는 "1,000"이라 표시되어야 했습니다.

(콤마(,)가 들어가야하니 input을 number로 고정할 수는 없었습니다.)

text 타입으로 입력을 받으면 우선 입력받은 값이 number 인지 체크를 합니다.

이때, 소수점(.)은 들어갈 수 있기 때문에 0-9 숫자와 소수점을 제외한 문자를 입력받았을 때에는 input의 value를 업데이트시켜주지 않았습니다. (여기서 또 문제가 생기는 부분이 시작부터 소수점을 입력받았을 때에 결괏값이 계산될 때 숫자가 아닌 값이 들어와서 NaN 이 나와버립니다. 따라서 맨 첫 글자에 소수점만 입력되었을 때에는 업데이트시켜주지 않았습니다)

 

그리고 입력받은 숫자를 환율 계산식을 통하여 계산합니다.

여기서 타입의 변화가 많이 생겼습니다.

 

우선 입력받은 input(string)은 환율 계산을 위해 숫자로 바꾸어야 합니다(number) 또한 소수점을 2자리로 고정해서 자르면 문자열(string)이 되고 toLocaleString을 통하여 콤마(,)를 찍어주려면 타입이 숫자여야 해서 (number) 여야해서 숫자로 바꾸어주고, 다시 toLocaleString 을 쓰면 (string) 이 되어야 했습니다. 

 

문자열과 숫자를 계속해서 왔다 갔다 했어야 했기에 관리하는 부분에서 어려움을 느끼고

그 과정에서 제일 단순하게 하드 코딩하는 느낌으로 값을 관리했었습니다.

 

하지만 다행히도 팀원 4명이서 다시 모여 서로 코드 리뷰를 진행하면서 불필요하게 길었던 과정을 많이 줄일 수 있는 방법을 알게 되었습니다.

toLocaleString에서 옵션을 주면 toFixed를 사용하지 않아도 소수점을 관리할 수 있었습니다.

코드가 아주 길어졌었는데 엄청 줄이게 되면서 만족하게 되었던 것 같습니다. (동료학습 짱!)

 

👉 레포주소

https://github.com/som-syom/Week1_Exchange_Rate_Calculator

GitHub - som-syom/Week1_Exchange_Rate_Calculator: 원티드 프론트엔드 프리온보딩 2기 첫번째 과제인 '환율 계

 

 

그 외의 어려웠던 점 (여담)

여태 팀 과제는 주변에서 조금 알던 사람들끼리 진행을 했었기 때문에 생판 모르는 사람들과의 협업이 처음이었습니다.

(생각해보니 정말 처음이라 놀랬습니다...)

그렇기 때문에 어느 부분에서 조금 더 의견을 내야 하고, 어느 부분에선 팀원의 의견을 따라가고 해야 할지 조금 감이 안 왔던 것 같습니다.

괜히 의견을 내세웠다가 서로 기분이 상하면 어쩌지라는 생각을 많이 했던 것 같습니다.

그래서 버벅거렸다고 많이 느껴졌는데.. 과제 진행 후 주변 사람들에게 물어보며 조언을 구하고 다녔습니다.

그렇게 나온 결론은 본인의 의견이 맞다고 생각하면 의견을 내세우고, 건강한 토론을 하자는 것이었습니다.

이 고민을 하면서 느낀 건 남들이 기분 상할까 걱정한 것도 있지만 제 기분이 상할까 봐 걱정한 것도 있었던 것 같습니다.

어찌 보면 '일'이라고 생각해서 한다면 적당한 의견 공유는 기분 상할 일이 아녔습니다.

 

완벽하게 해결된 문제는 아니기도 하고 개발과는 조금 다른 주제긴 하지만 어느 정도는 계속해서 생각해봐야 할 문제 같습니다.