유연한 함수를 만들어라

Tip 01 테스트하기 쉬운 함수를 작성하라

 

🧪 테스트는 왜 중요할까?

• 테스트가 있으면 코드를 자신 있게 리팩토링할 수 있다
• 테스트는 오래된 코드 이해하는 데도 도움이 된다
• 근데… 개인적으로는 솔직히 아직 잘 모르겠다

🧠 현실적인 생각

"개발할 것도 많은데 테스트 코드까지?"
"심지어 테스트 하기도 어려운 코드인데?"

 

이런 생각 100% 공감 간다.
나도 그렇게 생각했었고, 지금도 솔직히 항상 테스트부터 짜진 않는다.

테스트 하기 쉬운 코드는
테스트만 쉬운 게 아니라, 전체적으로 구조가 좋은 코드인 경우가 많다.

 

❌ 테스트하기 어려운 코드의 예

function fetchUserName() {
  const config = require('./config.json'); // 설정 파일 읽기
  return fetch(`${config.apiUrl}/user`)     // 외부 네트워크 요청
    .then((res) => res.json())
    .then((data) => data.name);
}

• 설정 파일을 직접 읽고
• 외부 API와 통신하고 있음
• 이런 코드는 테스트하려면 mock, stub, spy 난무...

 

🧨 그런데 문제는 여기서 끝이 아님

이런 테스트 코드를 유지하려고 할수록...

• jest.fn(), spyOn(), mockReturnValue() 같은 헬퍼 도구들이 계속 필요하고
• 테스트 코드조차 복잡해지고
• 코드와 테스트가 점점 강하게 얽힘

 

의존성 주입으로 쉬운 테스트 코드 만들기

// 의존성을 주입 받음
function fetchUserName(apiUrl, fetcher) {
  return fetcher(`${apiUrl}/user`)
    .then((res) => res.json())
    .then((data) => data.name);
}

외부 설정이나 fetch 함수를 밖에서 넣어줄 수 있게 만들면
테스트할 땐 가짜 fetcher를 넣어서 테스트할 수 있음

 

🧪 Jest로 테스트할 땐 이렇게

test('유저 이름을 잘 받아오는가?', async () => {
  const fakeFetch = jest.fn().mockResolvedValue({
    json: () => Promise.resolve({ name: 'Jane' }),
  });

  const name = await fetchUserName('https://api.test.com', fakeFetch);

  expect(name).toBe('Jane');
});

 

간단정리

테스트코드가 어려운 건 코드 구조가 테스트에 적합하지 않아서인 경우가 많음
spy, mock, stub 같은 도구도 결국 임시방편
가장 좋은 건? 처음부터 테스트하기 좋은 구조로 짜는 것

 

---

Tip 02 화살표 함수로 복잡도를 낮춰라

 

전통적인 방식은 길다

예를 들어 사용자 이름을 조합하는 함수가 있다고 해보자.
보통 이런 식으로 작성하게 됨:

const user = {
  firstName: 'John',
  lastName: 'Doe'
};

function getFullName(user) {
  return user.firstName + ' ' + user.lastName;
}

console.log(getFullName(user)); // John Doe

• 기능은 단순한데 구조가 길다
• 반복적으로 쓰기엔 귀찮고 가독성도 떨어질 수 있음

 

화살표 함수로 간단하게!

const getFullName = ({ first, last }) => `${first} ${last}`;
console.log(getFullName(user));

• 함수 인자에서 바로 first, last를 해체
• 문자열 반환은 템플릿 리터럴로 처리
• 짧고 가독성 좋음

 

여러 줄 처리할 때는 중괄호 + return 필요

const getGreeting = ({ first, last }) => {
  const fullName = `${first} ${last}`;
  return `안녕하세요, ${fullName}님!`;
};

• 함수 블록 {}를 쓰면 return 생략하면 안 됨

 

간단 정리

• 화살표 함수는 짧고 명확하게 표현할 수 있어서 가독성이 좋다
• 파라미터에서 해체할당을 쓰면 더욱 깔끔하게 필요한 값만 다룰 수 있다
• 여러 줄 로직이 들어갈 경우에는 중괄호 {}와 return을 명시해야 한다

중요한 건 무조건 짧게 쓰는 게 아니라
읽기 쉽고, 목적이 잘 드러나는 구조로 쓰는 것이다