개발자의 인지적 부담을 줄이는 코드 다듬기

영리한 코드의 함정

많은 개발자들은 면접 문제나 프로그래밍 퀴즈에서 영리한 코드를 사용하려는 유혹을 느낍니다. 그러나 이러한 코드는 실제 코드 리뷰에서 통과하지 못할 가능성이 높습니다. 간결함과 명확함을 혼동하지 말고, 가독성을 우선시해야 합니다. 짧은 코드가 항상 가장 명확한 코드를 의미하지 않으며, 때로는 오히려 이해하기 어려울 수 있습니다.

문자열 연결의 단순화

잘못된 코드:

const percent = 5;
const percentString = percent.toString().concat("%");

개선된 코드:

const percent = 5;
const percentString = `${percent}%`; // → '5%'

자바스크립트의 다크패턴 피하기

다음은 자바스크립트에서 자주 볼 수 있는 다크패턴의 예시들입니다. 이러한 패턴들은 코드의 복잡성을 증가시키고, 다른 개발자가 코드를 이해하는 데 어려움을 겪게 만듭니다.

비트 NOT 연산자 사용

잘못된 코드:

const url = "index.html?id=5";
if (~url.indexOf("id")) {
  // 수상한 로직
}

개선된 코드:

const url = "index.html?id=5";
if (url.includes("id")) {
  // 수상한 로직
}

소수점 제거를 위한 비트 NOT 연산자

잘못된 코드:

const value = ~~3.14;

개선된 코드:

const value = Math.trunc(3.14); // → 3

코드 구조의 평행성 유지

조건문을 사용할 때, 코드의 평행 구조를 유지하면 가독성을 크게 향상시킬 수 있습니다. 다음은 평행 구조를 유지한 코드의 예시입니다.

평행 구조 적용

개선 전:

function RecipeName({ name, subrecipe }) {
  if (subrecipe) {
    return <Link href={`/recipes/${subrecipe.slug}`}>{name}</Link>;
  }
  return name;
}

개선 후:

function RecipeName({ name, subrecipe }) {
  if (subrecipe) {
    return <Link href={`/recipes/${subrecipe.slug}`}>{name}</Link>;
  } else {
    return name;
  }
}

개발자를 위한 최종 조언

• 단순함을 우선시하세요: 짧고 영리한 코드보다는 단순하고 읽기 쉬운 코드를 작성하세요.
• 조건의 필요성을 검토하세요: 코드에 조건이 정말 필요한지 다시 한번 생각해 보세요.
• 축약 표현의 사용을 신중히 하세요: 축약 속성이 코드의 가독성을 해치지 않는지 판단하세요.

결론

코드를 작성할 때 현재의 자신뿐만 아니라, 미래의 자신과 동료 개발자들을 위해 가독성과 명확성을 최우선으로 고려해야 합니다. 영리한 코드보다는 단순하고 이해하기 쉬운 코드를 작성함으로써, 코드의 유지보수성과 협업 효율성을 높일 수 있습니다.