TIL - 스프링 부트와 리액트의 협업 "Hello Meohyun!"

개괄

알고리즘 주차도 정말 힘들지만, 개인적으로는 정말 존경하는 김영한 선생님이 말씀하셨던 정말 잘하는 주니어의 특징인 '야생형'이 그리워졌다. 마침 내가 정말 존경하기도 하고 가장 번뜩이는 아이디어를 가졌다고 생각하는 프론트엔드 친구가 프로젝트를 추천했고, 같이 하게 되었다.

거창한 프로젝트는 아니고 2명이서 하기에 사실 git flow나 개발 프로세스를 익히기엔 턱없이 부족하지만, 실전 프로젝트 대비를 하는 입장에서는 정말 좋다고 생각했다.

늘 어디서 받은 js/html로 렌더링을 하며 혼자 개발 공부를 해왔지만, 이번에 처음으로 다른 언어와 같이 소통하고 정보를 주고받는다는것이 나를 두근두근하게 만들었다.

 

문제 발생

혼자하는 개발은 나혼자 정보를 주고받지만, '협업'은 다른 '사람'과 정보를 주고받을 수 있어야 한다.

FE는 3000 포트를 가져가고, 스프링부트는 8080부트를 가져간다.

그 사이에서 정보를 주고받아야 하는데, 처음부터 갑자기 너무 막막해졌다.

"프로젝트 생성은 했지만, 어떻게 해야 정보를 주고받을 수 있을까?"

혼자 인강을 보고 혼자 개발을 하면 8080포트만 사용하면 되는데, 3000 포트와는 어떻게 통신하는지를 몰랐다.

기능 개발에 앞서 리액트와 스프링부트 연동 과정부터 진행해야 했는데, 해본적도 없고 지금은 협업 주차도 아니니

BDD(Blog-Driven-Development)를 해야 했다. 그러나 BDD에는 큰 문제가 있었는데, 각 블로그마다 문제는 같아도 해결하는 방식이 천차만별이었다.

 

시도해본 것들 ( 백엔드 입장) : CORS 오류가 뜰 것을 대비하고 작성함

1. 먼저 Controller를 만든다

RequestMapping, GetMapping은 실험하기 위해 일부러 다르게 설정해 보았다.

2. setProxy.js파일을 생성해본다

Origin 구성요소가 하나라도 다르면 CORS 에러가 발생한다고 해서 미들웨어 설치도 해 보았다.

3.app.tsx에 axios과 관련된 설정 import해주고, 

4. WebConfig 설정파일 만들기

이렇게 했더니 3000 포트에서 8080 포트의 내용을 받아올 수 있었다.

3000포트에서 "Hello MeoHyun"을 받아왔을 때의 그 쾌감은 처음에 Hello World를 쳤을때보다 쾌감이 30배 이상이었다.

그런데 문제가 생겼다.

나는 되는데 프론트단에서는 접속이 불가능했다.

찾아보니 이 에러는 IP주소가 비공개로 설정되어있을 경우 값을 할당받지 못해서 생기는 에러라고 한다.

생각해보니 나는 노트북에서 wi-fi 환경으로, FE는 랜으로 접속해서 오류가 터지는 것이었다.

그래서 root directory에 .env 파일을 생성해서 

DANGEROUSLY_DISABLE_HOST_CHECK=true

이 한줄만 넣어주니 말끔히 완료되었다.

나중에 다른 백엔드에 물어보니, package.json에 프록시 코드 하나만 추가해주면 된다고 하였다.

 

협업이라는게 그냥 같이 코드만 만지고 하는건 줄로만 알았는데, 생각보다 복잡했다. 그리고 배울게 너무나 많아졌다.

개발이 정말 재미있다.