1주 차 첫 번째 과제(22.01.24 ~ 22.01.26) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

첫 번째 과제 환율 계산기 만들기

 

두 가지의 환율 계산기를 만드는 것이 과제였습니다

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/ExchangeRateCalculator-1

GitHub - Gilpop8663/ExchangeRateCalculator-1: 원티드 프리온보딩 2기 14팀 환율 계산기 프로젝트입니다

첫 번째 계산기

• 송금 국가는 미국으로 고정입니다. 통화는 미국 달러(USD)입니다.
• 수취 국가는 한국, 일본, 필리핀 세 군데 중 하나를 select box로 선택합니다. 각각 통화는 KRW, JPY, PHP입니다.
• 수취 국가를 선택하면 아래 환율이 바뀌어 나타나야 합니다. 환율은 1 USD 기준으로 각각 KRW, JPY, PHP의 대응 금액입니다.
• 송금액을 USD로 입력하고 Submit을 누르면 아래 다음과 같이 수취금액이 KRW, JPY, PHP 중 하나로 계산되어서 나와야 합니다.
• 환율과 수취금액은 소수점 둘째 자리까지, 3자리 이상 되면 콤마를 가운데 찍어 보여줍니다. 예를 들어 1234라면 1,234.00으로 나타냅니다.
• 환율을 미리 계산해서 저장하고 수취 국가를 변경할 때마다 이를 가져와서 보여줘도 좋고,
• 혹은 매번 수취국가를 선택/변경할 때마다 API로 서버에 요청을 해서 환율정보를 가져오게 해도 좋습니다.
• Submit을 누르면 선택된 수취 국가와 그 환율, 그리고 송금액을 가지고 수취금액을 계산해서 하단에 보여주면 됩니다.
• 수취금액을 입력하지 않거나, 0보다 적은 금액이거나 10,000 USD보다 큰 금액, 혹은 바른 숫자가 아니라면 “송금액이 바르지 않습니다"라는 에러 메시지를 보여줍니다. 메시지는 팝업, 혹은 하단에 빨간 글씨로 나타나면 됩니다.

 

 

 

두 번째 계산기

1. 아래 화면 예시의 “1,000”은 사용자가 숫자만 입력할 수 있어야 합니다. 1000 이상을 입력할 경우 자동적으로 “1,000”와 같이 변경되어야 합니다.
2. 아래 화면 예시의 “USD” 드롭다운 메뉴에 제시된 통화는 USD, CAD, KRW, HKD, JPY, CNY로 한정됩니다.
3. 아래 화면 예시의 “USD” 드롭다운 메뉴를 “CAD”로 선택할 경우, 화면 예시에 제시된 탭 “CAD”는 제거되고 “USD”로 생성되어야 합니다.
4. 사용자의 수치 입력 혹은 드롭다운 메뉴를 이용한 통화 변경 시 변경될 환율과 기준일 정보는 동기화되어 변경되어야 합니다.
5. 기준일의 날짜 포맷은 반드시 예시에 표기된 내용에 따라야 합니다.

 

 

 

정리 및 회고

새로 알게 된 점

• 기업에서 유닛 테스트를 요구하였었고 cra로 설치하면 기본적으로 있는 테스트 라이브러리인 jest를 통해서 유닛 테스트를 진행했었습니다. 사용해보니 매번 npm start 해서 기능이 되는지 안되는지에 대한 여부를 npm run test를 통해서 미리 알 수 있어서 시간 관리나 로직 관리에 좋을 것 같다고 느꼈습니다. 

 

• 또한 jest 말고 다른 라이브러리에서는 html 컴포넌트까지 제대로 되는지 미리 테스트를 해볼 수 있다는 정보를 알게 되었습니다

 

• 팀에서 api를 불러올 때 Axios를 사용하였는데 저는 fetch 라이브러리로는 react-query 만 사용을 해보아서 제가 잘 모르는 부분을 공부할 수 있어서 좋은 경험이었고 팀에 현업 업무에서 하다가 오신 팀원분이 계셔서 많이 알려주셨습니다.

 

• 한 페이지에 많은 onClick 혹은 onChange 등 겹치는 함수가 많다면 switch로 사용하면 함수들을 한눈에 볼 수 있어서 코드를 유지 보수할 때 좋다고 배웠습니다.

 

  const selectExchange = () => {
    switch (country) {
      case '일본':
        setExchange(response.USDJPY);
        setEngCountry('JPY');
        break;
      case '필리핀':
        setExchange(response.USDPHP);
        setEngCountry('PHP');
        break;
      default:
        setExchange(response.USDKRW);
        setEngCountry('KRW');
        break;
    }
  };
  
    const onChange = (e, type) => {
    switch (type) {
      case 'select':
        setCountry(e.target.value);
        selectExchange();
        setResult(0);
        break;
      case 'money':
        setMoney(e.target.value);
        break;
      default:
        break;
    }
  };

 

 

 

힘들었던 점 / 해결과 극복 방법

• 매일 독학으로 공부를 하며 혼자 공부하며 프로젝트를 진행해보다가 처음으로 5명의 팀원들과 합을 맞추려고 하니 초기 세팅부터 각자 코드를 작성함에 있어서 정해야 할 규칙들이 많았어서 시간이 꽤 걸렸었습니다. 그렇지만 협업을 처음 해보는 저에게는 꼭 필요한 경험이고 소중한 팀원분들을 통해서 이런 경험을 할 수 있다는 것이 즐거웠습니다.

 

• 팀에서 공통 깃 아이디를 만들자고 의견이 나와서 팀장을 맡게 된 내가 아이디를 만들어서 공통 아이디를 관리하였는데 한 컴퓨터에서 git config user.name, user.email을 매번 바꿔줘야 한다는 점을 몰랐었어서 깃을 올릴 때 많이 헤매었습니다. 하지만 git을 사용함에 있어서 더 잘 알게 되어서 저에게 도움 되는 시간이었습니다.

 

• git fork를 하여 협업하는 방식에 대해서 잘 몰라서 헤매었는데 팀원분들의 도움으로 첫 fork와 협업을 매끄럽게 진행할 수 있었습니다.

 

• 팀원분들과 첫 협업이었기 때문에 코드를 작성하고 리드미에 정리하는 것만으로도 시간이 오래 걸렸습니다. 그래서 기능을 좀 더 디테일 있게 진행하지 못하고 코드 리팩터링과 잘 모르는 코드에 대해서 신경을 잘 못썼었는데 과제 제출 다음날에 코드 리뷰를 통해서 서로 모르는 부분에 대해 질문하는 시간을 가져서 이러한 점들을 해결했습니다.

 

• 이번에 사용한 API가 http 환경에서는 불러올 수 없고 https 환경에서만 불러와져서 배포에 사용하고자 한 netfilfy에서 https를 지원하지 않아 AWS 배포할 줄 아는 팀원분이 https 환경으로 배포하여 해결했습니다. 저도 AWS 배포에 대해 알아놓아야겠다고 생각해서 공부하여 글로 정리하여 블로그에 작성해보았습니다.