Toss Frontend Fundamentals 모의고사 1th 후기
Frontend Fundamentals 모의고사 1회 참여 후기
토스에서 진행한 Frontend Fundamentals 모의고사 1회에 참여했다.
이 과제는 실제로 올해 채용 과정에서 사용된 문제를 기반으로 하며, 제한된 시간 안에 실무 수준의 기능과 UX를 구현하는 데 목적이 있다.
접근 방식: 2시간 제한 속 우선순위 설정
전체 작업 기간은 2일 이었지만 2시간 안에 작업을 끝내는 것을 추천했기 때문에, 모든 것을 완벽하게 하려 하기보다 아래와 같은 우선순위를 분명하게 정하는 것이 좋다고 생각 되었다.(제한이 주어지면 그것에 최대한 맞춰보려는 편..)
1) 요구사항에 명시된 기능을 정확하게 구현할 것
과제의 핵심 흐름은 다음과 같다.
• API를 통해 적금 상품 목록을 가져온다.
• 사용자가 목표 금액과 저축 기간을 입력하면 월 납입액을 계산한다.
• 계산된 조건에 맞는 상품을 추천한다.
이것에 최대한 집중해서 작업을 하는 것이 모의고사 취지에도, 개인적인 코딩 과제 연습에도 좋겠다고 생각했다.
2) 요구사항에 명시된 UX를 정확하게 구현할 것
과제에는 나와있지 않지만 짧은 시간동안 어떤것에 집중할지 선택해야 한다면 사용자의 편의성에 초점을 맞추는 것이 좋다는 것이 나의 개인적인 철학이라 이것에 집중했다. 그래서 입력, 상품 선택, 계산 결과 탭 이동 등 UX를 최대한 구현하는 데 집중했다.
3) 시간이 남는다면 읽기 좋은 코드로 리팩토링할 것
마지막 단계는 유지보수와 확장성을 고려한 코드 개선이었다. 우선순위에 맞게 제대로 동작하는 기능, 사용자의 편의성 고려에 대해 충족하고 나서 리팩도링을 하려고 했다. 하지만 시간이 만힝 짧았기 때문에 이 부분은 충분히 진행하지 못했다.
실제 내 PR에서도 이 영향이 드러나며, 계산 및 상태 관련 로직이 custom hook 한 곳에 집중되어 있다.
구현 결과(PR)
내 구현은 이 PR에서 확인할 수 있다.
시간 안에 요구사항을 충족하는 것이 목표였기 때문에 다음과 같은 구조적 타협이 있었다.
- 계산 로직
- 상품 필터링
- 입력/선택 상태 관리
위에서 이야기했지만 이 모든 기능이 하나의 custom hook으로 몰렸고, 이는 빠른 구현에는 도움이 되었지만 책임 분리나 구조적 완성도 면에서는 아쉬움이 남는 선택이었다.
받은 코드 리뷰와 주요 인사이트
짧은 시간 안에 집중적으로 구현하면서 놓친 부분들을 리뷰를 통해 확인할 수 있었다. 리뷰에서 얻은 핵심 메시지는 아래 세 가지로 요약된다.
1) 코드를 작성하기 전에, 요구사항으로부터 이상적인 형태를 먼저 그릴 것
이번 모의고사가 시간이 많이 짧다 보니, ‘얼른 코드 부터 쓰자’와 같은 마음으로 구현 했을수도 있었을 것 같은데, 그것 보다는 요구사항을 잘 읽어보면서 요구사항에 맞는 이상적인 형태를 머리속에 그려보는 것을 말씀해주셨다.
2) UI 구조와 코드 구조가 1:1로 대응하도록 할 것
1번과 이어지는 맥락에서 요구사항을 잘 파악하며 이상적인 형태를 그리다보면 UI 가 그려지고 그와 1:1로 상응하는 코드 구조가 그려질 것이라고 하셨다.
이런 구조를 통해 나중에 코드를 읽을 때 “UI를 따라가며 코드를 읽을 수 있는” 형태가 된다.
내가 작성한 코드만 보면 custom hook에 로직이 집중되면서 UI 트리 기반의 코드 이해가 어려워진 한계가 있었다는 것을 알 수 있다.
3) 책임 단위로 추상화를 하면 재사용성은 자연스럽게 따라온다
요구사항에 명시되지도 않은 재사용성을 목표로 억지로 분리하는 컴포넌트보다, 책임 단위가 명확하게 나뉜 설계를 우선시하는 것이 좋다는 피드백을 해주셧다.
이렇게 역할에 맞추어 분리했다면 유지보수성과 확장성, 재사용성이 자연스럽게 확보되었을 것이다.
마무리
2시간이라는 짧은 제한 시간 속에서 요구사항과 UX 흐름을 완성하는 것에 집중할 수밖에 없었다.
이번 모의고사를 통해 실제 고퀄리티의 코드를 작성하려면 어떤 기준으로 코드를 바라보고, 개발자가 어떤 사고방식으로 문제에 접근하면 되는지 알 수 있었다.
앞으로는 기능 구현 속도뿐 아니라 구조적인 설계를 위한 시간을 더 확보해, UI 구조와 코드 구조가 자연스럽게 매칭되는 구현을 해보고 싶다. 그렇게하면 사용자의 편의성을 저절로 따라오게 되지 않을까 하는 이상적인 생각도 해본다.