🧹 내가 보려고 정리하는 클린 코드

참조 출처
토스 | 실무에서 바로 쓰는 프론트엔드 클린 코드
드림코딩 | 코딩 잘하는 팁 세가지

클린코드에 대해 알아보던 중 도움이 된 영상 두 개를 요약해 정리해보려 한다.

1. 특정 지식과 로직은 한 곳에서 명확하고 신뢰할 수 있도록 존재해야 함

why? 재사용성, 유지보수를 위해!
같은 로직을 반복적으로 작성해두면

• 수정시 일일히 수정해야함 → 더 많은 시간이 필요하며 효율성이 떨어짐
• 유지보수가 어렵다 → 하나라도 빠트리면 노답;;

2. 코드는 단순하고 멍청하게 짜자

대부분의 시스템은 복잡할 때 보다 심플하게 만들어졌을 때 가장 잘 동작한다. 따라서 시스템을 디자인할 땐 심플함이 주 목표가 되어야 하며 불필요한 복잡성은 피해야 한다.

3. You Ain't Gonna Need It!

why? 잘못된 기능 개발은 많은 유지보수 시간, 개발 비용을 잡아먹음
따라서 필요하지 않은 기능, 사용하지 않는 기능, 지나치게 미래지향적인 기능은 지양하자!

1. 실무에서 클린 코드의 필요성

🙅 흐름 파악이 어렵고 도메인 맥락이 표현되지 않아 동료에게 물어봐야 알 수 있는 코드
→ 개발할 때 병목이 됨

• 유지보수할 때 시간이 오래걸리며 심하면 기능 추가가 불가능한 상태가 됨
• 성능이 안좋은 경우가 대부분

=== 유지 보수 시간의 단축
1. 코드 파악
2. 디버깅
3. 리뷰

2. 안일한 코드 추가의 함정

1. 하나의 목적인 코드가 흩뿌려져있는 경우
2. 하나의 함수가 여러가지 일을 하는 경우
3. 함수의 세부 구현 단계가 제각각인 경우

클린 코드 !== 짧은 코드
클린코드는 원하는 로직을 빠르게 찾을 수 있는 코드지 짧은 코드가 아니다

원하는 로직을 빠르게 찾으려면?

😡 하나의 목적을 가진 코드가 흩뿌려 있어
✅ 응집도 향상!

😡 하나의 함수가 여러 가지 일을 하고 있어
✅ 단일책임 원칙 따르기!

😡 함수의 세부구현 단계가 제각각이야
✅ 추상화 단계 조정! (핵심 개념을 필요한 만큼만 노출)

3. 로직을 빠르게 찾을 수 있는 코드

1. 응집도

: 같은 목적인 코드는 뭉쳐두자

🤔 무엇을 뭉쳐야 할까?

✨ 뭉치면 쾌적한 코드 예) 당장 몰라도 되는 디테일
cf) 뭉치면 답답 예) 코드 파악에 필수적인 핵심 정보 👉 클린코드는 짧은 코드가 아니다❗️

💡 핵심 데이터와 세부 구현 나누기
예) 팝업 모달 코드

• 핵심 데이터
  : 팝업 버튼 클릭시 수행하는 액션, 팝업의 제목, 내용
• 세부 구현
  : 팝업을 열고 닫을 때 사용하는 상태, 컴포넌트의 세부 마크업, 팝업 버튼 클릭 시 특정 함수를 호출해야한다는 바인딩
  
  

✨ 선언적 프로그래밍
: 핵심 데이터만 전달받고 세부 구현은 뭉쳐 숨겨두는 개발 스타일

👉 무엇을 하는 함수인지 빠르게 이해 가능!

cf) 명령형 프로그래밍: 어떻게 해야할지 하나하나 명령하기

그렇다고 선언적 프로그래밍이 무조건 좋은것은 아니기 때문에 두 방식 모두 유동적으로 사용하자!
예) Prop으로 '어떻게 해야 하는지'를 세부적으로 넘겨야 하는 경우 👉 명령형 설계

2. 단일 책임

: 한 함수는 하나의 일만 조지자
뚜렷한 함수명으로 의도파악을 쉽게!

예) 폼에서 질문 제출 버튼을 클릭했을 때 불리는 함수로 약관 동의여부를 체크하고 질문을 제출함
함수명: handle질문제출
→ 약관체크랑 질문 제출이 섞여있기 때문 알맞지 않다!

중요 포인트가 모두 들어있어야 한다

• 한 가지 일만 하는 명확한 이름의 함수
• 한 가지 일만 하는 기능성 컴포넌트(리액트 컴포넌트로 기능 분리도 가능)
• 조건이 많아지면 한글 이름도 유용하다!
  : 도메인이 복잡해서 영어 이름으로 길게 짓는 게 오히려 복잡도를 높일 때, 상수를 직관적으로 보고 싶을 때, 복잡한 조건문이 많아질 때 매우 유용

3. 추상화

: 로직에서 핵심 개념을 뽑아내자

얼마나 추상화 할 것인가? 추상화 정도!

<Button onClick={showConfirm}>
  전송
</Button>
{isShowConfirm && (
	<Confirm onClick={() => {showMessage("succes")}} />
)}

<ConfirmButton onConfirm={showMessage("succes")}>
  전송
</ConfirmButton>

<ConfirmButton message="succes">
  전송
</ConfirmButton>

<ConfirmButton />

추상화 정도는 상황에 따라 맞추면 된다. 단, 추상화 수준이 섞여있다면 코드 파악이 어려워지니 통일할 것!

코드를 수정할 때 가져야 할 태도

1. 담대하게 기존 코드 수정하기

두려워하지 말고 기존 코드를 가지고 놀자.

2. 큰 그림 보는 연습하기

그때는 맞고 지금은 틀릴 수 있다, 기능 추가 자체는 클린해도, 전체적으로는 어지러울 수 있다.

3. 팀과 함께 공감대 형성

코드에는 정답이 없다. 따라서 팀원들과 명시적으로 이야기하는 시간을 갖고 각자 생각하는 병목 지점을 공유해 집단 지성을 발휘해보자.

4. 문서로 적어보기

글로 적어야 명확해 진다. 향후 어떤 점에서 위험할 수 있는지, 어떻게 개선할 수 있는지 기록하자.