클린코드 >> 명확한 이름, 중복 줄이기
1. 실무에서 클린 코드의 의의
안좋은 코드 : 흐름 파악이 어렵고, 도메인 맥락 표현이 안 되어, 동료에게 물어봐야 알 수 있는 코드
실무에서의 클린 코드의 의의 == 유지 보수 시간의 단축
2. 안일한 코드 추가의 함정
타당하고 자연스러운 코드 추가도 나쁜 코드일 수 있다
>> 하나의 목적인 코드가 흩뿌려져 있기 때문이다.
>> 하나의 함수가 여러가지의 일을 하고 있다.
>> 함수의 세부 구현 단계가 제각각이다.
리팩토링
>> 함수의 세부 구현 단계를 통일한다.
>> 하나의 목적인 코드는 뭉쳐두자.
>> 함수가 하나의 일만 하도록 쪼개자
클린코드 != 짧은 코드
== 원하는 로직을 빠르게 찾을 수 있는 코드
- 원하는 로직을 빠르게 찾는 방법은?
1. 응집도 : 하나의 목적을 가진 코드가 흩뿌려져 있으면 안된다.
2. 단일 책임 : 함수가 여러가지 일을 하면 안되고 하나의 일만 해야한다.
3. 추상화 : 함수의 세부 구현 단계가 통일되어야 한다.
- 응집도
무조건 한 군데로 뭉치는 것이 좋은 것은 아니다 >> 예를 들어 커스텀 훅으로 목적이 같은 코드를 묶어 그 커스텀 훅만 부른다면, 어떤 팝업을 띄우는지 바로 파악하기 힘들기에 오히려 코드 파악이 어려워진다.
--> 그렇다면 뭉쳐야 하는 것은 무엇일까 >> 당장 몰라도 되는 디테일이다.
즉 코드 파악에 필수적인 핵심 정보는 뭉치면 안된다.
읽기 좋게 응집하는 법
- 남겨야할 핵심 데이터와 숨겨도 될 세부구현 기분을 잘하기
- 핵심 데이터는 밖에서 전달 나머지는 뭉치자
>>> 이렇게 핵심 데이터만 전달받고 세부 구현은 뭉쳐 숨겨 두는 개발 스타일이 "선언적 프로그래밍"이다
선언적 프로그래밍을 사용한다면, 재사용에 용이하고 무엇을 하는 함수인지 빠르게 이해할 수 있다
뭉치지 않은 것은 "명령형 프로그래밍"이라고 한다. 세부 구현이 모두 노출되어 있어 커스텀이 쉽지만 바로 어떤 함수인지 파악하기 힘들고 재사용이 어렵다.
- 단일 책임
하나의 일을 하는 뚜렸한 이름의 함수를 만들자
함수의 세부 구현으로 생성된 기능이 함수명을 통해 바로 파악할 수 읶게 해야한다.
>> 한 가지 일만 하는 명확한 이름의 함수를 만들자
>> 한 가지 기능만 하는 리액트 컴포넌트를 만드는 방법도 있다.
조건이 많아진다면 한글도 유용하다.
- 추상화
로직에서 핵심개념 뽑아오기
프론트엔드 코드의 추상화 예시
컴포넌트
함수
상황에 따라 적절하게 추상화하면 된다.
추상화 수준이 섞여 있으면 코드 파악이 어렵다
>> 비슷한 수준의 추상화들로 변경
클린 코드를 하기 위한 액션 아이템
1. 담대하게 기존 코드 수정하기
2. 큰 그림 보는 연습하기 : 그 떄는 맞고 지금은 틀릴 수 있다.
3. 팀과 함께 공감대 형셩하기 : 명시적으로 이야기를 하는 시간이 필요
4. 문서로 적어보기 : 이 코드가 향후 어떤 점에서 위험할 수 있는지와 어떻게 개선할 수 있는 지 생각해보자
'기초부터 다시 > SLASH' 카테고리의 다른 글
SLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 (0) | 2024.02.04 |
---|---|
SLASH 21 - TDS로 UI 쌓기 (1) | 2024.01.28 |