[기업과제] MVVM 패턴을 적용한 유로 환율 정보 서비스 회고

원티드 주관 겨울인턴 회사에 지원해 프론트엔드 과제를 진행했다.

월요일 10시부터 목요일 10시까지 3일의 기간동안 진행됐고, 원본 레포에 PR을 보내 제출했다. 아래는 작성한 PR 내용이다.

GitHub repo

---

필수 수행 항목

1. any 를 사용하지 말고 Type을 지정해 주세요.

• 컴포넌트와 데이터에 필요한 Type을 선언해 지정해주었습니다.
• 에러를 띄우지 않는 부분에서는 타입스크립트가 타입을 추론할 수 있도록 했습니다.
• Type은 /src/types 폴더에 위치해 있습니다.

 

2. 컴포넌트를 분리하고, 적당한 폴더를 만들어 파일들을 배치하세요.

• /src의 하위 폴더들을 생성하여 파일을 위치시켰습니다.
  1. /apis : api 통신과 관련된 파일을 담는 폴더입니다.
  2. /hooks : 커스텀 훅을 담는 폴더입니다.
  3. /model : MVVM 디자인 패턴 적용을 위한 Model을 담는 폴더입니다.
  4. /styles : 스타일과 관련된 파일을 담는 폴더입니다.
  5. /types : 선언한 Type을 담는 폴더입니다.
  6. /utils : 여러 파일에서 사용하는 함수를 담는 폴더입니다.
  7. /view : MVVM 디자인 패턴 적용을 위한 view를 담는 폴더입니다.
  8. /viewModel : MVVM 디자인 패턴 적용을 위한 viewModel을 담는 폴더입니다.
• 주어진 과제는 1페이지뿐인 서비스이므로 컴포넌트의 재사용이 이뤄지지 않는다고 판단하여 컴포넌트를 분리하지 않았습니다. 무분별한 컴포넌트 나누기는 오히려 유지보수를 어렵게 하며 가독성을 해친다고 생각하기 때문입니다.
  
  

3. 유로화를 입력할 때마다 환율을 반영하여 원화로 표시해 주세요. (exchangeEurToKrw 함수를 사용하세요, 필요시 구현내용 변경 가능)

• 유로를 입력하는 input value를 EuroInput state로 관리합니다.
• writeEuroInput를 사용해 유로 input value를 변경합니다.
• EuroInput state를 exchangeEurToKrw함수에 인자로 넣어 반환된 값을 원화 input value로 사용합니다.
• EuroInput state는 /src/view/View.tsx에 위치해 있습니다.
• writeEuroInput와 exchangeEurToKrw는 /src/viewModel/ViewModel.ts에 위치해 있습니다.
  
  

 

4. 환율 정보 로딩중임을 사용자가 알 수 있도록 UI를 추가해 주세요.

• MUI 라이브러리 스피너로 로딩 UI를 구현했습니다.
• isReady state 값에 따라 로딩 UI 또는 환율 UI가 렌더됩니다.
• isReady state는 viewModel.euroInfo에 데이터가 들어와 viewModel.euroInfo.basePrice가 0이 아닐 때 true로 변경됩니다.
  
  

 

5. 금액은 세자리 마다 콤마(,) 를 표시하세요.

• addComma 함수를 사용해 정규표현식으로 세자리 마다 ,를 추가합니다.
• addComma함수는 /src/utils 폴더에 위치해 있습니다.
  
  

 

6. 유로화는 소수점 2자리까지 표시하고, 원화는 소수점을 표시하지 않습니다.

• 유로를 입력하는 input에는 숫자와 .만 입력할 수 있으며 소수점 2자리까지만 입력할 수 있습니다.
• api를 통해 받아온 데이터들은 transformInt를 사용해 소수점을 생략합니다.
• 등락한 원화의 수치는 UX를 위하여 소수점까지 모두 표시했습니다.
• transformInt함수는 /src/utils 폴더에 위치해 있습니다.
  
  

 

7. 비즈니스 로직을 분리하고 MVVM 구현패턴을 적용하세요.

