AI 한테 배운 코드_01

최근 회사에 CodeRabbit 이라는 친구가 도입됐다.
설정이 거지같지만 나름 Rabbit 답게 귀여운 거 같은데,

여튼 코드 리뷰를 아주 빠삭하게 해주고 있고 거기에서 배울 것들이 있는 거 같아서 기록차 한개씩 남겨보려고한다.

1. 체크박스 클릭시의 로직

내가 평소에 흔하게 쓰던 로직

const value = Number(e.currentTarget.value);

if (e.currentTarget.checked) {
  setState((prev) => prev.concat(value));
  return;
}
setState((prev) => prev.filter((id) => id !== value));

 

AI가 추천한 로직

const studentId = Number(e.currentTarget.value);
if (Number.isNaN(studentId)) return;

setState((prev) => {
  const next = new Set(prev);
  if (e.currentTarget.checked) next.add(studentId);
  else next.delete(studentId);
  return Array.from(next);
});

 

사실 위 두 코드가 UI 적으로 보이는 동작은 동일하다.

 

체크박스가 있는 리스트에서 클릭했을때,
체크되어 있던거라면 체크 해제+선택 목록에서 제거

체크 안되어있던거라면 체크하고+선택 목록에 추가 

 

사실 너무 심플한거라 크게 신경쓰지 않고 관성처럼 써왔다.

 

그리고 난 여기서 인간과 AI의 차이를 조금 느꼈다.
'굳이 이렇게까지?'라고 생각하는 관점을 코드에 녹여놓을때

인간은 '충분해'라고 느끼더라도 AI는 '이렇게까지.'의 방식으로 코드를 대한다.

 

2. 체크박스 클릭시의 로직

내가 흔하게 쓰던 로직의 예시

const handleSubmit = async (formValue) => {
  const { isMobile } = formValue;
  if(isMobile){
    await updateMobileInfo();
    return;
  }
  await updateTabletInfo();
}

 

조건에 따라 API를 다르게 부르는 케이스에 보통 이렇게 쓰거나, 아래 if문을 하나 더 넣어서 감싸거나했는데,

오늘 코드 래빗이 이렇게 가이드하면 어떠냐고 제안을 줬다

 

AI가 추천한 로직

const handleSubmit = async (formValue) => {
  const { isMobile } = formValue;
  if(isMobile){
    await updateMobileInfo();
    return;
  }
  if(isMobile){
    await updateTabletInfo();
    return;
  }
  throw new Error('Invalid device type');
}

 

보자마자 이마를 탁쳤다.

의도한 방향이 아니니까 Error를 발생시켜서 좀 더 명확하게 잡겠다...라는 거. 너무 좋다.
서비스에서 분명하게 의도한 조건이 명확한데, 그거 외엔 Error를 명시적으로 던지는 거, 너무 좋은 거 같다.

난 왜 이걸 관성적으로 생각해내지 못 했을까.