본문 바로가기
성동스터디 (2021.09.09 ~ ing)/React + Spring

[React + Spring Boot 연동 (2/3)] - 백엔드 설정과 API 만들기

by juniKang 2021. 12. 10.

! 이 포스팅은 유튜버 "메타코딩" 님의 강의를 활용해 만들었습니다.

 

react & springboot

 

www.youtube.com

 

1편 - 프론트엔드 설정과 화면그리기 - https://junikang.tistory.com/274

2편 - 백엔드 설정과 API 만들기 - https://junikang.tistory.com/275

3편 - API를 사용하여 정보 주고받기 - https://junikang.tistory.com/276

 

이번 포스팅에서는 스프링 backend 를 만들어 보겠습니다!

 

 

 


⚙️ 백엔드 설정하기

1. Workspace로 'blog'열기

switchworkspace-other 로 frontend 폴더가 있는 blog 폴더를 열어주세요.

 

 

 

2. 스프링부트 프로젝트 만들기

Create new Spring Starter Project 로 새로운 프로젝트를 만들어줍니다.

  • Name : backend
  • Type : Maven Project
  • Version : 11
  • Group : com.juni
  • Package : com.juni.blog

 

 

 

3. 의존성 체크하기

의존성은 4가지를 넣고 Finish로 생성해줍니다.

  • Spring Boot DevTools
  • Spring Data JPA
  • H2 Database
  • Spring Web

<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>

 

4. Application 설정하기

src/main/resources에 application.properties를 application.yml 로 이름을 바꾸고, 아래 설정을 해줍니다.

server:
  servlet:
    encoding:
      charset: utf-8
      enabled: true

spring:
  datasource:
    url: jdbc:h2:mem:testdb
    driver-class-name: org.h2.Driver
    username: sa
    password:

  jpa: #앞에 두 칸 띄어쓰기 주의
    hibernate:
      ddl-auto: create
      naming:
        physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl

 

 

 

5. 동작하는지 확인하기

프로젝트 우클릭 - Run As - Spring Boot App 으로 실행합니다.

 

 

 

크롬 주소창에 localhost:8080 을 입력합니다. 아래 Whitelabel Error Page가 나온다면 정상적으로 작동중입니다.

 

 

이제 기본적인 설정이 끝났습니다. 코딩을 시작해봅시다!

 

 


🙆‍♂️ API 만들기

1. 패키지, 클래스 구성하기

패키지와 클래스를 만들어줍니다.

패키지 클래스
domain Post, PostRepository
service PostService
web PostController

 

 

 

 


Post.java

주고 받을 데이터에 해당하는 post.java를 만들겠습니다. [아이디, 제목, 내용] 으로 필드를 만들고, 아이디를 자동생성해주는 GeneratevValue 어노테이션을 사용합니다. getter와 setter를 생성해줍니다.

package com.juni.blog.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Post {

	@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
	public Long id;
	public String title;
	public String contents;
	
	public Long getId() {
		return id;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getContents() {
		return contents;
	}
	public void setContents(String contents) {
		this.contents = contents;
	}
	
	
}

 

 

 

 


PostRepository.java

post를 DB에 저장하고 꺼내주는 역할을 하는 JpaRepository 인터페이스를 만들겠습니다.

 

package com.juni.blog.domain;

import org.springframework.data.jpa.repository.JpaRepository;

public interface PostRepository extends JpaRepository<Post,Long>{

}

 

 

 


PostService.java

 서비스에서는 실직적인 비즈니스 로직이 이루어지며, 트랜잭션 처리또한 할 수 있습니다.

package com.juni.blog.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.juni.blog.domain.Post;
import com.juni.blog.domain.PostRepository;

@Service
public class PostService {

	@Autowired
	private PostRepository postRepository;
	
	@Transactional
	public Post save(Post post) {
		return postRepository.save(post);
	}
	
	@Transactional(readOnly = true)
	public List<Post> findAll() {
		return postRepository.findAll();
	}
}

 

 

 


PostController.java

URL과 매핑시켜줄 메소드들을 정의하는 postController를 코딩합니다. save 핸들러와 findAll 핸들러를 코딩합니다. ResponseEntity로 HttpStatus를 리턴 해주겠습니다. 그리고 직접적인 save와 findAll은 bookService에게 위임시키겠습니다.

 

@CrossOrigin은 크롬과 같은 브라우져에서 보안 때문에 요청을 막는걸 허용해주는 어노테이션인 것 같습니다.

package com.juni.blog.web;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.juni.blog.domain.Post;
import com.juni.blog.service.PostService;

@RestController
public class PostController {

	@Autowired
	private PostService postService;
	
	@CrossOrigin
	@PostMapping("/post")
	public ResponseEntity<?> save(@RequestBody Post post) {
		return new ResponseEntity<>(postService.save(post), HttpStatus.CREATED);
	}
	
	@CrossOrigin
	@GetMapping("/post")
	public ResponseEntity<?> findAll() {
		return new ResponseEntity<>(postService.findAll(), HttpStatus.OK);
	}
}

 

 

 

스프링을 실행시킨 뒤, 크롬에서 localhost:8080/post를 입력하면, findAll이 호출되어 빈 배열이 표시됩니다.

 

 


이렇게 해서 backend 구현이 끝났습니다.

다음 포스팅에서 프론트엔드에서 글쓰기를 해서 저 배열을 채워보고, 그 배열을 활용해 화면에 이쁘게 나타내도록 하겠습니다!

 

4. 리엑트, 스프링부트 연동 (3/3) - API를 사용하여 정보 주고받기

! 이 포스팅은 유튜버 "메타코딩" 님의 강의를 활용해 만들었습니다. react & springboot www.youtube.com 1편 - 프론트엔드 설정과 화면그리기 - https://junikang.tistory.com/274 2편 - 백엔드 설정과 API 만들..

junikang.tistory.com

 

댓글