두개의 기업 과제가 하나씩 있어서 총 4명의 팀원들이 2명씩 나뉘어 져서 '짝 프로그래밍'으로 진행했다.

팀을 룰렛으로 뽑고, 과제도 룰렛으로 뽑았다 🤣

내가 배정받은 기업 과제는 '2번 계산기' 이였고, 1번 계산기 과제는 다른 두 분이 맡으셨다.

1번 과제는 간단 설명 후 넘어가고, 2번 과제는 좀 더 디테일하게 설명할 예정이다.

0. 환율 정보 API

https://currencylayer.com/ 

핵심 부분

export async function GetJsonData() {
  const Address =
    'https://sixted-proxy-cors-anyware.herokuapp.com/' + // CORS처리 - proxy server
    'http://api.currencylayer.com' + // api 주소
    '/live?access_key=' +
    process.env.REACT_APP_API_KEY +
    '&currencies=CAD,KRW,HKD,JPY,CNY,PHP&source=USD&&format=1'; // 쿼리 파라미터
  const data = await fetch(Address, { mode: 'cors' })
    .then(function (response) {
      return response.json();
    })
    .then(function (myJson) {
      return myJson;
    });
  return data;
}

프로그램 작동시 프로젝트의 최상단 App.js에서 fetch를 통해 환율 정보 JSON을 받아왔다.

useState를 통해서 data변수에 저장하였고 FirstCalculator와 SecondCalculator에 props를 통해 전달하였다.

받아온 결과

{
  "success":true,
  "terms":"https:\/\/currencylayer.com\/terms",
  "privacy":"https:\/\/currencylayer.com\/privacy",
  "timestamp":1643184663, // 시간이 이런 형식으로 왔다 😮
  "source":"USD",
  "quotes":{ // 환율을 확인할 수 있는 부분 'USD(source) + ???(target)' 형식
    "USDCAD":1.259035,
    "USDKRW":1196.969608,
    "USDHKD":7.784945,
    "USDJPY":114.036989,
    "USDCNY":6.322897,
    "USDPHP":51.253991
  }
}

1번 계산기

프로그램 설명 ⚙️

1. 수취국가(한국, 일본, 필리핀)을 선택하고, 송금액을 넣는다

2. 수취 국가를 선택하면 환율 정보 API를 통해서 실시간으로 환율 데이터와서 '환율'에 반영한다.

3. 송금액을 USD로 입력하고 Submit 버튼을 누르면 수취금액을 계산해서 보여준다.

   3.1 환율과 수취금액은 소숫점 2째자리까지 보여준다.

   3.2 3자리 이상 되면 콤마를 가운데 찍어 보여줍니다 ex) 1,234.00

핵심 기능 ⭐️

1. 환전

