자바스크립트 fetch API를 사용한 웹 사이트 안티 패턴 분석

10 Sep 2023

javascript

소개

이번 포스트에서는 자바스크립트의 fetch API를 사용하여 웹 사이트 개발 중에 발생할 수 있는 안티 패턴(anti-pattern)에 대해 분석해보겠습니다. fetch API는 웹 애플리케이션에서 서버와 통신하기 위해 사용되는 강력한 도구입니다. 그러나 이를 잘못 사용하면 웹 사이트의 성능과 보안에 문제가 발생할 수 있습니다.

본 포스트에서는 주로 다음과 같은 안티 패턴들을 다룰 것입니다:

비동기 함수 사용의 부적절한 처리
에러 처리의 부족
HTTP 요청의 안전성과 보안 문제

비동기 함수 사용의 부적절한 처리

fetch API는 네트워크 요청을 비동기적으로 처리하는데 사용됩니다. 그러나 이를 부적절하게 처리하면 예상치 못한 결과를 초래할 수 있습니다. 예를 들어, 다음과 같이 then 메서드 체인을 지나치게 길게 작성하는 경우:

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 비동기 로직
    // ...
  })
  .then(() => {
    // 더 많은 비동기 로직
    // ...
  })
  .then(() => {
    // 더 많은 비동기 로직
    // ...
  });

위의 코드에서는 비동기 작업이 많이 중첩되어 가독성이 떨어집니다. 또한, 오류 처리와 예외 처리 또한 적절히 이루어지지 않았습니다. 이런 경우, async/await 구문을 사용하여 코드를 더 간결하고 가독성 있게 작성할 수 있습니다:

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();

    // 비동기 로직
    // ...

    // 더 많은 비동기 로직
    // ...

    // 더 많은 비동기 로직
    // ...

  } catch (error) {
    // 에러 처리
    console.error(error);
  }
}

fetchData(url);

위의 코드에서는 async/await 구문을 사용하여 코드의 가독성을 향상시켰습니다. 또한, 예외 처리를 위해 try-catch 문을 사용하여 오류를 적절히 처리하였습니다.

에러 처리의 부족

fetch API는 네트워크 요청 중에 발생하는 오류를 적절히 처리하는 기능을 제공합니다. 그러나 이를 알아보기 쉽도록 부족한 경우가 있습니다. 예를 들어, 다음과 같이 fetch 요청에 대한 오류 처리를 누락한 경우:

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 비동기 로직
    // ...
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 코드에서는 fetch 요청 오류(예: 네트워크에 연결할 수 없음, 404 등) 발생 시에 대한 처리가 제대로 이루어지지 않았습니다. 이를 개선하기 위해서는 fetch 요청의 상태 코드를 확인하고 적절한 처리를 해야합니다:

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network Error');
    }
    return response.json();
  })
  .then(data => {
    // 비동기 로직
    // ...
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 코드에서는 fetch 요청의 상태 코드를 확인하고, 상태 코드가 정상적이지 않은 경우 에러를 발생시켜 오류를 적절히 처리하고 있습니다.

HTTP 요청의 안전성과 보안 문제

fetch API를 사용하여 HTTP 요청을 보낼 때, 안전성과 보안에 신경을 쓰지 않으면 웹 사이트에 취약점을 남길 수 있습니다. 예를 들어, 다음과 같이 비밀번호와 같은 중요한 정보를 URL에 포함하여 보내는 경우:

const username = 'myUsername';
const password = 'myPassword';

fetch(`https://api.example.com/login?username=${username}&password=${password}`)
  .then(response => response.json())
  .then(data => {
    // 로그인 성공 로직
    // ...
  })
  .catch(error => {
    // 로그인 실패 처리
    console.error(error);
  });

위의 코드에서는 비밀번호와 같은 중요한 정보를 URL에 노출시키고 있습니다. 이는 보안에 매우 취약한 상태이며, 공격자에 의해 탈취될 수 있습니다. 이를 개선하기 위해서는 POST 요청을 사용하여 중요한 정보를 HTTP body에 담아 보내야 합니다:

const username = 'myUsername';
const password = 'myPassword';

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ username, password }),
})
  .then(response => response.json())
  .then(data => {
    // 로그인 성공 로직
    // ...
  })
  .catch(error => {
    // 로그인 실패 처리
    console.error(error);
  });

위의 코드에서는 POST 요청을 사용하여 중요한 정보를 안전하게 전송하고 있습니다. 또한, Content-Type 헤더를 사용하여 요청의 콘텐츠 유형을 지정하고 있습니다.

결론

이번 포스트에서는 자바스크립트의 fetch API를 사용한 웹 사이트 개발 중 발생할 수 있는 안티 패턴에 대해 알아보았습니다. 비동기 함수 사용의 부적절한 처리, 에러 처리의 부족, HTTP 요청의 안전성과 보안 문제 등에 대해 살펴보았습니다. 이러한 안티 패턴을 알고, 개발 시 적절한 패턴을 적용하는 것이 웹 사이트의 성능과 보안을 향상시키는 데 중요한 역할을 합니다.