들어가기

원티드 프리온보딩 첫 과제는 환율정보 API를 이용해서 환율 계산기를 만드는 것이 과제였습니다.

팀 프로젝트로 4명인 팀을 2명씩 나눠서 기능이 다른 계산기를 구현해야 했습니다.

지금까지 독학으로 공부하면서 다른 사람들과 공부한 내용에 대해서 이야기한 적도 없었고, 정해진 과제를 수행한 경험도 거의 없었기 때문에 너무 긴장되었습니다. 하지만 괜찮다고 격려해 주신 팀원 분들 덕분에 힘을 낼 수 있었습니다.

과제 내용

다음과 같이 서로 조금 다른 기능을 하는 환율 계산기 2개를 구현하는 과제입니다.

USD에서 KRW, JPY, PHP로 변환시키는 계산기
USD, CAD, KRW, HKD, JPY, CNY에서 CAD, KRW, HKD, JPY, CNY로 변환시키는 계산기

그 중에서 1번을 우리 팀원과 둘이서 짝 프로그래밍으로 진행했습니다.

1번 계산기에서 구현해야 할 세부 기능을 정리하면 크게 다음과 같습니다.

수취국가를 Select Box로 선택했을 때 ‘환율’을 표시할 것.
송금액을 입력하고 Submit을 눌렀을 때 ‘수취국가’와 ‘환율정보’를 가지고 ‘수취금액’을 계산할 것.
‘환율’과 ‘수취금액’은 ‘소숫점 2자리’에서 자르고 숫자는 ‘3자리 이상’이 되면 ‘콤마(,)’를 추가할 것.

과제 수행

준비

과제 수행 전 팀에서 모두가 함께 사용할 규칙을 먼저 정했습니다.

기본 규칙

50분 진행 후 10분 휴식하기
회의는 하루에 2번 진행 (아침 9시와 오후 5시 중간 결과 보고)
점심, 저녁 시간
회의 중 발언 시 이유와 목적을 밝히기짝 프로그래밍을 하기 전에는 ‘50분 진행 후 10분 휴식하기’가 얼마나 중요한 일인지 알지 못했지만, 곧 중요하다는 것을 알게 되었습니다. 분명 아침 9시부터 시작했는데 결국 새벽 4시에 끝났으니까 중간에 10분씩 쉬는 시간이 없었다면 많이 힘들었을 것 같습니다. 그리고 회사에서 일하는 것처럼 하자고 하셔서 아침 9시와 오후 5시에 업무를 정하고 결과를 보고하는 방식으로 진행하기로 했습니다.

깃 커밋 메시지

Add - 레이아웃 / 기능 추가
Remove - 내용 삭제 (폴더 / 파일 삭제)
Modify - 수정 (JSON 데이터 포맷 변경 / 버튼 색깔 변경 / 폰트 변경)
Fix - 버그/오류 해결
Refactor - 코드 리팩토링 (멘토 리뷰 반영 / 스스로 리팩토링 / 중복 코드 제거 / 불필요 코드 제거 / 성능 개선)
Docs - 문서에 관련된 수정작업이번 프리온보딩에 지원할 때 선발 과제를 수행하면서 깃 커밋 메시지의 일관성이 중요하다는 것을 알게 되었는데, 모두가 통일된 커밋 메시지를 남기도록 위와 같이 정리했습니다.

클래스 이름

