SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code

클린코드 >> 명확한 이름, 중복 줄이기

 

1. 실무에서 클린 코드의 의의

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

 

실무에서의 클린 코드의 의의 == 유지 보수 시간의 단축

 

2. 안일한 코드 추가의 함정

타당하고 자연스러운 코드 추가도 나쁜 코드일 수 있다 

>> 하나의 목적인 코드가 흩뿌려져 있기 때문이다.

>> 하나의 함수가 여러가지의 일을 하고 있다.

>> 함수의 세부 구현 단계가 제각각이다.

 

리팩토링 

>> 함수의 세부 구현 단계를 통일한다. 

>> 하나의 목적인 코드는 뭉쳐두자.

>> 함수가 하나의 일만 하도록 쪼개자

 

클린코드 != 짧은 코드

== 원하는 로직을 빠르게 찾을 수 있는 코드

 

- 원하는 로직을 빠르게 찾는 방법은? 

1. 응집도 : 하나의 목적을 가진 코드가 흩뿌려져 있으면 안된다.

2. 단일 책임 : 함수가 여러가지 일을 하면 안되고 하나의 일만 해야한다.

3. 추상화 : 함수의 세부 구현 단계가 통일되어야 한다.

 

 - 응집도

무조건 한 군데로 뭉치는 것이 좋은 것은 아니다 >> 예를 들어 커스텀 훅으로 목적이 같은 코드를 묶어 그 커스텀 훅만 부른다면, 어떤 팝업을 띄우는지 바로 파악하기 힘들기에 오히려 코드 파악이 어려워진다.

 

--> 그렇다면 뭉쳐야 하는 것은 무엇일까 >> 당장 몰라도 되는 디테일이다. 

즉 코드 파악에 필수적인 핵심 정보는 뭉치면 안된다.

 

읽기 좋게 응집하는 법

- 남겨야할 핵심 데이터와 숨겨도 될 세부구현 기분을 잘하기

- 핵심 데이터는 밖에서 전달 나머지는 뭉치자

>>> 이렇게 핵심 데이터만 전달받고 세부 구현은 뭉쳐 숨겨 두는 개발 스타일이 "선언적 프로그래밍"이다

선언적 프로그래밍을 사용한다면, 재사용에 용이하고 무엇을 하는 함수인지 빠르게 이해할 수 있다

 

뭉치지 않은 것은 "명령형 프로그래밍"이라고 한다. 세부 구현이 모두 노출되어 있어 커스텀이 쉽지만 바로 어떤 함수인지 파악하기 힘들고 재사용이 어렵다.

 

- 단일 책임

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

 

함수의 세부 구현으로 생성된 기능이 함수명을 통해 바로 파악할 수 읶게 해야한다.

>> 한 가지 일만 하는 명확한 이름의 함수를 만들자

>> 한 가지 기능만 하는 리액트 컴포넌트를 만드는 방법도 있다.

 

조건이 많아진다면 한글도 유용하다.

 

 - 추상화

 

로직에서 핵심개념 뽑아오기

 

프론트엔드 코드의 추상화 예시

컴포넌트

 

함수

 

 

상황에 따라 적절하게 추상화하면 된다.

 

추상화 수준이 섞여 있으면 코드 파악이 어렵다

 

>> 비슷한 수준의 추상화들로 변경

 

 

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

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

2. 큰 그림 보는 연습하기 : 그 떄는 맞고 지금은 틀릴 수 있다.

3. 팀과 함께 공감대 형셩하기 : 명시적으로 이야기를 하는 시간이 필요

4. 문서로 적어보기 : 이 코드가 향후 어떤 점에서 위험할 수 있는지와 어떻게 개선할 수 있는 지 생각해보자