React05 - Rest API

백엔드와 연결하기

REST API

- 자원(Resource)을 기반으로 하여 데이터를 주고 받는 시스템

 

SOA - 서비스기반 설계구조

    /member/login    회원 로그인 페이지

    /board/detail    게시글 상세 페이지

    클래식웹(서버사이드렌더링) 방식일 때 쓰는 형태

 

PUT은 전체를 바꿀 때, PATCH는 하나만 바꿀 때 사용

 

spring22rest 프로젝트 생성

 

properties 파일 구문 추가

# project setting file

# key=value

 

#sever setting

#server.servlet.context-path=/khacademy

##server.port=9999

 

# database setting

spring.datasource.driver-class-name=oracle.jdbc.OracleDriver

spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe

spring.datasource.username=C##home

spring.datasource.password=home

 

spring.datasource.hikari.data-source-properties.oracle.jdbc.timezoneAsRegion=false

 

# mybatis setting

mybatis.type-aliases-package=com.kh.spring22.dto,com.kh.spring22.vo

mybatis.mapper-locations=/mybatis/**/*-mapper.xml

mybatis.configuration.map-underscore-to-camel-case=true

mybatis.configuration.jdbc-type-for-null=VARCHAR

 

#logging setting

logging.level.root=warn

logging.level.com.kh=debug

 

logging.pattern.console=[%-5level] %msg - %c [%d{yyyy-MM-dd HH:mm:ss.S}] %n

 

# logging file setting

#logging.file.name= logs/server.log

#logging.pattern.file= %d{yyyy-MM-dd HH:mm:ss.S} [%-5level] %msg - %c %n

#logging.logback.rollingpolicy.max-file-size=10MB

#logging.logback.rollingpolicy.file-name-pattern=${LOG_FILE}-%d{yyyy-MM-dd-HH}-%i.log

 

#custom properties setting

#custom.fileupload.home=C:/upload/profile

 

#email setting

#custom.email.host=smtp.gmail.com

#custom.email.port=587

#custom.email.username=qufquf12120

#custom.email.password=ajeprfgyoraxwuks

springdoc 라이브러리 가져오기

<!-- springdoc -->

<dependency>

<groupId>org.springdoc</groupId>

<artifactId>springdoc-openapi-ui</artifactId>

<version>1.7.0</version>

</dependency>

restcontroller 패키지 생성 후 

PocketmonRestController 파일 생성

@CrossOrigin

//@CrossOrigin(value= {"http://localhost:3000", "http://localhost:5500"})

@RestController

@RequestMapping("/pocketmon")

public class PocketmonRestController {

// 아래 다섯 개의 매핑을 이용하여 프론트엔드에 대응하는 Rest 기능을 구현

// @GetMapping - 조회 (post로 하는 경우도 있다.)

// @PostMapping- - 등록

// @PutMapping - 전체 수정

// @PatchMapping - 일부 수정

// @DeleteMapping - 삭제

 

@GetMapping("/")

public String list() {

return "hello world";

}

}

properties에 springdoc 세팅 추가

# springdoc open-api

springdoc.swagger-ui.path=/swagger-ui/index.html

springdoc.packages-to-scan=com.kh.spring22.restcontroller

http://localhost:8080/swagger-ui/swagger-ui/index.html 페이지 가보기

dto 패키지 생성 후 PocketmonDto 파일 생성

@Data @Builder @NoArgsConstructor @AllArgsConstructor

public class PocketmonDto {

private int no;

private String name, type;

 

}

mybatis 폴더 생성 후 pocketmon-mapper.xml 생성

<?xml version="1.0" encoding="UTF-8"?>

 

<!DOCTYPE mapper

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"https://mybatis.org/dtd/mybatis-3-mapper.dtd">

 

<mapper namespace="pocketmon">

<select id="list" resultType="PocketmonDto">

select * from pocketmon order by no asc

</select>

</mapper>

dao 패키지 생성 후 PocketmonDao 파일 생성

public interface PocketmonDao {

List<PocketmonDto> selectList();

}

PocketmonDaoImpl 파일 생성

@Repository

public class PocketmonDaoImpl implements PocketmonDao{

@Autowired

private SqlSession sqlSession;

 

@Override

public List<PocketmonDto> selectList() {

return sqlSession.selectList("pocketmon.list");

}

 

}

PocketmonController 구문 수정

@GetMapping("/")

public List<PocketmonDto> list() {

return pocketmonDao.selectList();

}