22년 원티드에서 주최하는 프리온보딩 프론트엔드 코스에 합격했다.

85명의 동기분들 중에서 5주간 함께할 3명의 팀원을 만났고 4명이 함께 협업하면서

다양한 과제를 수행하고 주니어 개발자로서 갖추어야 할 지식과 자세를 배워나가는

뜻깊고 소중한 시간을 보내게 되어서 너무 기쁘다.

그중 첫번째 과제인 실시간 환율 계산기에 대한 회고를 남기려 한다.

---

🧮 환율 계산기

📝 과제 설명

• API 키를 받아서 사용하는 환율 정보 사이트에서 실시간으로 환율 정보를 가져와 계산하는 웹 페이지를 구현 하는 것이다.
• 송금 국가는 미국으로 고정이며, 통화는 미국 달러인 USD이다.
• 한국, 일본, 필리핀 세 나라 중 하나를 선택하며 통화 역시 나라별로 다르게 구현했다.
• 환율과 수취 금액은 소숫점 둘째 자리까지, 3자리 이상 되면 콤마를 가운데 찍어 보여준다.
• 송금액 입력에 number validation을 적용했다.

---

⚙️ 기술 스택

• React, React Hooks
• JavaScript, Styled-Component
• Git & GitHub, Build Tool (Create React App)

---

💻 담당 업무

• SelectBox 형식과 Tab 형식의 두 가지 계산기를 2명씩 2팀으로 나누어 페어 프로그래밍 작업을 했고 나는 선택박스 계산기 (SelectConverter)를 맡게 되었다.

🎨 계산기 UI / 레이아웃 구현

⌨️ 수취국가 Select Box 구현

• 위의 이미지를 보고 처음엔 상하 화살표로 인해서 DropDown이 아닌 상하 화살표 버튼을 눌러 국가를 변경하는 것으로 생각하고 위, 아래 버튼을 구현했었다.

그러나 시간이 지나고 사용자 경험(UX)부분을 생각해 보았을 때 사용자의 입장에선 총 몇 개의 국가가 리스트에 있는지 모르는 상황에서 화살표 버튼만 눌러가며 자신이 원하는 국가를 찾기에는 힘들고 불편할 것이라는 생각이 들었다.

그 후에 코드를 위와 같이 select태그와 map을 통해서 간결하고
국가 확인 및 선택이 편리하도록 변경하였다.

💵 송금액 환율 값 구현

• 환율 값을 구하는 중요 포인트를 담은 코드만 기재한 상태로
  수취 금액과 통화 표시를 하나의 태그 안에 같이 구현되도록 해두었다.
• number = input에 기입하는 숫자.
• data = 데이터로 받아오는 각 국가의 환율.

 const exChange = () => {
    let result = number * data;
    return result.toLocaleString(undefined, { minimumFractionDigits: 2 });
  };

 <Result>
   수취금액은 {exChange()} {Country[current].label} 입니다.
 </Result>

🔐 송금액 입력 Validation 기능 구현

• Submit 버튼의 onClick이벤트에 함수를 적용하여
  아래와 같은 Validaiton 로직을 구현하였다.

const showResult = () => {
    if (number <= 0 || number > 10000 || !number) {
      return alert('송금액이 올바르지 않습니다.');
    }
    setHide(true);
  };

---

💡 최종 구현

이번 과제는 페어 프로그래밍을 통해서 코드를 작성하는 순간에도 서로 끊임없는 토론과 코드 및 결과물이 조금 더 간결하고 재사용이 좋아지는 방향으로 가기 위한 노력을 많이 했던 것 같다.
앞으로 마주하게 될 과제 역시 지금과 같은 자세로 어렵더라고 끝까지 해결해서 내 것으로 만들어내는 시간을 보낼 것이다.🌟