[React + Node] React 새로 고침 시 Cannot GET/POST 버그 드디어 수정하다...

리액트가 싱글페이지인 것은 알았으나 새로고침 한다고 위와 같이 Cannot GET 경로 에러가 뜨는 것은 아니였을 것이다...

올해 4월 한달가량 만들었던 나의 첫 react 쇼핑몰 프로젝트...

어느순간 새로고침 할 때 저렇게 해당 url의 서버를 찾을 수 없다는 에러가 계속 떴었다.

 

해당 버그의 원인은 정말 다양할 것이다.

1. 해당 주소의 요청을 처리하는 backend api가 없다.

2. 서버가 불안정하다.

3. 서버 설정을 해주지 않았다.

등등... 프로젝트 별로 원인이 다양할 것이다.

 

Webpack설정을 해주라는 글을 봤었는데, 나는 그런걸 안써서... 뭔지도 정확히 몰라서 설정도 못했었고

이런 식으로 backend의 app.js 하단에 위에서 처리하지 못한 모든 요청을 받아서 index.html에 보내주는 코드도 넣어줬지만 소용없었다.

 

나는 좀 더 기초적이고 초보적이라면 초보적인 실수때문이였다....^^ 그래도 4달만에 발견해서 다행인건가...

---

우선 프론트와 백엔드가 통신하기 위해서 CORS, proxy설정을 해줘야한다는 것을 알고 있을 것이다.

비전공자에 웹개발에 대한 정확한 지식 없이 프로젝트를 시작한 나는 큰 문제를 하나 저질렀다...

 

그것은 바로 웹의 주소와 백엔드 api 주소를 통일시켰던 것!!!

 

예를 들어 로그인하는 페이지가 있다면

웹주소: www.도메인.com/login
api 주소: /login

 

이렇게 했던 것이다..ㅋㅋㅋㅋㅋ

 

그럼 proxy 설정은.. 열심히 찾아서 여러 url을 허용해주는 proxy를 설정했다.

( https://xively.tistory.com/20?category=473773 )

이렇게하면 해당 url은 cors정책에 걸리지 않고 자유로이 통신할 수 있었던 것인데 이 것이 문제가 될 줄이야...

---

문제 1. 특정 페이지에서 새로고침 시 해당 url로 backend단에 요청하게 된다.

나는 그저... 상품을 검색하는 페이지에서 새로고침을 하고싶었을 뿐인데, 이렇게 backend에 해당 url로 요청이 들어오고 있었다. (요청 url을 console창에 보이게 해놔서 오늘 우연찮게 발견할 수 있었다ㅋㅋㅋㅋㅋㅋ)

 

문제2. body에 아무 값도 없이 요청하게 되니 문제가 남

원인을 바로 못 찾았던 것은 젤 처음 페이지 이동 시에는 페이지가 너무 잘 떴기 때문....

---

해결 1. 모든 backend api url을 /api로 시작하게 변경해주고

(시작 url은 마음대로 지어도 상관 없음)

근데 이렇게하면 프론트단에서 axios나 fetch 호출하는 곳 url 다 바꿔줘야하는거 아시죠..?^^

웰컴 투 노가다

해결 2. api의 첫 url만 proxy를 허용해준다.

/uploads는 multer로 사진을 업로드 한 후 다시 사진을 가져올 때 사용하는 경로이다...

경로를 일일히 수정해주기 귀찮아서 /uploads까지는 허용해준 상태...

나중에 얘도 문제 생기면 바꿔줘야겠다ㅠㅠ

---

이제는 새로고침해도 페이지가 잘 로딩되고, 필요할 때만 api를 요청하게끔 변경되었따!!!

허무하지만 행복하다