Today I Learn # 39 < React-redux toolkit 2 >

  개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지

 

React toolkit 팀프로젝트 진행중, 내가 맡은 기능들 구현을 시도해봐야함!

 

  오늘 새로 배운 내용

 

<<< Axios >>>
node.js와 브라우저를 위한 Promise 기반 http 클라이언트

Axios 설치

yarn add axios

<GET>
get은 서버의 데이터를 조회할 때 사용

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
// config는 axios 공식문서에서 확인하세요.

axios.get(url[, config]) // GET

예)

// src/App.js

import React, { useEffect, useState } from "react";
import axios from "axios"; // axios import 합니다.

const App = () => {
  const [todos, setTodos] = useState(null);

// axios를 통해서 get 요청을 하는 함수를 생성합니다.
// 비동기처리를 해야하므로 async/await 구문을 통해서 처리합니다.
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:3001/todos");
    setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set 합니다.
  };

// 생성한 함수를 컴포넌트가 mount 됐을 떄 실행하기 위해 useEffect를 사용합니다.
  useEffect(() => {
// effect 구문에 생성한 함수를 넣어 실행합니다.
    fetchTodos();
  }, []);

// data fetching이 정상적으로 되었는지 콘솔을 통해 확인합니다.
  console.log(todos); // App.js:16
  return <div>App</div>;
};

export default App;

<POST>
axios.post(url[, data[, config]])   // POST
post는 보통 서버에 데이터를 추가할 때 사용합니다. 다만 post 요청에 대한 로직은 BE 개발자가 구현하는 것이기때문에 추가외에 다른 용도로 사용될 수 있지만, 보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용

 

  회고

 

- 오늘부터 팀 프로젝트를 시작했다. 팀장님 주도하에 팀원들의 의견들을 종합하여 S.A.를 제출했다. 차근차근 다시 복습하면서 기능들을 구현해보도록 노력해봐야겠다! 

 

  To-Do List

 

- Redux toolkit으로 CRUD 구현하기(json server사용)