[Develog] Glitch로 json-server 배포하는 방법

 

심화 프로젝트 S.A

 

이번 프로젝트에서 한 일

1. 로그인 페이지 구현

처음 SA를 작성할 때 칸반보드 아이디어를 짜다보니 로그인 기능이 꼭 필요하다고 생각했다.
그래서 파이어베이스를 활용하여 이메일 로그인, 구글 로그인 기능을 구현하였고 thunk과 redux를 이용해 데이터를dispatch하여 json-server에 저장되도록 하였다. 
하지만 로그인 기능을 구현하고 나니 마이페이지도 필요하다고 생각되어 필수 기능이 아님에도 마이페이지를 구현하게 되었다.

2. 마이 페이지 구현

fileChange 함수로 파일을 변환하고 storeImg 함수로 파이어스토어에 저장한다.

3. 사이드바에서 로그아웃 기능 구현

 

4. 배포

처음에 버셀에서 json-server배포 및 프로젝트 배포를 진행했는데 데이터가 들어가긴 하는데 새로고침을 하지 않으며 재 렌더링이 이루어지지 않는 문제가 발생했다. 이게 read-only 에러였는데....
버셀로 json-server를 쓰면 read-only 에러가 발생하는 경우가 많다고 했지만 아닐 가능성도 있다고 생각해서 꾸역꾸역 하루종일 버셀로 해봤는데... 데이터가 들어가길래 read-only에러는 아니고 코드가 잘못된줄 알았다
하지만 결국... 튜터님도 이거 쓰지 말라고 하셨구..
Glitch로 갈아타니 아주아주 쉽게 5분만에 해결되었다..
하루를 날렸던게 너무 아쉬웠지만 좋은 경험이라고 생각한다.

Glitch 글리치로 json-server 사용하는 방법

GitHub - jesperorb/json-server-heroku: Deploy json-server to Heroku & Glitch & Azure

이 git으로 json-server를 배포한 후에 프로젝트에서 로컬로 지정했던 url을 배포한 url로 수정해주면된다.