백엔드와 프론트엔드 분리

개발을 할때 백엔드와 프론트엔드를 구분하여 서버를 띄우는게 요즘 트렌드다WAS 서버와 WEB서버를 따로 띄워 유지보수가 용이하게 하는 것.
예를들어보면,

1. 스프링 부트로 회원 목록을 반환하는 프로젝트 생성:

먼저 스프링 부트 프로젝트를 생성하겠습니다. 여기서는 회원 정보를 담을 User 클래스와 이 User 리스트를 반환하는 API를 가지는 UserController 클래스를 만들겠습니다.

java
// User.java
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String name;

// getters and setters
}

// UserController.java
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserRepository userRepository;

@GetMapping("/")
public List getUsers() {
return userRepository.findAll();
}
}


2. 리액트를 사용하여 프론트엔드 생성:

스프링 부트 백엔드에서 제공하는 API를 호출하여 회원 목록을 가져와서 화면에 표시하는 리액트 앱을 만들겠습니다.

javascript
// App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
const [users, setUsers] = useState([]);

useEffect(() => {
axios.get('http://localhost:8080/api/users')
.then(response => {
setUsers(response.data);
});
}, []);

return (

{users.map(user => (

{user.name}

))}

);
}

export default App;


3. 백엔드와 프론트엔드를 분리하는 이유:

- 재사용성과 유지보수성: 각 역할에 따라 코드를 분리하면 코드의 재사용성과 유지보수성이 향상됩니다.
- 확장성: 팀이 커질수록 각각의 역할을 분리하여 작업하는 것이 유리합니다. 백엔드와 프론트엔드를 분리하면 각각의 파트를 독립적으로 개발하고 확장할 수 있습니다.
- 단점: 백엔드와 프론트엔드를 분리하면 CORS 이슈와 같은 네트워크 문제를 해결해야 할 수도 있습니다.

4. 리액트의 장점:

- 컴포넌트 기반 구조: 재사용 가능한 컴포넌트를 만들어 빠르게 개발할 수 있습니다.
- Virtual DOM: Virtual DOM을 사용하여 빠른 렌더링 성능을 제공합니다.
- 생태계: 큰 커뮤니티와 다양한 라이브러리, 도구들이 활발하게 유지 보수되고 있습니다.
- 학습 곡선: 다른 프레임워크에 비해 학습 곡선이 상대적으로 완만합니다.