Project Overview

프로젝트 GitHub 레파지토리

2인 1팀 프로젝트

• 4인 1팀이지만 과제 2개로 분할해 과제당 2인이 협업하는 프로젝트
• 접속수 제한, 무료버전으로 기능 제한에 따른 부족한 여건해서 완벽히 구현해내기
• git base... 에 대해서 처음 접하게 됨

기간

2022.01.24 ~ 2022.01.25

기술 스택

• HTML/CSS
• javaScript
• React

구현 사항

• 드랍박스 6개국가 탭 네비게이션에 5개 국가
• 드랍박스에서 탭 네비게이션에 있는 국가를 선택하게 되면 자리 스위칭
• 드랍박스 국가(송금), 탭 네비게이션 국가(수취)에 따른 환율은 API를 통해 호출
• 입력창 단위 콤마

결과

입력창

탭별 수취국가 선택

드랍박스로 송금국가 선택(수취국가 탭 스위칭)

---

Project Review

문제와 문제해결

API 제한사항 극복하고 환율구하기

송금국가 수취국가가 별도로 지정되어야 하는 상황에서, 사용하는 API의 경우 기본 송금국가가 USD로 고정되어 있었고 EUR to KRW 같이 송금국가가 USD가 아닌 경우에는 API 제공 기본값으로 받을 수 없었음.

'USDEUR', 'USDKRW' 두가지의 정보는 받을 수 있었기에
앞 자리가 송금국가 뒷자리가 수취국가므로

환율 계산식이 수취금액/송금금액으로

USD to 두개 국가 환율을 계산해 위와 같이 연산하면
두개 국가간 환율을 계산할 수 있었다.

API 재호출 조건

프로젝트 시작 초기에 페이지가 로드되는 단 한번을 호출해 데이터를 가지고 있기로 했으나 2가지 문제가 발생

• 제공해야 하는 정보중 "기준일"이 있기 때문에 23시 58분에 페이지에 접속하고 날이 넘아가 0시 2분에 환율을 계산하면 날짜가 변경되지 않는 문제
• 환율을 특성상 매초마다 갱신되는 상황으로 이용시간에 따른 환율편차가 커질 가능성이 있음

위 두가지 문제로 드랍박스(송금국가)와 탭 네비게이션(수취국가) 변경시 api를 호출하기로 함

input 단위콤마 문제

• 인풋창에 단위콤마 표시가 필요
• 인풋창엔 숫자만 입력 가능
• 인풋창에 단위콤마를 허용하는 과정에서 인위적으로 콤마 입력가능한 문제
• 자바스크립트 연산 특징으로 18자리 숫자 이상을 연산할경우 소숫점이 0으로 처리되는 현상

toLocaleString 기능을 통해 단위컴마를 찍기 위해 인풋에서 받아오는 string 데이터를 int 데이터로 변환해야 했다.

숫자로만 구성된 정규식 체크를 하기 위해 컴마를 제거한 string 데이터가 필요했다

그렇기 때문에 인풋에서 받아오는 데이터에서

1. 콤마를 제거하고
2. int, string 타입의 숫자로 각각 구성해 오브젝트 리턴
3. int타입의 숫자는 toLocaleString으로 단위컴마 표시후 input value에 넣어줌
4. string타입의 숫자는 정규식체크
5. 일정글자수 초과시 에러리턴

위와 같이 해결

git..

깃... add, commit, push, pull 만 사용할줄 알았는데 협업 프로젝트에 뛰어드니 별도로 깊이 공부해야겠다고 느꼈다.

느낀점

같은 팀원분이 불필요하게 반복되는 렌더링에 대해 깊이 고민하고, 깃의 흐름에 대해 고민하는 모습이 나를 반성하게 했다.

"동작하기만 하면 되지" 라며 스테이트를 남발하고 컴포넌트를 이리저리 남발했던...

2일 짧은 협업을 통해서 많은 공부거리를 발견할 수 있었던 프로젝트였다.
다음주 설날 주간 git과 react 성능, jest 에 대해 익숙해져 앞으로 남은 프로젝트에선 민폐가 되지 말아야겠다.