[항해 99 주특기 주차 10일차]

<회고록>

오늘은 클린 코드를 직접 작성해보는 시간을 가졌다. 자세히 말하자면 저번에 항해 99 주특기 주차 9일차에서 내가 설명한 부분들을 직접 구현해보는 시간을 가졌다. 클론 코딩할 대상은 항해 99 주특기 주차 3주차 과제이다. 오늘은 내가 이 과제를 클론코딩하면서 어려웠던 점들 그리고 이를 어떻게 해결했는지에 대해서 써볼려고 한다.

 

1. 추상화 정말 못살아... ㅠㅠ

주특기 3주차에서 구현해야할 페이지에는 크게 4가지 정도의 컴포넌트가 있었다. 1. 버튼, 2. 인풋, 3. 모달, 4. select 이렇게 4가지로 이루어졌있었고 나는 여기서 오늘은 1. 버튼 컴포넌트를 만들어보았다. 버튼 컴포넌트를 분석한 결과 다음과 같이 컴포넌트를 분리할 수 있었다.

 1. 버튼 컴포넌트 제목

 2. 버튼 컴포넌트 내용

    2-1) 버튼들(색깔 = blue)

    2-2)버튼들(색깔 = red)

      2-1-1) 버튼

이렇게 나눌 수 있었고 이때 버튼은 이 페이지에서 정말 많이 사용하기 때문에 따로 컴포넌트로 제작을 해줬어야 했다. 나는 여기서 버튼과 버튼스타일 이렇게 2개로 나뉘어서 버튼 스타일을 버튼에 붙이는 형식으로 진행했다. 그리고 이때 버튼은 다음과 같은 구조를 가지고 있었다.

버튼 크기 / 버튼 색깔	파란색	빨간색
large	파란색 && large	빨간색 && large
medium	파란색 && medium	빨간색 && medium
small	파란색 && small	빨간색 && small

이렇게 총 6가지로 나뉘는 것을 확인할 수 있다. 그래서 나는 Button 컴포넌트에다가 color 와 size를 넘겨주고 Button 컴포넌트에서는 버튼 스타일에게 props로 넘겨서 처리했다. 결과적으로 버튼 스타일은 색깔을 받아서 기본 색상을 정해주고 size에 따라서 크기를 다 다르게 해주었다. 하지만 문제는 이 버튼들을 가져오는 데 문제가 생겼다. 버튼들을 가져올 때 나는 이런 식으로 가져왔다.

 

<버튼모읍집내용>
    <Button color="blue" size="large">
      hello
    </Button>
    <Button color="blue" size="medium">
      hello
    </Button>
    <Button color="blue" size="small">
      hello
    </Button>
</버튼모읍집내용>

위 코드를 보면 버튼모읍집내용 안에 Button들이 들어가 있는 것을 확인할 수 있었다. 나는 이 버튼들이 반복되기에 이를 map과 같은 메소드로 하나의 템플릿을 반복하는 방향으로 버튼과 관련된 로직을 처리하고 싶었다. 하지만 문제는 버튼들 마다의 개성이 다 다르고 이들의 일반적인 공통점이 별로 보이지 않기 때문에 나중에 확장성을 위해서라도 이 버튼들을 따로 처리하는 것은 좋지 않는 방법이라고 생각이 들었다. 그래서 저 코드에서 Button들을 따로 빼지 않고 위 코드처럼 작성함으로써 버튼들의 확장성을 고려했다.