📈 Wanted_pre_onboarding-1st_calculate_project

Intro.

👫배포주소

http://exchangerating.s3-website.ap-northeast-2.amazonaws.com/

🧨github주소

https://github.com/quack777/Wanted_pre_onboarding-1st_calculate_project

📃프로젝트 구조

├─ public
│     index.html
│
├─ src
│  └─ api
│  │   client.js
│  │
│  ├─ coponents
│  │     ├─ CalculateFirst
│  │     │      CalculateFirst.css
│  │     │      CalculateFirst/js
│  │     └─ CalculateSecond
│  │            CalculateRateBox.css
│  │            CalculateRateBox.js
│  │            CalculateSecond.js
│  │            CalculateSecondForm.css
│  │            CalculateSecondForm.js
│  │            CalculateSecondTemplate.css
│  │            CalculateSecondTemplate.js
│  │
│  ├─ pages\Main
│  │     MainPage.css
│  │     MainPage.js
│  │
│  ├─ styles
│  │    common.css
│  │    reset.css
│  │
│  ├─ utils
│  │     format.test.js
│  │     GetApi.js
│  │     GetExchangeRateByUSD.js
│  │     setMonthconvert.js
│  │     SetNumberFormat.js
│  └─ config.js
│     index.js
│     Router.js
└─

✔과제 구현 목록

• 첫번째 계산기
  1. 수취 국가를 선택하면 환율이 바뀌어 나타납니다.
  2. 송금액을 입력하고 Submit을 누르면 수취금액이 계산해서 화면에 노출됩니다.
• 두번째 계산기
  1. 송금 국가를 선택할 수 있으며 해당 송금 국가에 대한 수취 국가 환율 비율을 구할 수 있음

🎞구현영상

Ready.

우선, 프리온보딩 과정을 진행하면서 첫 번 째 과제여서 긴장도 됐고 혼자 코드를 짜는게 아닌 팀원들과 협업을 진행하면서 과제를 해서 설레는 기분도 들었다. 맨 처음 과제를 읽고 생각보다 엄청 어렵다고 생각이 들지는 않았지만 중간 중간에 만만하게 생각했던 부분들도 있었다. 나는 다름 팀원 한 분과 첫 번째 계산기 만들기를 진행하였다. 멘토님께서 과제를 설명해주실 때 각자 다른 기능을 개발하지 말고 힘을 합쳐서 함께 진행해야 한다고 말해주셔서 다른 팀원 분이 코드를 작성하고 나는 공유된 화면을 보면서 코드를 점검하고 로직을 생각하고 수정 사항이 있으면 말해주는 역할을 맡았다. 항상 협업을 진행할 때 각자 기능적이나 파트별로 분담을 해서 진행을 하였는데 이렇게 하나의 계산기를 가지고 두명에서 힘을 합쳐서 진행하는 적이 처음이여서 많이 어색하기도 했다.

코드를 바로 진행하기 전에 CRA로 만든 프로젝트를 구조를 잡고 git commit 메세지를 일정하게 통일시켰다. 협업할 때 이런 기본적인 사항들을 정해놓고 가야지 진행할 때 더욱 더 수월하다는 것을 깨달았다. 사람마다 생각이 다 다른데 다른 방식으로 commit 메세지와 프로젝트를 구조를 만들면 다른 사람의 코드를 pull받았을 때 이해하기 훨씬 어려울 것이라고 생각이 들었다.

Start.

💨API 호출

• 환율정보는 https://currencylayer.com/ 의 무료 서비스를 이용해서 실시간으로 가져왔다.

처음에 API를 호출할 때는 두 번째 계산기를 고려하지 않고 첫 번째 계산기 컴포넌트에서 mount될 때 API를 호출하고 환율을 뽑아서 state에 값을 저장해서 사용했다.

    useEffect(()=>{
        setClick(false)
        client.get(process.env.REACT_APP_API_URL,{params: {access_key: process.env.REACT_APP_API_KEY}})
                .then((res)=>setExchangeRate(res.data.quotes))
                .catch((err)=>console.dir(err))
    },[userChoice,money]) //사용자가 값을 바꿀때마다 리렌더링

이후 두 번째 계산기가 완성하고 팀 회의를 통해 API가 겹치니까 API폴더를 만들고 함수(getApiOfExchangeRate)를 만들어서 import해서 각 컴포넌트에서 사용했다.
.then하고 안에 if문이 존재하는 이유는 무료 플랜이여서 state값이 200으로 나와도 정상적으로 원하는 값들이 받아 오지 않는 경우가 꽤 있어서 if문을 이용해서 data.success값이 참일 때만 값을 저장하도록 설정해주었다.

getApiOfExchangeRate("USD", countrys.map(e => e.engName).join(","))
            .then((res) => {
                if (res.data.success === true) {
                    console.log(res.data.quotes)
                    setExchangeRate(res.data.quotes);
                    setApiSuccess(true);
                }
            })
            .catch((err) => console.dir(err))

