[TIL] 230704

redux toolkit

설치

npm install @reduxjs/toolkit
yarn add @reduxjs/toolkit 

• configureStore()

const store = configureStore({
    reducer: {
        counter: counter,
    }
});

export default store;

• createSlice()
  모듈 내에서 사용한다.

    const 변수 = createSlice({
        name:'',
        initialState:'',
        reducers:{
            함수1: (state, action) => {
                동작1
            },
            함수2: (state, action) => {
                동작2
            },
        },
    });
    
    export default 변수.reducer;
    export const {함수1, 함수2} = 변수.actions

• flux 패턴
  MODEL 과 VIEW의 흐름을 단방향 흐름으로 변경하여 디버깅하기 쉽게 만든 패턴
  단방향 데이터 흐름 unidirectional data flow
  

Action: type + payload 가지고 있는 함수 생성자

Dispatcher: callback, action생성자가 데이터를 넘겨주면 여러 store에 action을 보내준다.

store: 상태 및 관련 로직, 중앙관리소와 같다.

controlloer view: 상태를 가져오고 화면 렌더링

파일 정리

다음에 프로젝트 작업할 시 다음과 같이 폴더를 깔끔하게 구분하기!!

json-server

• 설치

yarn add json-server

• 포트 지정 하여 실행

yarn json-server --watch db.json --port 3001

• db.json
  root 지점에 db.json 파일 생성하고 데이터를 작성

HTTP

HTTP 프로토콜: 약속
Client → 요청 → Server
Server → 응답 → Client

• url 구성
  

• 메서드
  client가 server에게 요청하는 메서드
  GET, POST, PUT, PATCH, DELETE
  

• 상태코드

  • xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
  • 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
  • 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
  • 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
  • 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.

Axios

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

yarn add axios

• axios 사용해보기!

  const [todos, setTodos] = useState(null);
    const fetchTodos = async () => {
      const response = await axios.get("http://localhost:4000/todos");
      
      setTodos('res',response);
    };
  
    useEffect(() => {
      // db로 부터 값을 가져와야 한다.
      fetchTodos();
    }, []);

response를 구조분해 할당을 이용하여 변경할 수 있다.

const {data} = await axios.get("http://localhost:4000/todos");

• optional chaining
  fetchTodos가 비동기 방식이라 새로고침 시 return문은 통신을 기다려주지 않아서 에러가 발생한다.

    return (
        <>
          <div>
            {todos?.map((item) => {
              return (
                <div key={item.id}>
                  {item.id} : {item.title}
                </div>
              );
            })}
          </div>
        </>
      );

useSelector로 받아온 값이 기다려 주지 않는 것을 해결할 수 있다.
?. 연산자를 사용하면 된다.

평가대상이 undefined나 null이면 멈추고 undefined를 반환한다.

• json 방식의 DB
  id속성이 자동으로 입력된다.

  {
        "title": "new todo2",
        "id": "HyZIMKc"
      }

  강의와는 다르게 임의의 id값이 입력되는 것을 확인할 수 있다.

  → 다른 id를 문자열로 해두어서 문자로 인식하여 일정 값을 넣었기 때문이였다.
  

• 인자를 보낼 때 비동기 통신 관련 주의

  <button onClick={() => onDeleteButtonClickHandler([item.id](http://item.id/))}>삭제</button>

  다음과 같은 것을 실행할 때 한번 () ⇒ 로 감싸주어야 한다.

  렌더링 과정에서 함수를 실행해버리기 때문에 함수호출 → 렌더링 이 된다.
  

메서드

• axios.get(url)
• axios.post(url, value)
• axios.delete(url/${지울 key})
• axios.patch(url/${수정 key}, 수정할 내용)

통신에 대해 배우면서, 뉴스피드 프로젝트를 진행했을 때 발생했던 오류들을 어떻게 고쳐야 할지 아이디어들을 얻을 수 있었다.
예를 들어, optional chaining, onclick에 () => 로 한번 감싸주어야 함수 호출-> 렌더링을 방지할 수 있다는 점이 있다.
json형태 db에서 문자열로 했을 때 생각한 id로 들어가지 않았다는 점에서 데이터 형식의 중요성을 다시한번 깨달을 수 있었다.