클린코드라고 하면 '명확한 이름', '중복 줄이기' 를 말하곤 하는데 실무에서는 이 외에도 조금 더 섬세하게 코드를 정리하는 스킬이 필요하다.
실무에서 한번 쯤 들어본다는 "그 코드는 안건드시는게 좋을거에요. 일단 제가 만질게요;;" 라는 말을 풀어보면
흐름 파악이 어렵고
도메인 맥락 표현이 안 되어
동료에게 물어봐야 알 수 있는 코드
이런 코드는 개발할 때 병목이 되고 유지보수 할 때 시간이 오래걸리며, 심하면 기능추가가 불가능한 상태가 됩니다. 또 성능도 안좋은 경우가 많아 유저 입장에서도 불쾌할 수 있습니다.
따라서 실무에서 클린코드의 의의는 유지보수 시간 단축 이라고 할 수 있다.
[코드 파악, 디버깅, 코드리뷰] 시간 단축
시간 = 자원 = 돈 이기때문에 클린코드가 실무에서는 필수적이라고 할 수 있습니다.
- 함수 세부 구현 단계 통일
- 하나의 목적의 코드 뭉쳐두기
- 함수가 한 가지 일만 하도록 쪼개기
이렇게 리펙토링을 진행한다면 코드가 오히려 길어질 수 있다.
하지만 짧은코드 != 클린코드 이기 때문에 코드가 길어지는것에 거부감을 느끼지 않아도 된다.
클린코드는 원하는 로직을 빠르게 찾을 수 있어야 합니다. 그러기 위해서는
하나의 목적을 가진 코드가 흩뿌려져 있진 않은지 - 응집도
함수가 여러 가지 일을 하고 있진 않은지 - 단일책임
함수의 세부구현 단계가 제각각이진 않은지 - 추상화
위 3가지를 잘 체크해야 합니다.
먼저 응집도는 '같은 목적인 코드는 뭉쳐두기" 라는 개념으로 접근해야 합니다.
그렇다고 무작정 커스텀훅 등을 사용해서 뭉쳐벼린다면 오히려 읽기 힘든 코드가 되어 있을 수 있습니다.
그렇다면 무엇을 뭉쳐야 할까?
뭉치면 쾌적
당장 몰라도 되는 디테일 - 이를 숨겨둔다면 짧은 코드만 보고 코드의 목적을 빠르게 파악할 수 있다.
뭉치면 답답
코드 파악에 필수적인 정보 - 여러 모듈을 넘나들며 흐름을 따라가야 하는 참사가 일어날 수 있다.
클린코드 != 짧은코드 이므로 찾고 싶은 로직을 빠르게 찾을 수 있는 코드가 되도록 신경써서 응집해야 한다.
하나의 일을 하는 뚜렷한 이름의 함수를 만들자
check point
1. 중요 포인트가 모두 담겨있는가
2. 한가지 일만 하는, 명확안 이름의 함수
3. 한가지 일만 하는, 기능성 컴포넌트
로직에서 핵심개념을 뽑아내자
ex) 지하철 노선도 => 복잡한 지도에서 지하철 노선만 색깔이 있는 라인으로 표시
이를 더 간단하게 추상화 하면, 역이름과 호선만 남기고 모두 숨기기
프론트엔드 코드의 추상화 : 함수
구체적인 코드를 컴포넌트로 추상화 할 수 있다.
tip!
한 레벨의 코드안에서 추상화의 수준을 맞춰주기
추상화 수준이 다를 경우 파악하기 헷갈릴 수 있다.
두려워하지 말고 기존 코드를 씹고 뜯고 맛보고 즐겨보자.
그때는 맞고 지금은 틀릴 수 있다.
기능 추가 자체는 클린해도, 전체적으로는 어지러운 코드일 수 있다.
코드에 정답은 없다.
명시적으로 이야기하는 시간이 필요하다.
클린코드란 모호한 개념이다. 글로 적어야 명확해 진다.
ex) 향후 어떤점에서 위험할 수 있는지, 어떻게 개선할 수 있는지...
토스 유튜브에서 프론트엔드 실무에서 적용할 수 있는 클린코드에 대한 영상을보고 정리해 보았다.
참고 - https://www.youtube.com/watch?v=edWbHp_k_9Y&list=WL&index=49