클린 코드의 의의
- 실무에서 공공연한 지뢰코드가 존재한다.
- 지뢰코드 === 흐름파악이 어렵고, 도메인 맥락 표현X , 동료에게 물어봐야하는 코드
- 즉 실무에서 클린코드란 유지보수 시간의 단축과 같다.
( 클린코드 != 짧은코드 )
== 원하는 로직을 빠르게 찾을 수 있는 코드
원하는 로직을 빠르게 찾으려면?
1. 하나의 목적을 가진 코드가 흩뿌려져 있다면 => 1.응집도를 높여라
2. 함수가 여러 가지 일을 하고 있다면? => 2.단일책임의 원칙을 따라라
3. 함수의 세부구현 단계가 제각각이라면? => 3.추상화 단계를 조정해 핵심 개념을 필요한 만큼 노출해라
1. 응집도
응집도가 낮은 코드 예제
리팩토링 시도 - custom Hook 사용
- custom hook을 이용하여 한번에 뭉쳤을때의 위험성
=> 팝업에서 버튼을 눌렀을때 어떤 액션을 하는지가 중요한 부분이지만 hook속에 가려져 알 수 없다.
=> anti Pattern 이 될 수 있다. (훅 속에 가려져서 기능을 제대로 알 수 없다. )
Q. 그럼 무엇을 뭉치고, 뭉치지 않아야할까 ?
- 뭉치면 쾌적한 부분 : 당장 몰라도 되는 디테일 정보
- 뭉치면 답답한 부분 : 코드 파악에 필수적인 핵심정보
클린코드란 찾고싶은 코드를 빠르게 찾을 수 있는 코드이다!
따라서 이를 바탕으로 리팩토링한 코드
이렇게 핵심 데이터만 전달받고 세부 구현은 뭉쳐 두는 개발스타일을 선언적 프로그래밍이라고 한다.
👍 선언적 프로그래밍을 이용하자!
- 무엇을 해야할지만 알려주고, 세부 구현은 안쪽에 뭉쳐두는 방법
- '무엇' 만을 바꿔서 사용 가능
Q. 그럼 선언적 프로그래밍이 명령형 프로그래밍보다 좋은것인가?
- No
- prop으로 '어떻게 해야하는지'를 세부적으로 넘겨야 하는 경우에는 명령형 설계도 필요
2. 단일 책임
문제 코드
❌ 함수 내용에는 "약관체크"와 "질문제출"이 섞여있다.
👉 중요한 포인트가 모두 담겨있지 않는 함수명은 위험하다.
리팩토링한 코드
정리
- 한가지 일만 하는 함수를 따로따로 작성 , 명확한 함수 이름 작성
- 도메인이 복잡하여 영어 이름을 길게 짓는게 오히려 복잡도를 높힌다면 한글이름을 사용하자.
3. 추상화
- 로직에서 핵심 개념을 뽑아내기
- 상황에 따라 필요한 만큼 추상화를 하면 된다.
추상화를 할 때 주의해야할 점
클린코드 적용하기
1. 담대하게 기존 코드 수정하기
- file changes를 두려워 하지 말자
2. 큰 그림을 보는 연습하기
- 그 때는 맞아도 지금은 틀릴수 있다.
- 기능추가 자체는 클린해도 전체적으로 어지러울 수 있다.
3. 팀과 함께 공감대 형성하기
- 코드에 정답은 없다. 팀과 함께 코드리뷰를 통해 개선하기
4. 문서로 정리하기
- 향후 어떤점에서 위험할 수 있는지
- 어떻게 개선할 수 있는지
요즘들어 코드를 짤 때 어떻게 짜야 좋은 코드인지 고민을 많이 했는데 좋은 인사이트가 된 것같다.
이론적으로는 알고 있던 내용들이였는데 실무 예제를 통해 보니 확실히 더 와닿았다.
특히 , 응집도와 관련되어서 나는 응집도가 정말 낮은 코드를 짜고있었구나 반성하게 되었고 ^^..
추상화를 할 때 추상화 수준까지 맞춰주는 부분을 보며 깔끔함에 감탄했다.
정리한 내용을 참고해서 조금 더 깔끔하게 짜봐야징!
출처 : https://www.youtube.com/watch?v=edWbHp_k_9Y&ab_channel=%ED%86%A0%EC%8A%A4
'FE' 카테고리의 다른 글
| Node환경과 브라우저의 차이점 (몇몇 노드 모듈이 브라우저에서 실행할 수 없는 이유) (0) | 2023.12.11 |
|---|---|
| [Electron] 일렉트론이란? (0) | 2022.11.14 |
| 리액트를 사용해보고 느낀점과 Next.js vs Gatsby 알아보기 (2) | 2022.08.04 |
| [디자인패턴] 아토믹패턴이란? (2) | 2022.07.04 |
| SSR , CSR이 무엇일까 ? (0) | 2022.06.22 |