재밌는 코딩 공부

useEffect(() => {
  if (!profile) {
    setProfile({
      name: '',
      nickname: '',
      email: '',
      password: '',
      newPassword: '',
      confirmNewPassword: '',
      profileImage: '', // 빈 문자열로 초기화
      isMarketingAgreed: false // 기본값 false
    })
  }
}, [])

1. Fetch API란?

Fetch API는 브라우저에 내장된 API로, HTTP 요청을 보내고 응답을 처리하는 표준 방법입니다. Promise 기반으로 비동기 작업을 처리하며, ES6 이상을 지원하는 모든 현대 브라우저에서 사용할 수 있습니다.

Fetch API의 주요 특징

• 내장 API: 별도의 설치 없이 바로 사용 가능.
• Promise 기반: 비동기 작업을 처리하기에 적합하며, async/await과 함께 사용하기 편리합니다.
• 유연성: 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)를 쉽게 사용할 수 있습니다.

Fetch API 사용 예시

async function getUserData() { 
	const response = await fetch('https://api.example.com/user'); 
    if (!response.ok) { 
    	throw new Error('네트워크 응답에 문제가 있습니다.'); 
    } 
	const data = await response.json(); return data; 
}

Fetch API의 장단점

장점

1. 내장 API: 브라우저에 내장되어 있어 별도의 설치나 설정이 필요 없습니다.
2. 유연한 사용: 단순한 HTTP 요청부터 복잡한 요청까지 다양한 방식으로 활용 가능합니다.

단점

1. 오류 처리의 복잡성: HTTP 상태 코드가 200번대가 아닐 경우에도 오류를 발생시키지 않기 때문에, 추가적인 오류 처리 로직이 필요합니다.
2. 기능 부족: 요청 취소, 응답 데이터 변환 등 고급 기능을 구현하려면 추가 코드가 필요합니다.

2. Axios란?

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경 모두에서 사용할 수 있습니다. Axios는 fetch보다 더 많은 기능을 제공하며, 그 사용성과 편리성으로 인해 많은 개발자들 사이에서 인기가 높습니다.

Axios의 주요 특징

• 자동 JSON 변환: 응답 데이터를 자동으로 JSON 형식으로 변환합니다.
• 요청 및 응답 인터셉터: 요청이나 응답을 가로채고 처리할 수 있는 기능을 제공합니다.
• 취소 가능한 요청: axios.CancelToken을 사용해 요청을 취소할 수 있습니다.
• 브라우저와 Node.js 지원: 클라이언트와 서버 측 모두에서 동일한 API로 사용 가능합니다.

Axios 사용 예시

import axios from 'axios'; 

async function getUserData() {
	try { 
    	const response = await axios.get('https://api.example.com/user');
        return response.data; 
    } catch (error) { 
   	 throw new Error('데이터를 가져오는 중 오류가 발생했습니다.'); 
    } 
}

Axios의 장단점

장점

1. 간편한 오류 처리: HTTP 상태 코드가 200번대가 아닐 경우 자동으로 오류를 발생시킵니다.
2. 고급 기능 지원: 요청 및 응답 인터셉터, 요청 취소, 자동 JSON 변환 등 다양한 고급 기능을 제공합니다.
3. 브라우저와 Node.js 지원: 동일한 코드로 브라우저와 서버 환경에서 모두 사용 가능합니다.

단점

1. 추가 설치 필요: 라이브러리를 설치하고 의존성을 관리해야 합니다.
2. 용량: Fetch API보다 약간 더 많은 용량을 차지합니다.

3. Fetch API와 Axios의 비교

3.1. 사용성

Fetch API는 내장된 API로 간단한 요청을 처리할 때 직관적이고 사용하기 쉽습니다. 하지만 복잡한 오류 처리나 요청 취소 같은 고급 기능을 구현하려면 추가적인 코드가 필요합니다.

Axios는 이런 고급 기능을 기본으로 제공하여, 더 복잡한 요구사항을 쉽게 처리할 수 있도록 해줍니다. 특히, RESTful API와의 상호작용에서 반복적인 작업을 줄여주는 인터셉터 기능이 유용합니다.

3.2. 오류 처리

Fetch는 상태 코드가 200번대가 아니더라도 오류를 발생시키지 않기 때문에, 응답을 직접 검사하고 오류를 처리해야 합니다. 반면 Axios는 상태 코드에 따라 자동으로 오류를 발생시켜, 오류 처리가 더 간편합니다.

3.3. 브라우저 호환성 및 환경 지원

Fetch는 최신 브라우저에서 기본적으로 지원되지만, 오래된 브라우저에서는 폴리필이 필요할 수 있습니다. Axios는 브라우저뿐만 아니라 Node.js 환경에서도 잘 작동합니다. Axios는 서버와 클라이언트 양쪽에서 동일한 API로 코드를 작성할 수 있는 장점이 있습니다.

3.4. 기능 확장성

Axios는 기본적으로 JSON 변환, 요청 취소, 헤더 설정, 요청 및 응답 인터셉터 등의 고급 기능을 제공하므로, 보다 복잡한 HTTP 요청을 처리할 때 유리합니다. Fetch API로 이러한 기능을 구현하려면 추가 코드가 필요합니다.

4. 어떤 것을 선택해야 할까?

단순한 프로젝트나 기본적인 요청이 필요한 경우: Fetch API가 충분합니다. 내장 API이기 때문에 추가적인 의존성 없이 간단하게 사용할 수 있습니다.

고급 기능이 필요하거나 대규모 프로젝트인 경우: Axios가 더 적합합니다. 특히, 복잡한 요청 로직이나 여러 API 요청이 필요하다면 Axios의 기능들이 큰 도움이 될 것입니다.

서버 측 코드와 클라이언트 측 코드가 모두 필요한 경우: Axios는 브라우저와 Node.js 환경 모두에서 일관된 API를 제공하므로, 동일한 코드로 클라이언트와 서버를 처리할 수 있습니다.

결론

Fetch API와 Axios는 모두 HTTP 요청을 처리하기 위한 훌륭한 도구입니다. 선택은 프로젝트의 요구사항과 개발 환경에 따라 달라질 수 있습니다. 단순하고 가벼운 프로젝트라면 Fetch API로 충분하지만, 복잡한 기능이나 더 나은 오류 처리가 필요하다면 Axios가 더 나은 선택일 수 있습니다. 프로젝트의 특성을 잘 이해하고 그에 맞는 도구를 선택하는 것이 중요합니다.