Axios
: node.js와 브라우저를 위한 Promise 기반 http 클라이언트로, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다. API서버를 호출하여 데이터를 요청하기 위해서는 axios가 필요하다. 우리는 Axios를 이용해서 API서버와 통신할 수 있다. ( 브라우저의 네트워크 탭 확인 )
설치하기
yarn add axiosGET
: 서버의 데이터를 조회할 때 사용한다.
기본구조
axios.get(url[, config])사용방법
const fetchTodos = async () => {
const { data } = await axios.get("http://localhost:3001/todos");
setTodos(data);
};- axios를 통해서 get 요청을 하는 함수를 생성한다.
- 비동기처리를 해야하므로 async/await 구문을 통해서 처리한다.
- 서버로부터 fetching한 데이터를 setTodos로 바꿔준다.
POST
: 서버에 데이터를 추가할 때 사용한다. post요청에 대한 로직은 백엔드 개발자가 구현하는 것이라 추가 이외의 다른 용도로 사용될 수 있지만, 보통 클라이언트의 데이터를 body 형태로 서버에 보내고자 할 때 사용한다.
기본구조
axios.post(url[, data[, config]])사용방법
const onSubmitHandler = async(todo) => {
await axios.post("http://localhost:3001/todos", todo);
setTodos([...todos, todo])
//4. 새로고침해서 진짜 현재 서버 데이터를 받아오기전에 상태를 똑같이 동기시켜줌
//5. 어떻게보면 유저한테 서버에서 새로 받아온것처럼 속이는거지
};- onSubmititHandler가 실행되고, axios.post가 실행될 때까지는 투두리스트가 추가되지 않는다.
- 새로고침해서 진짜 현재 서버데이터를 받아오기 전의 상태를 유지시켜준다.
- 서버요청이 끝난 후에 투두리스트가 추가됨으로써 서버에서 새로 받아온 것 처럼 보이도록 하는 것
DELETE
: 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용
기본구조
axios.delete(url[, config])사용방법
const onClickDeleteButtonHandler = (todoId) => {
axios.delete(`http://localhost:3001/todos/${todoId}`);
};PATCH
: 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드
기본구조
axios.patch(url[, data[, config]]) // PATCH사용방법
const onClickEditButtonHandler = (todoId, edit) => {
axios.patch(`http://localhost:3001/todos/${todoId}`, edit);
};.env
: env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법으로, API서버의 IP 또는 URL을 숨겨서 처리한다.
사용방법 : env 파일 생성 => 환경변수를 key,value형식으로 입력 (key 앞에는 무조건 'REACTAPP'붙이기)
불러오기 : import없이 process.env.REACTAPP변수명으로 불러온다.
오늘은 심화강의를 쭉 훑어봤다. 아직은 이해가 완벽히 되지 않은 부분들이 많아 다 정리하지 못했다. 그래도 오늘은 axios를 이용해서 API서버와 통신하는 법을 자세하게 구글링하며 보았다. 대충은 이해가지만, 여러 번 사용해보면서 익혀야지 완벽히 안다고 할 수 있을 것 같다. 이외의 시간은 직접 Redux 투두리스트를 만들어보면서 데이터 흐름에 익숙해지는 연습을 했다. 이제야 좀 redux흐름이 눈에 들어오는 것 같아 뿌듯했다.
