프로젝트를 하며 어떻게 해야 클린하게 짤 수 있는 지 고민이 많았다. 그래서 여러 블로그 글을 찾아보며 공부를 하다가 토스에서 나온 영상을 보고 정리를 해본다. 사실 영상을 보면 이해는 가는데, 실제 내 코드에 적용하는 일은 쉽지 않은 것같다. 그래도 나중에 경력이 쌓이다보면 토스 영상에 나오는 팁들을 이해할 수 있는 날이 오지 않을까 하며 정리해본다.
1. 응집도, 단일 책임, 추상화 관점에서 본 나쁜 코드
1) 하나의 목적인 코드가 흩뿌려져 있다. → 응집도
초록색으로 강조한 코드는 모두 '연결중인 전문가 팝업' 관련 코드인데, 이들이 뚝뚝 떨어져있어서 나중에 기능을 추가할때 스크롤을 위아래로 이동하며 코드를 파악해야하는 불편함이 있다.
2) 하나의 함수가 여러가지 일을 하고 있다. → 단일책임
하나의 함수가 3가지 일을 하고 있다. 세부 구현을 모두 읽어야 함수의 역할을 알 수 있게 된다.
3) 함수의 세부구현단계가 제각각이다. → 추상화
2가지 함수 모두 이벤트 핸들링 관련 함수인데, 파란색 함수는 질문전송외에도 여러가지 일을 하고 있다.
2. 위의 코드를 리팩토링
1) 응집도
기존에는 팝업을 여는 버튼과 팝업코드가 동떨어져있었는데, 이를 모아 PopupTriggerButton이란 컴포넌트를 만들고 띄워줄 팝업은 props로 내려보냈다.
2) 단일책임 
약관동의 관련 함수들을 쪼개서 필요한 시점에 부르도록 바꾸었다.
3) 추상화(함수의 세부구현단계 맞추기) 
기존 함수 이름을 바꿔 handleNewExpertQuestionSubmit과 handleMyExpertQuestionSubmit으로 위계를 맞추었다. 전자는 새로운 전문가에게 질문하는 로직만, 후자는 연결중인 전문가에게 질문하는 로직만 넣었다.
클린코드 != 짧은 코드
클린코드 == 원하는 로직을 빠르게 찾을 수 있는 코드
3. 코드 응집하는 방법: 핵심데이터는 뭉치지 않고, 세부구현은 뭉친다.
- 핵심데이터는 팝업버튼 클릭 시 일어나는 일과 팝업의 제목과 내용이고, 세부구현은 팝업을 열고 닫을 때 사용하는 상태와 컴포넌트 마크업이다.
- 핵심데이터는 밖에서 전달하고 나머지는 뭉친다: 세부구현을 읽지 않고도 어떤 팝업인지 파악할 수 있다.
선언적 프로그래밍: 핵심 데이터만 전달받고 세부구현은 뭉쳐 숨겨두는 개발 스타일
4. 단일책임
1) 하나의 일을 하는 뚜렷한 이름의 함수를 만들자 
중요 포인트가 모두 담겨있지 않은 함수명은 읽는 이가 예상한 대로 코드가 동작하지 않으며 이는 코드에 대한 신뢰하락으로 이어진다. 그 다음부터는 함수명을 믿지 못하고 세부구현을 다 봐야한다.
2) 한가지 일만 하는 기능성 컴포넌트로 만들자 
버튼 클릭함수에 로그찍는 함수와 api콜이 함께 있다는 것이 아쉽다. 버튼을 클릭하면 자동으로 클릭로그가 전송되도록 리팩토링 한다. 이러면 버튼 클릭함수에서는 api 콜만 신경쓸 수 있다.
3) 조건이 많아지면 한글이름을 쓴다.
5. 추상화: 핵심개념을 뽑아내자
1) 얼마나 추상화해야할까?: 상황에 따라 필요한 만큼 추상화한다.
2) 추상화 수준이 섞여있지 않도록 하자 
초록색은 높은 추상화, 빨간색은 중간 추상화, 노란색은 낮은 추상화 단계 -> 추상화 수준을 통일 한다. (사진 오른쪽에서는 전부 높은 추상화 단계로 통일한 것을 볼 수 있다)
6. 마무리
1) 담대하게 기존 코드 수정하기
2) 큰 그림 보는 연습하기:
그때는 맞고 지금은 틀릴 수 있다. 기능 추가 자체는 클린해도 전체적으로는 어지러울 수 있다.
3) 팀과 함께 공감대 형성하기
코드에 정답은 없기 때문에 코드리뷰에서 클린코드 관련 댓글을 달아도 될지 고민하게 된다. 당장은 사소한 이슈이기 때문이다. 사소하지만 일관성을 깨는 코드가 쌓이면 유지보수하기 힘든 코드가 되기 때문에 명시적으로 이야기를 하는 시간이 필요하다.
4) 문서로 적어보기: 글로 적어야 명확해진다.
어떻게 개선할 수 있는지, 향후 어떤점에서 위험할 수 있는지를 적어보자
