React query #travellog

lionloopy·2023년 2월 23일

리액트query 프로젝트

프로젝트

목록 보기

2/2

travellog

:여행을 기록하고 관리하는 웹 페이지
먼저 페이지를 어떻게 나눌건지, 각 페이지에 어떠한 기능을 넣을건지를 러프하게 메모장에 적어넣고, 직접 손으로 페이지를 그려 기획했었다ㅎ_ㅎ

main

메인을 Page/Home.js로 두고, 안에 Layout 컴포넌트로 틀을 잡고,
body와 footer로 컴포넌트를 나눠서 차례대로 넣어주었다.
메인페이지의 기능은

기록하기 버튼 클릭 -> 기록하는 창으로 이동
내 기록함 들어가기 버튼 클릭 -> 기록한 리스트 조회 페이지로 이동

따라서 여기서 필요한 기능은 navigate로 이동하는 것 뿐

Log

Page/Log.js를 만들고 여기는 form과 input을 활용해서 Create를 구현하는 공간이다.
로그페이지의 기능은

타이틀과 컨텐트 입력 칸 => input과 state로 관리
input칸 유효성 검사 => 두 칸 모두 입력하지 않을 시 alert, 글자수 제한
기록한 정보 data로 저장 => axios로 db.json에 저장

따라서 여기서 필요한 기능은 useState를 useInput 커스텀 훅으로 바꿔 사용했고, 유효성 검사는 trim()과 maxLength를 활용했다.
기록 한 정보를 data로 저장하기 위해 api를 따로 팠고, 거기서 axios get, post를 사용하여 data를 넣어주고, useQuery를 이용해 정보를 불러와 useMutation으로 기록을 반영하도록 하였다.

List

Page/List.js를 만들고 여기는 기록한 data들을 빼와서 조회하고, 삭제하며, 상세페이지로 이동이 가능한 Read, Delete를 구현한 공간이다.
리스트페이지의 기능은

데이터 보여주기 => axios get 활용
버튼을 누르면 상세페이지로 이동하기 => Link
삭제하기 => axios delete 활용

따라서 여기서 필요한 기능은 useQuery로 데이터를 불러온다. 가져온 데이터를 활용하여 deleteHandler를 만들고 그 안에 useMutation을 활용해서 받아온 id에 따라 그 data를 삭제할 수 있도록 한다. 그리고 상세페이지로 이동하기 위해 Link를 활용한다.

Detail

Page/Detail.js를 만들고 여기는 각 상세페이지로 들어가서 데이터를 Read할 수 있음과 동시에, 수정이 가능하여 Update가 구현된 공간이다.
디테일페이지의 기능은

각 id에 따른 상세페이지 조회 => axios get
기록 수정하기를 누르면 수정 창이 뜸 => useState
input입력 후 수정하면 데이터가 바뀜 => axios patch

따라서 여기서 필요한 기능은 useEffect와 axios get을 활용해서 해당 데이터를 받아오고, axios patch와 useMutation을 활용해서 데이터를 수정한다. 이 때 payload값을 활용한다.

커스텀 훅

useState를 자주 사용하기 때문에 이것을 커스텀 훅으로 만들었다.
1.value와 setValue를 useState로 관리하고,
2.그 안에 handler를 만들어 setValue로 최신상태를 보여주도록 한다.
3.받아오는 값인 value와 handler를 묶어 useInput으로 만들면 끝!
그러면 다른 곳에서 useInput을 import해서 가져온 다음,

  const [title, onTitleHandler] = useInput("");
  const [content, onContentHandler] = useInput("");

이런식으로 사용할 수 있다.
그러면 바로 onChange에 onTitleHandler를 넣어주면 setValue(event.target.value)와 같은 귀찮은 과정을 거치지 않아도 된다.

만능 버튼

버튼의 기능은 같고, 많이 활용하게 되어 만능버튼을 만들게 되었다.
1.props로 받아올 것들을 구조분해 할당으로 묶어주고,
2.버튼에 넣어주면 된다.
3.그리고 공통스타일은 적용해주고
4.케이스에 따른 css는 switch문을 활용해서 적용해준다.
그러면 다른 곳에서 Button을 import해서 가져오고,

<Button onClick={updateHandler} label="수정" size="hover" />

<Button onClick={() => navigate("/log")} label="기록하기"
 size="medium" />

이런식으로 활용이 가능하다.

env

REACT_APP_SERVER_URL = http://localhost:4001

db.json

{
  "Log": [
    {
      "id": "a612pmr2rge",
      "title": "베트남",
      "content": "베트남으로 수정!"
    },
    {
      "id": "19a5ch6mayv",
      "title": "스페인 여행",
      "content": "스페인을 여행하다."
    }
  ]
}

API

api명세서
여행 기록하기 / log / POST /
기록 조회하기 / list / GET
기록 삭제하기 / list / POST
기록 상세보기 / list/:id / GET
기록 수정하기 / list/:id / POST

이런식으로 api를 설계했고, query를 활용해 데이터들을 쉽게 불러올 수 있었다.
query는 get / mutation은 post방식이라고 생각하면 편하다!
1.getLog: axios get으로 데이터를 불러오고 response에 담아준다. 우리가 필요한 것은 console.log로 찍어보면 data로 담겨져 있기 때문에 response에서 data만 반환하도록 한다.
2.addLog: 받아온 데이터를 추가하기 위한 과정이기 때문에 axios post를 활용하고, 그 뒤에 받아올 값을 적어준다.
3.deleteLog: 내가 클릭한 것의 id값에 대한 것만 삭제하기 위해 axios delete를 활용한다. 이 때 원래는 filter를 걸어 id 값을 찾아 비교하여 삭제하곤 했는데, 이 때는 받아올 id값을 넣어주면 된다.
4.updateLog: 받아올 id값을 넣기 위해 payload를 활용하고, 그 뒤에 수정할 정보에 대한 것들을 객체로 담아 보낸다.

배포

json서버 배포 -> env 수정 -> 프로젝트 배포 식으로 배포를 하였는데
vercel은 json sever가 get, read방식만 적용이 되어 배포된다고 하여
배포된 홈페이지가 작동이 되었다가 안 되었다가 하고 있다 ㅎㅏㅎㅏ..
하루 종일 배포만 붙잡고도 있어봤는데 히로쿠 유료를 사용하지 않는 이상 어려울 것 같아서 일단 local에서 잘 돌아가는 거 확인하고 프로젝트를 끝냈다.