SpringBoot #6 SpringBoot+React 기반 간단한 게시판 생성하기 #3 React 프로젝트 생성

이전글

https://yonghwankim-dev.tistory.com/146

SpringBoot #6 SpringBoot+React 기반 간단한 게시판 생성하기 #2 페이징, 검색 처리

 

개요

이전 글에서는 SpringBoot 프레임워크를 이용하여 게시판의 게시물 검색 및 페이징을 처리하는 기능을 구현하였습니다. 이번 글에서는 기존 콘솔로 출력하던 게시물 검색 결과들을 리액트를 활용하여 웹 페이지를 구현하기 위해서 React 프로젝트를 생성하는 것을 목표로 합니다.

 

1. React 설치

https://yonghwankim-dev.tistory.com/78?category=966315 

1. 리액트, 설치 및 프로젝트 생성

위의 포스팅을 통하여 리액트를 설치를 실습합니다.

 

2. 프로젝트 디렉터리 구조 소개 및 React 프로젝트 생성

SpringBoot
  -back-end
      - boot06 (SpringBoot 프로젝트명)
          -src
          ...
  -front-end
      - boot06 (React 프로젝트명)
          -src
          -public
          -node_modules
          ...

 

back-end 디렉터리의 SpringBoot 프로젝트 생성은 이후의 포스팅에서 설명합니다.

 

React 프로젝트 생성

SpringBoot/front-end $ create-react-app boot06

Router, axios 모듈 설치

front-end/boot06 $ npm install react-router-dom
front-end/boot06 $ npm install axios

프로젝트 실행

SpringBoot/front-end/boot06 $ npm start

 

References

source code : https://github.com/yonghwankim-dev/SpringBoot-Study