클린 코드라는 말은 전부터 이곳 저곳에서 들어본 적이 있다. 공부해야지 하면서도 그동안 미뤄왔었는데, 최근에 어떤 계기로 코드를 깔끔하게 쓰는 것이 매우 중요하다는 것을 절감했다. 그래서 어제부터 오늘까지 클린 코드에 대해 구글링으로 조사했다. 이 글에서는 조사한 것들을 요약 정리하려고 한다. 내가 배운 것을 까먹지 않기 위해 복습하는 것이기도 하고, 다른 분들도 참고하면 좋을 것 같아서 블로그 글로 적는다.

클린 코드(Clean Code)란 무엇인가?(여러 의견의 공통점)

클린 코드라는 개념은 매우 주관적인 개념이다. 실제로 누군가 스택오버플로우에 클린 코드가 무엇이냐고 질문을 올렸다가 주관적인 개념이라고 답변이 막힌 사례를 찾았을 정도이다.

사람마다 깔끔한 코드의 정의와 조건은 다를 수 있다. 하지만 구글링을 해 본 결과, 공통적으로 언급하는 부분들을 발견할 수 있었다.

읽기 쉽다, 간결하다
수정하기 쉽다
테스트를 거친 코드이다.
미래의 나를 포함하여 나중에 읽을 사람을 고려하며 쓴 코드이다.
완성된 클린 코드는 없다. 시간이 흐름에 따라 언제나 개선할 점을 찾을 수 있다. 끊임없이 리팩토링 해야 한다.

딱히 이해가 어려운 부분은 없는 것 같다. 읽으면서 "응, 그렇지"라고 수긍할 수 있는 것들이다. 클린 코드의 위와 같은 특징들을 읽고 나서 들었던 의문은 구체적으로 어떻게 적용할 수 있는가였다.

클린 코드를 쓰려면 어떤 점을 주의해야 하는가?

그래서 좀 더 구글링을 해 보았다. 그리고 아래와 같은 조언들을 찾아낼 수 있었다.

일반 변수는 명사형, 함수는 동사형 이름을 붙이자.

→ 의도하는 바의 핵심 의미를 전달 할 수 있는 단어를 고르자
긴 코드는 함수와 객체로 쪼개고, 긴 함수는 기능별로 나눠서 작은 함수들로 쪼개자
함수에 전달되는 매개변수는 되도록 3개를 넘지 말고, 넘을 시에는 같은 성질의 것들을 객체로 묶어 전달하자
데이터는 데이터끼리, 함수는 함수끼리 묶자. 둘을 섞어서 사용하지 말자
다른 파일로 분리할 수 있는 것들은 최대한 분리하자

이 조언들은 좀 더 구체적이다. 클린 코드란 어떤 코드인지, 어떻게 써야 하는 것인지에 대한 이해를 돕고 있다. 개인적으로는 3번과 5번의 조언이 와닿았다. 내가 제대로 실천하고 있지 못한 항목들이었기 때문인 것 같다.

클린 코드에 대해 공부하면서 지금 내가 진행하고 있는 프로젝트를 클린 코드로 리팩토링하고 싶다는 생각이 들었다. 나는 현재 React와 Node.js를 이용해서 프로젝트를 진행하고 있다. 위 조언들을 보고, 특히 React 부분이 많이 지저분하다는 생각이 들었다. 그래서 React에서는 구체적으로 어떻게 위 조언들을 적용할 수 있는지 찾아 보았다.

React에서는 구체적으로 어떻게 적용할 수 있는가?

Component 파일은 되도록이면 최대한 짧게 유지하라
props(Component에 전달하는 인자들)의 개수는 함수의 매개변수처럼 적게 유지하라
useEffect에서 코드를 줄줄이 쓰지 말고, 함수로 뺀 다음, useEffect 안에서 그 함수들을 호출하자
재사용 가능한 Component와 page view를 폴더로 나누자(나의 의견)
같은 레벨과 카테고리에 있는 것들끼리 이름으로 구분할 수 있도록 prefix(접두사)를 잘 사용하자
함수 안에 함수를 쓸 때, state를 공유할 필요가 없는 것들은 함수 밖으로 빼자
일관성있게 import, export 구문의 순서규칙을 만들고, 네이밍 규칙을 세워서 지키자
비즈니스 로직은 파일로 따로 빼자

→ 비즈니스 로직이란 유저의 선택을 처리하는 로직을 말한다. 개인적으로 처음에는 이해하기 어려운 개념이었다. 더 찾아보고 나서 조금 더 명확하게 이해할 수 있었다. UI 파트와 데이터 관리 파트(Redux 같은)로부터 분리된 개념이었다.
비즈니스 로직에서는 특정 라이브러리나 패키지에 대한 의존성을 최대한 줄이자.