02 - 18

오후 : 강의시청

특이사항

리덕스 툴킷

리덕스 활용에 도움이 되는 툴을 모아둔 키트. 기존 코드를 단순화시키는 방법으로 작동한다.(또 외워야 할 것이 늘어난다...)

 

일반 리덕스에서는 Ducks 패턴을 사용할 때 액션 벨류와 생성자를 만들고 리듀서에 switch case로 할당하는 방식을 썼다. 하지만 툴킷의 createSlice를 임포트한 다음

const 원하는슬라이스 = createSlice({
name: ,
initialState ,
reducers:{
 원하는리듀서기능1 : (state, action) => {원하는 기능 적어넣기},
 원하는리듀서기능2 : (state, action) => {원하는 기능 적어넣기},
 원하는리듀서기능3 : (state, action) => {원하는 기능 적어넣기},
},
});
export default 원하는슬라이스.reducer
 

의 모양새로 정리한다. 밑의 export는 액션 크리에이터로 export할 때와 달리 상당히 간략화되어있다.

 

Json server

아주 간단한 DB와 API 서버를 생성시켜주는 패키지. 보통 백앤드가 실제 DB와 API 서버가 완성되기 전까지 임시적으로 사용할 mock Data 생성을 하기 위함이다.

쉽게 말해 시연을 위한 가설 서버라고 보면 된다.

실행하는 법은 제이슨 서버를 추가한 뒤

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

이런 명령어를 쓴다. db.json이란 것을 db로 삼고, 3001포트에서 서버를 실행한다는 뜻이다.

DB.Json 파일을 열어보면 예시용 자료들이 있는데, 일단 여기다

  ,"Test01":{
    "id": 1,
    "title": "json-server",
    "content": "json-server를 배워봅시다."
  }

를 추가하고 URL에 http://localhost:3001/Test01를 입력하면 해당 자료를 볼 수 있다. 브라우저 주소에 URL을 입력한다는 것은 GET 요청으로 내가 만든 제이슨 서버에 GET요청을 한 것이다.

그럼 이걸 어떻게 연결하지?.........

 

 

기타사항

어제 건강검진을 받는데 경과가 썩 좋지 못하다.....콩팥 수치가 꽤나 위험한 수치라고 한다. 피로와 요요가 겹쳐서 이렇게 된 것이 아닌가 싶은데, 하...........크런치 모드도 아니고 잠 좀 줄이고 의자에 좀 오래 앉은지 한 달 되었는데 벌써 이러면 나 사회생활 어떻게 하냐...