2022/01/12 2

Spring & React 결합 (f. CORS해결)

스프링과 리액트 이 두 친구들이 서로 사용하는 포트가 다르다. 리액트는 3000을 사용하는 반면, 스프링은 8080을 사용한다. 사람마다 CORS를 해결하는 방식도 각양각색인데 크게 3가지 정도가 생각이 난다. 스프링을 3000에 맞춘다. 리액트를 8080에 맞춘다. 제 3의 포트로 둘 다 맞춘다. CORS(Cross-Origin Resource Sharing)이란? 추가 HTTP 헤더를 사용하여, 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처(origin)의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 (출처) 저 같은 경우에는 리액트를 스프링 포트에 맞춰주었습니다. {리액트 패키지}/package.json 에 "proxy": "http://localho..

Spring 2022.01.12

Spring & React 결합

Spring을 잘하는 편은 아니지만 같이 프로젝트를 진행하거나 할 때 마땅히 같이 할 프론트가 없는 것 같아 저라도 조금이라도 해야겠다는 마음으로 React에 발을 담그게 되었습니다. 먼저 nodejs.org/ko/download/ 에 들어가서 Windows Installer를 통해 설치를 받고 명령 프롬포트(cmd)로 node -v 명령어를 통해 올바르게 설치가 되었는지 그리고 해당 node의 버전을 확인하였습니다. 여기까지는 문제가 없었는 데.. npm install -g create-react-app 명령어를 진행하자 node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바..

Spring 2022.01.12