React - Spring Boot Toy Project (1)

가장 만들고 싶었던 Spring boot + React 프로젝트를 드디어 시작하게 되었다.

그 동안 공부한 Spring REST API, Spring Data JPA를 활용해볼 수 있을것 같다.

React도 백엔드에서 api를 받아 어떻게 페이지를 구성하는 공부할 것이다.

 

먼저 start.spring.io/에서 start파일을 구성한다.

위에 구성을 체크하여 받아준다.

 

사용하는 IDE에서 파일을 열어준다. 

 

Package 를 생성하고난 후 User Class를 생성한다.

 

package com.myapp.springboot.model;

import javax.persistence.*;

@Entity
@Table(name = "users")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    @Column(name = "first_name")
    private String firstname;

    @Column(name = "last_name")
    private String lastname;

    private String email;

    public User() {

    }

    public User(String firstname, String lastname, String email) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.email = email;
    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getFirstname() {
        return firstname;
    }

    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }

    public String getLastname() {
        return lastname;
    }

    public void setLastname(String lastname) {
        this.lastname = lastname;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

User에 위와 같이 작성해준다.

 

package com.myapp.springboot.repository;

import com.myapp.springboot.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User, Long> {

}

repository 패키지에 UserRepository 인터페이스를 생성 후 위와 같이 작성한다.

 

package com.myapp.springboot.controller;

import com.myapp.springboot.model.User;
import com.myapp.springboot.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController //rest api를 생성하기 위한 anotation
@RequestMapping("api/")
public class UserController {

    @Autowired // UserRepository를 inject해준다
    private UserRepository userRepository;

    public List<User> getUsers(){
        return this.userRepository.findAll();
    } //model에서 모든내용을 list에 담에 가져온다.
}

Controller 패키지에 UserController 클래스를 작성해준다.

 

package com.myapp.springboot;

import com.myapp.springboot.model.User;
import com.myapp.springboot.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBackendApplication implements CommandLineRunner {

	public static void main(String[] args) {
		SpringApplication.run(SpringBackendApplication.class, args);
	}

	@Autowired
	private UserRepository userRepository;

	@Override // 출력할 (fake data)내용을 입력해준다
	public void run(String... args) throws Exception {
		this.userRepository.save(new User("Jace", "Kang", "jace@gmail.com"));
		this.userRepository.save(new User("Harry", "Porter", "Porter@gmail.com"));
		this.userRepository.save(new User("Nam", "Junho", "Junho@gmail.com"));
	}
}

SpringBackendApplication에서 위와같이 작성한다. 출력할 임시데이터는 원하는대로 입력해도 된다

 

SpringBackendApplication을 실행한다.

 

http://localhost:8080/api/users 로 접속하면

생성한 Json이 페이지에 잘 표시되는걸 확인할 수 있다.