프론트엔드와 백엔드를 나눠서 구현해보자.
- 곧 프로젝트 구현에 들어갈 것 같아서 조원들에게 나눠줄 파일을 정리하고 있다.
- ide나 개발 버전 기본적인 것들만 구현해서 주려고 했다.
- 우리는 구조를 fe와 be로 나누어서 fe는 리액트 be는 스프링부트로 개발하기로 했다.
- 나도 아직 너무 모르는 부분이 많지만 여러 유튜브를 섭렵한 결과 이렇게 나누면
- fe에서 be로 api요청을 하는 방식, 즉 SPA로 하기 위해서는 기본적으로
- fe에서 be요청을 해야해서 그 부분만 어느정도 해결을 하고 공유하려고 했다.
몇가지 테스트를 해보자.
- 저번에 리액트를 살짝 맛만 봤을 때 be와 통신을 하고 싶어서 알아봤을 때
- 개발 단계에서는 fe와 be를 나누면 당연히 url이나 port 번호가 다르기 때문에
- localhost에서 개발을 한다고 해도 sop를 위반하게 된다고 크롬에서 메세지를 띄워
- 주기 때문에 그 부분은 proxy로 해결을 해 놓고 시작하려고 했다.
- 더해서 fe와 be가 통신은 잘 되는지 간단하게 서버에서 받은 단어 하나만 띄워보려고 했다.
제일 처음부터 막혔다.
- 리액트를 설치하고 http-proxy-middleware로 proxy 설정해서 cors에러까지는
- 제대로 설정했다. 그리고 fetch로 서버에게 요청을 보내고 200응답을 받는 것까지는 잘 됐다.
- 문제는 이 다음이었다. fetch는 비동기코드이기 때문에 당연히 promise, then, async, await를 써서 처리하려고 했다.
- 리액트가 실행되는 app함수 내부에 응답으로 받은 단어하나만 띄워보고 마무리 하려고 했는데
- console.log로 출력하는 것은 가능했지만 어떻게 해도 promise를 반환해주고 실제 값을 외부에서
- 접근 할 수가 없었다.. 여기서 내가 멍청해서 못하나?? 이렇게 생각했는데 나 같은 생각을 가진 외국인이 많았나보다. stackoverflow에 영어로 질문이 이미 있었다.
제대로 된 해답이 없었다.
- 결론부터 말하자면 비동기로 응답받은 json파일을 promise객체 외부나 다른 곳에서 접근, 출력하는
- 방법을 해결하기 너무 어려웠다. 근데 처음에는 이게 왜 안되는지 어렵다고 느끼지도 못할 정도로
- 이해조차 하지 못하고 있었다. 그래서 계속해서 구글검색을 해서 어찌저찌 해결을 했지만
- 결과적으로는 리액트 화면에 띄우지 못하고 db설계를 해야했다.
마무리
- 거의 1달동안 promise나 비동기적인 부분을 보고 있는데 아직도 이해가 100% 되지는 않는다.
- 다만 그래도 비동기 체이닝 정도는 혼자서 만들 수 있을 것 같다.
- 이 부분은 js의 문제보다는 비동기나, 쓰레드, 동시성 문제이므로 계속해서 이해하려고 노력해보자.
문제의 이해
내가 생각한 풀이 방법
풀이
첫 번째 풀이
Leave a comment