vue.js로 팀 프로젝트를 진행하면서 클라이언트에서 서버로 HTTP 요청을 효율적으로 처리하기 위해 axios나 fetch를 사용한다는 것을 알았다
❓ 왜 HTTP 요청이 필요한가
1. 데이터 전송
웹 애플리케이션은 보통 서버-클라이언트 간 데이터를 주고받음
ex. 유저 로그인 정보, 상품 목록, 유저 프로필 등
2. 비동기 통신
페이지를 다시 로드하지 않고 데이터 갱신 가능
-> 사용자 경험 향상
3. 서버와의 상호작용
CRUD 작업을 서버와 통신하여 처리
❓ 왜 axios나 fetch를 사용하는가
1. 편리성
이 라이브러리들은 HTTP 요청을 쉽게 보낼 수 있는 인터페이스 제공
2. 에러 핸들링
HTTP 요청 성공/실패에 대한 적절한 처리 가능
3. 비동기 처리
Promise 또는 async/await 사용해 비동기 작업 간편하게 관리 가능
4. 유연성
다양한 요청 설정이 쉬움
ex. 헤더 추가, 타임아웃 설정, 요청 취소 등
5. 인터셉터
요청이나 응답을 가로채 공통적인 작업 수행 가능
ex. 인증 토큰 추가, 로깅 등
⚡ 운영환경에서의 중요성
- 데이터 통신
대부분의 현대적인 웹 애플리케이션은 서버-클라이언트 간 데이터 통신이 빈번하게 발생
-> 안정적이고 효율적인 HTTP 클라이언트 필수적 - 유지보수
코드의 가독성과 유지보수성 측면에서 반복적인 HTTP 요청 코드를 깔끔하게 관리 - 성능 최적화
필요에 따라 요청 최적화, 불필요한 요청 최소화 -> 성능 개선
이외에도 vue.js 프로젝트에서 서버와 데이터 통신을 할 때 사용할 수 있는 다양한 기술들이 있음
- Vue Resource
- GraphQL
- Firebase
- Socket.io
- RESTful 라이브러리들
그렇다면!
현재 진행하고 있는 프로젝트에는 axios와 fetch 중 어떤 것을 사용해야할까?
✅ 장단점을 분석해보자
Axios
장점
- 간편한 사용법
XMLHttpRequest를 기반으로 한 라이브러리 -> 사용하기 쉬운 API 제공 - 자동 JSON 변환
요청 및 응답 데이터를 자동으로 JSON으로 변환 - 인터셉터
요청이나 응답을 가로채 로깅이나 인증 토큰 추가 등의 작업 쉽게 수행 - 더 많은 기능
요청 취소, 타임아웃 설정, 응답 데이터 변환 등 fetch에 비해 더 많은 기능 제공 - Node.js 지원
서버사이드에서도 동일한 API 사용 가능
단점
- 파일 크기
외부 라이브러리이기 때문에 프로젝트 빌드 크기 약간 증가 - 의존성
추가적인 외부 라이브러리에 의존
Fetch
장점
- 내장 함수
최신 브라우저에 내장된 기능이기 때문에 별도 설치 필요 X - Promise 기반
비동기 작업 관리 쉬움 - 브라우저 친화적
최신 브라우저 환경에서는 네이티브로 지원되어 최적화
단점
- 지원 브라우저
구형 브라우저에서는 폴리필 필요
// todo - 폴리필 설명 추가 - JSON 변환 필요
응답을 JSON으로 변환하려면 추가 처리 필요
ex. response.json() - 기능 제한
기본 기능만 제공하기 때문에 인터셉터나 자동 변환 등의 기능은 직접 구현 - 에러 핸들링
네트워크 에러는 Promise를 거부하지만, 404나 500 같은 HTTP 에러는 거부하지 않기 때문에 추가 처리 필요
💡 결론
- 간편함과 기능성 -> axios
- 경량성과 최신 브라우저 지원, 기본적인 기능만 필요 -> fetch
Hello, World!