Frontend Fundamentals 모의고사 1회 후기
요즘 출퇴근길에 X를 눈팅하는 재미에 빠져 있다. 우연히 Frontend Fundamentals 모의고사 홍보 글을 봤는데, 안 하면 손해 같아서 신청 당일 대기타다가 디스코드에 다섯 번째로 들어갔다.
사실 주변에 토스 다니는 프런트엔드 개발자가 많지 않고, 몇 없는 사람도 '토스 라이브러리 써서 어떻게 했더니 붙었다.'같은 식으로만 얘기해줘서, 실제 과제가 어떤 방식인지, 난이도는 어떤지 너무 궁금했는데 되게 좋은 경험을 했다.
과제 진행
주제는 ‘적금 계산기’였고, 올해 9월에 진행된 Growth Track 채용 프로세스에서 사용됐던 과제라고 한다. 이번 주말 중 2시간 동안 문서를 보고 자유롭게 진행하면 되는 거였는데, 하필 그때 코로나에 제대로 걸려서 상태가 영 좋지 않은 컨디션으로 모의고사를 봤다. 😭
가이드에는 “서비스의 유지보수나 장기적인 확장성을 고려한 설계, 추상화 관점에 집중해서 기능을 구현해 주세요.”라는 문장이 있었고, 구현 요구사항은 되게 디테일하게 작성되어 있었다. (거의 AI에 단계별로 넣어서 돌리면 원하는 결과가 나올 정도였다.)
입력한 조건에 맞춰서 적금 상품 목록(
ProductList)을 조건에 맞게 필터링해서 출력하라. (조건 목록은 아래와 같다…)
위와 같은 느낌이다. 나는 몸도 안 좋겠다 싶어서, 1단계부터 그냥 antigravity의 Gemini 3 Pro 모델한테 던져봤고, 생각보다 괜찮은 코드가 나와서 나름 안도하면서 진행했다.
온라인 해설
11월 25일 20시부터 22시까지 토스에서는 이 문제의 모범적인 접근법과 해결 과정을 라이브로 해설해 주셨다. 진행은 토스의 한재엽님과 오종택님이 맡으셨는데, 두 시간 동안 꽤 밀도 있게 들었다.
재엽님이 마지막에 정리해 주신 핵심 내용은 아래 세 줄이다.
- 코드를 보기 전에 요구사항 문서를 정독하고, 이상적인 형태를 떠올리자. (떠올리던, 코드로 적던 이건 알아서)
- UI 형태와 코드를 1:1로 매핑시키자. (지엽적으로, 코드가 많아지면 조금씩 컴포넌트를 묶어가는 느낌으로)
- 재사용성을 앞서 생각하지 말자. 책임 단위로 추상화하자.
라이브 보면서 확장성에 대한 아이디어를 많이 얻은 것 같다.
예를 들어, 나는 ProductList 안에서 API를 호출하고 바로 렌더링하는 구조를 생각했는데, 해설에서는 그보다 더 큰 관점에서 “정책을 어떻게 분리할 것인가”에 집중했다. 특히, 필터 조건을 배열 기반으로 설계한 부분은 처음 보는 패턴이라 그런가 벽 느껴졌다.
그리고 확장성을 폴더 구조나 훅 분리 수준으로 생각했는데, 해설에서는 상태와 책임의 단위를 먼저 분리하는 방식으로 접근했다. 예를 들어 탭 상태를 useView()로 감싸거나, 폼 상태를 묶어 추상화하는 방식 같은 부분 등..
요즘 하라는 개발은 안 하고 시간 많이 낭비했는데, 되게 잘 쓴 시간 같고, 토스 님들이 2회 모의고사 준비해 주시면 멀쩡한 상태로 도전해 보고 싶다..