클린코드와 리팩토링

리액트로 파이널 프로젝트를 진행하면서 도전보다는 완성을 중점으로 생각하였고, 생각보다 많은 CRUD의 범벅이 되어있었다.

비슷한 로직과 구정이 많아지면서 멘토님과 상의해 리팩토링을 계속해서 진행하는 방향으로 프로젝트를 진행하였고, 리팩토링을 하는 과정에서 내가 작성하는 코드에 대한 의문들이 많이 생겼다..

 

클린 코드를 작성하는 것은 유지보수성과 생산성에 영향을 끼치게 된다.

단순히 짧거나 추상화가 잔뜩 되었다고 좋은 코드가 되는 것도 아니다.

 

아래 영상을 참고하여 클린 코드에 대한 정리를 조금 해보려고 한다.

참고 영상 : https://youtu.be/alb3OZfsqjM?si=H20glkWfvud3CN9Z

 

---

 

완벽한 코드는 아니더라도, 이것만은 지켜보자!

 

1. 무분별한 약어 사용을 피하자
   • 코드를 줄여야 하는 곳은 변수명이 아니다.
   • 짧은 코드가 좋다는 것은 로직을 개선해서 길이를 줄이거나, 함수로 추상화해서 따로 관리할 때 하는 것!
2. 포괄적인 명칭과 유사명칭 사용을 사용을 멈추자
   • value, data 등의 포괄적인 명칭은 유추할 수 있는 값이 너무 많다.
   • 또 data와 date등 유사한 변수가 많아지게 되면 구분이 어려워 오타가 치명적이게 되며, 유지보수에 악영향을 끼치게 된다.
3. 변수명 앞에 언더스코어(_)를 사용해보자
   • 언더스코어를 이용하여 책임, 사용처별로 구분하자.
   • 보통 외부에서 직접 접근하지 말아야 할 내부 변수, 프라이빗 변수를 나타내기 위하여 사용한다.
4. 상수를 이용하자
   • 프로그래밍에서는 자주 쓰이지만, 일상생활에서 쓰지 않는 숫자를 일상에서 많이 사용하는 상수 형태로 선언해 놓으면 읽기도 쓰기도 쉬워집니다!
   • 팀원들과 합의가 되었을 때 한글로 상수 선언을 하면 가독성이 더 좋아진다. 한번 시도해봐도 좋을 것 같다!
   • (예 : 하루를 초로 나타낸 수 86400를 DAY 혹은 초라는 상수로 선언해두는 등)
5. 함수명은 역할 + 다루는 정보로 이름을 지어주자
   
   • 자주 사용하는 접두사들
     외워서 사용한다기 보다 사용하면서 익숙해지기 위한 새싹 개발자를 위한 참고 목록입니다.
     -----------------------------------
     get : 특정 값을 가져옴
     set : 값을 설정하거나 업데이트
     create : 새로운 항목이나 객체를 생성
     update : 기존 항목이나 객체를 업데이트
     delete : 특정 항목이나 객체를 삭제
     fetch : 원격 서버에서 데이터를 가져옴
     validate : 데이터의 유효성을 검사
     serialize : 데이터를 직렬화하여 JSON 형식을 변환
     deserialize : JSON 형식의 데이터를 역직렬화하여 객체로 변환
     initialize : 초기화
     render : 데이터를 화면에 표시하거나 렌더링
     load : 데이터를 로드하거나 가져옴
     save : 데이터를 저장하거나 저장소에 저장함
     format : 데이터의 형식을 지정하거나 포맷함
     parse : 문자열 등을 파싱하여 데이터로 변환
     calculate : 계산
     encrypt : 데이터 암호화
     decrypt : 데이터 복호화
     send : 데이터 전송
     receive : 데이터 수신
6.  단일 책임 원칙을 지키자
   • 각각의 함수는 한가지 역할과 책임만을 담당하도록 작성하자.
   • 재사용성 또한 높아지게 된다.
7. 부작용, 사이드 이펙트가 생기는 함수 작성을 피하자.
   • 원본 배열 자체를 수정하면 변경된 변수를 참조하는 모든 함수와 컴포넌트 역시 영향을 받게 되어 원치 않는 동작이 발생할 수 있다.
   • 복제본 배열을 만든 후 수정하여 리턴하는 식으로 함수를 작성하는 것이 이상적!
8. 예측가능한 결과를 가지도록 작성하자.
   • 코딩에는 결과값을 확인하지 않더라도 예상할 수 있는 것들이 있는데 isValue 등이 그렇다.
   • boolean 값을 반환할거라고 예상 되는 데 그렇지 않은 경우 조금... 좋지 않은 코드가 될 것 같다.

 

 

이 외에 멘토님과 코드 리뷰를 받으며 추가적으로 받았던 코멘트들이 있다.

1. import 문의 순서와 정리 / 라이브러리와 작성한 코드를 구분(그룹핑) 해주기
2. 변수 선언과 컴포넌트 등 그룹핑을 하는 부분들은 띄어쓰기로 가독성 높혀주기.
3. const와 let에 대해 조금 더 고민해보기
4. 컴포넌트 명을 정할 때 최대한 구체적인 단어로 묘사하는 것이 좋다.  => 가독성 증가
5. styled component 사용 시 변수명에 styled라는 말이 들어가면 안됨.
   변수명은 구체적이지만 간결 해야한다.
6. 소스 코드만 보고도 웹 페이지의 전체 레이아웃이 상상이 되도록 만들어 주는 걸 고민해보기

 

또 더 좋은 코드 작성을 위하여 강한 체력이 필수라는 생각도 하게 되었다..

지치면 자꾸만 못난 코드로 돌아가려는 나의 모습을 보며 오늘도 반성하는 하루...

체력도 코딩도 쑥쑥 늘려서 진짜x100 지치지 않는 개발자 김만두가 되자!