강사님 강의외 질문 하나만 드려도될까요?

React + API Server 프로젝트 개발과 배포 (CI/CD)

06. CORS 설정과 환경변수 다루기

작성

360

리액트+스프링부트 조합으로 사이드 팀프로젝트를 진행중입니다.

리액트 개발환경은 CRA명령어를 통해 구축했습니다

근데 이게 local 서버에서는 router url을 주소창에 직접입력하거나,새로고침해도 잘실행되는데요

예를들어 배포서버URL/login 같이 router url을 직접입력하거나 새로고침하면 404에러가 납니다.

구글링을 해본결과 webpack.config.js devserver 서버 사이드 설정을 하라는글이 있습니다.

근데 저희가 CRA로 개발환경을 구축해서 webpack.config.js 파일이 없는데 그러면 해결방법이

webpack을 eject해서 서버사이드설정을 하는방법밖엔 없나요? 아니면 백엔드서버에서 따로 서버사이드 설정을 할 수 있나요?

답변 2

질문자

답변감사합니다. 제가 좀 이해가 잘 안되는 부분이 있는데요

위에 문제상황 해결사항이 vite 마이그레이션하는 방법밖에 없다는건가여??

지식공유자

다시 질문을 읽어보니 vite 질문이 아니라 react 질문이었네요. 제가 잘못 읽었습니다. 미안합니다 ^^;

https://www.google.com/search?q=react+profile+%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98

환경변수 설정은 Create React App 도 가능합니다. 위 검색결과에 나온 문서 참고하시면 해결 될 것입니다.

https://12factor.net/ko/config

위 문서도 함께 추천합니다.

지식공유자

.env 파일 같은 환경변수에서 vite는 VITE_ prefix를 사용하는 것처럼 react는 REACT_를 사용합니다. 관련된 환경변수를 사용하는 곳에 undefined 라고 브라우저에서 확인할 수 있을 것입니다.

CRA는 webpack을 사용하고, vite는 Rollup을 번들러로 사용합니다.

참고로, CRA에서 Vite로 마이그레이션 하는 방법은 이렇게 생각하고 있습니다.

1. vite 프로젝트 생성

2. src 복사

3. /index.html 비교

4. 환경변수 확인

...

마이그레이션 잘 되시길 바랍니다.

인프런 커뮤니티 질문&답변