[무한 스크롤] 게시판 리스트 출력 [1] - 사전 준비

이번시간에는 게시판 리스트 출력을 무한 스크롤로 이용하여 출력을 진행해본다.

 

Github 저장소 : https://github.com/BerkleyLim/scroll_project

GitHub - BerkleyLim/scroll_project: Front : React 기반, Back : spring boot를 이용하여 데이터를 받고 게시판 내

 

개발 환경은

Front : React 기반

Back-End : Spring Boot 기반

DB : My-SQL 기반

 

Nodejs 및 npm 패키지 / java와 gradle 가 미리 설치를 한 상태로 먼저 환경 설정을 셋팅을 한다.

 

1. React 설치 및 라이브러리 추가

 

1) 먼저 리액트 프로젝트를 설치 후 아래와 같이 입력

npx create-react-app scroll_project_front

 

2) 리액트 템플릿 scroll_project_front 에 먼저 진입을 한다.

cd scroll_project_front

 

3) 각 스크롤 라이브러리 및 리액트 템플릿에 필요한 것을 설치한다.

※ 필요 라이브러리 : axios, react-router-dom, immutablilty-helper, reactstrap, bootstrap, react-intersection-observer 설치

npm install axios --save
npm install react-router-dom --save
npm install immutability-helper --save
npm install reactstrap --save
npm install bootstrap --save
npm install react-intersection-observer --save

 

 

4) Package.json을 설치화면 아래와 같이 설치 되어 있으면 정상적으로 설치 되었음을 확인할 수 있습니다.

 

2. Database 생성 후 적용

1)  DBeaver 오픈 : 필자는 github로 Database명을 지정하고, scroll_board 테이블로 사용하였습니다.

 

 

2) Table 필드 목록

==> 현재는 무한 스크롤 연습을 위해 간단하게 필드를 3개를 지정하였습니다.

 

bno : 게시판 인덱스

title : 게시판 제목

contents : 게시판 내용

 

 

 

3. Spring Boot 설치 및 환경 설정

1) VS Code를 열어 "ctrl + p" 클릭  후 아래와 같이 입력

 

이후, 

• Specify Spring Boot version: : spring 버전 설정
• Specify Project language: : spring 에 사용할 언어 설정 (필자는 java로 설정) 
• Input Group Id : 본인이 설정하고 싶은 main package 
• Input Artifact Id : 본인이 프로젝트명을 지정 하고 싶은 이름 설정 (필자는 scroll_project_back 으로 설정)
• Specify packaging type : 아무거나 클릭 (필자는 Jar로 설정)
• Specify Java version : 회사별 java 버전은 11을 주로 쓰기 때문에 11로 설정
• Choose dependencies : spring library에서 사용할 것을 셋팅
                                  (추후, mavenrepository 에서 가져와 gradle.build 에 별도로 추가 할 수 있음)
        먼저, Spring Boot DevTools,. Lombok, MyBatis Framework, spring web, spring data JDBC, h2 클릭 후 엔터

폴더 선택시 spring boot project 해당 폴더에 설정 후 Generate into this folders 클릭

 

아래와 같이 설치 완료 함을 확인 가능합니다.

 

 

 

 

2)  다음은 Mysql을 build.gradle을 열어 dependencies에
   runtimeOnly 'com.mysql:mysql-connector-j' 를  추가한다.

dependencies {
	......
	runtimeOnly 'com.mysql:mysql-connector-j'
}

 

 

3) 이후,  <application.property => application.yml> MyBatis를 연동합니다.

server:
  shutdown: graceful

spring:
  h2:
    console:
      enabled: true

  datasource:
    url: jdbc:mysql://localhost:3306/{본인데이터베이스명}?useSSL=false&serverTimezone=UTC&zeroDateTimeBehavior=convertToNull&allowPublicKeyRetrieval=true&autoReconnect=true
    driverClassName: com.mysql.cj.jdbc.Driver
    password: {DB 비밀번호} # 비밀번호 수정
    username: {DB 사용자명}

  devtools:
    livereload:
      enabled: true

  sql:
    init:
      encoding: UTF-8

mybatis:
  type-aliases-package: com.example.scroll_project_back.entity
  configuration:
    cache-enabled: true
    use-column-label: true
    use-generated-keys: false
    map-underscore-to-camel-case: true
    default-statement-timeout: 25000
    jdbc-type-for-null: NULL
  mapper-locations: classpath:/mapper/*Mapper.xml

 

 

4) ./configuration/WebConfig.java 에서 react 서버와 Cors 문제 해결 하기 위해 아래와 같이 설정

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/api/**")
                .allowedOrigins("http://localhost:3000");
    }
}

 

 

5) resources 디렉토리의 mapper/BoardMapper.xml 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "//mybatis.org/DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.scroll_project_back.mapper.BoardMapper">
  
  <!-- <select id="selectList" resultType="java.util.List"> -->
  <select id="selectList" resultType="Board">
    select * from scroll_board
  </select>
  
  
</mapper>

 

6) java 디렉토리의 entity/Board.java

package com.example.scroll_project_back.entity;

import lombok.Data;

@Data
public class Board {
  Long bno;
  String title;
  String contents;
}

 

 

7) java 디렉토리의 mapper/BoardMapper.java

package com.example.scroll_project_back.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import com.example.scroll_project_back.entity.Board;

@Repository
@Mapper
public interface BoardMapper {
  List<Board> selectList();
}

 

 

8) java 디렉토리의 service/BoardService.java

package com.example.scroll_project_back.service;

import java.util.List;

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

import com.example.scroll_project_back.entity.Board;
import com.example.scroll_project_back.mapper.BoardMapper;

@Service
public class BoardService {
  @Autowired
  BoardMapper boardMapper;

  public List<Board> selectList() {
    return boardMapper.selectList();
  }
}

 

 

9) java 디렉토리의 controller/BoardController.java

package com.example.scroll_project_back.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.scroll_project_back.entity.Board;
import com.example.scroll_project_back.service.BoardService;

@RestController
@RequestMapping("/api")
public class BoardController {
  @Autowired
  BoardService boardService;

  @GetMapping("/select/list")
  public List<Board> selectList() {
    return boardService.selectList();
  }
}

 

 

10) POST API을 열어서 아래와 같이 결과 값 나오는지 확인

 

현재 데이터를 생성 하지 않아 빈값이 나옵니다.

전송하였을 때, 빈값이 나오면 mybatis 연동을 성공적으로 마칠 수 있습니다.