Frontend Fundamentals 모의고사 2회 후기
오랜만에 Frontend Fundamentals가 다시 열렸다. 이전에 1회의 온라인 해설에 좋은 경험이 있었기 때문에, 이번 모의고사도 기대하고 진행했다.
과제 진행
주제는 '회의실 예약' 리팩토링이었다. 말 그대로 페이지 두 개에 사용된 코드(각 300, 400줄이 넘어가는..)를 적절히 리팩토링하는 것이었다. 코드를 처음 보았을 때, 뇌 정지가 왔는데, Claude Code를 이용해서 현재 코드를 분석하게 하고 맥락을 이해하는 방식으로 시작했다.
구현 기준
개인적으로 페이지를 구현할 때는 아래의 원칙을 적용한다.
- 커스텀 훅: 어떻게 데이터를 가져오고 관리하는지 (인프라)
- 순수 함수: 어떤 규칙으로 판단하는지 (도메인)
- 컴포넌트: 어떻게 보여주는지 (UI)
즉, 컴포넌트에서 커스텀 훅의 '구현'은 관심 밖이라고 생각했고, '구현'의 영역에 무엇을 두어야 하는가를 생각했다. 결론적으로 searchParams를 다루는 부분, API Queries, Mutations를 훅으로 관리했다.
DateInput, MessageBanner 같이 공통으로 사용하는 부분을 분리하고, 컴포넌트의 '개념'을 사용하려고 했다.
말로 설명하기는 어려운데, DateInput이 현재는 <input /> 컴포넌트를 사용하지만, 나중에는 모달이나 툴팁으로 선택하게 할 수도 있다. 그러니까 외부에서는 "날짜를 선택한다."라는 개념을 사용하게 하고 싶었다.
아쉬운 부분
구현 시간을 두 시간으로 정했다보니 시간이 모자라서 구현을 못 했거나, 생각을 못 한 부분이 있었다.
suspense를 도입하고 싶었지만 못했다.MyReservationList,AvailableRoomList와 같은 지역 컴포넌트에reservations,rooms같은 이름으로 props를 넘기게 설정했다. 구현을 마치고 보니, 결국 이 컴포넌트는 재활용이 안되는(컨텍스트 압축만을 위한) 컴포넌트인데 props로 데이터와 클릭 이벤트 같은 걸 넘기는 게 맞나? 라는 생각이 들었다.
온라인 해설
이번 라이브 해설은 1, 2부로 진행되었다. 1부는 한재엽님, 2부는 문동욱님이 설명해주셨다.
1부에서 재엽님께서 말씀하신 얘기 중 기억에 남는 것을 꼽아보면 아래와 같다.
- Claude Code로 코드를 짜더라도, 인터페이스는 직접 짜서 전달하자.
- 추상화 레벨을 맞추는 코드를 작성하자. (Top02, Top03, NumberSelect, TimeSelect 등)
- UI만 모아놓은 추상화는 사실상 의미가 없다.
2부에서 동욱님께서 말씀하신 얘기의 핵심은 아래라고 생각한다.
- 우리의 뇌는 코드를 읽는 것이 아니라 예측한다. (예측하기 쉬운 코드의 필요성) 코드의 네이밍을 '어떻게 진행이 될 것이다.'를 예측할 수 있도록 구현해야 한다.
- 인터페이스는 컴포넌트를 연결하는 통로이다. 호출 맥락에 관심이 되는 순간 컴포넌트의 재사용성은 현저히 떨어진다.
이번 과제는 리팩토링 과제인 만큼 해설에서도 PR을 보면서 진행되었는데, 언급되는 문제를 나도 그렇게 했는가? 를 많이 생각할 수 있었던 것 같다.
내 코드는 추상화 레벨이 페이지 단위에서 어긋나 있게 작성된 것 같고, 다음 모의고사에서는 더 좋은 코드를 짤 수 있도록 그동안 노력해야 되겠다.