🤓
토스 SLASH21 > 실무에서 바로쓰는 Frontend Clean Code를 보고
개인적으로 정리하기 위해서 쓴 글입니다
"지뢰코드"
😵
흐름 파악이 어렵고
도메인 맥락 표현이 안되어
동료에게 물어봐야 알 수 있는 코드
클린코드는 코드리뷰의 시간, 디버깅 시간도 단축시킴
"지뢰코드" 사례
새 파일에서 새로 코드를 짜는 경우는 깔끔함!
문제가 일어나는 경우는 기존 코드에서 기능을 추가하는 경우임
⬇︎ 의식의 흐름대로 기능을 추가했을 때 일어날 수 있는 반면사례 ⬇︎
- 하나의 목적인 코드가 흩뿌려져 있음
- 하나의 함수가 여러가지 일을 하고 있음
세부 구현을 모두 읽어야 함수 역할을 알 수 있게 됨 - 함수의 세부구현 단계가 제각각임
A, B는 동일한 이벤트 핸들링임. 근데 A는 기능 추가가 되어서 여러가지 일을 하고 있음. A,B 위계도 맞지 않고 A 함수의 이름이 함수 기능에 대한 설명이 아니게 되어버림
리팩토링
- 함수 세부 구현 단계 통일 > 핵심개념을 필요한 만큼 노출하기
기존 함수 이름을 위계에 맞춰서 통일함
- 하나의 목적인 코드는 뭉쳐두기 > 응집도 올리기
팝업 관련 코드를 하나로 뭉침
팝업을 여는 버튼과 팝업 코드가 동떨어져있었는데 이를 모아서 컴포넌트(이미지에서는 PopupTriggerButton)로 만듦
- 함수 하나에서 하나의 일만 하도록 쪼개기 > 단일책임!
원하는 로직을 빨리 찾을 수 있는 코드
가 클린코드임.
클린코드 != 짧은 코드
원하는 로직을 빨리 찾을 수 있으려면?
① 응집도 올리기 (뭉칠건 뭉치기)
하나의 목적을 가졌는데 여기저기 흩뿌려진 코드 > 커스텀훅을 사용해서 하나로 뭉쳐봄 (openPopup 함수만 호출하면 커스텀 팝업을 열 수 있게 됨) > 읽기 힘든 코드가 됨
무엇을 뭉치는지?
당장 몰라도 되는 디테일 > 숨기면 짧은 코드만 보고도 맥락 파악 가능
코드 파악에 필수적인 핵심 정보 > 모듈을 넘나들면서 정보 파악해야함
선언적 프로그래밍
핵심 데이터(무엇을 하는지)만 전달받고 세부 구현은 뭉쳐 숨겨두는 개발 스타일
무엇을 하는 함수인지 빠르게 이해가 가능함
"무엇"만 바꿔서 쉽게 재사용 가능함
명령형 프로그래밍
읽는데 오래걸리고 재사용하기 어려움
어떻게 행동해야할지 하나하나 알려주기
두 방법 모두 유동적으로 사용
② 단일책임 (하나의 일을하는 하나의 함수)
함수의 이름은 기능의 핵심을 담고 있어야 하고, 함수 하나는 하나의 기능을 해야함
한글 변수명으로 짓는 것도 괜찮은 방법임
③ 추상화 (핵심개념을 뽑자)
정보를 시각적으로, 핵심 개념만 남기기
구체적인 코드, 명령형 개발을 먼저 수행하고
점점 원하는 핵심 개념만 남기는 추상화 단계를 거칠 수 있음
상황에 따라 필요한 만큼 추상화하면 됨
추상화 수준이 섞여있으면 파악하기 어려움
추상화 단계를 비슷하게 정리 > 추상화 수준이 높은 것끼리, 낮은 것끼리 모은다
액션
- 구조 뜯기를 두려워하지 않기
- 큰 그림 보는 연습하기
기능 추가 자체는 클린해도, 전체적으로는 어지러울 수 있음 - 팀과 함께 명시적으로 이야기를 하는 시간이 필요함
- 문서로 적어보기
현재 코드가 (1) 향후 어떤 점에서 위험할 수 있는지, (2) 어떻게 개선할 수 있는지
파악하고 글로 써보는 경험 필요함
