[코드품질] 무작정 짧다고 깨끗한 코드가 아니다.
좋은 코드 품질을 유지하면서 개발을 하는것이 절대 쉬운 일이 아니라는 것을 느끼고 있는 요즘이다.
코드의 중복을 피하고, 추상화 하면서 코드를 짜는 것을 추구해왔지만, 무작정 짧다고 좋은 코드가 아니라는 것도 깨닫고 있다.
물론 코드의 중복을 피하고 적절한 수준의 추상화를 하는것은 중요한 일이다 React에서 예를 들면 반복되는 Hooks은 custom hooks 로 따로 만들어 관리하고, 컴포넌트를 쪼개는 등의 작업을 하는것은 당연한 것이다.
하지만 중요한것은 '적절한 수준'의 추상화 일것이다.
이게 꽤나 모호한 개념인데 그래도 어느정도의 룰은 있으니 한번 알아보도록하자
숨겨야하는 것 : 당장 몰라도 되는 디테일들 (코드의 의도 즉, 해당 훅을 사용하는 목적을 파악하기 위해 필요하지 않은 것)
숨기면 안되는 것 : 코드의 의미를 파악에 필수적인 핵심정보 - 이를 분리하면 여러 모듈을 넘나들며 파악해야함
좋지 않은 코드
const 쿠키굽기 =()=>{
밀가루 준비
계란준비
쿠키커터
.....
밀가루를 볼에 넣기
밀가루에 계란을 넣기
섞기...
....중략
}쿠키를 만드는 함수를 만든다고 생각을 해보자 먼저 위 함수의 문제점이 무엇일까? 먼저 쿠키를 굽는 과정을 장황하게 풀어서 쓴것을 볼 수 있다. 어떻게 보면 좋은 함수처럼 생긴 것 같기도하다. 그냥 쿠키굽기 함수를 호출하기만 하면 쿠키가 띵 하고 나오게 되니까 간편해 보인다.
위의 코드는 전형적인 절차지향적 코드이다. 절차지향적 코드작성이 무조건 틀리고, 객체지향형 코드가 무조건 옳다 라고 할 수는 없다. 각각의 방식을 취했을 때 장단점이 있다.
하지만 이렇게 장황하게 작성된 코드에는 몇가지 문제가 있다. 먼저, 쿠키의 레시피가 바뀌거나, 굽는 시간, 모양이 바뀔때 유연하게 대응하기 힘들다. 즉 , 유지보수가 어려운 코드인것이다
조금 더 나은코드 (모듈화)
const 쿠키굽기 = ()=>{
준비하기()
섞기()
굽기()
}
const 준비하기=()=>{
밀가루,계란,소금을 준비한다
}
cosnt 섞기=()=>{
밀가루 계란 소금을 섞는다
}
cosnt 굽기=()=>{
오븐의 온도를 130도로 맞추고
굽는다
}위와 같이 각 과정별로 코드를 나눠 놓는다면 훨씬 보기 쉽고, 쿠키를 굽는 함수가 어떤일을 할 수 있는지 파악하기 쉬워진다. 이것을 모듈화 라고 하는데, 적당한 수준의 모듈화를 통해 각각의 과정을 따로따로 관리(유지보수) 할 수 있다는 장점이 있다. 하지만 여전히 문제가 있다. 준비하기, 섞기, 굽기가 무얼 준비하는지 전혀 알 수 없고 아직도 재료나 온도, 섞는 강도 등을 설정할 수 없다.
이러한 함수를 짜는건 어디까지나 이 함수를 직접 만들어서 머리속에 함수에 동작이 캐시되어있는 사람 입장에서만 이해가 가능할 것이다.
조금 더더 나은 코드 (확장성을 고려한 적절한 추상화)
const 쿠키만들기 = (재료,중,130도)=>{
준비하기(재료)
섞기(중,재료)
굽기(130도,재료)
}
const 준비하기=(a)=>{
재료a를 준비함
}
const 섞기=(강도,재료)=>{
(강도)의 세기로 (재료)를 섞음
}
const 굽기=(온도,재료)=>{
(온도)로 (재료)를 굽고 return
}코드의 위와 같은 형태로 꼭 필요하고, 때에 따라 다르게 사용되어야 할 것들을 변수로 지정하고, 필요한 곳에 맞춰 사용할 수 있게 코드를 작성하게 된다면, 여러 사람들이 사용할 수 있으며 확장성 까지 고려한 코드를 작성할 수 있다.
본 포스팅이 완벽한 코드 작성법을 설명하고 있다고 생각하지는 않는다. 다만
재료와 온도, 강도등을 조절해 가며 다양한 쿠키를 만들어 낼 수 있는 쿠키만들기 함수를 통해 어느정도 이해를 했길 바란다.