📖 진행한 공부 📖
- react-query 삭제, 수정 구현
- json-server 배포
react-query(useMutation)을 이용한 삭제
AuthContext.jsx
해당 리스트를 삭제할 때도 addMutation 처럼 인자로 newList를 받으면 되겠다 싶어서 코드가 비슷하네? 라고 생각했다
큰 착각이었다. 왜 삭제가 안되는 걸까 의문에 사로잡혀서 30분을 넘게 고민했는데 정답은 가까이 있었다
전에 삭제 기능을 만들었을 때 item.id가 id와 같지 않은 경우에만 해당 item을 removeList에 포함시키는 새로운 배열을 생성하는 로직을 보고 느낀 게 아! 매개변수로 newList를 받을 게 아니라 id를 받아야 하는 구나
그리고 상세페이지의 url을 보면 뒤에 해당 리스트의 id가 나오고 있으니깐 url 부분도 수정을 해주면 될 거 같다
이것이 수정 후 코드인데 과연 잘 작동을 할 것인지.. 제발 작동되게 해주세요
휴.. 이 방법마저 틀렸다면 난 아마 좌절에 빠졌을 지도(?)
db.json에서도 삭제가 잘 된 걸 보니 원하는 대로 구동하는 거 같음
react-query(useMutation)을 이용한 수정
AuthContext.jsx
수정 기능을 하고자 editMutation을 만든 후 Detail.jsx에서 useContext로 editMutation을 받아왔다
Detail.jsx
근데 코드를 적고 콘솔창을 확인해 보니 url/id가 undefined로 뜨는 것이다 도대체 뭘 잘못 쓴 건지 한참 찾아보고 구글링을 하다가 내가 정말 멍청한 실수를 했다는 걸 깨달았다
왜 그러냐면 위에 나는 AuthContext.jsx에서 작성한 코드처럼
const { id,...rest } = updatedExpense;
이렇게 객체 형태로 넣어줘야 하는데 쌩뚱맞게 list 배열을 map 메서드로 새 배열을 반환시키는 함수를 넣는 멍청한 짓을 하고 있었던 것..
그래서 기존의 editList는 주석처리를 한 후에 나는 객체가 필요하니깐 새로운 객체를 만들어서 editMutation.mutate()안에 넣어줬다
정상작동 성공!
json-server 배포
- 바탕화면에서 터미널을 실행시키고 json-server 배포를 위한 폴더를 생성해줌
mkdir [폴더명]- 폴더 안으로 이동
cd [폴더명]- nodejs 프로젝트 시작 (package.json 파일 생성)
npm init -y- vscode로 프로젝트 열기
code .- server.js 만들기
// server.js
const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults();
server.use(middlewares);
server.use(router);
server.listen(3000, () => {
console.log("JSON Server is running");
});- db.json 파일 만들기
{
"expenses": [] // 혹은 지출에 관한 이름은 편한 것으로 정해주세요.
}- package.json 파일에 scripts 설정
{
"scripts": {
"start": "node server.js"
},
"devDependencies": {
"json-server": "^0.17.4"
}
}-
위 과정을 완료 했을 경우 여러분이 만든 폴더 안에 db.json, package.json, server.js 파일이 있어야 함
-
json server 배포를 위한 새로운 github repository 를 만들고 1~8단계에서 완성한 코드를 push
-
glitch 회원가입 및 프로젝트 import 진행
glitch 홈페이지
- 홈화면 우측상단헤더에 New Project → import from Github
- 상세화면 우측상단헤더 Share → Live site 주소 (배포된 서버 API_URL)
이 순서대로 해서 배포까지 끝마쳤다!
개인과제를 제출하고나니 월요일에 시작했는데 벌써 금요일이라니 새삼 시간 빠르단 생각이 든다
시간은 빠르게 흐르는데 배우는 건 원하는 만큼 머릿 속에 들어오는 거 같지가 않아서 혼란스럽지만 마음을 다잡고 다시 집중해서 공부를 해볼까 한다