💌 환율, 수취금액, 송금액

API로 호출한 환율을 exchangeRate state값에 저장하고 있는데 값이 제대로 저장이 안될 때 exchnageRate객체에 key값을 읽을 수 없다는 에러가 발생하여 API에서 제대로 저장이 될 때만 작동을 하도로고 && 연산자를 이용했다.
환율
userChoice <= state 초기 값(KRW) : 드랍다운 메뉴 클릭시 해당하는 값 저장
이 state를 이용해 원하는 환율 추출
수취금액
form이 submit될 때마다 input안에 값을 sendMoney(송금액) state값으로 저장하여 환율과 곱하여 계산

환율: {apiSuccess && SetNumberFormat(exchangeRate[`USD${userChoice}`])} {userChoice}/USD
{isSubmit? <div className='first-res'>수취금액은 {apiSuccess && SetNumberFormat(sendMoney*exchangeRate[`USD${userChoice}`])} {userChoice}입니다</div> : ''}

송금액
송금액 alert창으로 제한

if (tmpMoney >=0 && tmpMoney <= 10000){
            setIsSubmit(true);
        }else{
            alert("송금액이 바르지 않습니다")
            setIsSubmit(false)
        }

🤿 1234 => 1,234.00

• 소수점 2째짜리 까지만 나타내기 => toFixed 메소드 이용
• 숫자 3자리 단위마다 콤마(comma) 찍기 => 정규식 사용 4번째 줄

function SetNumberFormat(cost) {
  if (cost !== undefined) {
    let tmpCost = cost.toFixed(2);
    return tmpCost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  } else {
    return false;
  }
}

✨두 번째 계산기 환율 계산 Logic

🧨issue 발생

• 두 번째 계산기는 첫 번째 계산기와는 다르게 USD(달러 ex.USDKRW, USDJPY)가 기준이 되지 않는 값도 발생한다.
  - 이 문제는 API 호출을 할 때 PARMAS로 값을 지정해주어서 USD가 기준이 아닌 다른 국가들의 환율도 가져올 수 있지만,
  우리는 무료 플랜을 사용하므로 이렇게 할 수 없다.
  => 따라서, 무료 플랜으로 가져올 수 있는 값인 USD~값을 이용해 다른 나라가 기준(EX. KRWUSD, JPYKRW)일 때도 계산하여 구하는 방법을 생각해냈다.
  

🎇issue 해결

드롭다운 메뉴와 탭에서 USD가 아닌 경우 환율 계산 방법

위에 방법을 생각해 낸 뒤, 우리가 API(무료플랜)을 이용해서 환율을 구할 때 CASE는 총 3가지로 나눌 수 있었다.
CASE1) 드롭다운 메뉴가 USD일 경우
CASE2) 드롭다운 메뉴가 USD가 아닌 나머지 국가 and 탭에서 USD가 선택된 경우
CASE3) 드롭다운 메뉴가 USD가 아닌 나머지 국가 and 탭에서 USD가 아닌 나머지 국가일 경우

🍳배포

배포를 맡아서 진행하였는데, 다른 팀들에서 netlify로 배포를 진행하면 API호출에 issue가 발생하여 aws s3로 배포하는게 맞는게 좋을 거라고 slack에 메시지가 있어서 AWS s3 버킷을 이용하여 배포를 진행하였다.
배포 참고 링크
이 링크를 참고하여 배포를 진행하였다. AWS S3로 다른 프로젝트를 진행 할 때 한 번 해본적이 있어서 AWS CLI로 유저추가하기, package.json에 명령어 추가 등 수월하게 할 수 있었다.

Finish.

역시 혼자하는 것보다 팀을 이루어서 하는게 효과는 더 좋은거 같았다. 이번에 이 원티드 프론트엔드 코스를 진행하면서 팀장을 맡게 되었는데 아직 부족한 점이 많지만, 더 열심히해서 우리 팀이 좋은 시너지를 낼 수 있게 노력해야 할 것 같다. 다 만들고 배포까지 성공하고 과제를 제출하니까 정말 뿌듯했다. 항상 협업해서 배포하고 나서가 제일 뿌듯한 거 같다. 완성했다는 성취감은 어느 때보다 기분이 상당히 좋고 나를 앞으로 이끌어준다. 기업과제는 처음으로 경험 해봤는데 첫 번째 과제여서 그런지 몰라도 실력을 조금만 더 키우면 할만 하다고 생각이 들었다. 앞으로 남은 기간 동안 팀 과제를 수행할 때 열심히 이끌어서 다들 좋은 결과가 있었으면 좋겠다.

아쉬웠던 점

jest를 이용해서 unit test를 진행해 보려고 했는데 하지 못했다. => 설 연휴 jest 공부