React, NodeJS 와 MySQL 을 이용한 로그인/회원가입

express를 비롯한 Node.js의 모듈들과, React로 구현한 로그인, 회원가입 예제를 따라해볼 거다.
앞 포스팅에서 설치한 MySQL을 데이터베이스로 사용한다. (MySQL 설치 및 접속)

1. MySQL Setting

✔ mysql 접속

mysql> mysql -u root -p

MySQL Server 의 bin폴더로 이동하여 mysql에 접속해준다.
📁 폴더 경로 : C:\Program Files\MySQL\MySQL Server 8.0\bin

✔ 사용자 및 데이터베이스 생성

mysql> CREATE USER 사용자ID;   // 사용자 추가
mysql> CREATE USER 사용자ID@localhost IDENTIFIED BY '비밀번호';

먼저 사용할 사용자를 추가해준다. [사용자ID] 부분에 원하는 사용자ID를 입력해주면 된다.

mysql> CREATE DATABASE 생성할 데이터베이스명;   //DB 생성
mysql> SHOW DATABASES;   //생성한 DB 확인

그 다음 사용할 데이터베이스를 생성해주고 잘 생성되었는지 확인한다.

mysql> GRANT ALL privileges ON 데이터베이스명.* TO 사용자ID@localhost;   //추가한 사용자에게 DB 권한 주기

사용자에게 생성한 DB의 권한을 준다.

✔ 테이블 생성

mysql> EXIT;
mysql> mysql -u student -p   //student 사용자로 접속
mysql> use userinfo   //생성한 DB 사용

사용자 추가와 데이터베이스 생성이 완료되었다면, root에서 나와서 추가한 사용자로 재접속을 해준다.

마지막으로 로그인에 필요한 데이터들을 생성해준다.

• id
• username
• password
• …

2. 필요 모듈 설치

✔ 리액트 설치

npx create-react-app [프로젝트 명]

위 명령어로 리액트 프로젝트를 생성한다.

• mysql
• express
• express-session
• express-mysql-session
• body-parser
• bcrypt (비밀번호를 해시 암호화 해줌)

위 필요한 모듈들을 npm을 이용하여 다운로드 해준다.

npm install express
npm install express-session
npm install express-mysql-session
npm install mysql2
npm install bcrypt
npm install body-parser

✔ 파일 생성 및 정리

위는 기존 파일의 모습이다. 여기서 개발에 필요한 폴더 및 파일을 생성해준다.

📂 생성 폴더 및 파일 📂

• lib 폴더
• lib/db.js 파일
• lib/sessionOption.js
• server.js 파일

위처럼 빨간펜 부분을 만들어주면 된다.

3. 구현

✔ server.js

✔ App.js

✔ App.css

✔ db.js

✔ sessionOption.js

4. 실행

완성!!😊