Toss Frontend Fundamentals 모의고사 1회 후기
어느 날 동료 분께서 토스에서 Frontend Fundamentals 모의고사라는 행사가 열린다는 소식을 전해주셨고, 참여 링크가 공개된다는 시간에 맞춰 선착순으로 입장하기 위해 없던 X(구. 트위터) 계정도 만들었다.
초시계 사이트까지 열어두고 정각에 입장하는 노력을 들인만큼 운 좋게 선착순 안에 들 수 있었고, 직접 모의고사에 참여한 후기를 남겨보려고 한다.
step 1. 과제 구현
토스에서 올해 9월에 시행한 Growth Track 채용 과정 중 실제로 사용되었던 과제를 직접 구현해보는 시간을 가졌다.
3일 간의 시간이 주어졌고, 실제 구현 시에는 2시간 시간 제한이 있었다기에, 나는 일요일에 따로 시간을 내서 실전처럼 시간 제한을 두고 구현해보았다.
적금 계산기 구현 화면
구현해야 할 화면과 요구사항이 적힌 파일을 내려 받아 이를 react로 구현해야 했는데, 요즘 실무에서 vue만 사용하고 있던 터라 오랜만에 react로 작성하려니 재밌고 신선했다.
사실 구현 자체는 2시간이라는 시간 제한이 매우 길게 느껴질 정도로 간단했기에, 여기서 포인트는 요구사항으로 주어지지 않은 개선사항을 직접 찾아서 적용시키거나, 확장성 및 유지보수를 고려한 설계가 채점의 기준이 될 거라고 생각한다.
구현해놓고도 어떻게 하면 더 좋을까, 사용성 측면에서나 유지보수 측면에서 어떤 설계를 해야 가장 좋을까 계속해서 고민해보았고, 가장 신경 써서 구현한 기준들은 다음과 같다.
- React Query로 서버 상태 관리
- API 데이터 페칭과 캐싱 처리
- 로딩/에러 상태 관리
- 커스텀 훅으로 명확한 관심사 분리
- 각 훅이 하나의 역할만 담당하도록 구성- 성능 고려
- 계산 로직에 useMemo 사용 (필터링, 추천 상품 목록, 계산 결과 등)
- useCallback으로 불필요한 리렌더 방지- 상수 분리
- UX (요구사항에 없던 추가 구현 사항)
- 로딩/에러/빈 결과 등 다양한 상태에 대한 피드백
- 입력값 누락 시 '-' 표시
- 필터링 결과 개수 표시
여전히 100% 만족스럽거나 확신은 없었지만 제한시간이 다 되어 구현한 과제를 제출했다
step 2. PR 제출 후, discussions 나 코멘트를 통해 서로 간 피드백 주고 받기
PR은 70개가 넘게 올라왔고, 나도 제출 후 다른 분들의 구현 방식들을 보면서 미처 생각치 못한 부분들에 대해서도 다시 한 번 돌아보게 됐다.
-
보고나니 너무나도 당연한 건데
react hook form을 사용해서 에러메세지를 띄우는 것도 고려하지 못했고.. -
특히 나는
tanstack query의suspense를 사용해본 적이 없었기 때문에 (isLoading분기만 오지게 한 사람)suspense사용성에 대해서도 많은 참고를 할 수 있었다. -
또한 너무 감사하게도 내 PR에 다른 분들께서 코멘트를 달아주셔서 좋았던 점에 대한 피드백과 함께 개선점도 말씀해주셔서 무척 기뻤다 🥹
정말 요즘엔 PR 코멘트 한 줄 한 줄이 넘나 소중하고 귀하단 말이지 ㅠㅠ
(돈 줄테니 피드백 좀...!)
step 3. 라이브 해설 강의
과제 제출 마감 이틀 후, 라이브 해설 강의가 열렸는데 오후 8시부터 10시까지 무려 두 시간 동안이나 라이브 코딩을 해주셨다. 어떤 식으로 접근하는 게 좋은 코드인지 직접 하나하나 보여주셨고, 나쁜 예시도 보여주시며 어떤 식으로 개선하면 좋을지 알려주셨다. 실시간 qna 도 답변해주시고..!
진짜 진짜 진짜 x 1000000 너무 유익한 시간을 보냈다.
심지어 웃기고 재밌기까지 했음... 재엽님과 종택님께서 정말 많은 고생을 해주셨다.
하나도 지루하지 않고 재밌고 유익한 라이브 코딩.. 넘 귀하다 💫
한 마디 한 마디가 버릴 게 없었는데, 그 중에서도 가장 강조하신 것들은 요 세 줄 정도가 되겠다.
덧붙여서,
- input은 input 다워야 하고 select는 select 다워야 한다
- 인터페이스가 너무 복잡하거나 예상 가지 못하는 요소여선 안된다
- UI와 코드가 일대일 매칭 되는 것이 너무너무 중요하다
- 폴더 구조와 같은 방법론은 크게 중요하지 않다
- 추출과 추상화의 차이를 알아야 한다
- 비슷한 UI는 재사용성을 고려해서 설계해야 한다
vue와는 또 다른 react 코드를 오랜만에 보며 하나하나가 다 신선하고 재밌었고, 한 시라도 빨리 react 공부를 다시 해야겠다는 동기부여가 잔뜩 되었다.
여기서 그치지 않고 라이브 해설 강의나 다른 참가자 분들의 PR들을 참고하며, 제출한 과제에 대해 리팩토링 하는 시간을 따로 가져볼 예정이다. 언제가 될진 모르지만 이런 행사를 추후에 또 준비할 거라고 말씀해주셨는데, 무조건 또 참여할 생각이다!
최초 코드 작성 시에는 어떤 식으로 접근했었는지, 새롭게 배운 것들은 무엇이 있었는지, 리팩토링 하면서 개선한 점들은 어떤 건지에 대한 자세한 내용은 별도 포스팅으로 올려볼 예정..!
