백엔드 없이 프론트엔드 혼자 사이드 프로젝트 배포까지!
많은 프론트엔드 개발자 분들이 지금까지 배운 내용들을 복습하는 개념으로 처음부터 끝까지 혼자 해보고 싶으신분들이 계실겁니다! 하지만 우린 백엔드 지식이없죠 ㅠ 그래서 백엔드없이 HTTP요청을 보낼수도있고 db에 저장도되고(흉내내는) 배포까지 하는 걸 알려드리겠습니다.!!
첫번째 . json-server 의 이해
json-server 란 백엔드없이 라이브러리를 설치해 HTTP API 요청,응답을 연습해볼수있고 db도 흉내낼수있습니다.
https://github.com/typicode/json-server
GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)
Get a full fake REST API with zero coding in less than 30 seconds (seriously) - GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)
github.com
위 깃허브로 가서 어떻게 요청을 보내고 응답을 받는지 일단 서버배포전에 한번 연습해보세요 정말 쉽고 간단합니다.
두번째 . glitch 에 나의 json-server 를 배포
저는 여기부분에서 상당히 헤맸었습니다. 구글링을 해본결과 여러가지 방법이 있엇는데 heroku는 유료로 전환이 되었으며 vercel 에 json-server를 배포하면 patch,put 요청시 read-only 에러가 발생하여 불가합니다.
그래서 찾고 찾은게 바로 glitch!!!
Glitch: The friendly community where everyone builds the web
Simple, powerful, free tools to create and use millions of apps.
glitch.com
바로 설명 들어가겠습니다!
1. 나의 json-server 레포지토리 생성 하기
밑의 링크로 이동해주세요 그 다음 Use this telplate 를 눌러 그대로 똑같이 레포지토리를 하나 만들어줍니다.
https://github.com/kitloong/json-server-vercel
2. glitch 에 배포하기
생성된 나의 레포지토리에 가서 HTTPS에 나와있는 주소를 복사해주세요 ex) https://github.com/example/123test.git
https://glitch.com/ 로 이동한후 회원가입을 하신다음 New project -> Import from Github -> 복사했던 주소 붙여넣기 배포끝!
배포가 성공적으로 됐다면 이런 화면이 보여질거에요! 그럼 오른쪽 상단 Share 를 클릭후 Live site 를 확인해주세요 이 주소가 이제 저희가 보낼 api 요청 주소가 됩니다. (사진에 어피치가 붙어있는곳)
자 이제 백엔드는 끝났습니다 원래라면 json-server 는 로컬에서만 작동되기때문에 배포를 하게된다면 배포된 도메인에선 작동이 되지 않기때문에 glitch 를 활용하여 서버를 배포해주는 것 입니다!
ps. 요청을 보낸다고해서 바로 db.json 에 반영이 안될수도 있습니다. 하지만 제대로 작동은 되는것이니 걱정하지마세요!
세번째. 내 프로젝트 vercel 에 배포해보기
vercel 이란 프론트엔드 호스팅 사이트입니다. 로그인하실떄 깃허브로 로그인하시면 바로 나의 레포지토리와 연동이 가능하기때문에 깃허브로 로그인 하시는걸 추천드립니다 .
깃허브로 로그인 하셨다면 사진처럼 레포지토리가 바로 보이는데요 저기서 내가 배포할 레포지토리를 그냥 import 해주면 끝입니다.
vercel 의 좋은점은 수동으로 배포를 개발자가 직접 시켜주는것이 아닌 내가 배포한 레포지토리에 push 를하면 자동배포가 된다는점입니다.
마지막으로 추가적으로 .env 환경변수를 사용하여 api 주소를 사용하신분들은
배포된 프로젝트 setting 에 가셔서 환경변수명,주소 를 키밸류값으로 적절하게 넣어주시면 됩니다
environment-variables 탭으로 가서 key에는 내가사용한 변수명 ex)REACT_APP_API_URL 을 넣어주시면되고 value 에는 아까 위에서 우리가 만들었던 glitch live site 주소를 넣어주시면 됩니다.
요건 제 프로젝트가 잘 배포된 모습이며 왼쪽클릭시 해당 도메인으로 이동이 됩니다! 물론 http 요청 응답도 잘되구요!
혹시 이해가 잘안되시거나 궁금한점있으시면 댓글남겨주시면 답변해드리겠습니다.
새벽에 적는 글이라 뒤죽박죽인거같지만 ... 저와같은 어려움을겪으신분들은 꼭 답을 찾으셨으면좋겠네요.
'problem-solving' 카테고리의 다른 글
| Viewport 에 따른 컴포넌트 다이나믹 렌더링 (0) | 2023.09.15 |
|---|---|
| React-query 서버데이터 커스텀 (useQuery with select) (1) | 2023.05.14 |
| 백엔드없이 사이드프로젝트 로그인,회원가입 기능 구현 feat.json-server-auth (0) | 2023.04.01 |
| 사이드 프로젝트 React-query 도입 계기 및 사용 후기 (0) | 2023.03.21 |
