[TIL] 20230713 - React Query update mutate 인자 넘겨주기/ json server: Glitch/Vercel로 프로젝트 배포하기

React Query  patch 인자값을 넘겨줄때, id랑 update할 데이터 이렇게 두개의 인자로 넘겨줬다.

그런데 계속 안됨.... 알고보니 인자값을 두개를 넘겨줄 수 없다! 하나의 객체 형태만 넘겨줄 수 있음 ㅠㅠ 

 

▼ 잘못된 코드

 

const updateTodo = async ({ id, updateData }) => {

    console.log('updateData', updateData);

    await axios.patch(`${process.env.REACT_APP_SERVER_URL}/todos/${id}`, updateData);

};

 

 

 // todo api

const updateTodo = async (id, updateData) => {

    await axios.patch(`${process.env.REACT_APP_SERVER_URL}/todos/${id}`, updateData);

};

 

▼ 수정 코드

 

   const updateTodoHandler = (e) => {

        e.preventDefault();

        const updateData = {

            ...thisData,

            title: title,

            contents: contents

        };

        mutationUpdate.mutate(updateData);

        toggleModal();

    };

 

 

 // todo api

const updateTodo = async (updateData) => {

    await axios.patch(`${process.env.REACT_APP_SERVER_URL}/todos/${updateData.id}`, updateData);

};

 

 공식 문서 잘봐라...............

 

---

 

 

 json server: Glitch/Vercel로 프로젝트 배포하기 

Glitch에 server배포

• JSON서버(API) 배포하기

1. 깃허브(github) JSON server 레퍼지토리 생성

🔗git repo

위 링크 들어가서 Use this template해서 내가 사용할 레퍼지토리를 생성한다.
db.json을 위한 API서버지 프로젝트 레퍼지토리 아님!!!

 

JSON 서버를 Vercel에서 배포하기 위한 세팅이지만 Glitch도 github의 레퍼지토리를 가져오는 기능이 있어서 그대로 사용해도 무방

 

2. 초기값 설정(initialState 가져오기)

복사해온 레포에 db.json 파일을 내가 설정할 초기값으로 데이터들을 변경한다.

glitch에 배포한 다음 glitch에서도 db.json 변경이 가능하다

 

3. Glitch에서 배포하기

glitch 가입/로그인 후에오른쪽 상단 new project에 import from github 에  1.에서 만든 내 깃허브 json 레포 주소를 복붙한다

 

그럼 바로 배포 완료! 

glitch 대시보드에서 배포된 내프로젝트를 누른뒤 우측상단 share버튼 클릭!

live site 주소를 복사한다

프로젝트 .env 파일에 server 주소를 glitch 에서 가져온 live site 주소로 변경한다.

 

REACT_APP_SERVER_URL = https://experienced-plausible-sundial.glitch.me

.env는 vercel 배포시에 등록해줘도 된다.

.env 는 어차피 github에 올라가지 않도록 설정해뒀으니!

작업하는 동안은 localhose 주소를 넣어둬도 작업할때 용이

 

 

.gitignore 파일에

.env

.db.json 

이두개를 추가해둔다. db는 어차피 glitch로 배포할거니깐!

 

그리고

Vercel에 앱 배포!!!

https://newheee.tistory.com/49

버셀배포방법은 위 링크에 있다! ㅎㅎㅎ

 

버셀에서 프로젝트 setting 탭에 들어가서 Envierment variables 탭에 가서

env 넣는부분에 아까 glitch 에서 복사해온 live site 주소 넣으면됨!

 

 

 

배포 참고 https://velog.io/@elle2elle/Redux-%EB%B0%B0%ED%8F%AC