[웹 2팀] 1. 웹-토이프로젝트 시작하기(ReactJS + Spring Boot, 워크벤치 사용법)

1. 연동 참고 자료

ReactJS와 Spring Boot를 사용하여 프로젝트를 시작할 때 참고했던 동영상, 블로그와 추천 자료를 정리했다. 본격적인 프로젝트를 시작하기 전, 모두 리액트와 스프링부트에 대한 경험이 적어 둘을 같이 사용해보고 연동하는 것을 먼저 시도했다. 그 때 참고했던 자료들을 공유하려고 한다.

hjjooace.tistory.com/entry/React-Spring-Gradle-Project-%EC%97%B0%EB%8F%99?category=0

React + SpringBoot (Gradle) 손쉽게 연동하기

https://sundries-in-myidea.tistory.com/71

Spring Boot와 React를 연동하여 개발환경을 만들어보자

Spring Boot와 React의 연동을 위해 참고했던 블로그들 중 시도해봤던 것들이다. 코드와 예시가 쉽고 한국어로 되어 있어 가장 처음에 연동을 시도해보고 결과만 확인해보고 싶을 때 참고하면 좋다.

ReactJS + Spring Boot CRUD Full Stack Application

ReactJS와 Spring Boot를 이용해서 연동은 물론 간단한 CRUD를 만드는 과정을 설명과 함께 파트별로 나누어 동영상으로 만들어져 있다. 튜토리얼이 자세하여 설정이 다르거나 아직 공부하지 못한 부분이 있어도 자신에게 알맞게 변형하거나 따라할 수 있어 초보자에게 아주 적합하다. 블로그와 깃허브 자료도 공유하고 있어 이해 안 가는 부분은 전체 코드를 보고 파악할 수도 있다.

+) 이 튜토리얼부터 따라하는 것도 좋지만 재생 목록이나 블로그에 React만 혹은 Spring Boot로만 구성된 다른 튜토리얼도 있다. 그리고 함께 사용할 때 간단한 Rest API만 먼저 설명한 영상도 있다. 똑같은 구조를 사용하면서 기능을 추가하거나 그 속에 있는 한 가지 주제로 튜토리얼을 만드는 편이라 하나씩 차근차근 보는 것을 추천한다.

 

2. 참고

 1)처음 연동을 시도할 때 팀원 중 2명이 버전때문에 에러를 만났다. 참고한 블로그 글의 React폴더 속에 serviceWorker.js라는 이름의 파일이 포함되어 있는데, 버전이 올라가면서 reportWebVitals.js로 파일명이 바뀌었다. 이 두 파일명으로 인해 에러가 난다면 버전을 확인하거나 소스파일에 어떤 파일이 있는지 확인해보길 추천한다.

 2) Spring boot를 배웠던 인프런에서 gradle로 프로젝트를 만들었었는데 대부분 maven으로 만들어져 있었다. pom.xml파일의 <dependencies></dependencies>속에 있는 것을 체크하여 프로젝트를 만들었더니 아무 문제 없이 돌아갔다. Spring boot에 익숙한 코어 멤버들이 gradle을 추천하여 그대로 사용 중이다.

 3) 참고한 영상이 mysql을 DB로 사용하는데 팀원들 중 mysql을 CLI로도 워크벤치로도 사용해보지 않은 경우가 많아 훨씬 간단한 워크벤치 사용법을 캡처로 정리하였다.

1. 스키마 만들기(한글 사용시 utf8 선택)

1

2. 사용자 계정 추가

3. 사용자 권한 추가

*원하는 스키마 선택

필요한 권한만 설정해도 상관없음

3. Connection 추가

4. Table추가(한글 사용 시 utf8설정)