Java

[React] .env 환경 구분 (prod / dev / local)

개요 서비스를 운영하다 보면 운영, 개발, 로컬에 세팅을 다르게 해주어야 할 경우가 많다. 만약 하나의 properties를 사용하게 되면 현재 서버에 해당하는 properties로 직접 개발자가 매번 변경해야 한다. 이럴 경우 properties의 수정 누락으로 에러가 발생하는 경우가 빈번하다. env 파일 사용 방법 🎃 파일의 내용 REACT_APP_SERVICE_VERSION=1.8.7 REACT_APP_SERVICE_TYPE=S REACT_APP_API_URL=https://api.staging.myservice.com 변수명의 생성은 무조건 REACT_APP_ 으로 시작해야 합니다. 🎃 JSX 소스코드 사용법 v.{process.env.REACT_APP_SERVICE_VERSION} {proce..

2022. 10. 21. 16:21

Java

[React] react.js 어플리캐이션 404 not found 에러 (Nginx 서버)

🌻 개요 개발 환경에서 react 애플리케이션의 테스트를 끝내고, Nginx 서버에 업로드를 하였다. 응용 프로그램이 잘 동작하고 있어 데이터베이스에 저장이 되는 등 모든 것이 잘 작동하였다. 하지만 다른 페이지로 넘어가면서 새로 고침이 되는 순간 404 not found 에러가 발생했다. window.location.reload()를 쓴 부분에서 모두 404 not found 에러가 발생하는 것이었다. 로컬과 개발 환경에서 테스트를 진행했을 때는, 아무런 문제가 없었기에 당황스러웠다. 다행히도 해당 에러에 대한 해결방안을 찾아서 아래에 한글로 번역해 둔다. 404 error? 404는 http 프로토콜의 코드입니다. http 프로토콜이란 웹을 구성하는 일종의 규약이라고 보면 된다. 404 not fou..

2022. 10. 20. 09:15

Java

[React] 비동기로 동작하는 setState에 대한

이번 포스팅에서는 React에서 setState의 Callback 함수를 사용하는 경우를 소개합니다. 이슈 개발을 하는 중, setState함수가 실행되어 값이 변경되었음에도, state를 사용하는 함수는 한 박자 늦게 변경되는 이슈가 있었습니다. 이러한 이유의 원인을 찾아보니 setState가 비동기 함수라서 그렇다고 합니다. setState 함수는 이벤트 핸들러 함수에서 바로 값을 경신(변경)하는 것이 아니라, 이벤트 핸들러 함수가 종료 후 react에 의해 state값이 경신됩니다. 해결방안 react에서 setState의 Callback 함수를 사용하는 경우는 state를 변경 후 변경된 state를 사용하는 경우입니다. setState 함수로 state의 값을 변경 후 경신된 값을 콘솔에 출력하..

2022. 8. 30. 10:11