프론트엔드 실무 클린코드 || 클린코드 != 짧은 코드

guddls ju·2022년 11월 9일
0

클린코드라고 하면 '명확한 이름', '중복 줄이기' 를 말하곤 하는데 실무에서는 이 외에도 조금 더 섬세하게 코드를 정리하는 스킬이 필요하다.

🤷‍♀️ 실무에서 클린코드가 의미있는 이유?

실무에서 한번 쯤 들어본다는 "그 코드는 안건드시는게 좋을거에요. 일단 제가 만질게요;;" 라는 말을 풀어보면

흐름 파악이 어렵고
도메인 맥락 표현이 안 되어
동료에게 물어봐야 알 수 있는 코드

이런 코드는 개발할 때 병목이 되고 유지보수 할 때 시간이 오래걸리며, 심하면 기능추가가 불가능한 상태가 됩니다. 또 성능도 안좋은 경우가 많아 유저 입장에서도 불쾌할 수 있습니다.

따라서 실무에서 클린코드의 의의는 유지보수 시간 단축 이라고 할 수 있다.

[코드 파악, 디버깅, 코드리뷰] 시간 단축

시간 = 자원 = 돈 이기때문에 클린코드가 실무에서는 필수적이라고 할 수 있습니다.


🔨⌨ 클린코드 작성 방법

  1. 함수 세부 구현 단계 통일
  2. 하나의 목적의 코드 뭉쳐두기
  3. 함수가 한 가지 일만 하도록 쪼개기

이렇게 리펙토링을 진행한다면 코드가 오히려 길어질 수 있다.
하지만 짧은코드 != 클린코드 이기 때문에 코드가 길어지는것에 거부감을 느끼지 않아도 된다.

클린코드는 원하는 로직을 빠르게 찾을 수 있어야 합니다. 그러기 위해서는

하나의 목적을 가진 코드가 흩뿌려져 있진 않은지 - 응집도
함수가 여러 가지 일을 하고 있진 않은지 - 단일책임
함수의 세부구현 단계가 제각각이진 않은지 - 추상화

위 3가지를 잘 체크해야 합니다.

👆 응집도

먼저 응집도는 '같은 목적인 코드는 뭉쳐두기" 라는 개념으로 접근해야 합니다.
그렇다고 무작정 커스텀훅 등을 사용해서 뭉쳐벼린다면 오히려 읽기 힘든 코드가 되어 있을 수 있습니다.

그렇다면 무엇을 뭉쳐야 할까?

뭉치면 쾌적
당장 몰라도 되는 디테일 - 이를 숨겨둔다면 짧은 코드만 보고 코드의 목적을 빠르게 파악할 수 있다.

뭉치면 답답
코드 파악에 필수적인 정보 - 여러 모듈을 넘나들며 흐름을 따라가야 하는 참사가 일어날 수 있다.

클린코드 != 짧은코드 이므로 찾고 싶은 로직을 빠르게 찾을 수 있는 코드가 되도록 신경써서 응집해야 한다.


✌ 단일책임

하나의 일을 하는 뚜렷한 이름의 함수를 만들자

check point
1. 중요 포인트가 모두 담겨있는가
2. 한가지 일만 하는, 명확안 이름의 함수
3. 한가지 일만 하는, 기능성 컴포넌트


👌 추상화

로직에서 핵심개념을 뽑아내자
ex) 지하철 노선도 => 복잡한 지도에서 지하철 노선만 색깔이 있는 라인으로 표시

이를 더 간단하게 추상화 하면, 역이름과 호선만 남기고 모두 숨기기

프론트엔드 코드의 추상화 : 함수
구체적인 코드를 컴포넌트로 추상화 할 수 있다.

tip!
한 레벨의 코드안에서 추상화의 수준을 맞춰주기
추상화 수준이 다를 경우 파악하기 헷갈릴 수 있다.


🎁 클린코드를 작성하기 위한 액션아이템

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

두려워하지 말고 기존 코드를 씹고 뜯고 맛보고 즐겨보자.

2. 큰그림 보는 연습

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

3. 팀과함께 공감대 형성하기

코드에 정답은 없다.
명시적으로 이야기하는 시간이 필요하다.

4. 문서로 적어보기

클린코드란 모호한 개념이다. 글로 적어야 명확해 진다.
ex) 향후 어떤점에서 위험할 수 있는지, 어떻게 개선할 수 있는지...


토스 유튜브에서 프론트엔드 실무에서 적용할 수 있는 클린코드에 대한 영상을보고 정리해 보았다.
참고 - https://www.youtube.com/watch?v=edWbHp_k_9Y&list=WL&index=49

profile
효율에 미친자

0개의 댓글