[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 6. json-server 연결하기, reducer와 saga 흐름 파악하기

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial

 

 

 

 

 

게시글 저장 구현에 본격적으로 들어가기 전에 임시 서버를 띄워보도록 하겠다.

 

그나마 과정이 간단한 json-server를 이용해보려고 한다.

 

 

json server의 대략적인 내용은 이 블로그를 참조하면 좋다.

(나는 간단하게 쓸 거라 json-server가 어떻게 실행되는지 알아만 봤을 뿐 따라하진 않았다)

 

min9nim.github.io/2018/10/json-server/

[json-server] 30초 안에 RESTful API서버 만들기

 

 

 

 

 

 

 

root folder 바로 안에 (src 폴더 바깥을 의미함) board.json 파일을 만들어 준다.

 

 

{"board" : 
    [
        
    ]
}

 

 

 

그리고 rootfolder 위치에서 terminal을 연다.

 

npm start / yarn start 되어 있는 상태가 아니라면 바로 VSCode terminal에서 입력해도 된다.

 

입력할 내용은 다음과 같다.

 

 

npx json-server ./board.json --port 4000

 

4000번은 내가 임의로 부여한 포트번호이고 원하는 번호를 쓰면 된다.

 

 

 

 

 

완료되면 이렇게 뜬다

 

 

 

 

 

 

근데 terminal을 보면 npx: installed 가 써있다.

 

 

 

npx 가 무엇인지 구글링 해보면

 

npx is a npm package runner (x probably stands for eXecute). The typical use is to download and run a package temporarily or for trials. create-react-app is an npm package that is expected to be run only once in a project's lifecycle. Hence, it is preferred to use npx to install and run it in a single step.

 

출처: stackoverflow.com/questions/50605219/difference-between-npx-and-npm

 

 

 

 

npx는 임시적으로 패키지를 다운받아 실행시켜주는 경우 사용하는 명령어이다.

create-react-app 같이 단발성으로 끝나는 명령 같은 경우 npx를 사용하는 것을 권장한다.

 

 

 

 

만약 지금 페이지 만드는 과정을 하루만에 끝내버리거나 json-server를 여러번 실행시키지 않을 거라면 npx 명령어를 사용하는 것이 낫겠지만

하루에 json-server를 여러번 실행해야 한다면

 

 

npm install json-server --save

json-server --watch board.json --port 원하는 포트번호

 

 

이런식으로 json-server를 다운로드 받아 사용하는 것을 추천한다.

 

 

 

 

 

 

그리고 만들어놓은 json 파일이 웹상에서 어떻게 보이는지도 확인하고 싶다면

 

{"board" : 
    [
        
    ]
}

 

 

 

 

이런식으로 json-server에서 보여줬던 대로 웹에 주소를 복붙해서 들어가 보자

 

 

 

 

 

만들었던 내용대로 화면이 나타나는 것을 알 수 있다.

 

 

 

 

 

 

 

 

4편에서 만들어 놓은 RegisterPage 컴포넌트, rootSaga, articleSaga, articleSlice를 보며 지금 흐름이 어디까지 어떻게 진행되었는지 먼저 살펴보겠다.

 

 

게시물 등록화면에서 내용을 입력한 후 등록을 누르면

 

 

 

 

이 onSubmitArticle 이벤트를 타고 입력한 내용이 article에 담긴 후에 registerArticle 액션생성함수를 호출한다. 

이때 action payload로서 article 객체를 가져간다.

 

 

 

호출된 액션생성함수는 articleSlice의 registerArticle이고 아무것도 바뀌지 않게 만들어 놨다.

 

 

json-server 는 자동으로 id를 생성해주기 때문에 id 필드가 숫자로 꼭 있어야 한다.

 

 

안 그러면 id를 찾을 수 없다고 json-server 를 띄운 terminal 창에서 오류가 난다!

 

 

initialState에 어떤 숫자를 써놔도 insert할 때마다 json-server에서 자동으로 시퀀스를 매겨 들어간다.

 

 

 

그리고 rootSaga를 보면 registerArticle 액션생성함수가 호출(타입이나 함수 자체도 됨)된 것을 캐치하여 articleSaga의 registerArticleAsync를 호출하도록 만들어놨다.

 

 

 

 

 

 

 

그렇게 해서 호출된 articleSaga의 registerArticleAsync 함수를 보면

 

 

 

action.payload 값에 아까 같이 보내준 article 객체 값이 들어가 있는 것을 알 수 있다.

 

 

 

 

 

 

 

이제 data 라는 객체에 action.payload를 보관하여 registerArticleAsync 액션함수를 호출하면서 해당 액션 registerArticleAsync 의 payload로 data를 다시 보내준다.

 

put 은 redux-saga 버전의 dispatch라고 생각하면 된다.

 

 

 

 

 

 

 

 

호출된 registerArticleAsync 액션생성함수의 구조를 articleSlice에서 보면

위의 코드 상에서(console.log(payload)) payload 값으로 아까 articleSaga에서 보냈던 data가 들어와있음을 알 수 있다.

 

 

 

 

 

 

 

 

redux-toolkit을 중간에 사용하게 되면 기존에 쓰던 reducer 와는 리턴되는 key-value 구조가 약간 다르니 꼭 값이 어떻게 들어오는지 확인하는 것을 권한다.

 

 

 

 

 

값이 들어오는 것을 확인 했으니 다음에는 Axios 를 이용히여 데이터를 저장시켜보자!

 

 

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial