코딩/React42 비동기 통신 - 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. Redux Toolkit(Feat. Flux Pattern) # 리덕스툴킷이란? 1) 리덕스툴킷 리덕스 툴킷은 리덕스를 개량한 것으로 생각하면 된다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷이다. 줄여서 RTK 라고도 한다. 2) 새로운 것인가? 아니다. 리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같다. 즉 새로운 것이 아니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었다. 컴포넌트에서 useSelector를 통해서 사용하는 것은 모.. 2023. 4. 24. 이전 1 2 3 4 5 6 ··· 11 다음
