! 이 포스팅은 유튜버 "메타코딩" 님의 강의를 활용해 만들었습니다.
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 구현이 끝났습니다.
다음 포스팅에서 프론트엔드에서 글쓰기를 해서 저 배열을 채워보고, 그 배열을 활용해 화면에 이쁘게 나타내도록 하겠습니다!
'성동스터디 (2021.09.09 ~ ing) > React + Spring' 카테고리의 다른 글
[Spring][React] 업로드 이미지 불러오기 (4) | 2021.12.20 |
---|---|
[Spring][React] 이미지 업로드 (2) | 2021.12.19 |
[React + Spring Boot 연동 (3/3)] - API를 사용하여 정보 주고받기 (0) | 2021.12.11 |
[React + Spring Boot 연동 (1/3)] - 프론트엔드 설정과 화면그리기 (2) | 2021.12.09 |
댓글