본문 바로가기

REACT3

Nginx 페이지 새로고침 Not Found 오류 [Problem]리액트로 만든 프로젝트를 Nginx로 배포를 하고 나서 테스트 중에 발견한 오류이다. 다른 라우팅 페이지에서 새로고침을 하면 404 Not Found가 발생하였다. [Solve]로컬 개발 환경에선 발생하지 않는 오류이니 Nginx의 설정이 잘못되었다고 생각하여 Nginx의 conf설정 파일이 잘 못되었다 생각했다.구글 서칭을 해보니 Nginx의 설정 파일에 다음과 같은 옵션을 추가해주어야 했다. location / { try_files $uri /index.html; # 이 옵션 추가 } [Why]Nginx는 기본적으로 요청된 URL에 해당하는 정적 파일(ex. index.html)을 찾는다. 이걸 우린 초기에 설정할 때 옵션으로 root에 url이 바라봐야 하는 html파일을 연.. 2025. 3. 26.
Axios CORS 에러 CORS(Cross Origin Resource Sharing)란? 현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다. ​ ex) 클라인트 서버 : http://localhost:3000 => API 서버 : http://localhost:8080 API를 요청하면 http 형태로 요청이 되므로 브라우저 자체에서 보안 상 이유로 CORS를 제한하게 되는 현상 ​ 오류 발생이유 기본적으로 브라우저가 제공하는 요청 API 들은 별도의 옵션 없이 브라우저의 쿠키와 같은 인증과 관련된 데이터를 함부로 요청 데이터에 담지 않도록 되어있다. 이는 응답을 받을때도 마찬가지이다. 그러니까 위와 같이 프론트와 백엔드 서버의 Origin이 다를 경우, 백엔드에서 프론트엔드로 쿠키를 생성해줄.. 2023. 8. 25.
nodemodules에 있는 NX Cache 삭제 번들링을 하여 패치를 하는데 계속 최초의 패치 형태로만 패치가 되길래 이류를 찾아보았다. 알고 보니 최초의 번들링을 하게 되면 캐시가 남아 dist 폴더에 최초의 번들링 파일이 계속 남게 된다. 따라서 nx cache를 삭제해준 뒤 번들링 해야 제대로 수정된 번들링 파일을 얻을 수 있다. 요약 : 발생 경우 : 최초의 빌드 번들링 이후 다시 번들링을 진행할 때 dist 폴더에 자꾸 같은 최초의 번들링 파일이 다시 생성되는 경우 원인: nodemodule 번들링 캐시가 남아있는 경우 해결법: nx clear-cache 2023. 8. 24.