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

<회고록>

오늘은 2주차 과제에 대한 클린 코드로 리펙터링을 하는 시간을 거쳤다. 이렇게 클린 코드를 작성하게 된 이유는 디자이너 즉 혜경님이 디자인을 바꾸자 , 어떤 요소를 수정해줘라 등 변화가 많이 일어나는 때마다 그 변화에 유연하게 대처하는 코드를 작성하지 못한다는 문제점이 있었다. 그 분만 아니라 항해 99에서 태현님께서 클린코드를 작성하는 방법에 대해서 올려주셔서 더욱더 클린 코드가 무엇인지를 연구해보는 시간이었다. 그래서 오늘은 메니저님께 물어본 클린 코드와 이를 작성하는 기준에 대해서 조금 살펴보려고 한다.

 

1. components 도대체 어떻 기준으로 나누지?

components를 나누는 기준과 관련해서 정말 많은 사람들이 헷갈리는 경우가 많다.(이 글을 쓰는 저자도 그랬다...). 컴포넌트를 나누는 기준은 2가지 정도가 있다.

1. 재사용성이 있는가?

2. 유지보수에서 떨어지는 가?

즉 이 2가지를 통해서 컴포넌트를 나누는 것이 일반적이라고 한다. 그럼 이렇게 나눴을 때 어떤 점들이 좋을 까? 컴포넌트를 재사용성을 기준으로 나눈 다면 컴포넌트 자체의 활용도가 높아지고 똑같은 코드를 반복할 필요가 없기 때문에 유지 보수 측면에서도 올라간다. 또한 한 파일 내에 하는 일이 정말 여러가지가 있을때는 이를 분리해서 파일 하나당 하나의 일을 해주는 것이 중요하다. 왜냐하면 만약 에러가 났거나 기능이 정상적으로 동작하지 않을 때 어떤 컴포넌트에서 동작이 안되는 지를 브라우저를 통해서 확인 한다음에 그 부분만 수정하면 바로 고쳐지기 때문이다.

2. headless 패턴 도대체 머지?

headless 패턴을 설명하기 위해서 먼저 컴포넌트의 구조에 대해서 집고 가겠다. 컴포넌트는 크게 3가지로 이루어져있다. 1. 데이터 , 2. UI , 3. interaction(데이터와 UI간의 상호작용) 이렇게 이루어져있다. 이때 headless 패턴은 이 3가지 중에서 2가지만 집중적으로 살펴보는 전략을 의미한다. 즉 예를 들면 UI는 생각하지 않고 data를 어떻게 처리할 건인가? 이를 어떻게 UI와 연결시킬 것인가? 등 이런식으로 3가지 중에서 2가지의 패턴만 살펴보는 전략을 의미한다. 그럼 이런 전략은 어떤 장점이 있을까? 방금 예시를 살펴보자. 방금 예시를 보면 UI가 어떤 형식이든 상관하지 않고 작업을 하는 것을 볼 수 있다. 즉 UI가 유동적으로 바뀌어도 이를 유동적으로 대처할 수 있다는 것이다. 그 뿐만 아니라 3가지 중에서 2가지의 작업을 신경쓰다보니 2가지 작업에 완성도는 높아질 수 밖에 없다. 이처럼 headless 패턴을 이용하여 작업을 분리 시키고 각 작업에 대한 집중도와 확장성을 높혀서 결과적으로 완성도 있는 퀄리티를 만들 수 있다.