react

개발 서버에서 API 호출 시 CORS 에러가 발생하는 것을 확인했습니다. API 서버에서 localhost:3000 에 대한 cors 처리를 하는 것이 좋지 않다는 생각이 들어, React에서 리버스 프록시를 설정하기로 결정했습니다. http-proxy-middleware 설정 프록시 설정 방법은 다양하게 있으나, 그 중 가장 유연하게 설정 가능한 방법이 http-proxy-middleware 를 활용하는 것이므로 해당 방법으로 진행했습니다. 먼저, 아래 명령어를 이용해 http-proxy-middleware를 설치합니다. npm install http-proxy-middleware --save 그 다음 src 폴더 바로 아래에 setupProxy.js 를 추가합니다. const {createProxy..

react-hook-form 란? react-hook-form 사용을 하면 form을 더 쉽게 만들기 위한 라이브러리로, 아래와 같은 장점을 가집니다. 장점 배우기 쉽다 유효성 검사에 유용하다. HTML 표준을 활용하여 안정적인 기능을 제공한다. 재 렌더링 횟수를 최소화한다. 구성 요소를 즉각 분리하여 같은 컴포넌트 내 요소들의 의미 없는 재 렌더링을 막아준다. 전체 양식을 재 렌더링 하지 않고, 개별 입력 및 양식 상태 업데이트를 구독할 수 있다. 여기서는 간략하게 설명하고 넘어가도록 하겠습니다. 더 자세한 내용은 https://react-hook-form.com/ 을 참고해주세요. react-hook-form 설치하기 아래 명령어를 입력하면, react-hook-form이 설치되어 사용할 수 있습니다..

해당 게시글을 Spring 프로젝트와 React에 대한 자세한 설명을 제공하지는 않습니다. React 프로젝트 생성하기 React 프로젝트를 생성하고 싶은 위치에 아래 명령어를 입력하여 생성합니다. npx create-react-app {프로젝트 이름} 그러면 아래와 같이 프로젝트가 원하는 위치에 생성됩니다. CORS 이슈가 발생하지 않도록 Package.json에 proxy 설정을 추가해 줍니다. { // ... "proxy": "http://localhost:8080" } 통합 Build 설정하기 Spring에서 React를 Build 할 수 있도록 아래 설정을 Gradle에 추가합니다. 이때, frontendDir은 React 프로젝트 Path입니다. // React 설정 시작 def fronten..