Frontend Fundamentals 모의고사 2회차에 참여했다. 저번 1회차에 운좋게 참여하게 되어 유익한 시간을 보내고, 이번에도 이어서 참여하게 되었다.

1회차 후기

이번에는 개인적인 사유로 많은 시간을 할애하지는 못해서 아쉬움이 있었지만 1회차 때 배웠던 것들을 바탕으로 빠르게 한 번 진행해보았다. 1회차와는 다르게 구현 과제가 아닌 리팩토링 과제여서 조금 더 수월하게 진행할 수 있었고, 컴포넌트 추상화에만 조금 더 집중할 수 있는 시간이었다.

느낀점 3줄 요약

1. 이전에 배웠던 UI가 드러나게 추상화하기를 잘 해낸 것 같았다.
2. 라이브 해설강의를 듣고난 후, 추출과 추상화를 여전히 잘 구분짓지 못하고 있었다는 걸 깨달았다.
3. 1회차에는 다른 참가자들 코드도 많이 뜯어보고 리뷰도 남겼었는데, 그런 시간을 가지지 못해서 아쉬움이 크게 남았다.

과제 진행

1. UI만 보고 임시 코드 작성하기

1회차 때 배운대로 기존 코드를 보지 않고 UI만 보고 페이지 컴포넌트의 대략적인 형태를 임시 코드로 작성했다. 그리고 추상화 하기로 한 컴포넌트들의 인터페이스를 정해보았다.
여기서 집중했던 것은 UI가 드러나도록 하는 것이었는데, 내가 생각하기에 중요했던 부분은 섹션들마다 있는 타이틀, 레이아웃을 위한 spacing 컴포넌트 들이었다. 이것들을 페이지 컴포넌트에 드러내야 페이지 컴포넌트를 보았을 때 UI와 바로바로 매칭이 될 거라고 생각했다.

2. 현재 구현 확인하기

주어진 코드는 모든 페이지의 로직과 jsx가 하나의 컴포넌트에 들어가있는 방식이었다. 일단은 많은 로직들이 있었지만 이걸 기준으로 추상화하지는 않고 UI기준으로 내가 작성한 컴포넌트들로 추상화하고 나면 로직들이 책임에 맞는 컴포넌트로 위치하게 될거라고 생각하고 현재 구현에서 jsx 부분을 위주로 추상화하겠다고 계획을 세웠다.

3. 리팩토링 시작

정말 눈에 보이는 UI대로 컴포넌트화를 진행했다. 여기서 나는 추출과 추상화에 대해서 조금 더 고민이 필요했다고 생각한다.

내가 기존에 생각했던 인터페이스대로 리펙토링이 가능한지를 codex를 이용해서 빠르게 검증해보고 인터페이스만 가지고 이래저래 고민해보았다. 대부분의 컴포넌트들은 section이라는 단위로 분리를 하면 해당 section에서 필요한 상태값과 변환 함수, 그리고 제목이 props로 드러나기 때문에 적절해보였다.

한가지 고민했던 부분은 회의실의 예약 현황을 보여주는 section이었는데 단순히 추출만 하고 props를 구성하면 다음과 같은 인터페이스를 가지게 된다.

      <ReservationTimelineSection
        title="예약 현황"
        rooms={rooms}
        reservations={reservations}
        activeReservationId={activeReservation}
        onToggleReservation={setActiveReservation}
      />

하지만 이 컴포넌트의 실제 UI를 보면 섹션 title안에 회의실 별 타임 테이블리스트가 있고 그 타임 테이블은 header와 timelinelist로 이루어져 있다. 그래서 title을 제외한 다른 것들은 사실 타임 테이블 리스트를 위한 것이다. 그래서 이런 UI적 요소들을 드러내고 왜 이런 props들이 필요한지 더 잘 나타내기 위해 합성컴포넌트로 나타내보았다.

      <ReservationTimelineSection
        title="예약 현황"
        timeHeader={<ReservationTimelineSection.TimeHeader />}
        timeline={
          <ReservationTimelineSection.RoomTimelineList
            rooms={rooms}
            reservations={reservations}
            activeReservationId={activeReservation}
            onToggleReservation={setActiveReservation}
          />
        }
      />

4. 해설강의를 듣고..

짧은 시간이었지만 나름 잘 해냈다라고 생각했는데 조금 더 추상화에 대해서 생각해보았어야한다는 것을 해설강의를 통해 느꼈다. 오히려 긴 시간 고민했던 1회차때의 코드가 조금 더 나았나? 싶기도 할 정도로 이번에는 거의 추출에 가깝게 리팩토링을 했다는 것을 해설 강의를 진행하는 내내 느꼈다.

먼저 섹션 컴포넌트를 추출할 때 title까지 추출할 필요가 있었을까 싶다. title을 제외한 내용이 들어있는 부분을 컴포넌트화 하겠다고 생각했다면 오히려 추상화에 집중할 수 있었을 것 같다.
가장 오래 고민했던 ReservationTimelineSection의 경우를 예로 들자면, title부분은 페이지 컴포넌트에 그냥 드러내고 타임 테이블 부분만 추상화하겠다고 하면 자연스럽게 예약 현황이라는 도메인 지식을 컴포넌트에서 분리했을거다.
rooms, reservations가 아닌 rows, timeRange 등의 props를 받도록 설계했다면 그냥 타임 테이블을 나타내는 컴포넌트로 추상화 할 수 있었다. 그러면 타임테이블을 나타내는 컴포넌트를 페이지컴포넌트에서 가져다썼고, 그안에 들어가는게 회의실과 예약이라는 것이 props로 표현되었을 것이다.

5. 배운점

잘못된 코드 의심하는 방법 하나가 기억에 남는다.

<ReservationTimelineSection.RoomTimelineList
    rooms={rooms}
    reservations={reservations}
    activeReservationId={activeReservation}
    onToggleReservation={setActiveReservation}
 />

이 props들을 보면 rooms에 rooms를 넘겨준다. 이러면 의심해볼만 하다. 이건 추상화가 맞나? 추출아닌가?
잘 추상화 되었다면 아래와 같을거다. (물론 props 이름은 더 고민이 필요하다.)

<TimeTable
    rows={rooms}
    timeRange={reservations}
    activeTimeId={activeReservation} 
    onToggleTimeRange={setActiveReservation}
 />

이렇게 2회차를 마무리 했는데, 리팩토링을 하면서 조금 더 고민과 연습을 해봐야겠다.