리덕스 toolkit

:새로운 것이 아닌, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이다.
바뀐 부분은 모듈 파일 뿐!

기존 코드

// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload,
  };
};

export const minusNumber = (payload) => {
  return {
    type: MINUS_NUMBER,
    payload,
  };
};

// Initial State
const initialState = {
  number: 0,
};

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

// export default reducer
export default counter;

toolkit 사용

// src/redux/modules/counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

configStore.js

import { configureStore } from "@reduxjs/toolkit";
import task from "../modules/task";

const store = configureStore({
  reducer: { task: task },
});
export default store;

1.action value와 action creator모두 없어진다.
2.리듀서 대신 createSlice로 객체들을 변수에 담는다.
3.name과 initialState, reducer가 요소로 들어가게 되고,
4.리듀서 안에 각각 하나씩 action을 넣어주면 된다.
+근데 여기서 사실, 리덕스 toolkit은 불변성을 지켜주기 때문에 return문 안에 꼭 담아서 반환해 줄 필요는 없다.

기존 코드

const todos = (state=initialState, action) => {
 switch(action.type) {
   case ADD:
    return {
    ...state,
    todos: [...state.todos, action.payload],
  };
 }
}

toolkit사용

const taskSlice = createSlice({
  name: "task",
  initialState,
  reducers: {
    add: (state = initialState, action) => {
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    },
    })

리덕스 devtool

:리덕스를 사용하면 편하게 사용할 수 있는 개발 툴이다.
현재 프로젝트의 state상태나, 액션이 일어났을 때 그 액션이 무엇이고 그것으로 인해 state가 어떻게 변경되었는지 등에 활용할 수 있다.

json-server

:DB와 API서버를 생성해주는 패키지이다.
백엔드에서 DB와 API서버가 구축될 때까지 프론트엔드가 개발에 임시적으로 사용할 mock(fake) data를 생성하기 위함이다.
yarn add json-server

HTTP

프로토콜
:서버와 클라이언트가 대화하기 위해 서로 약속된 방식을 프로토콜이라고 한다.
웹에서 서버와 클라이언트가 상호간에 주고 받은 약속을 HTTP 프로토콜이라고 한다.

요청과 응답

:서버와 클라이언트가 서로 데이터를 주고 받기 위해서는 항상 요청을 해야하고, 그에 따른 응답을 받는다.

메서드
GET : 조회
POST : 생성
PUT, PATCH : 수정(변경)
DELETE : 삭제

응답 종류
100~ : 정보, 요청을 받았으며 프로세스를 계속 진행한다는 뜻
200~ : 성공, 요청을 성공적으로 받았으며 인식했고 수용했다는 뜻
300~ : 리다이렉션, 요청 완료를 위해 추가 작업 조치가 필요하다는 뜻
400~ : 클라이언트 오류, 요청의 문법이 잘못, 혹은 요청을 처리할 수 없다는 뜻
500~ : 서버오류, 서버가 명백히 유효한 요청에 대한 충족을 실패했다는 뜻