예전부터 늘 궁금했던 내용이 있다. 프론트엔드와 백엔드 개발자는 하나의 프로젝트 내에서 작업할까? 프로젝트를 나눠서 작업할까? 그럼 배포는 하나의 파일로 통합해서 할까? 아니면 각각 따로 배포할까? 그리고 이 둘은 어떻게 통신하는걸까?
물론 클라이언트와 서버가 인터넷이라는 거대한 네트워크에서 어떻게 통신하는지는 대략 알고
있었다. 그리고 이 둘이 API를 사용해 데이터를 주고 받는다는 것도 알고 있었다.
늘 궁금했지만 이것저것 바쁘다는 핑계로 미루다 최근 MVC를 다시 공부 하다보니 문득 다시 궁금해졌다. MVC에서 V는 view를 담당하는데 프론트엔드 개발자가 어떻게 View를 담당하는걸까? 프론트엔드 개발자가 스프링 프로젝트에서 개발을 하는걸까? vscode 안 쓰나? 배포는? 둘이 통신은? 이전부터 궁금했던 것들까지 궁금증의 연속이었다.
그래서 ChatGPT에게 물어봤다.
우선 프론트와 백엔드를 설명하라고 요청했다.
나 : 궁금한 게 있어 회사에는 프론트엔드 개발자와 백엔드 개발자가 있잖아
ChatGPT : ChatGPT 답변은 핵심 부분만 요약
네, 맞습니다. 프론트엔드 개발자는 사용자 인터페이스(UI)와 사용자 경험(UX)을 디자인하고 개발하며, 백엔드 개발자는 서버 측 로직과 데이터베이스 관리를 담당합니다.
프론트엔드 개발자는 HTML, CSS, JavaScript 등의 프로그래밍 언어를 사용하여 웹 페이지나 모바일 앱과 같은 사용자 인터페이스(UI)를 구축합니다. 사용자가 앱이나 웹 사이트를 사용할 때 보는 것이 모두 프론트엔드 개발자의 작업 결과물입니다.
백엔드 개발자는 데이터베이스를 관리하고, 서버 사이드 로직을 개발합니다. 이러한 로직은 프론트엔드와 연동되어 정보를 주고받는데 사용됩니다. 예를 들어, 백엔드 개발자는 사용자가 로그인을 할 때 사용자 이름과 비밀번호를 검증하는 인증 로직을 개발할 수 있습니다.
알고 있는 내용이다. 이제 프로젝트는 어떻게 관리하는지 물어보자.
나 : 팀이 나눠져 있을텐데 백엔드 팀은 Spring Boot를 사용하고 프론트엔드 팀은 React를 사용한다면 어떻게 프로젝트를 관리 하는지 설명해 Spring Boot 프로젝트에 React를 추가해서 하나의 프로젝트에서 구현하는지 react 프로젝트와 Spring 프로젝트를 나누고 배포할 때만 하나로 합쳐서 배포하는지 궁금해
ChatGPT :
프론트엔드 팀과 백엔드 팀이 나눠져 있더라도 하나의 프로젝트에서 협업할 수 있습니다. 일반적으로 React와 Spring Boot를 함께 사용하는 경우, 백엔드 개발자는 RESTful API를 구축하여 React 개발자가 데이터를 요청하고 받아올 수 있도록 합니다.
이러한 방식으로 개발된 프로젝트는 React와 Spring Boot 두 개의 프로젝트로 나누어져 있습
니다. 개발 과정에서 이 두 프로젝트는 서로 독립적으로 작동할 수 있습니다. 개발이 완료되면 백엔드 개발자는 API를 백엔드 서버에 배포하고, 프론트엔드 개발자는 React 앱을 빌드하여
정적 파일로 만들고, 이 파일들을 웹 서버에 배포합니다.하지만 프로젝트 규모나 구성에 따라 다르게 구성될 수 있습니다. 일부 회사나 개발팀은 Spring Boot와 React를 함께 사용하는 단일 프로젝트를 구축할 수도 있습니다. 이 경우, React와 Spring Boot 모두를 하나의 프로젝트로 통합하여 구축합니다. 이러한 구성은 개발 및 배포 관리를 더 쉽게 할 수 있습니다.
프로젝트 규모와 회사 규모에 따라 다른 것 같아 다시 질문했다.
나 : 작은 프로젝트는 단일 프로젝트로 구성하고 규모가 큰 프로젝트는 독립적으로 나눈다는 거야?
ChatGPT :
그렇습니다. 프로젝트 구성은 프로젝트의 규모, 복잡도, 개발팀 구성, 기술 스택 등 여러 가지
요인에 따라 달라질 수 있습니다.작은 프로젝트는 React와 Spring Boot를 하나의 프로젝트로 구성하여 개발 및 배포를 관리하는 것이 더 간편할 수 있습니다. 하지만 규모가 큰 프로젝트의 경우, 백엔드와 프론트엔드를 서로 독립된 프로젝트로 분리하여 개발하면 더욱 관리하기 쉽고 유지보수하기 편리합니다.
또한 개발팀 구성도 프로젝트 구성에 영향을 미칩니다. 하나의 개발팀에서 백엔드와 프론트엔드를 모두 담당하는 경우, 하나의 프로젝트로 구성하여 개발 및 배포를 관리하는 것이 적합할 수 있습니다. 하지만 두 개의 개발팀으로 나뉘어져 있는 경우, 각각의 팀이 독립적으로 개발하고
나중에 통합하는 것이 좋을 수 있습니다.
지금까지 ChatGPT와 대화한 내용을 요약해보면 아래와 같다.
- 프론트엔드 개발자 : HTML, CSS, JavaScript 등의 프로그래밍 언어를 사용해 웹 페이지나 모바일 앱과 같은 사용자 UI/UX 구축
- 백엔드 개발자 : 데이터베이스를 관리하고, 서버 사이드 로직을 개발 이러한 로직은 프론트엔드와 연동되어 정보를 주고받는데 사용. 예를 들어, 백엔드 개발자는 사용자가 로그인 할 때 사용자 이름과 비밀번호 검증하는 인증 로직을 개발
- React와 Spring Boot를 함께 사용하는 경우, 백엔드 개발자는 RESTful API를 구축해 React 개발자가 데이터를 요청하고 받아올 수 있도록 함.
- 백엔드 개발자는 API를 백엔드 서버에 배포하고, 프론트엔드 개발자는 React 앱을 빌드하여
정적 파일로 만들고, 이 파일들을 웹 서버에 배포 - 작은 프로젝트는 React와 Spring Boot를 하나의 프로젝트로 구성해 개발 및 배포를 관리하는 것이 더 간편할 수 있다. 하지만 규모가 큰 프로젝트의 경우, 백엔드와 프론트엔드를 서로 독립된 프로젝트로 분리하여 개발하면 더욱 관리하기 쉽고 유지보수하기 편리하다.
ChatGPT와 대화해보니 지금까지의 궁금증은 아래와 같다.
- React는 어떻게 API를 요청하는 걸까?
- 규모가 커 백엔드와 프론트엔드가 독립된 경우 백엔드 개발자는 API를 웹 서버에 배포하고 프론트엔드 개발자는 React 앱을 빌드 후 웹 서버에 배포한다. 그렇다면 작은 프로젝트는 어떻게 배포할까?
리액트는 전혀 모르지만 API로 어떻게 데이터를 주고 받는지 간단한 예제 코드를 보여달라고 했다.
- Spring Boot
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/users")
public List<User> getAllUsers() {
return userService.getAllUsers();
}
@PostMapping("/users")
public User addUser(@RequestBody User user) {
return userService.addUser(user);
}
}- React
import React, { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get("/api/users").then((response) => {
setUsers(response.data);
});
}, []);
const addUser = (event) => {
event.preventDefault();
const user = {
name: event.target.name.value,
email: event.target.email.value,
};
axios.post("/api/users", user).then((response) => {
setUsers(users.concat(response.data));
});
};
return (
<div>
<form onSubmit={addUser}>
<input type="text" name="name" />
<input type="email" name="email" />
<button type="submit">Add User</button>
</form>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.name} ({user.email})
</li>
))}
</ul>
</div>
);
}
export default App;정확하게 이해하지는 못하지만 GPT의 설명과 함께 보면 백엔드는 @RequestMapping("/api") 애노테이션으로 "/api" 경로를 사용해 사용자 정보를 제공하고, 프론트엔드는 axios를 사용하여 백엔드의 API를 호출하고, 사용자 정보를 화면에 출력하고, 새로운 사용자를 추가하며 이 과정이 RESTful API를 통해 데이터를 주고 받는 과정임을 알 수 있다.
이제 배포 과정을 물어보기로 했다.
나 : API를 WAS에 배포하고 리액트 앱은 빌드해서 정적 파일로 만든 후에 웹 서버에 배포한다 했잖아 배포할 때 API와 리액트 앱을 하나의 파일로 묶어서 배포하는건지 따로 배포하는 건지 설명해
ChatGPT :
API와 React 앱은 각각 다른 서비스이기 때문에 보통은 따로 배포한다. 일반적으로는 다음과
같은 과정을 거쳐 배포한다.
- 백엔드 API 서비스 배포: 백엔드 API 서비스는 독립적인 웹 서버로 배포되며, 클라우드 서비스 (AWS, GCP, Azure 등)나 호스팅 서비스 (Heroku, DigitalOcean 등)를 이용하여 배포할 수 있다.
- 프론트엔드 앱 빌드: React 앱은 빌드 작업을 거쳐 정적 파일로 생성. 이 정적 파일을 웹 서버에 호스팅하여 클라이언트 측에서 접근할 수 있도록 함.
- 프론트엔드 앱 배포: 빌드된 정적 파일을 웹 서버에 배포한다. 클라우드 서비스나 호스팅
서비스를 이용하여 배포할 수 있으며, 이때 웹 서버의 정적 파일 호스팅 기능을 이용하여 배포한다.따라서, API와 React 앱은 각각 독립적인 서비스로 배포되며, 하나의 파일로 묶어서 배포하는 것은 일반적으로 하지 않는다.
잘 이해가 가지 않으니 다시 질문하자..
나 : 리액트와 스프링 배포 관련해서 궁금한데 하나의 웹 서버에 리액트 앱과 스프링 API를 배포하는지 리액트 앱을 배포하는 웹 서버, API를 배포하는 웹 서버 이렇게 각각 나누는지 설명해
ChatGPT :
웹 서버에 리액트 앱과 스프링 API를 함께 배포하는 방법과 리액트 앱을 배포하는 웹 서버와 API를 배포하는 웹 서버로 각각 나누는 방법 두 가지가 있다.
첫 번째 방법은 리액트 앱과 스프링 API를 같은 웹 서버에 배포하는 것이다. 이 경우, 웹 서버는 리액트 앱과 API를 모두 제공. 이 방법의 장점은 구현이 간단하다는 것이다. 하나의 웹 서버에
모든 것을 넣으면 되지만 단점은 서버 자원을 효율적으로 사용하지 못한다는 것. 리액트 앱과 API가 같은 서버에서 실행되면 서버 자원을 나누어 사용할 수 없기 때문에 서버 부하가 크게
증가할 수 있다.두 번째 방법은 리액트 앱과 API를 각각 다른 웹 서버에 배포하는 것. 이 경우, 리액트 앱과 API를 각각 별도의 서버에서 실행하므로 서버 자원을 효율적으로 분배할 수 있다. 또한, 웹 서버와 API 서버를 각각 최적화할 수 있기 때문에 보안성도 높일 수 있음. 단점은 구현이 복잡하다는 것으로 두 개의 서버를 구성하고 서버 간 통신을 설정해야 하기 때문이다.
어떤 방법을 선택할지는 프로젝트의 규모와 요구사항에 따라 다를 수 있으며 일반적으로는 작은 규모의 프로젝트에서는 첫 번째 방법이 간편하고 효율적일 수 있지만, 대규모 프로젝트에서는 두 번째 방법을 사용하는 것이 좋다.
백엔드가 사용하는 웹 서버는 WAS를 의미하는 것 같은데 리액트는 WAS인지 웹 서버인지 헷갈려
다시 질문했다.
나 : 리액트 앱은 웹 서버를 사용하는거야? 아니면 WAS를 사용하는건지 설명해
ChatGPT :
리액트 앱은 클라이언트 사이드에서 동작하는 JavaScript 기반의 웹 어플리케이션으로 웹 브라우저에서 직접 실행된다. 리액트 앱은 HTML, CSS, JavaScript 파일로 이루어져 있으며, 웹 서버가 필요하지 않다.
반면에 스프링 프레임워크는 백엔드에서 동작하는 자바 기반의 웹 프레임워크이며, 웹 서버와 WAS(Web Application Server)에 배포하여 사용할 수 있다. 스프링 부트는 내장형 WAS를 제공하므로, 단독으로 웹 서버를 구축할 필요가 없다. 따라서 스프링 부트 애플리케이션은 웹 서버와 WAS가 합쳐진 형태로 구성될 수 있음.
따라서, 리액트 앱과 스프링 부트 API를 함께 배포하는 경우, 스프링 부트 애플리케이션 내에
리액트 앱을 빌드하여 포함시킬 수 있고 별도의 웹 서버를 두어 리액트 앱과 스프링 부트 API를 각각 배포할 수도 있다. 이 경우에는 두 개의 웹 서버가 필요함.
이상하다. 리액트는 웹 브라우저에서 실행되는데 왜 웹 서버에 배포하는지 궁금해졌다.
글이 길어져서 이후 내용은 다음 글에서 정리한다.
출처
ChatGPT
