이번 포스트에서는 스프링 프레임워크를 사용하여 백엔드를 개발하고 React를 사용하여 프론트엔드를 개발하는 방법에 대해 알아보겠습니다.

백엔드 개발

1. 스프링 부트 프로젝트 생성

스프링 부트를 사용하여 새로운 프로젝트를 생성합니다.

spring init -n backend-demo -dweb,data-jpa,mysql,devtools backend-demo

2. 데이터베이스 연동

application.properties 파일을 편집하여 MySQL 데이터베이스에 연결합니다.

spring.datasource.url=jdbc:mysql://localhost:3306/db_example
spring.datasource.username=springuser
spring.datasource.password=ThePassword

3. REST API 작성

REST API를 작성하여 클라이언트 애플리케이션과 소통할 수 있는 백엔드를 구축합니다.

@RestController
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public List<User> getAllUsers() {
        return userService.getAllUsers();
    }

    @PostMapping("/users")
    public User createUser(@RequestBody User user) {
        return userService.createUser(user);
    }
}

프론트엔드 개발

1. React 앱 생성

React 애플리케이션을 생성하여 프론트엔드를 개발합니다.

npx create-react-app frontend-demo

2. REST API 호출

React에서 백엔드의 REST API를 호출하여 데이터를 가져오고 화면에 표시합니다.

import React, { useState, useEffect } from 'react';

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

    useEffect(() => {
        fetch('/users')
            .then(response => response.json())
            .then(data => setUsers(data));
    }, []);

    return (
        <div>
            <h1>User List</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );
}

결론

이렇게 스프링으로 백엔드를 개발하고 React로 프론트엔드를 개발하는 것은 현대적인 웹 애플리케이션을 구축하는 데 매우 효과적인 방법입니다. 스프링과 React를 함께 사용하여 강력하고 안정적인 애플리케이션을 만들어보세요.

문의: example@email.com

참고:

• 스프링 공식 문서
• React 공식 문서