클라이언트에서 API 호출할때 사용하는 도구를 알아보자. (fetch, axios, TanStack Query, SWR) + graphql, firebase, supabase fetch브라우저 내장 API로 별도의 설치 없이 사용이 가능하다.Promise 기반으로 HTTP 요청을 보낸다.사용 시 JSON 파싱 등 부가 처리를 직접해야한다.내장 API로 가볍고 기본적인 기능을 제공하며, 별도의 의존성이 없다는 장점이 있다.단점으로는 요청/응답 처리 로직을 매번 수동으로 작성해줘야하며 인터셉터나 요청/응답 변환 기능이 없다.에러처리나 타임아웃, 리트라이 같은 부분도 직접 작성해줘야한다.const res = await fetch('/api/data');const data = await res.json(); ..
인프런 React 강의 듣고 사이트 만들기 _ Front & back 작업 1. 심심이 채팅을 만들어보자! (simsimi API, 심심이 API)
심심이 API는 유료지만 개발자를 위해 데모프로젝트 100회 무료 이용을 제공하고있습니다. 100회 통신만 무료기 때문에 몇번만에 성공할지는 잘 모르겠지만 도전했습니다. https://workshop.simsimi.com/ SimSimi Workshop Make a chatbot that allows for small talks. workshop.simsimi.com 계정을 먼저 생성해주세요. 본인의 메일주소를 입력해서 가입하면 해당 메일로 인증메일이 전송되고 수락하면 로그인이 됩니다. 그 후 [내 계정 > 대쉬보드] 페이지로 이동합니다. 대쉬보드에서는 나의 API나 남은 요청 횟수 확인이 가능합니다. API 사용방법보기 클릭하면 페이지 이동이 되는데, 문서를 읽다보면 API 요청에 대한 예시가 curl..
vue.js 기초- 인스타그램 만들어보기 08_ajax통신, axios (코딩애플 세미나 후기)
더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다. 더보기 버튼을 생성해줍니다. App.vue 그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다. npm install axios install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다. ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다. App.vue axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다. axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을 this.postData 배열리스트에 push해준다. 아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 ..