[개인 프로젝트 VSCode] React, SpringBoot, mysql 개발 환경 연동 1

이번에 개인프로젝트를 진행하면서 [ VSCode | Mac 환경 ]에서 React, SpringBoot, mysql 개발 환경을 설정하는 과정과 그 과정에서 해결한 오류 등 을 정리 해보았다. 이미 익스텐션이나 jdk 이런 부분은 다 설치가 되어있어서 그 부분은 제외하고, 
vscode에서 리액트 프로젝트를 만들고 SpringBoot, mysql을 연동해 화면에 띄우는 과정까지 정리하려고 한다.

 

1.  React 프로젝트 생성

• VSCode 터미널에서 "npx create-react-app 프로젝트 이름" 명령어를 입력해 주었다. 
• 그 과정에서 "Create React App의 글로벌(전역) 설치를 더 이상 지원하지 않습니다"라는 오류가 나서 전역 설치 제거 후 다시 설치해 주었는데 그 오류 해결 과정들은 아래의 글들에 적어두었다.

https://siyoonn.tistory.com/150
https://siyoonn.tistory.com/151

---

2.  Spring 프로젝트 생성 

• [Mac 기준] Shift + Command + P > Spring Initializr 입력 
• Build는 Maven 또는 Gradle 중 선택할 수 있는데, 그동안 Maven을 주로 사용했기 때문에 배포 속도가 더 빠른 Gradle에 대해 더 공부해 보고 싶어서 Create a Gradle Project로 진행했다.

Create Project

Spring Boot 버전은 3.2.10으로 해주었다. 

Spring Boot version

프로젝트 언어는 Java로 해주었다.

project language

com.example.(프로젝트이름) 입력 후 packaging type은 jar로 해주었다.

Jar와 War 차이는? 아래의 블로그에 따로 정리해 두었다.
https://siyoonn.tistory.com/156

packaging type

자바 버전은 17을 사용하고 있어서 17로 해주었다.

Java version

Spring Web으로 프로젝트를 만들어주었다. 

Spring Web

---

3.  데이터 베이스 생성 

DBeaver > 왼쪽 맨 위 새 데이터 베이스 생성 아이콘 클릭 > mysql 클릭 > 다음 버튼 클릭 

mysql

 

[데이터 베이스 연결 설정]
Database, Username, Password를 입력하고 완료를 누르기 전 Test Connenction를 클릭했더니 오류가 떴다... 

Connection Settings

// 오류 내용
[MySQL] Access denied for user 'root'@'localhost' (using password: YES)

4.  Database 연결 오류 해결 과정 

1.  터미널에서 MariaDB 로그인

맥 터미널을 열고  mysql -u root -p 명령어를 입력해 주었다. 그런데 비밀번호가 자꾸 틀려 오류가 나는 상황이 생겼다..

root 비밀번호가 없나..? 싶어 그냥 Eenter를 쳤는데 Access denied for user 'root'@'localhost' (using password: NO) 이번엔 이런 오류가 나서 아래 블로그를 참고해서 해결했다.

https://velog.io/@security_code/ERROR-1045-28000-Access-denied-for-user-rootlocalhost-using-password-YES

2.  사용자 권한 확인

root 사용자에게 데이터베이스에 대한 권한이 부여되었는지 확인해 주었다.

SHOW GRANTS FOR 'root'@'localhost';

3.  사용자 권한 부여

데이터베이스에 권한이 없다고 나와서 특정 계정에 대한 권한을 부여하는 명령어를 입력해 주었다.

-- 예시 > Database: db_nn, username: root, 접속 IP: localhost 라고 했을때
-- db_nn 데이터베이스의 모든 테이블에 대해 root 사용자에게 모든 권한을 부여한다.
-- 예시 > GRANT ALL privileges ON db_nn.* TO 'root'@'localhost' IDENTIFIED BY '패스워드';

GRANT ALL privileges ON Database이름.* TO '계정'@'접속IP' IDENTIFIED BY '패스워드';
FLUSH PRIVILEGES; //변경 사항 적용

4.  또 다른 오류 

권한은 잘 부여 됐는데 데이터베이스가 존재하지 않는다는 오류가 났다 ㅜ ㅅ ㅜ
근데 왜 존재하지 않았지...? 여전히 공부할 부분이 넘쳐난다... 🥹

// 오류 내용
Unknown database 'Database이름’

5.  데이터베이스 생성

아래의 명령어를 입력해 데이터베이스를 생성해 주었다.

CREATE DATABASE Database이름;

 

이렇게 데이터베이스 생성과 권한부여까지 다 해주니 다른 오류가 나지 않았다.

 

다음 글에는 VSCode에서 프론트엔드(React), 백엔드(Spring Boot), 그리고 데이터베이스를 연결하여 포트를 일치시켜 화면을 띄우는 풀스택 개발 환경을 설정하는 과정을 정리하려 한다.

https://siyoonn.tistory.com/153

[개인 프로젝트 VSCode] React, SpringBoot, mysql 개발 환경 연동 2