SY Tech & Dev Blog

Memoir
- 회고록
Vue
- Dev Log
- Study
  - Api Connection
Home

Contact

Copyright © 2024 | Yankos

Home > Vue > Study > Api Connection

Now Loading ...

Api Connection

Vue에서 API 연결하기 (2)
Vue에서 API 연결하기 (2) [Advanced] vue에서 axios만 사용하는게 더 편리하지 않을까? axios 대신 vueuse의 useAxios를 사용한다면? 에 대해 FE 팀원과 스터디를 했는데 여러가지 의문에 대해 질문해주셔서 쓰게된 글이다. 질문 및 나의 생각 ⁇: 현재 코드 상태를 봐서는 (global instance는 axios를 통해 create하고, 실제 api 함수는 useAxios로 구현하는 코드) 굳이 그렇게 구현해야 할 이유를 모르겠다. 그냥 axios만 쓰는게 더 간단하지 않을까? 💡: 솔직히 말하면 공식문서에 그렇게 써서, 그냥 문서상으로 useAxios를 쓰면 반응형으로 사용하기 용이하며, 추후 확장성을 생각했을 때 용이하다고 써져있었기 때문에 막연하게 쓰면 좋겠다! 라고 생각한게 큰 것 같다. 좀 더 깊게 생각하고 실제로 axios와 비교 테스트할 필요가 있다. 그래서? 우선 원래 코드에 덧붙여서 axios와 비교하기로 했다. useAxios와 axios 모두 사용해볼 필요도 없이 useAxios 부분에서 하나 막히는게 나왔다. 먼저, useAxios의 이점은 반응형으로 사용하기 용이한 것이다. 즉 결과값 자체가 ref, reactive로 감싸져서 나오는데 이를 따로 모듈로 관리하려면 import해서 사용해야 하는 상황이 온다. 이 때 import해서 data를 그대로 반응형으로 쓰려면 결국 똑같이 ref, reactive를 써야하기 때문에 반응형에 있어서 useAxios의 장점이 희미해진다. isLoading, isFinished 등 현재 api 통신 상태를 가져오기에 용이해서 로딩과 같은 애니메이션을 사용할 때 axios보다 쉽다는 장점도 있다. 결론 추후의 확장성과 유연성을 생각한다면 vue 프레임워크에 해당하는 vueuse의 useAxios를 사용하는게 이점이 될 수 있다. api를 따로 모듈화해서 사용하는 우리 프로젝트의 경우 어차피 가져와서 반응형 변수에 또 할당해야하기 때문에 반응형에 있어서는 이점이 되지 않는다. 따라서 현재는 useAxios를 굳이 쓸 필요가 없다.
Vue · 2024-08-06
Vue에서 API 연결하기 (1)
Vue에서 API 연결하기 (1) axios 대신 vueuse의 useAxios를 사용한다면? useAxios는 Vue의 유틸리티 라이브러리인 VueUse에서 제공하는 훅으로, Axios와 결합하여 더 편리한 API 호출 관리를 돕는다. useAxios의 장﹒단점 장점 반응형 데이터 관리 useAxios는 Vue의 반응형 시스템과 잘 통합되어, API 호출 결과를 반응형으로 관리할 수 있음. → Vue의 ref, reactive와 같은 기능과 결합해 상태 관리가 자연스럽게 이루어짐. ex) API 응답 데이터를 화면에 실시간으로 반영하거나 로딩 상태 등을 쉽게 추적 가능. 편리한 상태 추적 useAxios는 로딩 상태, 에러 상태, 응답 데이터 등을 관리할 수 있는 상태값 제공. API 호출의 현 상태 파악 용이 → UI에서 로딩 스피터 표시, 에러메시지 출력 등 구현 용이. 상태값을 컴포넌트 내에서 간편하게 사용 가능 → 코드 가독성 up. 자동 취소 기능 컴포넌트가 언마운트되거나 특정 조건에서 불필요한 API 호출을 자동으로 취소할 수 있는 기능 제공. → 불필요한 네트워크 요청 감소 & 자원 효율적 사용 가능. 타입스크립트 지원 useAxios는 타입스크립트와 효환성이 좋음. → 요청과 응답의 타입을 명확하게 정의할 수 있어, 타입 안정성 유지하며 개발 가능. 단점 추가 학습 곡선 useAxios를 사용하려면 VueUse 라이브러리와 그 API에 대한 학습 필요 의존성 추가 vue에 대한 프로젝트 의존성 증가 → 프로젝트의 빌드 크기 증가나 업데이트시 호환성 문제 유발 가능성 up. 제한된 커스터마이징 useAxios는 특정 패턴에 따라 동작 → 모든 요구사항에 충족하지 못할 수도 있음. ex) 매우 세밀한 요청 커스터마이징이 필요한 경우, axios의 고급 기능을 사용하는 경우 useAxios 적절한 사용법 공식문서에는 useAxios 사용시 axios와 적절히 섞어가며 쓰는 걸 알 수 있다. 공식문서에 따르면 axios를 통해 인스턴스를 전역으로 먼저 생성하고 해당 인스턴스를 useAxios의 옵션으로 사용할 수 있다. useAxios만 활용한다면 아래와 같이, import { useAxios } from "@vueuse/integrations/useAxios"; const { data, isFinished } = useAxios("/api/posts"); axios를 통해 전역 인스턴스를 생성한 후, 해당 인스턴스를 useAxios의 옵션으로 활용하는 방법은 아래와 같이 쓸 수 있다. import axios from "axios"; import { useAxios } from "@vueuse/integrations/useAxios"; const instance = axios.create({ baseURL: "/api", }); const { data, isFinished } = useAxios("/posts", { method: "POST" }, instance); 현재 우리 프로젝트의 추후 확장성과 유연성을 생각하면 axios와 useAxios를 같이 사용하는 방향이 더 낫다고 판단됨. +) Advanced: [Advanced] vue에서 axios만 사용하는게 더 편리하지 않을까? +) 실제 실습 내용: [Vue] Vue에서 BE의 API 연결하기
Vue · 2024-08-06

Touch background to close