BEM(Block, Element, Modifier 방식을 사용하기로 했습니다. navigation__button--active 이렇게 밑줄을 사용해서 각 요소를 구분하여 이름을 짓는 방식이라는 것은 강의를 들으면서 보고 따라한 적이 있었지만 정확한 구분 방법은 모르고 있어서 인터넷을 검색해 정확한 정보를 찾아서 공부했습니다. 프로젝트의 스타일 방식은 SASS를 사용해는데 BEM방식을 이용했을 때 각 요소의 종류를 구분하기 쉬워서 같이 사용하면 좋다는 것을 알게 되었습니다.

브랜치 전략

‘git flow’를 사용
main: 최종 릴리즈에 사용되는 브랜치
develop: 다음 릴리즈를 위해 개발중인 최신 브랜치
feature: 특정 기능 개발을 위한 브랜치
release: 릴리즈 점검을 위한 브랜치
hotfix: 긴급 버그 수정을 위한 브랜치
support: 버전 호환성 문제를 처리하기 위한 브랜치지금까지 혼자 프로젝트를 하면서 깃은 커밋하고 저장하는 ‘저장소’의 개념으로 사용했었는데 처음으로 팀프로젝트를 하면서 다양한 깃의 기능을 알게 되었습니다. 특히 우리 팀은 **‘깃 플로우(git flow)’**를 사용하기로 했는데 메인에서 바로 작업하는 것이 아니고 메인 프로젝트를 각자 ‘포크(Fork)’ 기능을 사용하여 각자의 깃허브로 프로젝트를 가져오고 작업하기 전에는 원래 프로젝트의 위치를 말하는 **‘업스트림(upstream)’**에서 최신 정보를 가져오고(pull) 다시 거기에서 **‘브랜치(branch)’**를 나눠서 작업한 후 이상이 없는지 확인하여 업스트림에 합치고(merge) 이후 문제가 없으면 main 브랜치로 옮겨서(checkout) 릴리즈를 하는 방식으로 진행되었습니다. 저에게는 이렇게 작업하는 것이 너무 새롭고 낯설었지만 같이 작업하며 충돌이 일어나지 않기 위해 꼭 필요하다는 것을 사용하면서 크게 느끼게 되었습니다.

폴더 구조

- public
- src
 - Components //계산기 컴포넌트
  - MultiExchangeCalcForm
  - Nav
  - TabList
 - Pages
  - ExchangeCalc //1번 계산기
  - MultiExchangeCalc //2번 계산기
 - Styles // 공통 스타일 파일
 - api // 환율 정보 가져오는 API
 - constants // 상수 파일
 - util // 공통 사용 유틸 (+ test 코드)

먼저, 다음과 같이 계산기에 들어가야 하는 컴포넌트 폴더를 만들었습니다. 그리고 두 개의 계산기를 구현해야 하기 때문에 라우터로 나눠줄 각각 페이지를 페이지 폴더로 구분했습니다. Styles 폴더에는 CSS RESET을 위한 파일과 공통으로 사용하는 파일을 넣어 어떤 페이지에서도 쉽게 불러올 수 있도록 했습니다. 또한 이번 과제에서 숫자 3자리마다 콤마를 붙이는 부분이 있고, 차후 다른 과제에서도 사용할 수 있을 것 같은 내용의 코드를 utils에 넣어서 재활용성을 높였습니다. 또한 공통으로 가져오는 api도 api폴더에 컴포넌트를 만들어 한 번 가져온 다음에 활용할 수 있도록 했습니다.

구현한 기능

1. 수취 국가를 Select Box로 선택했을 때 ‘환율’ 표시하기

위 그림처럼 Select Box에서 수취 국가를 선택하면 해당 국가의 통화 환율을 표시하는 기능입니다. 첫 렌더 시 한국의 환율을 보여주기 위한 방법을 고민하던 중에 useState로 국가 값을 관리하면 좋겠다고 생각을 했습니다. state의 기본 값을 KRW로 지정하여 첫 렌더 때 수취 국가를 KRW로 선택하게 했습니다. 또한 Form태그 안에 value값과 환율을 출력하는 부분도 수취 국가 state를 기준으로 렌더링 하게 만들어서 국가를 선택했을 때 자동으로 환율이 업데이트 되도록 했습니다.

2. 송금액을 입력하고 submit했을 때 수취 금액을 표시하기

앞에서 계산한 환율과 송금액의 입력값을 곱해서 수취 금액이 나오게 설정했습니다. 첫 번째로 기능을 구현했을 때 환율 값 자체를 소수점 두 번째 자리에서 잘라서 수취금액이 제대로 나오지 않았었는데, 환율 값을 원래 값을 state에 저장하고 각 값들을 출력할 때만 소수점 두 번째 자리에 자르는 형식으로 만들어서 해결했습니다.

느낀 점

첫 번째 과제를 통해서 느낀 점은 협동해서 프로젝트를 진행할 때 아주 많은 대화가 필요하다는 것을 느꼈습니다. 지금까지는 내가 생각한 코드 구현 방법을 머리 속에 저장하고 그대로 실행을 하면 되었는데, 같이 협동으로 프로그래밍을 하면서 내가 생각하는 코드 구현 방법을 설명하는 것이 어려운 일이라는 것을 알게 되었고, ‘쉽게 설명하기 위해서 어떤 방법을 사용하면 좋을까?’에 대해서 고민하게 되었습니다.

과제를 마무리하고 다시 돌아보면서 느낀 쉽게 설명하는 방법은 열심히 공부를 해서 확실한 표현을 사용해서 설명하는 것과 최대한 천천히 풀어서 설명하는 것입니다.

용어를 확실히 공부할 것.

설명을 하다 보니까 애매하고 알고 있는 것들이 있었습니다. 그럴 때 다른 사람에게 설명하는 것이 몹시 어려웠습니다. 무엇보다 확실하게 알고 있고, 정확한 어휘를 사용했을 때 팀원들과 의사소통이 잘 되는 것 같다고 생각했스빈다.

최대한 풀어서 설명할 것.

선생님으로 일하면서 학생들을 가르칠 때 최대한 이해하기 쉽게 설명하기 위해서 관련 이야기로 도입, 설명, 연습을 하게 됩니다. 내 생각을 다른 사람에게 전달하는 과정도 이와 비슷하다고 느꼈습니다. 이런 방식으로 코딩하려고 하는 이유와 계획하고 있는 코딩 과정을 자세하게 풀어서 설명했다면 상대방이 더 이해하기 쉬웠을 것 같습니다.

따라서 실력을 향싱시키는 것도 중요하지만 팀 내에서 의사소통을 정말 잘할 수 있는 개발자가 되기 위해서 노력해야겠다는 생각을 하게 되었습니다.

프로젝트 링크

https://github.com/wantedPreOnboarding/19_01st_calculator

원티드 FE 프리온보딩 과제1 회고 (환율 계산기)