Toss Frontend Fundamentals 모의고사 1회 후기

들어가며

여느 날처럼 트위터를 보다가.. 토스 프론트엔드 계정을 통해 토스 채용에서 실제로 사용했던 과제를 공개하고, 해설 강의를 들어볼 수 있는 모의고사를 진행한다는 소식을 알게 되었다. 토스 과제의 경우, 재작년에 토스에 지원했을 때 풀어보기도 했고, 과제 전형에서나 면접 전형에서의 경험이 좋았던 기억이 있었다. 그래서 이번 기회를 통해 다시 한번 참여해 보고 싶어 모의고사에 신청하게 되었다. 관련 내용은 아래 링크에서 확인할 수 있다.

트위터 노션

과제 진행

과제 제출 기간은 11/21(금)~11/23(일)로 3일이었는데, 실제 채용 과정에서 과제를 진행하는 시간이 2시간이었기 때문에 제한 시간에 맞춰서 진행해 보고자 했다. 시간을 넉넉하게 잡고 구현하면 더 나은 코드를 작성할 수도 있었겠지만, 실전이라고 생각하고 주어진 시간 안에, 요구사항에 맞게 구현하면서도, 어느 정도의 코드 퀄리티도 챙기고 코드가 작성된 의도가 드러날 수 있게끔 하는 걸 목표로 했다.

코드에서 어떤 의도가 드러나야 하냐? 라고 한다면, 과제 초입에서 꼭 신경 써야 하는 부분에 '서비스의 유지보수나 장기적인 확장성을 고려한 설계, 추상화 관점에 집중해서 기능을 구현해주세요.' 라고 강조되어 있었고 이게 과제를 채점하는 출제자의 의도이자 기준으로 보았다. 그렇기 때문에 이러한 부분에 더 집중해서 코드의 의도를 드러내는 게 좋겠다는 생각을 하며 과제를 진행했다.

과제의 요구사항은 크게 4가지였다.

  1. 적금 상품 목록 연동하기
  2. 저축 목표 입력 기능 만들기
  3. 금 상품 목록에서 선택 기능 만들기
  4. 계산 결과 탭 만들기

과제 전체 내용을 요약해 보자면, 사용자의 입력값을 다루며, 입력값이라는 조건에 맞게 필터링해서 보이는 목록이 있고, 목록에 있는 상품을 선택할 수 있으며, 선택한 상품에 따른 계산 결괏값이 보여야 한다. 그리고 이 내용을 바탕으로 구현에서 중요하다고 생각되는 부분을 다시 나눠봤을 때, 대략 아래와 같을 것으로 생각했다.

  1. 사용자의 입력/선택 값을 어떻게 다룰지?
  2. 상품 조건에 맞는 필터링 로직을 어떻게 다룰지?
  3. 계산하는 로직을 어떻게 다룰지?

구현 결과는 여기에서 확인할 수 있고, 중요하다고 생각한 3개의 기능이 분리된 것을 확인할 수 있었다만.. 2시간은 생각보다 빠르게 지나갔고, 구현을 마무리 하는 데 집중하다 보니, 설계나 추상화 관점에서의 완성도에 대한 아쉬움이 많이 남았다.

해설

해설은 이번 모의고사에서 가장 기대했던 시간이기도 하다. 여러 기업에서 채용 과제를 진행하고 있지만, 과제 내용에 대한 피드백이나 출제자가 어떤 의도로 과제를 설계했는지, 과제를 푸는 사람에게 어떤 부분을 기대하는지와 같은 내용을 듣는 건 쉽지 않기 때문이다.

해설에서는 다음과 같은 내용을 알 수 있었다.

  1. 코드를 보기 전에 요구사항 문서를 보고 먼저 이상적인 형태를 떠올려보자.

짧은 제한 시간 안에 구현하려다 보면, 코드부터 냅다 치는 경우가 있다. 그런데 여러 번 해보면 알겠지만, 대부분의 상황에서 코드를 먼저 친다고 해서 개발 속도가 빨라지진 않는다. 머릿속에 올바른 설계도가 그려져 있다면, 구현 자체는 단순히 타자 치는 일의 반복 혹은 AI한테 떠넘길 수도 있는 일이다. 그런데 설계도가 없는 상황에서 구현하다 문제를 마주친다면 상황이 심각해진다. 작성했던 코드를 지우고 다시 작성하거나, 구현은 됐지만 유지보수가 어려운 엉망인 코드를 마주하게 될 때가 있다. 그런 상황을 피하기 위해서는 코드 작성 전에 더 많은 시간을 들여야 한다.

  1. UI 형태와 코드 형태가 1:1로 매핑되면 유지보수가 쉽다.

개발하면서 자주 겪는 상황인 것 같다. UI와 코드가 1:1로 매핑되지 않으면, 코드를 찾는 시간이 오래 걸리고 결국에는 이 시간이 모여서 유지보수 비용을 크게 만든다. 특별한 이유가 없다면, 위에서부터 아래로 순차적으로 UI와 쉽게 매핑할 수 있는 형태를 유지하는 것이 좋다.

  1. 책임 단위로 추상화를 하면 재사용성은 따라온다.

예시로 보여주신 다른 분들의 결과물에 있는 코드를 보고서는 이전에 내가 작성했던 코드들이 생각이 났다. "'추출'과 '추상화'는 다르다." 라는 말이 크게 와닿았다. 단순히 코드를 분리하는 것, 즉 추출하는 것만으로는 추상화는 이루어지지 않는다. 상황에 따라서는 오히려 명확한 의도가 없이 분리를 하는 게 유지보수를 힘들게 할 수 있으며, 명확한 책임에 따라 추상화해야 유지보수와 재사용성을 모두 챙길 수 있다.

끝으로

이번 모의고사를 통해 코드 퀄리티를 높이기 위해 어떤 방식으로 문제에 접근하고, 어떤 의도를 가지고 코드를 작성해야 하는지에 대한 인사이트를 얻을 수 있었다. 그리고 지금까지 내가 작성했던 코드들에 대해서도 다시 한번 되돌아볼 수 있는 시간이 되었던 것 같다. 오늘 얻은 지식을 바탕으로 이제부터 더 유지 보수하기 쉬운, 확장성 있는, 추상화가 잘 되어있는 코드를 작성할 수 있게 되기를 바란다 :)

마지막으로 이번 프로그램을 진행해주신 재엽님, 종택님에게 감사드립니다.