클린코드에 대한 좋은 영상이 있어서 정리 + 공유하면 좋을 것 같아 영상 내용을 요약해보려 합니다 :)
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
1. 실무에서 클린 코드의 의의
좋지 않은 코드는 무엇일까요?
- 흐름 파악이 어렵고
- 도메인 맥락 표현이 안되어
- 동료에게 물어봐야 알 수 있는 코드
이런 코드는 개발할 때 병목이 되고, 유지보수할 때 시간이 오래걸리며 심하면 기능 추가까지 불가능한 상태가 됩니다. 성능도 좋지 않은 경우가 많아서 유저 입장에서도 쾌적하지 못하겠죠?
실무에서 클린 코드의 의의를 생각해보면 유지보수 시간의 단축입니다. 동료 혹은 과거의 내가 짠 코드를 빠르게 이해할 수 있다면, 당연히 유지보수할 때 드는 개발 시간이 짧아지겠죠?
실무에서는 기존 코드에 새로운 기능을 추가하는 작업이 대부분이기 때문에, 효율성을 위해 클린 코드는 중요한 부분을 차지합니다.
2. 안일한 코드 추가의 함정
만약 코드를 안일하게 짠다면 어떤 함정에 빠질 수 있을까요?
- 하나의 목적인 코드가 흩뿌려져 있다.
- 하나의 함수가 여러가지 일을 하고 있다.
- 함수의 세부 구현 단계가 제각각이다.
3. 로직을 빠르게 찾을 수 있는 코드 === Clean Code!
명심해야 할 것은 클린 코드는 짧은 코드가 아닌 원하는 로직을 빠르게 찾을 수 있는 코드라는 거에요.
원하는 로직을 빠르게 찾으려면 어떻게 해야할까요?
- 하나의 목적인 코드가 흩뿌려져 있을 때, 응집도를 높여서 뭉치자
- 함수가 여러가지 일을 하고 있을 때, 단일책임 원칙에 의거하여 쪼개자
- 함수의 세부구현 단계가 제각각일 때, 추상화 단계를 조정해서 핵심 개념을 필요한 만큼만 노출하자
하나씩 살펴보도록 합시다.
1. 응집도
위 코드를 보면 팝업을 조작하는 코드가 노란색으로 칠한 세 부분에 군데군데 떨어져 있는 걸 볼 수 있어요. 딱봐도 파악도 한번에 안되고 버그 발생 위험도 높은 코드입니다.
리팩토링을 해볼까요?
커스텀 훅을 사용해서 한 군데로 뭉쳤습니다. 이제 openPopup 함수만 호출하면 커스텀 팝업을 열 수 있게 되죠.
하지만, 오히려 더 읽기 어려운 코드가 되었습니다. 어떤 내용의 팝업을 띄우는지, 팝업에서 버튼을 눌렀을 때 어떤 액션을 하는지와 같은 핵심 개념이 모두 훅 속에 가려져서 오히려 파악이 어렵게 된거죠.
그럼 어떻게 무엇을 뭉쳐야 할까요?
당장 몰라도 되는 디테일! 입니다.
그럼 반면에 무엇을 뭉치면 안될까요?
코드 파악에 필수적인 핵심 정보 입니다. 이를 분리하면 여러 모듈을 넘나들며 흐름을 따라가야 하는 참사가 일어나기 때문이죠.
따라서, 뭉쳐서 짧은 코드로 만든다고 클린 코드라고 할 수 없는 것입니다. 찾고 싶은 코드를 빠르게 찾을 수 있어야 합니다!
이와 같이 openPopup이라는 커스텀 훅 안에 다 숨겨놓는 것이 아닌 세부 구현만 숨겨 놓고, 핵심 데이터인 팝업 제목과 내용, 액션은 바깥에서 넘기는거죠. 이렇게 구현하면 세부 구현을 읽지 않고도 어떤 팝업인지 파악할 수 있게 됩니다.
이것을 '선언전 프로그래밍'이라고 합니다.
이는 '무엇'을 하는 함수인지 빠르게 이해가 가능하다는 것
세부 구현은 안쪽에 뭉쳐두어서 신경 쓸 필요가 없다는 것
'무엇'만 바꿔서 쉽게 재사용할 수 있다는 것
위와 같이 선언형으로 뭉쳐두지 않고, 하나하나 세부구현을 작성한 방식은
'명령형 프로그래밍'이라고 합니다.
'선언전 프로그래밍'도 내부를 까보면 '명령형 프로그래밍'으로 작성되어 있죠.
'명령형 프로그래밍'은 세부구현이 모두 노출되어 있어서 이를 커스텀하기 쉽지만, 읽는데 오래 걸리고 재사용하기 어렵다는 단점이 있습니다. 그렇다고 무조건 '선언전 프로그래밍'이 좋은 건 아니랍니다! 두 방법 모두 유동적으로 사용하는 것이 좋다고 하네요. 예를 들어 리액트에서 prop을 세부적으로 넘겨야 하는 경우에는 명령형 설계도 필요하겠죠.
2. 단일 책임
위 코드를 보면, 함수 이름은 질문제출인데 '약관체크', '질문제출'이 섞여있습니다.
한가지 일만 하는 명확한 이름의 함수가 되도록 리팩토링한 결과입니다.
훨씬 파악하기가 쉬워지지 않았나요?
3. 추상화
로직에서 핵심 개념을 뽑아내는 것! 입니다.
얼마나 추상화 할 것인가? 상황에 따라 필요한 만큼 추상화 하면 됩니다.
하지만, 주의해야 할 점이 있습니다.
위 코드와 같이 추상화 수준이 섞여 있다면 코드 파악이 어렵다는 점입니다.
따라서, 추상화 단계를 비슷하게 정리해주어 쉽게 파악할 수 있도록 해줘야 합니다.
클린 코드는 모호한 개념이기 때문에 글로 정리해보는 시간이 필요했는데, 해당 영상에서 클린코드에 대한 개념이 아주 잘 나와있어서 깔끔하게 정리해보며 다시한 번 짚고 넘어갈 수 있었어요. 당장은 사소한 것일지라도 나중을 위해서 클린코드를 습관화하는 것이 좋을 듯 합니다!
