본문 바로가기
[ Programming ] Project/React JS CRUD with Spring Boot

[리액트, 스프링부트 연동하여 CRUD 구현] #8 - 스프링부트에서 환경설정하기 (8/10)

by the_little_coder 2020. 1. 21.

리액트, 스프링부트 연동하여 CRUD 구현

#8 - 스프링부트에서 환경설정하기



자, 드디어 자바에서 작업할 시간입니다. 작업하기 이전에 지난 글까지 우리가 작업한 리액트 앱의 위치를 조금 바꿔주겠습니다. 바꾸려고 하는 이유는 우리가 back-end(자바)와 front-end(리액트)를 구분하여 작업하고, back-end와 front-end의 언어와 이를 작업하는 에디터가 달라 명확히 구분해주어야 할 필요가 있기 때문입니다. 나중에 헷갈리지 않고 파일을 잘 정리한 상태에서 작업하기 위해 정리를 한다고 생각하시면 될 것 같습니다.


먼저, 기존 test 폴더의 이름을 React CRUD with SpringBoot 로 변경했습니다. 그리고 back-end, front-end 폴더를 2개 생성했습니다. 우리가 작업한 리액트 앱은 front-end이기 때문에 front-end 폴더에 리액트 파일들을 넣어주세요. 그리고 잘 작동되는지 VS Code로 우리가 방금 리액트 파일을 넣은 front-end 폴더를 열어 확인해보세요.



$ yarn start



잘 돌아가나요? 아래엔 우리가 방금 정리한 디렉토리 구조입니다.





이제 스프링부트입니다. SpringToolSuite4를 실행해 방금 우리가 생성한 back-end 폴더를 여세요. 





왼쪽 Package Explorer에서 New Spring Starter Project를 클릭해 스프링부트 프로젝트를 생성하세요. 진행은 다음과 같이 하시면 됩니다. 첫 화면에서는 기본설정으로 진행했습니다.





Dependencies는 5개를 선택했습니다. 스프링으로 웹 프로젝트를 진행하기 위해 Spring Web을 선택합니다. Database는 MySQL을 사용할 것이기 때문에 MySQL Driver를 선택합니다. 자바에서 SQL문을 실행하기 위해 MyBatis를 사용하기 위해 MyBatis Framework를 선택합니다. 여기까지는 필수사항입니다. 그리고 추가로 저는 2개를 더 선택했습니다. Lombok은 자바 클래스(특히 VO, DTO, Entity)를 만들 때 생성하는 getter, setter 및 기타 함수들을 어노테이션 하나로 자동으로 만들어주는 역할을 합니다. 참 편리해서 저도 한 번 써보고 이후로 계속 Lombok만 사용합니다. Lombok 설치 방법은 여기(곧 만들겠습니다)를 클릭해 주세요. 마지막으로, Spring Boot DevTools는 STS4에서 작업 시 저장할 때마다 자동으로 서버를 재부팅 해 주는 역할을 합니다. 전에는 저장하고 수동으로 서버를 재부팅 했는데, 얘는 이걸 자동으로 해주어 내가 변경한 내용이 잘 적용됐는지 비교적 편하게 확인할 수 있습니다.







스프링 스타터를 이렇게 설정하고 나면 밑의 사진 우측 하단처럼 설치가 진행됩니다. 컴퓨터 사양에 따라 다소 시간이 걸릴 수 있으니 설치가 완료될 때까지 기다려주세요.





설치가 다 진행되고 나면 아래와 같이 Package Explorer에 우리가 starter에서 설정한 프로젝트가 생성된걸 확인할 수 있습니다. pom.xml을 열어 우리가 starter에서 선택한 dependencies가 잘 들어갔는지 확인해보세요. 그리고 아래 사진 왼쪽 밑에 있는 Boot Dashboard에서 우리가 생성한 프로젝트명이 있는지 확인하세요. 우리는 위에서 기본설정으로 진행했기 때문에 demo라고 되어있을겁니다. 확인하셨다면 옆에 [devtools]가 적혀있는지 확인해보세요. 이 표시가 있다면 위에서 설명한 것 처럼 저장시 서버가 자동으로 재부팅됩니다.



이제 디렉토리 구조를 잡겠습니다. 그 후 MySQL과 MyBatis 경로를 설정하면서 이번 게시글을 마무리하겠습니다. 스프링부트 디렉토리를 다음과 같이 잡아주세요. 





src/main/java의 하위 패키지인 com.example.demo 패키지에 bean, config, controller, mapper 패키지를 생성합니다. 그리고 src/main/resources의 하위 폴더로 있는 static과 templates를 지우고 mapper 폴더를 생성합니다. 이제 application.properties에 MySQL과 MyBatis를 연결해줄 내용을 작성합니다.



application.properties

1
2
3
4
5
6
7
8
#MySQL 설정
spring.datasource.url=jdbc:mysql://localhost:3306/test_crud?useUnicode=true&characterEncoding=utf8&verifyServerCertificate=false&useSSL=false&serverTimezone=UTC
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=
 
#MyBatis 설정
mybatis.mapper-locations=classpath*:mapper/*.xml
cs



spring.datasource.url의 value값이 너무 길어서 내용이 잘렸습니다...ㅠ 해당 줄을 드래그해서 오른쪽으로 이동하면 코드내용을 다 볼 수 있습니다. 들여쓰기로 하려 했는데 그대로 따라 하면 스프링부트에서 오류가 생기기에 일부러 한 줄로 처리했습니다. application.properties에서 작성할 때 들여쓰기하지 마시고 한 줄에 다 넣으시기 바랍니다.


spring.datasource.url의 value값을 보면 localhost:3306으로 연결하며 get 형식으로 URL 요청을 합니다. 3306은 MySQL의 기본 포트(port)번호 입니다. 다음에 나오는 test_crud는 이후 우리가 MySQL에서 생성할 데이터베이스 이름입니다. spring.datasource.driver-class-name에는 우리가 어떤 SQL을 사용할 건지 적어주면 됩니다. spring.datasource.username은 우리가 위에서 url로 요청한 데이터베이스인 test_crud가 있는 MySQL 계정을 적어주면 됩니다. 저는 root계정에 database를 생성할 거라 root로 적었습니다. spring.datasource.password는 spring.datasource.username에서 적은 계정의 비밀번호를 적어주시면 됩니다. 저는 MySQL을 설치할 때 root계정에 비밀번호를 설정하지 않아서 비워두었습니다.


mybatis.mapper-locations에는 우리가 MySQL에 쿼리문을 전송할 xml파일 위치를 알려주면 됩니다. 현재 디렉토리에서 확장자가 xml로 끝나는 모든 파일명을 mapper로 참조하는 내용을 적습니다.


이제 우리가 스프링부트에서 해야 할 기본설정들은 끝났습니다. 다음 글에서는 MySQL에서 데이터베이스와 테이블을 생성하도록 하겠습니다.



댓글