18일차 ( aSynchronous, REST API, Redux-Toolkit)

동기적 방식(Synchronus)

 => 현재 실행 중인 코드가 끝나가 다음 코드 실행

 

비동기적 방식(asynchronous)

=> 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식

 

비동기적 방식 사용 이유

=> 콜백지옥 문제를 해결하기 위해: 콜백지옥 과정이 반복되면 가독성, 수정에 어려움

 

Promise

1. 앞으로 비동기 프로그래밍을 다룬다는 것은 곧 Promise 객체를 다룬다는 의미와 일치한다고 봐도 됨

2. Promise 객체: 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄

3. Promise 객체에 담기는 주요한 상태정보
    1) 대기(Pending): 요청한 직후의 상태
    2) 이행(Fulfilled): 데이터를 localhost한테 성공적으로 전달한 상태
    3) 거부(Rejected): 이유는 모르지만 localhost에게 데이터를 전달 못해준 경우
    
4. Promise 객체 핸들링 방법
    1) Then ~catch: 성공하면 then 구문 실행, 실패하면 catch 구문 실행
    2) Async / await: () 앞에 항상 async가 항상 붙어야 하며,
    이 함수는 비동기 로직 앞에 await를 붙여야하고, 이 구분이 끝날때까지 다음 줄이 실행 안됨

 

---

Rest(REpresentational State Transfer) API

 

개념

1. 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP Method(GET, POST, PUT, DELETE)를 사용하여 
   요청을 보내는 것

2. URI를 통해 정보의 자원을 표현하고, 자원의 행위를 HTTP Method로 명시하는 것

3. RestFul하다: REST API의 까다로운 조건을 만족시킨 통신 설계 상태

4. RestFul하지 못한 경우
	1) CRUD의 기능을 모두 POST로만 이용하는 경우
	2) URI에 행위에 대한 부분이 들어가는 경우
    
5. Path Variable VS Query Parameter
	1) Path Variable: 경로 자체에 변수를 사용, 리소스를 식별하기 위해 사용
	2) Query Parameter: 데이터를 정렬하거나 필터링 하는 경우 적합

 

예시

1. Bad: GET /members/delete/1 

2. Good: DELETE/ members/1 <= 뒤에 의미없는 동사 넣지 않기

 

규칙

1. URI는 명사를 사용하고 소문자

2. 명사는 복수형을 사용

3. 명사의 마지막에는 /를 포함하지 않음

4. 언더바가 아닌 -를 사용

5. 파일 확장자(.js, .png)를 표시하지 않음

 

JSON(JavaScript Object Notation)

1. 구조: 자바스크립트 객체 리터럴 작성법을 따름

2. 메서드(Js 객체 <-> JSON 형태)
    1) JSON.stringify({ x:5, y:6}) ->   output: “{“x” : 5 , “y” : 6}” <== js를 JSON으로
    2) parse() : JSON 문자열 -> JS 객체

{JSON} PlaceHolder: 가짜 서버(프론트 엔드 테스트)

 

---

Redux-Toolkit

redux-toolkit을 사용하면 action-Creater와 reducer을 합친 형태로 표현할 수 있음

// action-Creater
export const addTodo = (payload) => {
   return {
     type: ADD_TODO,
     payload,
   };
};

// reducer
const todos = (state = initialState, action) => {
   switch (action.type) {
     case ADD_TODO: // 기존의 배열에 입력받은 객체를 더함
       return [...state, action.payload];
       
두 개를 합친 형태를 createSlice를 사용하여
const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    
위와 같이 표현할 수 있으며, name, initialState, reducers는 필수적으로 입력돼야 하는 값임

이렇게 만들어진 creater와 reducer를 아래와 같이 export하면 됨
// creater를 내보내기
export const { addTodo, removeTodo, switchTodo } = todosSlice.actions;
// reducer를 내보내기
export default todosSlice.reducer;

이때 configStore도 수정이 필요한데,

// 기존 방법
const rootReducer = combineReducers({
   todos,
 });
const store = createStore(rootReducer);

// ------------------------------------------------------------------------
// toolkit 사용 방법: configureStore를 사용해서 store를 구성하면 되고, 형식은 아래와 같음
const store = configureStore({
  reducer: {
    todos: todos,
  },
});