Wanted-preonboarding 1 - 1

깃허브 링크
배포 링크
팀 노션 링크

구현 명세

환율 정보를 알려주는 open API를 가져와서 1번 계산기와 2번 계산기 만들기

1️⃣ 1번 계산기

• 드롭다운 메뉴 선택 시 변경된 환율을 표시한다.
• Submit 버튼 클릭 시 환율에 따라 계산된 수취금액을 표시한다.
• 올바르지 않은 송금액을 입력 시엔 에러 메세지 송금액이 바르지 않습니다 표시
  • 송금액이 0 미만일 때
  • 송금액이 10,000 초과일 때
  • 송금액을 입력하지 않았을 때

데모

수취국가 변경	에러 메세지 표시

2️⃣ 2번 계산기

• 드롭다운 메뉴에 제시된 통화는 USD,CAD,KRW, HKD,JPY,CNY로 6가지다.
• 드롭다운 메뉴 중 하나를 택하면 직전 select된 국가와 탭에 있는 국가의 자리가 바뀐다.
• 사용자의 입력(인풋/셀렉트)이 들어갈 때 마다 동기화되어 바뀐다.
• 날짜 포멧은 YYYY-Month-dd 형태여야한다.(ex: 2022-Jan-01)

데모

수취국가 변경	수취금액 표시

다짐

작년 하반기에 프로그래머스에서 진행하는 데브코스를 수강하면서 몇 가지 느낀점들이 있다.
1. 시킨 일 이상으로 적극적으로 일거리를 찾기
2. 기록을 일상처럼
3. 새로운 기술스택을 무서워하지 않고 도전하기
데브코스를 하면서 위 세가지를 잘 지키면 정말 좋지만 지키기 쉽지 않았던 것들이기도 하다. 이번 프리온보딩 코스에서는 저 세가지를 목표로 5주간 열심히 달려볼 것이다.

느낀 점

2명씩 짝을 지어서 페어 프로그래밍으로 계산기를 하나씩 구현하였다. 각자 역할을 나눠 코드를 짜는 게 아니라 한 사람은 코드를 짜고 한 사람은 조언하는 식으로 진행하다가, 안되겠으면 바톤터치로 역할을 바꾸는 방식이었다. 누군가 내 코드를 실시간으로 보고 있다는 점이 두려웠지만, 이내 계속해서 의견을 나누며 진행하니 두렵지 않고 편해졌다.

첫번째 계산기 구현

우리는 첫번째 계산기 구현을 맡았다. 첫번째 계산기의 구현 명세들은 위와 같지만 추가적으로 드롭다운 메뉴가 바뀔 때마다 송금액을 초기화 시켜주었다. 또 올바르지 않은 송금액 입력 시 계산된 총 수취금액과 함께 에러 메세지를 보여주기 보단 총 수취금액을 숨기고 에러 메세지만 보이도록 하는 게 사용자 UX면에서 더 좋다고 판단했다.

마지막으로 Submit 시에 송금액 맨 앞자리에 0이 있을 경우, 정규표현식으로 없애주는 기능도 추가구현하였다.

비동기 API 관련 작업을 어떻게 할까 고민했는데 1번 계산기와 2번 계산기가 동일한 API와 결과값을 사용하므로 최상단에서 훅을 통해 받는 것이 좋을 것 같다고 생각했다. useAsync 훅을 만들고 인자값으로 콜백함수와 mounted될 떄 실행 여부를 boolean 으로 받도록 구현해서 결과적으로 더 깔끔해졌다.

const {
    loading,
    error,
    data: currencyInfo,
    execute,
  } = useAsync(getCurrencyApi, true) 

다만 기존 API의 request limit이 250회이기 때문에 public 폴더에 mock.json 파일을 생성 후 함수로 만들어 인자를 바꿔주면 결과값은 동일하게 받을 수 있도록 처리하였다. json 파일을 실제 비동기 요청을 통해 받을 수 있다는 것을 처음 알았다.

Jest 도전

Jest로 unit 테스트를 진행하려 했으나 여러 환경 설정을 하면서 시간을 소비했고 아주아주 기초적인 테스팅만 진행하였다. 환경설정과 관련한 예를들면 Jest에선 craco로 덮어씌운 절대경로 설정을 인식하지 못하기 때문에 따로 Jest에서 설정해줘야 한다.

// craco.config.js
aliases: {
  '@api': './src/api',
	'@assets': './src/assets',
	'@components': './src/components',
    '@hooks': './src/hooks',
	'@pages': './src/pages',
	'@style': './src/style',
	'@utils': './src/utils',
},

  
// jest.config.js
 moduleDirectories: ['node_modules', '<rootDir>'], // 필수 ⭐️
  moduleNameMapper: {
    '^@components/(.*)': '<rootDir>/src/components/$1',
    '^@api/(.*)': '<rootDir>/src/api/$1',
    '^@assets/(.*)': '<rootDir>/src/assets/$1',
    '^@hooks/(.*)': '<rootDir>/src/hooks/$1',
    '^@pages/(.*)': '<rootDir>/src/pages/$1',
    '^@style/(.*)': '<rootDir>/src/style/$1',
    '^@utils/(.*)': '<rootDir>/src/utils/$1',
  },

처음으로 팀장도 맡게 되었는데, 리덕스나 TS를 잘 하는 것이 아니라서 살짝 걱정이 되었지만 빠른 습득력으로 5주간 마스터하고 싶다. 화이팅!!!!