can't reslove

1. 🧐 문제/목표 파악 : can't reslove

리액트에서 서버없이 몽고DB atlas를 쓰려고 하던 중 에러 발생

 

 

 

1. 🎯 문제/목표 해결

될 턱이 없지 이 친구야. 그냥 node.js 환경에서 mongodb 라이브러리를 그대로 가져다 쓰면 리액트의 프론트엔드 처리에서 웹팩 관련해서 에러가 뜨지 않겠니....? 

결국 서버 역할을 할 수 있는 호스팅 사이트를 따로 만들어야했다. 하지만 aws는 돈이 너무 많이 나가고, budget 컨트롤이 안되므로...

Netlify function을 사용해 Severless 사이트를 만들어 호스팅하기로 했다.

 

https://jwdevv.tistory.com/34

[React + MongoDB + Netlify] Netlify Serverless 함수와 몽고DB를 사용해 리액트 프로젝트 무료로 호스팅하기

 

2.🧐 문제/목표 파악 : CORS

 

Netlify function으로 CRUD Api는 만들어놨는데, 프론트엔드에서 fetch를 못하고 cors에러가 떴다. 프론트 문제인지, 백엔드 문제인지 파악하기 위해 아무 웹사이트나 넣어봤더니 똑같이 cors에러가 난다. 즉 프론트에서 cors관련 핸들링을 해야한다.

 

2. 🎯 문제/목표 해결 

아무리 생각해도 프론트문제고, 리액트 문제인 거 같아서 해당 키워드로 검색해서 블로그 하나를 찾았다.

https://woochan-dev.tistory.com/94

리액트(React) CORS처리

위 블로그에서는 url를 프록시로 지정해 package.json에 설정하고, 나머지 엔드포인트를 axios를 통해 설정해주었는데, 그렇게 수정하고 프로젝트를 재시작하니 정상적으로 데이터를 들고 왔다.

3.🧐 문제/목표 파악 : React 프론트엔드 ➡️ Netlify Function으로 데이터 fetch

리액트에서 Netlify로 데이터를 어떻게 보내는지 고민하다가 Node-fetch를 쓰라는 Netlify 공식포럼 글을 보고 적용했지만 리액트 html파일만 읽어진다.

 

3.🎯 문제/목표 해결

검색키워드

netlify function get response body

해당 키워드로 검색하니 스택오버플로우에서 적절한 정보를 찾아서 리액트의 데이터를 fetch할 수 있게 되었다. 이로써 CRUD를 할 수 있는 기초가 마련되었다.