23.07.04
1. Redux Toolkit
Toolkit : 어떤 일을 간편하게 하기 위한 도구들의 모음
Redux Toolkit : Redux를 간편하게 사용하기 위한 패키지
1-1. 기본 Redux와 Redux Toolkit의 차이 🔆
기본 Redux
- 기본 redux 에서는 configStore 파일 안에서 combineReducers로 모든 모듈들을 합침
- rootReducer에 담고 rootReducer를 통해 store를 create 해줌
- create한 store는 밖으로 내보내서(= export) index.js에서 Provider API(= 문법)를 통해서 App 컴포넌트로 주입시켜줌
- reducer는 modules 폴더 안에서 만들어지는데 reducer를 만들기 위해선 Action Value와 Action Creator가 필요함
=> 사실 App.js 안에서 dispatch할 때 바로 Action Value를 만들 수 있으나 ‘휴먼 에러’를 줄이기 위해 Action Creator를 이용함
근데 이제 Redux Toolkit을 사용하면
(1) configureStore를 사용하여 configStore를 간편하게 구성할 수 있고,
(2) createSlice를 사용하여 reducer와 Action Creator를 간편하게 만들 수 있음
Redux Toolkit
- toolkit에서 제공하는 configureStore API를 사용하여 store를 간편하게 만들고 내보냄(= export)
const store = configureStore({
reducer: {
counter,
},
});- 그리고 modules 파일 안에서는 toolkit에서 제공하는 createSlice API를 사용해서 reducer와 actions를 내보냄(= export)
const counterSlice = createSlice({
name: "counter",
initialState,
reducer: {
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});
export default counterSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;여기서 actions는 addNumber, minusNumber를 의미하고,
const { addNumber, minusNumber } 이렇게 밖으로 내보내줌으로써 action creator로 사용할 수 있음 !
=> 즉, createSlice는 action creator 뿐만 아니라 reducer도 만들어 내고 이로 인해 action value가 필요없어짐
두번째 예시
const todoSlice = createSlice({
name: "todos",
initialState,
// reducer가 자동으로 만들어짐과 동시에 action creator도 만들어짐
// reducer 아니고 reducers !!!!!!!!!!!!!!!!!
reducers: {
addTodo: (state, action) => {
// return [...state, action.payload];
state.push(action.payload);
},
removeTodo: (state, action) => {
return state.filter((item) => item.id !== action.payload);
},
switchTodo: (state, action) => {
return state.map((item) => {
if (item.id === action.payload) {
return { ...item, isDone: !item.isDone };
} else {
return item;
}
});
},
},
});
export const { addTodo, removeTodo, switchTodo } = todoSlice.actions;
export default todoSlice.reducer;이처럼 아래 3가지를 한 번에 할 수 있는 createSlice API를 제공하는 redux toolkit
- export action creator
- export reducer
- action value
1-2. react에서는 렌더링을 시키기 위해 불변성을 유지시켜야 됨 🔆
즉, return [...state, action.payload]; 이런식으로 새로운 객체를 리턴해줘야 함
그러므로 state.push[action.payload] 이러한 방법은 불변성을 지켜주는 것이 아니기 때문에 안되는데
redux toolkit 안에는 immer 라는 기능이 내장되어있어서 push를 해도 렌더링이 됨 ....!
=> doesitmutate를 참고하면 불변성을 유지시켜주는 메서드인지 아닌지 확인할 수 있다 !!!!!!!!!!!!!!!!!
1-3. Redux Devtools
1-4. Flux 패턴
2. json-server 🔆
Backend에서 실제 DB와 API Server가 구축될 때까지 Frontend 개발에 테스트로 사용할 (mock data = mock server = fake server)를 생성하기 위해 => json-server를 사용 !
즉, json-server란, (테스트 용으로 사용할) 아주 간단한 DB와 API 서버(= mock data)를 생성해주는 패키지
yarn add json-server 패키지 설치 필요 !
설치하고 나면 package.json의 dependencies(= 종속 항목) 안에서 확인 가능
+) json 형태와 객체 형태는 “ “의 유무로 구별할 수 있음 ..!
json-server는 리액트와는 별개로 따로 실행을 해줘야 함.
다시 말해 리액트도 start하고, json-server도 start 해야 함. 그래야 리액트와 json-server가 서로 통신 가능.
yarn json-server --watch db.json --port 4000
위 명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 4000 포트에서 서버를 시작하겠다는 뜻
3. HTTP
통신 = 대화 !
웹 프로그래밍 세계에서도 HTTP 통신 즉, 대화가 필요한데 … 누구와의 대화냐 ? 바로 서버(= 웹 서버) <-> 클라이언트(= 웹 브라우저)의 대화 !!!!!
- 사람 <-> 사람 / 대화 방법 : 말, 몸짓, 표정 …
- 서버 <-> 클라이언트 / 대화 방법 : 데이터
HTTP 통신(= 웹 통신)은 약속(= 프로토콜)에 의해서 주고 받고, 이로 인해 오해 즉, '오류'가 없음
웹에서 서버 <-> 클라이언트 간 주고 받은 상호간의 약속(= 프로토콜)을 ‘HTTP 프로토콜’이라 함 !
요청(Request) <-> 응답(Response)
클라이언트는 서버에게 계속 요청하고, 서버는 클라이언트에게 계속 응답함
3-1. URL
예시 https://www.hostinger.in/tutorials/what-is-a-url
- https:// : Protocol
- www. : Subdomain
- hostinger.in/ : Domain name
- tutorials/what-is-a-url : path / Page
3-2 . URL
HTTP 프로토콜은 약속인데
이 약속에는 여러가지 종류들이 있고 이를 메서드라고 칭함 !
메서드 : GET - 조회 / POST - 생성 / PUT, PATCH - 수정(변경) / DELETE - 삭제
=> 클라이언트가 서버에 어떠한 종류의 요청을 할 것인가 !
(참고 링크)
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
3-3. 상태 코드
상태 코드 : 클라이언트가 서버에 요청하고 나면, 서버는 그에 맞는 응답(response) (=> Promise 객체)를 반환하는데, 이때 응답(response)은 상태 코드를 갖고 있음 !
1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. => 클라이언트의 요청이 잘못
5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. => 서버의 잘못