// 환율 정보, 송금액, 수취국가 순으로 매개변수를 받는다.
export function Exchange(data, input, target) { 
  
  // 환율 정보 조회를 통해 환율을 저장한다.
  const exchageRate = data['USD' + target]; 
  
  // 송금액 * 환율을 구하고 소수점 2째자리 까지 저장한다.
  const output = (exchageRate * input).toFixed(2); 
  
  // 계산된 결과를 3자리 이상이면 콤마를 찍어서 반환한다.
  return output.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

2번 계산기

프로그램 설명 ⚙️

1. input에는 사용자가 숫자만 입력할 수 있어야 한다.

   1.1 숫자 외 아무것도 입력할 수 없다 (특수문자, 영어, 공백, ..)

   1.2 1000 이상의 숫자를 입력하면 자동으로 1000으로 변경한다.

   1.3 1000 부터 숫자에 콤마를 붙여서 1,000과 같이 보이게 한다.

2. 통화의 예시로는 USD, CAD, KRW, HKD,JPY, CNY가 있습니다.

3. 드롭 다운 메뉴를 선택할 경우, 화면에 제시된 탭은 제거되고 드롭 다운 메뉴로 생성되어야 한다.

4. 드롭 다운 혹은 탭이 변경시 변경될 환율과 기준일 정보는 동기화 되어 변경되어야 합니다.

5. 기준일의 날짜 포맷은 다음 이미지와 같이 변경해야 합니다.
   
   

핵심 기능 ⭐️

1. input, selected, tabSelected 변경시 실시간 반영

input: 사용자가 입력한 금액
selected: dropdown 상태 값 (dropMenuSelected 와 같은 변수였으면 더 좋았을 것 같다는 생각..)
tabSelected: tab의 상태 값

useEffect(() => {
  
  // dropdown 상태 값과 tab의 상태 값이 같으면 변경 없음
  if (selected === tabSelected) {
    setExchanged(input);
  } else {

    // 기준 화폐(단위?) 환율
    const divider = selected === 'USD' ? 1 : data.quotes['USD' + selected];

    // 목표 화폐 환율
    const mutiplier =
          tabSelected === 'USD' ? 1 : data.quotes['USD' + tabSelected];

    // 환전 금액 = ( 입력받은 금액 / 기준 화폐(단위?) 환율 ) * 목표 화폐 환율
    const exchanged = (Number(input) / divider) * mutiplier;

    setExchanged(exchanged);
  }

  // 다음과 같은 항목 변경시 useEffect 작동
}, [input, selected, tabSelected]); 

2. input 예외처리

• 2.1 숫자 이외의 값 방지

// 숫자 이외의 값이 들어온다면,
if (!/^[0-9]+$/.test(inputValue)) {
  
  // input 입력값의 마지막(방금 들어온 글자)를 삭제한다.
  const tmp = value.slice(0, -1);
  
  e.target.value = tmp; // input에 표시해준다.
  setInput(tmp); // 상태를 업데이트 한다.

  return;
}

• 2.2 0이 반복적으로 입력될 경우

  • ex) 00, 000, 00000 (불가능)

  • ex) 100, 1010 (가능)

 const isDoubleZero = (n) => {
    if (n === '') return; // 공백인 경우 제외
   
    const result = String(n) // input의 표시된 string의 자리마다의 합을 구한다.
      .split('')
      .reduce((a, b) => Number(a) + Number(b));
   
    return result === 0 ? true : false; // 자리마다의 합이 0이면 true 리턴
  };

• 2.3 유닉스시간 -> 한국 시간(KST)

export const unixTimestamp = (time) => {
  
  // unix timestap를 * 1000 해서 포맷 변경
  const date = new Date(time * 1000); 
  
  const year = date.getFullYear();
  
  // numberToMonth => 1~12(숫자)를 Jan~Dec 로 바꾸어주는 함수
  const month = numberToMonth(date.getMonth() + 1);
  const day = '0' + date.getDate();

  // day.substr(-2) => 항상 day는 2자리가 보이게 한다
  return year + '-' + month + '-' + day.substr(-2);
};

후기 🤔

말로만 들어본 페어 프로그래밍을 처음 해보았다.

여러 협업 플랫폼 중에 게더타운을 사용하기로 정했고, 유동적으로 대화를 벗어나거나 쉽게 화면공유를 끄고 킬 수 있어서 좋았다. (+ 여러명이 동시에 화면 공유를 할 수 있는 기능)

보통 '드라이버'와 '네비게이터'를 5분마다 번갈아 가면서 한다고 하나, 체감 시간이 너무나도 짧아서 오프라인에서나 가능하다고 느꼈다.

비대면의 경우 소통이 생각보다 힘들었고 결국 작은 기능 단위로 '드라이버'와 '네비게이터'를 번갈아가면서 개발을 진행했다.

마음이 급해서 그런지는 몰라도 개발전 충분한 설계를 하지 않고 개발에 들어갔다.

2번 과제의 요구사항을 다시 살펴보니 3번 문항을 다르게 해석해서 기능을 구현했던 것 같다.

다음 과제 부터는 개발에 들어가기 전 설계를 꼼꼼히 하는 시간을 갖을 예정이다.

아,, 그리고 배포를 하면서 스트레스를 많이 받았다,,

API를 불러오는데 CORS 때문에 하루동안 Netlify, Heroku, AWS 등 여러 플랫폼에 배포를 시도하면서 수많은 에러를 만날 수 있었다.

결국은 Heroku + CORS Anyware 조합으로 해결할 수 있었다.

이제 시작인데 벌써부터 영혼이 빠져나가는 느낌이지만 아직 애교 수준이라고 생각한다.

좋은 기회가 생긴만큼 5주간 포기하지 않고 팀원들과 열심히 달려봐야겠다 💪🏻