// Axios.test.ts import axios from 'axios'; import ManagerService from "./ManagerService"; jest.mock('axios'); const mockedAxios = axios as jest.Mocked<typeof axios>; describe("Axios Test", () => { let managerService = new ManagerService(); it("should mock axios get call", async () => { mockedAxios.get.mockResolvedValue({ data: [ { corporation: "inflearn" } ], }); const test = await managerService.axiosTest("inflearn"); expect(test).toEqual([ { corporation: "inflearn" } ]); expect(mockedAxios.get).toHaveBeenCalledWith(`${process.env.SERVER_URL}/corporation/info`, { params: { corporation: "inflearn" }, }); }); }); 위와 똑같은 코드로 테스트를 진행했고, 본 코드에서는 약간의 차이만 있었습니다. 하지만 아직 왜 그렇게 되는지 알지 못하여서 강사님께 여쭤보려고 합니다. 1번 코드 ( 테스트가 잘 동작하는 코드 ) axiosTest = async (corporation: string) => { const response = await axios.get(`${process.env.SERVER_URL}/corporation/info`, { params: { corporation: corporation, }, }); if (!response) { throw new Error("값이 없음"); } return response.data; }; 2번 코드 ( 값이 없음으로 에러가 발생하는 코드 ) axiosTest = async (corporation : string) => { const site = await axios({ method: 'get', url: `${process.env.SERVER_URL}/corporation/info`, params: { corporation : corporation }, }) if(!site) { throw new Error("값이 없음"); } return site.data } 둘의 차이점에 대해서 알 수 있을까요?
프론트에서 백앤드 서버로 네트워크 요청시 요청 헤더에 보면 Connection: keep-alive 라고 표기 되는데 이 상태의 요청들이 많으면 서버가 부하가 큰다던가 할 수 있는 요지가 있을까요? 프론트에서 보내는 저 api 상태의 요청이 많으면 문제가 생길수 있다는데 프론트에서 요청시 팬딩이 걸리는 그런 상황에 요청을 끊을 수 있는 방법이 있을까요?(백엔드 서버에 어떻게히면 부담을 줄일수 있을까 고민중입니다;)
안녕하세요, 강의를 들으면서 궁금증이 생겨 질문드립니다. 아래 사진에서 보면 axios.js에서 만든 내용은 instance이고 export도 instance인데 어떻게 axios로 불러와서 사용이 가능한가요? axios.js에서는 instance생성에 axios를 from "axios"에서 가져오지만 banner에서 axios를 작성할때 경로를 보면, 분명 그냥 axios가 아니라 저희가 만든 api/axios.js에서 불러오는건데 어떻게 가능한지, 그리고 왜 저렇게 불러오는지 궁금합니다. axios.js파일 Banner.js파일에서 axios사용
안녕하세요 강의를 듣다가 질문이 생겨 문의드립니다 axios.post 설명 중 interface Created {}가 이해되지 않아 질문 드립니다 import axios, {Axios, AxiosError, AxiosResponse} from "axios"; interface Post {userId: number, id: number, title: string, body: string} interface Created {} interface Data {title: string, body: string, userId: 1} (async () => { try { const response = await axios.get<Post, AxiosResponse<Post>>( "https://jsonplaceholder.typicode.com/posts/1" ); //post<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>; const response2 = await axios.post<Created, AxiosResponse<Created>, Data>('https://jsonplaceholder.typicode.com/posts', { title: 'foo', body: 'bar', userId: 1 }) console.log(response.data.id) console.log(response2) } catch (error) { if(axios.isAxiosError(error)) { //커스텀 타입가드 // {message: "서버 장애입니다. 다시 시도해주세요"} console.error((error.response as AxiosResponse<{message: string}>)?.data.message) } } } })(); [index.d.ts] 내의 axios.get의 경우 Post가 있어 타입을 확인할 수 있다는 것은 이해했습니다. 하지만 interface Post와 달리 interface Create는 빈 객체는 axios.post 에서 무슨 역할인지 이해되지 않습니다. 개인적인 생각으로는 [index.d.ts]에서 T는 any니까 Create는 단순히 자리만 채우고 실제 타입 역할은 interface Data가 수행하는 것 같았습니다 제대로 이해한 게 맞나 싶어 문의드립니다 그리고 올려주신 강의 늘 잘 듣고 있습니다. 늘 어려운 부분, 이해되지 않는 부분을 쉽게 설명하셔서 감사합니다.
getServerSideProps를 이용해서 SSR을 할 때 axios에서 계속 401 Unauthorized 에러가 발생하네요... 혹시몰라서 CSR로도 시도해봤는데 이때는 잘 되구요... 혹시 SSR에서 header 설정을 추가로 해주어야한다거나 하는 경우가 있는건가요...? 어떻게 시도를 해도 에러가 없어지지 않네요ㅠㅠㅠ
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
아래 코드에서 url: `http://localhost:3000/restaurants?category=${param}`, 인데, 이 url은 어디서 확인 가능한걸까요? 제가 /restaurants이 부분을 다른 param으로 정한 것 같애서요! async function getData(category){ let param = category; if (!param) { param = ""; } const dataSet = await({ method: "get", url: `http://localhost:3000/restaurants?category=${param}`, headers:{}, data: {}, }); console.log(dataSet) }
강의 6분 근처에 이미지 전송 오류 관련해서 0.24로 내리지 않고 0.25이상에서 작동하기는 한다네요. https://github.com/axios/axios/issues/4406#issuecomment-1048693170 axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: formData => formData, }) 이런 식으로 하면 작동하는군요. 0.26에서 확인했습니다. 흠... 불편하네요. https://github.com/axios/axios/issues/4406#issuecomment-1066677603 한달 전에 수정한다고 코멘트했는데 아직도 반영은 안된듯 싶습니다. 0.24로 내렸다가 반영되면 올리는 게 제일 나은 것 같습니다.
강사님~ 안녕하세요~~!! 강의 수강 중 - Suggestion 목록 API 및 화면 구현 - useAxios 훅을 통한 보다 손쉬운 조회 API 요청 해당 강의의 실습 중 에러가 생겨서 질문을 드립니다. 먼저, 아래는 SuggestionList.js 의 코드입니다. 아래는 Suggestion.js의 코드입니다. 리액트 페이지에서 suggetstions for you 부분에 친구 목록이 뜨지 않고, 다음과 같은 error가 보여집니다. (이전에는 되었던 것 같은데 컴퓨터를 재부팅 한 이후로 되지 않는 것 같습니다...ㅠㅠ) 해결을 어떻게 해야할 지 강사님의 조언을 구하고 싶습니다..! 그럼 미리 감사 인사를 드립니다 ㅠㅠ !!
axios 요청 시에 , delete는 body를 기본적으로는 제공하지 않는다고 알고 있습니다. 그런데 두 번째 파라미터로 data: {} 를 넣어줘서 body를 쓸 수 있는것으로 알고 있는데, 혹시 이게 권장되지 않는 방법인가요? 혹시 그렇다면, 배열이나 예민한 정보를 delete로 보낼 시에는 어떤 방법이 권장되는지 알고 싶습니다. //예시 axios.delete('/product', { data: { body에 들어갈 객체} });
안녕하세요. 강의 내용대로 따라하면서 svelte를 접하고 있습니다. 현재 svelte 3.0 에 axios 설치시에 0.25.0 버전이 설치 되는데 이후 오류가 발생하고 있습니다. @rollup/plugin-json 을 설치하고 rollup.config.js 파일을 수정해도 동일한 오류가 발생하는데 해결할 방법이 없을까요?
import axios from "axios" ; import React , { useEffect } from "react" ; function LandingPage () { useEffect (() => { axios . post ( "/api/product/products" ); }, []); return < div >LandingPage</ div >; } export default LandingPage ; 랜딩페이지에 axios . post ( "/api/product/products" ); 를 추가 한후 밑에 에러가 계속 뜹니다.
export const request = ( method : any , url : string , data ?: object []) : AxiosPromise < any > => { return axios ({ method , url : DOMAIN + url , data }) . then ( result => result . data ) . catch ( result => { const { status } = result . response ; if ( result === UNAUTHORIZED ) { return onUnauthorized () ; } throw Error ( result ) ; }) } 안녕하세요. 캡틴 판교님 강의를 들으면서 많은 도움을 받는 수강생입니다~ 공부 중에 의문사항이 있어 문의 드립니다. 제가 axios 코드를 작성했는데 ( method : any , url : string , data ?: object []) : AxiosPromise < any > 코드에서 파라미터 부분인 method와 반환타입인 AxiosPromise 부분에 any를 사용했는데 any가 아닌 좀 더 정확한 타입 을 주고 싶습니다. method 부분은 'get' 또는 'post'를 넣어줄거라 string이라고 정의를 했었는데 넣고 나면 아래 지렁이 에러 표시가 생겼습니다. 이런 부분들은 어떻게 추론을 해야 할지 궁금합니다. 답변 부탁 드리겠습니다. 감사합니다~
안녕하세요. 그랩님 그랩님 강좌를 잘 보고 있는 한 수강생입니다. 다름이아니라 강의 내용과는 별개의 내용이지만 그랩님을 통해 자바스크립트를 배우고 여러가지 배웠기 때문에 그랩님께 질문 남겨봅니다. const getData = async () => { try { const result = await axios . get ( " https://b2ef45f8-e166-41d7-bd35-9ad159028fbf.mock.pstmn.io/test " ) ; const products = result . data . products ; console . log (products) ; console . log ( ` status:( ${ result . status } ) 통신을 성공했습니다! ` ) ; const data = JSON . stringify (products) ; return data ; } catch (err) { console . error (err) ; console . log ( " 결과를 가져오지 못했습니다. " ) ; return err ; } }; console . log ( getData ()) ; 위에 코드는 프로미스 형식의 axios객체를 async, await을 이용해 then과 catch등을 축약해서 제가 만든 포스트맨 목서버의 데이터를 get메서드로 불러와서 결과값을 확인하는 코드입니다. 실행에는 문제가 전혀 없습니다. 그런데 제가 궁금한 것은 getData 함수 표현식이 async로 감싸져 promise객체를 받아 비동기 처리가 되어서 console.log(getData())가 먼저 실행된 뒤에 getData 함수가 실행된다는것은 알고있습니다. 허나 만약에 비동기 함수에서 리턴값을 받아 출력을 하고 싶을 때는 어떤 처리를 해야 하는지가 궁금합니다. 만약 코드가 실행되면 console.log(getData())가 실행될 때 Promise { <pending> }가 출력이 되었습니다.
안녕하세요. typescript 와 create-react-app 을 사용하여 공부중인데요. 커스텀 훅을 만들어서 비동기 API를 호출하여 테이블에 노출하는 기능을 구현하다가 도저히 답이 안나와서 질문드립니다. useState와 useEffect 를 사용하여 비동기 API를 set 하는 커스텀훅을 만들었고, axios 를 호출하는 별도의 파일을 만들어서 사용중인데 const [items , setItems] = useState <coronaApiProps[]>() ; const coronaItems = getCorona () ; useEffect (() => { setItems(coronaItems) ; } , []) ; 이렇게 사용하니 아래처럼 에러가 나타납니다. TS2345: Argument of type 'Promise<coronaApiProps[]>' is not assignable to parameter of type 'SetStateAction<coronaApiProps[] | undefined>'. Type 'Promise<coronaApiProps[]>' is not assignable to type '(prevState: coronaApiProps[] | undefined) => coronaApiProps[] | undefined'. Type 'Promise<coronaApiProps[]>' provides no match for the signature '(prevState: coronaApiProps[] | undefined): coronaApiProps[] | undefined'. coronaApiProps 는 제가 만든 인터페이스입니다. 해당 에러가 나타나서 useEffect 안에 const [items , setItems] = useState <coronaApiProps[]>() ; // axios 로 api 호출 const coronaItems = getCorona () ; useEffect (() => { coronaItems. then (response => { setItems(response) ; }) ; } , []) ; 이렇게 사용하니 커스텀훅을 두번 호출합니다. 그래서 axios 파일을 분리하지 않고 커스텀훅 안에 사용하면 커스텀훅을 한번만 사용합니다. api를 호출하는 axios 파일을 분리하고 사용할 수 없나요? 필요하면 github 추가해드릴 수 있습니다.
현재 npm i axios -D하면 0.21버전이 설치되는데 이게 npm run dev할때 에러를 일으키네요 ㅜㅜ 교육영상에서와 같은 0.20버전으로 해야 동작합니다. (다른분들도 문제 생기면 0.20으로 시도해보세요) npm i axios@0.20 이 문제는 rollup과 관련된 문제인가요?
