[Spring] Spring과 React 연동하기

이 글은 개발된 프론트엔드를 가지고 서버를 재개발하는 프로젝트에 관한 글.. 

 

로그인 페이지 가져오기

원래 프로젝트 때도 개발새발 하긴 했는데,

분명 4개월 전까지만 해도 돌아가던 프로젝트가 왜 안 돌아 가는 것인가..

일단 로그인 페이지 복붙하고, route 설정해줬다.

 

안 됐던 부분이 페이지들을 모아놓은 pages 폴더에 상대 경로로 접근이 안됐던 것인데

Module not found: Can't resolve './pages'

node_modules, package-lock 파일을 지우고 다시 npm install 하면 된다는 글이 있는데 안 고쳐져서.. 

일단 import 폴더명을 './pages/Home'으로 수정하여 고침

 

그랬더니 다음 에러 등장

Attempted import error: 'Home' is not exported from './pages/Home'.

원래 export default functions Home() 이렇게 되어 있던것에서 default 빼니 정상 작동해서..

일단 이렇게 진행하려 한다.

 

서버와 프록시 연결

프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다.
- 위키 백과-

즉, 프록시를 통해 3000포트인 클라이언트 서버에서 8080 포트인 서버로 접속할 수 있도록 한다.

>> npm install http-proxy-middleware --save

src/setupProxy.js 파일을 만들고 아래 코드를 작성한다.

기존 프로젝트는 rest api가 아니어서 요청 url을 수정했다.

로그인 하는 기능이고, POST /users/token 으로 요청한다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
      createProxyMiddleware('/users/token', {
          target: 'http://localhost:8080/users/token',
          changeOrigin: true
      })
  )
};

 

요청을 받는 서버 컨트롤러 만들기

 

기본 설정

저번 포스팅에서 그냥 spring MVC 프로젝트만 만들고 끝난 것 같은데

습관적으로 encoding 설정과 facets 설정을 해주자

인코딩은 Window 탭 > 속성 > encoding 검색 후 보이는 것들을 다 UTF-8로 설정하고

facets은 프로젝트 우클릭 > 속성 > ~ facets > module:4.0, Java:1.8로 수정하고

pom.xml 파일에서도 자바와 springframework의 버전을 변경해준다.

나는 각각 1.8, 5.3.9로 변경했다.

 

테스트 메서드

@PostMapping("/users/token")
public String index() {
  System.out.println("test");
  return "test";
}

 

연동까지하니 진이 다 빠져서 로그인 기능은 다음에 구현해야겠다. 

프론트엔드는 웬만하면 안건드리려고 하는데 눈에 밟히는게 많다.

ㅠㅠ