리팩터링 2판 - 06. 코드에서 나는 악취 (코드스멜) 2탄

오늘도 지난 시간에 이어서 다시 코드스멜 2탄을 하려해요!

오늘 내용에서 되게 많은 내용을 제거시켰는데, 대부분이 클래스를 활용한 방법이여서 뺏어요!

제가 javascript에서 클래스를 자주 쓰지 않기도 하고, 실제 적용을 어떤식으로 나타낼지 난감하기도해서 그랬으니 이해해주세요!

 

그럼 이제 시작해볼까요!!

 

긴 매개변수 목록

함수의 매개변수가 많아지면 그 자체로 이해하기 어려워져요!

우리는 최대 2개로 매개변수를 최소화하려고 해요. (어쩔수없으면 3개…?!?)

 

또한 매개변수 중 하나로 플래그 형태를 자주 쓰지않나요? (주로 true, false를 통해 나누는)

저는 아래처럼 함수안에서 타입별로 무언가를 나누는 함수를 작성했었어요!

const getDurationTimeBy = (distance:number, isVehicle:boolean) => {
	if(isVehicle){
	...
	}else{
	...	
	}
}

const getDurationTimeBy = (distance:number, standard:"도보"|"차량") => {
	if(standard === "도보"){
	...
	}else if(standard === "차량"){
	...	
	}
}

getDurationTimeBy(distance, "차량")
getDurationTimeBy(distance, true)

 

위의 두 함수를 호출한 코드를 보면 true 처럼 플래그 형식의 함수보다 "차량" 이렇게 명시되어진게 더 보기 좋다고 생각했어요!

그래서 앞으로 어떠한 함수를 선언할 때, 굳이 플래그 형식의 함수를 쓰지 않으려고 생각하고 있어요! (읽는 입장에서 직관적으로 해석이 되지 않기 때문에!)

 

const getDurationTimeByVehicle = (distance:number) => {
	...
}
const getDurationTimeByStep = (distance:number) => {
	...
}

getDurationTimeByVehicle(distance) // getDurationTimeBy(distance, "차량")
getDurationTimeByStep(distance) // getDurationTimeBy(distance, "도보")

자 이번엔 저자가 생각하는 방식으로 다시 한 번 구현을 해봤어요.

 

플래그 형식의 매개변수를 받지않고, 함수로 나누어 좀 더 어떤 함수인지를 나타낼 수 있다고 하더라구요.

사실 아직까진 함수안에서 if문 처리를 위한 매개변수가 과연 좋은것일까 라는 관점에서 바라볼 때, true false로 처리하는 것은 직관적이지 않아보여서 별로지만 standard로 "차량" | "도보"는 괜찮다고 생각을 하긴해요...!

그럼에도 저자가 사용하는 나눠서 함수를 작성하는 것도 사용해보며 더 좋다고 생각하는 방향을 경험해보며 바꿔가려고 해요!

 

데이터 뭉치

데이터는 끼리끼리 노는걸 좋아해요

생각보다 특정한 부분에 몰려다니는걸 확인할 수 있을거에요! 그러한 부분이 있을 땐, 데이터를 뭉쳐서 매개변수의 값을 줄이고 호출 코드를 간결하게 만들어봐요!

const Page = ({
...,
시세,
지하철,
마트,
병원,
}) => {

	return (
		...
		<공공데이터
			시세={시세}
			지하철={지하철}
			마트={마트}
			병원={병원}	
		/>
		...
	)
}

저는 최근에 공공데이터를 처리하는 컴포넌트로 데이터를 넘기는 위와 같은 함수를 아래처럼 데이터뭉치로 간결한 코드가 되도록 리팩터링을 진행했어요!

const Page = ({
...,
공공데이터뭉치,
}) => {

	return (
		...
		<공공데이터
			{...공공데이터뭉치}
		/>
		...
	)	
}

이렇게 데이터뭉치를 만들면서 더 깔끔해진게 느껴지시나요!

 

반복문

for문의 사용보다 map 같은 파이프라인 함수로 작성하여 가독성있게 코드를 작성해요!

 

주석

저자가 주석을 가장 마지막에 소개하는 이유는 무엇일까요?

주석이 많으면 앞에서 소개한 온갖 악취를 풍기는 코드가 나오기 쉽다고 말하네요…ㅎㅎ

주석으로 냄새나는 코드를 대체할 생각말고, 먼저 주석이 필요없는 코드로 리팩터링을 해보는게 어떨까요? 그럴수록 코드의 질이 올라갈거라고 생각해요!