• MVVM(Model - View - ViewModel) 디자인 패턴을 적용하기 위해 역할과 같은 이름의 폴더를 두고 그 안에 파일을 위치 시켰습니다.

1. Model은 서버 api와 통신하는 비즈니스 로직을 담당하는 역할이라고 이해했습니다.
2. ViewModel은 Model이 준 서버 데이터를 가공하거나 View에서 사용자 입력 정보를 받아 처리하는 역할이라고 이해했습니다.
3. View는 ViewModel에 의존하여 데이터를 처리하지 않고 화면만을 보여주는 역할로 이해했습니다.

---

옵션 수행 항목 & 기타

• 비효율적으로 작성된 코드가 있다면 변경하세요.
  • 살때, 팔때, 보낼때, 받을때의 항목은 표를 사용하는게 더 적절하다고 생각하여 table 태그로 변경했습니다.
  • 그외에도 시맨틱한 코드를 위해 역할에 맞는 html 태그로 변경했습니다.
  • 등락에 따라 화살표를 표시하는 코드가 등락값이 0일 때는 처리되어있지 않고, 중요도에 비해 코드가 길어지는 것 같아 getFluctuationIcon함수를 이용해 값에 따라 아이콘을 넣도록 했습니다.

 

• 디자인은 마음대로 변경하셔도 됩니다.
  • SEO를 생각해 h1태그로 제목을 추가했습니다.
  • 등락에 따라 빨강과 파랑으로 색상이 변경되도록 했습니다.
  • 더 나은 사용자 경험을 위해 등락한 원화 수치는 소수점을 생략하지 않고 표시했으며, 등락률은 소수점 2자리까지 생략했습니다.

---

느낀점

MVVM 디자인 패턴을 단어만 아는 상태에서 3일안에 MVVM 패턴을 이해하고 React에 적용하는 게 어려웠다. 그동안 항상 디자인 패턴에 대해서 공부해야지 하고 미루기만 했었는데 이렇게 시도하게 될 줄은 몰랐다. 🥲 

 

그래도 MVVM 패턴 구현을 포기하지않고 한정된 기간 안에 적용하기 위해 고군분투하면서 스스로 성장할 수 있었다. Model과 ViewModel을 구현하기 위해서 class를 사용하다보니 전보다 class에 대한 이해도가 높아질 수 있었다. 

 

Model을 서버와 통신하는 비즈니스 로직을 담당하는 역할이라고 이해했는데 원하는 데이터만 Model에서 ViewModel로 넘겨주는 방법을 찾지 못해 차선책으로 useGetData 커스텀훅을 만들어 사용했다. 강의만 들었던 커스텀 훅도 직접 만들어 볼 수 있던 기회였다.

 

참고했던 자료에서는 Model에서 다양한 메서드의 서버통신 코드가 존재했었는데 서버통신코드를 중점으로 찾아보면 Model과 ViewModel의 역할에 대해 좀 더 이해할 수 있을 것 같다.

 

테스트 코드 작성법을 알았더라면 테스트가 쉬운 MVVM 디자인 패턴의 장점을 체감할 수 있었을텐데 그러지 못해 아쉽다. 하던 프로젝트를 어서 마무리하고 jest 공부를 시작해야겠다.

 

시간안에 MVVM 패턴을 적용하는 것이 최우선이라고 생각했기 때문에 필수 항목에 들어있지 않았던 스타일링은 UX를 위한 것을 제외하고 추가하지 않았다. 처음엔 Model을 타입으로만 사용했는데 Model을 이용해 객체를 생성하고 그 Model을 ViewModel에 넘겨주는 형태로 좀 더 MVVM 패턴에 가깝도록 수정할 수 있었던 건 과감히 스타일링을 하지 않은 덕이라고 생각한다.

 

처음에 과제를 봤을 때 너무나 당황스러운 과제였는데 일단 해보자는 마음으로 제출날 새벽까지 몰입해서 진행하고 나니 스스로 많이 성장했다는 생각이 들었고, 저기어때 프로젝트 이후로 오랜만에 스스로가 대견하고 뿌듯한 기분이 들었다.