토스 프론트엔드 모의고사 후기

재엽님으로부터 토스 프론트엔드 채용 과제 모의고사 소식을 접했다. 실제 채용 과제를 기반으로 진행되고, 현직자분들의 해설 강의까지 포함되어 있다기에 망설임 없이 신청했다.

요즘 내 고민

사실 최근 몇 달간 컴포넌트 설계에서 계속 막히는 부분이 있었다. 머릿속으로는 "역할을 나눠야지"라고 생각하면서도, 정작 어떤 기준으로 나눠야 할지 감이 안 왔다. 하나의 컴포넌트에 입력, 편집, 검증, 계산... 온갖 책임을 욱여넣고 있었다.

챕터 리드에게 받은 피드백이 날카로웠다.

어떤 역할인지도 없이 어떻게 응집을 하냐

맞는 말이다.

나는 일단 관련있어 보이니까 같이 두자는 식으로 코드를 짜고 있었다. 역할 정의가 선행되어야 책임을 나누고 협력 구조를 만들 수 있는데, 그 순서가 뒤바뀌어 있었던 거다.

큰 그림을 보고 어떤 요소가 어디서 활용되어야 하고, 이 관점에서 어떻게 인터페이스를 설계할지를 고민하는게 최근의 관심사였는데. 그런 와중에 토스 모의고사를 접했다. 해설 강의에서 내가 헤매던 고민들에 대한 실마리를 얻을 수 있지 않을까 싶었다.

과제를 마주하며

과제를 받은 순간 또 습관대로 규칙으로 지켜야 할 논리를 분리하고, 이를 검증하기 위한 테스트 케이스를 작성하고, 후에 UI조립을 위해 필요한 요소를 식별하는 방향으로 작업을 진행했다.

여기서 항상 헷갈려 하는게, 도대체 어느정도 수준으로 추상화를 해서 표현해야 개발자가 직관적으로 이해하고 활용할 수 있는 컴포넌트로 만들어질 수 있을까? 평소에도 받던 피드백이었다. "작은 단위로 쪼개서 접근하라", "완벽한 설계보다 빠르게 검증 가능한 단위로 시작하라". 결국 이번에도 같은 실수를 반복했다. 어떻게 쪼개지를 고민하다가 결국 왕 고봉밥을 만들어버렸다.

해설에서 연결된 점들

재엽님과 종택님의 해설 강의는 기대 이상이었다. 라이브 코딩 중에 날아오는 날카로운 질문들에도 물 흐르듯 답변하시는 모습이 인상적이었다. 그리고 무엇보다, 내가 혼자 고민하던 것들이 하나씩 연결되는 느낌이었다.

인터페이스부터 떠올려라

항상 고민한다고 고민하는데 막상 제대로 하기가 항상 어렵다. 그리고 재엽님의 코딩을 보며 생각의 흐름을 어느정도 베껴볼 수 있었다. 이걸 사용할 때 어떤 형태면 좋을까 를 어느 기준으로 판단하는지를 보는건 큰 도움이 되었다. 예전에는 컴포넌트를 만들 때 내부 구현부터 생각했다. 하지만 인터페이스를 먼저 정의하면 이야기가 달라진다. 이 컴포넌트를 사용하는 쪽에서 무엇을 넘겨주고, 무엇을 기대하는지를 먼저 그려보면 컴포넌트의 책임이 자연스럽게 드러난다.

YAGNI YAGNI AND YAGNI

재사용될 것 같아서 미리 분리하는 것은 금물이다.

이 말이 특히 와닿았다. 코드를 바깥으로 빼는 건 추출이지 추상화가 아니다. 명확한 책임 단위로 나뉘어 있을 때 재사용성은 자연스럽게 따라온다. 내가 하나의 컴포넌트에 온갖 책임을 넣었던 것도 비슷한 문제였다.

애매한 이름 아래 여러 책임을 모아뒀지만, 정작 어떤 역할인지는 정의하지 않았다. 역할이 없으니 응집도 없었던 거다. 해설에서 직접 언급된 건 아니지만, Props Drilling과 Composition 이야기를 들으면서 떠오른 생각이 있었다. 조건부 렌더링을 할 때, 부모에서 { shouldShow && <Child /> } 이런 식으로 처리하는 경우가 많다.

하지만 "언제 보여야 하는가"가 자식 컴포넌트의 본질적인 특성이라면, 그 판단은 자식 내부에 있어야 한다. 부모는 "이 컴포넌트가 있다"만 알면 되고, 표시 조건이 복잡해져도 부모 코드는 바뀌지 않는다. 책임이 흩어지지 않고 한 곳에 모이는 거다.

각 요소가 자기 역할에 충실할 때, 전체 구조도 단순해지고 강해진다.

결국 본질로 돌아왔다

요즘 객체지향의 사실과 오해를 읽고 있는데, 거기서 말하는 "역할, 책임, 협력"이라는 키워드가 프론트엔드 컴포넌트 설계에도 그대로 적용된다는 걸 이번 모의고사를 통해 다시 한번 체감했다.

역할: 이 컴포넌트는 무엇인가

책임: 무엇을 알아야 하고, 무엇을 해야 하는가

협력: 다른 컴포넌트와 어떻게 메시지를 주고받는가

화려한 아키텍처나 특정 라이브러리를 잘 쓰는 것보다 중요한 건 결국 이 본질이었다. 클린코드의 "단어"에 집착하는 게 아니라, 왜 그런 원칙이 필요한지 맥락을 이해해야 한다는 조언도 결국 같은 이야기였다.

마치며

이번 모의고사는 "주어진 기능을 구현하는 연습"을 넘어서, 그동안 흩어져 있던 고민들이 하나로 연결되는 경험이었다. 내년에도 진행한다고 하셨는데, 그때쯤엔 조금 더 성장한 시각으로 참여할 수 있으면 좋겠다. 좋은 문제와 밀도 높은 피드백, 열정적인 해설로 많은 인사이트를 나눠주신 재엽님과 종택님께 감사드린다.