[React] 리액트 게시판 만들기 #1 - 개발환경세팅

안녕하세요. 원더제이입니다.
이전 포스팅에서 Vue.js를 활용해 게시판 만들기를 진행해봤습니다.
이번에는 리액트를 활용해서 게시판을 만들어보려고 합니다.

리액트에 관한 기초를 배웠다는 가정하에 진행하며,
만일 강의가 필요하신분은 노마드코더 리액트 기초 강의를 들어보시길 추천드립니다. :)
2021 업데이트 강의들만으로도 충분합니다.
nomadcoders.co/react-for-beginners/

개발환경

게시판 만들기를 시작하기전에 개발환경을 먼저 세팅해보겠습니다.
(버전은 23년 4월 16일 기준입니다.)

• Windows 11
• Node.js v18.13.0 (npm v8.19.3)
• React 18.2.0
• Springboot 2.7.10
• H2 Database
• JVM 17

Node.js

node.js는 공식 사이트에서 다운로드 가능합니다.
https://nodejs.org/ko/download/

프로젝트 만들기

이전의 포스팅에서는 프론트엔드와 백엔드의 프로젝트를 따로 구분했었습니다.
이번에는 기본 백엔드 프로젝트 안에서 프론트엔드의 폴더를 만들어서 진행해보도록 하겠습니다.
사용하는 프레임워크는 Java & Spring Framework입니다.

Springboot 프로젝트 생성

인텔리제이 Ultimate를 사용하면 바로 Springboot 프로젝트를 생성할 수 있습니다.

Name은 자유롭게 지정하셔도 됩니다.
나머지는 Java, Gradle - Groovy, Java 17, Packaging Jar로 선택합니다.

Spring Boot 버전은 2.7.10, 의존성은 Spring Web만 추가하고 Create를 눌러 완료합니다.

인텔리제이 커뮤니티 버전을 사용하시거나, VSCode, 이클립스 등 다른 IDE를 사용하신다면
Spring initializr 사이트에서 생성한 파일을 다운로드 받아 동일하게 만들 수 있습니다.

프로젝트 생성이 완료되었습니다.

이어서 게시판에 표시할 글을 저장할 데이터베이스는 On Memory에서 사용하는 H2 DB를 사용하겠습니다.
(다른 웹 프레임워크를 사용하신다면 MariaDB나 MySQL 등의 다른 DB를 세팅해주세요.)

build.gradle파일을 열어 dependencies안에 아래 내용을 추가합니다.

implementation 'com.h2database:h2:1.4.193'

내용을 추가하고 빨간부분의 Load Gradle Changes를 꼭 눌러주셔야 프로젝트에 반영됩니다.

이어서 src/main/resources 안에 있는 application.properties 파일을 열고 아래 내용을 추가합니다.

spring.h2.console.enabled=true
spring.h2.console.settings.web-allow-others=true

완료되었다면 프로젝트를 실행해봅니다. 오른쪽 상단의 초록색 화살표를 누르면 실행됩니다.

정상적으로 서버가 시작했다면 웹 브라우저에서 주소창에 localhost:8080/h2-console 을 입력합니다.

JDBC URL에 아래 주소를 입력합니다.

jdbc:h2:mem:testdb

Test Connection을 눌러 Test successful이 뜨는지 확인하고 Connect를 눌러봅니다.
위 처럼 화면이 바뀐다면 H2 DB 실행이 완료된 것입니다.

React 프로젝트 생성

Springboot와 H2 DB 세팅이 완료되었다면 이제 화면을 작업하기 위해 리액트 프로젝트를 생성하겠습니다.

IDE의 터미널을 열고 create-react-app을 통해 생성하도록 합니다.
(리액트 프로젝트의 위치는 Springboot 프로젝트 루트 디렉토리 바로 아래 입니다.)

npx create-react-app frontend

생성이 완료되었으면 폴더로 이동한 후 시작합니다.

cd frontend
npm start

리액트 개발서버가 시작되면 웹 주소를 통해 브라우저에서 확인할 수 있습니다.

리액트 프로젝트도 생성이 완료되었습니다.

현재까지의 프로젝트 구성입니다.

다음 포스팅에서는 백엔드 프로젝트의 컨트롤러 및 기본 데이터를 세팅하도록 하겠습니다.
감사합니다.