코딩65 axios 심화 - instance와 interceptor # axios interceptor의 개념과 필요성 (1) 상황을 통해 살펴보는 interceptor의 필요성 앞선 글에서 get, post, delete 등 axios를 활용하여 HTTP 통신을 하는 방법을 다뤘다. axios.get("http://localhost:3001/todos"); axios.post("http://localhost:3001/todos", todo); axios.delete(`http://localhost:3001/todos/${todoId}`); 이렇게 호출하는 부분이 우리의 리액트 앱에 300개 정도 존재한다고 가정해보자. 그런데, 며칠 후 어떠한 이유 때문에 호출하는 서버가 변경되었다. 변경 전 : http://localhost:3001 변경 후 : htto://local.. 2023. 4. 28. 비동기 통신 - axios, fetch # Axios (1) Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하면 된다. (2) Axios 설치하기 yarn add axios # json-server 설정 (1) 테스트용 db.json 설정 { "todos": [ { "id": "1", "title": "react" } ] } # GET (1) Axios get get은 서버의 데이터를 조회할 때 사용한다. 기본적인 사용방법은 아래와 같다. // url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다. // config는 axios 공식문서.. 2023. 4. 28. HTTP # 통신 (1) 개념 웹 프로그래밍 세계에도 서로 대화가 필요하다. 이를 웹 통신이라고 한다. 이 대화방법은 보통 ‘데이터’로 이루어지고, 대상은 서버(웹 서버)와 클라이언트(웹 브라우저) 이다. # 웹 통신은 약속(=프로토콜)이다 (1) 프로토콜 사람들끼리 대화를 하기 위해서 언어적, 문화적으로 정립된 약속이 있다. 이처럼 웹 또한 서버(웹 서버)와 클라이언트(웹 브라우저)가 대화하기 위해 서로 약속된 방식이 필요하다. 그 방식대로 서로 데이터를 주고 받아야만 오해가 없다. 즉, 오류가 없다. 약속을 우리는 프로토콜(protocol)이라고 한다. 특히, 웹에서 서버 ↔ 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 한다. 웹에서는 브라우저와 서버가 데이터를 주고 받기 위해 H.. 2023. 4. 27. json-server # json-server란? 1) json-server 정의 및 사용하는 이유 json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지이다. json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있다. 2) json-server 설치하기 yarn add json-server # json-server 사용하기 1) json-server 실행하기 json-server가 간단한 패키지이긴 하.. 2023. 4. 27. 이전 1 2 3 4 5 6 ··· 17 다음
