Spring Boot와 React를 통한 개발환경을 구성할때 고민해볼점

 

[Java/Spring] - Spring Boot와 React를 연동하여 개발환경을 만들어보자

Spring Boot와 React를 연동하여 개발환경을 만들어보자

 

일단 글에 앞서서

안녕하세요. 위의 예상보다 인기가 좋아 짐에 따라 제가 생각하고 있던 생각들을 공유해볼 겸 작성해보는 글입니다. 이 글이 정말 너무 많은 사람들이 좋아해 주신 덕에... 

 

이런 조합으로 검색하면 광고 다음에 1,2순위를 다투는 글이 되기도했고...

인기글에 항상 올라와있는 킬러컨텐츠이기도 합니다.

그래서 항상 감사하다는 생각도 있으나, 당시에는 리액트에 대해서도 정확하게 몰랐고, 뭐가 좋은지 모르고 일단 되는 것에 초점을 두고 글을 작성했습니다. 

최근에는 Spring boot + React 개발을 한두번 이상 해보니까 여러 가지 고려사항이 눈에 보여서 이 글을 보고 작성을 고려를 해보는 게 좋을 거라고 생각합니다. 

 

고려해볼 점들

제가 React+SpringBoot 개발 프로젝트를 Spring boot와 React를 어떤 포지션으로 구성할 수 있는지에 대해서 몇몇 방법을 사용했었는데요. 현재 방식은 다음과 같습니다.

 

쉽게 이야기하면 백엔드안에 프론트엔드가 감싸고 있는 구조입니다. 실제로 이런 구조를 사용하게 되면, 다음과 같은 장점이 생깁니다. 

 

1. 한 프로젝트 안에서 모든 업무를 처리할 수 있음 -> 한 명이 백엔드 프론트엔드를 모두 관여하는 경우 유용합니다. 

2. 한 프로젝트 안에서 백엔드, 프론트엔드 동시에 빌드되는 과정이 있어서 번거롭게 따로따로 빌드되는 과정이 없다.

 

하지만, 이게 꼭 좋은 걸까요? 다음과 같은 단점도 존재합니다

 

1. React는 정적 앱이기 때문에 백엔드에서 처리하는 내용이 아닌 다른 부분은 보여주기만 해도 괜찮은 내용은 그대로 보여줘도 된다. 하지만, 이와 같은 구조는 백엔드가 죽어버리면 프론트엔드도 동시에 죽는 구조이다. 

즉, 이런 방식은 리스크가 크다. 

2. 빌드 과정이 동시에 된다는 것은 다시 이야기하면, 이 둘 중 하나라도 문제가 있으면 서버를 킬 수 없다. 즉, 프런트엔드에서 문제가 생기면, 프론트엔드 문제를 해결하지 못하면, 빌드가 안되고, 백엔드에서 문제가 생기면, 벡엔드 문제를 해결해야지만 빌드할 수는 있는 구조이다.

 

사실 이런 문제를 어떤 식으로 해결할 수 있는지에 대해서 생각을 해보자면, 다음처럼 해결할 수 있다.

 

이렇게 쪼개서 관리하면 독립적인 백엔드, 독립적인 프런트엔드를 구성할 수 있습니다. 하지만, 이런 구조는 위의 방법을 통해서, 구현되는 방법이 아닙니다. 그러면 이런 경우는 완전히 구성이 달라집니다.

 

 

프론트엔드는 NGINX를 통해서 리엑트를 구성하고, 이 프론트엔드가 NGINX에 서버에 올라가 있는 상태에서 API는 백엔드가 구성하는 방식으로 작동하는 것입니다.

 

다음과 같은 경우는 이러한 이점이 존재합니다. 

 

1. 독립적으로 구성돼 있기 때문에 보기에는 좀 더 좋습니다. 폴더가 두 개가 있어서 제가 직접 두 개를 열어서 확인할 필요는 없습니다.

2. 프론트엔드가 독립적으로 구성돼있기 때문에, 행여 백엔드 서버가 죽는 경우 프론트엔드는 내부적으로 백엔드 API를 받는 데이터를 제외하고는 화면은 노출됩니다.

3. 빌드 과정의 불편함이 좀 생기지만, 한 개의 오류가 다른 것에 오류에 영향을 주지 않습니다.

 

마지막으로...

이러한 두 가지 옵션을 선택하는 게 좋아보여서 전자의 경우는 제 블로그의 글을 확인해서 개발을 진행하시면 될 것 같고, 후자의 경우는 아직 글을 작성하지 않았지만,  그래서 이왕이면 후자의 방법을 택하는게 더 좋다고 생각합니다. 

지금 당장은 후자의 방법은 튜토리얼을 따로 작성하지는 않았으나, 만약에 이 글을 읽고 후자의 튜토리얼이 필요하신 분들이 댓글 남겨주시면, 글 작성해보도록 노력해보겠습니다.

 

개발에는 여러가지 옵션이 존재하므로, 더 좋은 방법을 선택하는 게 좋을 것 같습니다. 부족한 글 끝까지 읽어주셔서 감사합니다.

 

후자의 튜토리얼 글입니다.

많은 분들이 많은 댓글 남겨주셔서 글을 작성해보았습니다. 확인해보시고 링크타고 확인해보시면 좋을 것 같습니다

 

[Java/Spring] - Spring Boot와 React를 분리해서 연동해보자 1) React 구성

Spring Boot와 React를 분리해서 연동해보자 1) React 구성

 

[Spring] - Spring Boot와 React를 분리해서 연동해보자 2) Spring Boot 구

Spring Boot와 React를 분리해서 연동해보자 2) Spring Boot 구

 

모든 글을 완성했습니다. 현재 조금 더 개선된 버전으로 구현해 두었으므로 튜토리얼 글을 참고해주시면 좋겠습니다! 감사합니다!