회원가입 구현 중 - React, Node.js로 MySQL에 데이터 삽입

설치해야할 모듈

-- front
npm install axios

-- server
npm install express-sessionnpm 
npm install express-mysql-session

npm install cros
npm install body-parser

 

---

참고한 곳

React, Node.js와 MySQL을 이용한 로그인/회원가입 예제 (소스코드) (tistory.com)

React, Node.js와 MySQL을 이용한 로그인/회원가입 예제 (소스코드)

정말 많은 도움이 되었습니다 ... 짱!

---

* 회원가입 구현 중

  이 포스트의 코드는 회원가입 기능을 완벽히 수행하는 코드가 아닙니다. 그저 React에서 Node.js로 데이터를 보내어 MySQL에 데이터를 담는 것 까지만 되어있습니다.

  유효성 검사, 회원가입 완료 후 리다이렉트 등은 추후에 업데이트할 예정.

 

 

 

Register.jsx

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import axios from 'axios';


export const Register = () => {
  // 회원가입 요청 코드
}
export default Register;

Client에서 Server로 데이터를 보내기 위해 axios를 사용. ajax랑 무슨 차이인가 싶었는데 일단 보통 React에선 axios를 더 많이 쓰고 선호한다길래 그렇게 했다.

 

 

대략적인 회원가입 페이지

const server = 'http://localhost:3002'; // server의 url
  
// input 값을 변수에 저장
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
  
// 회원가입 요청
const register = () => {
    // 코드 출처 - https://docs.strapi.io/dev-docs/plugins/users-permissions#registration
    axios
    .post(`${ server }/register`, {
      name: name, // input값을 저장한 변수
      email: email,
      password: password,
    })
    .then(response => { // then <= 위 코드와 동시작동 안하도록 사용
      console.log('성공!');
    })
    .catch(error => {
      console.log('실패했어요:', error.response);
    });
}

  여기서 해맸던건 client의 포트번호와 server의 포트번호가 달랐다는걸 깜빡하고 axios.post('/register') 이래놓고는 왜 없는 url이라 하지?!? 이랬던거 ㅋㅋ 주의하자😅

 

<div className='form-element'>
	<p>닉네임</p>
    <input type="text" placeholder='10자 이하'
      value={ name }
      onChange={(event) => {
        setName(event.target.value); // 이벤트로 일어난 값 => email로 지정
        // console.log(event.target.value) // input에 입력하고 console에서 테스트
      }}
    />

    <p>이메일</p>
    <input type="text" placeholder='example@gmail.com'
      value={ email }
      onChange={(event) => {
        setEmail(event.target.value);
        }}
      />

    <p>비밀번호</p>
    <input type="password" placeholder='7자 이하'
      value={ password }
      onChange={(event) => {
        setPassword(event.target.value);
        }}
    />
</div>

<button onClick={ register } id='register-register'>회원가입</button>

  form 태그로 감싸려다가, 그냥 버튼에 onClick함수를 넣는게 더 편해보였다.

 

 

 

server.js

const express = require('express');
const cors = require('cors'); // CORS 
const bodyParser = require("body-parser"); // 데이터 파싱
const mysql = require("mysql"); // 데이터베이스

const app = express();
const PORT = process.env.port || '3002';

  데이터베이스는 MySQL을 사용했다. 전부 필요하니 꼭 install 잘해두자 !!

  나의 server의 포트번호는 3002로 해두었다

 

 

/* --------------------------- 환경 설정 ------------------------------- */
// CORS 활성화
app.use(cors({ 
  origin: "http://localhost:3000", // 도메인 허용 옵션
  credentials: true, // 
})); 

app.listen(PORT, ()=>{
    console.log(`running on port ${PORT}`); // server의 포트번호 3002
});

* CORS란 ?

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 (tistory.com)

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

큰 도움을 받았습니다 ... 굳 !

요약하자면,

클라이언트가 axios로 서버에 데이터를 보낼건데 둘이 포트번호가 달라 보안정책상 허용못해주겠다 ~ 하지만 데이터를 보내야하니까 특정 url에서 보낸 요청만 허락해주겠다. CORS를 설정해라 !!

라는 뜻이다. 

 

/* --------------------------- 환경 설정 ------------------------------- */
// josn 형태로 데이터 파싱
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// DB 연동 - 자기꺼 데이터베이스 연결
const db = mysql.createPool({
    host: "",
    user: "",
    password: "",
    database: "",
  });

  클라이언트가 axios로 보낸 데이터를 서버가 받을 때, 꼭 !! json 형식으로 파싱해야한다. 이거 안하면 서버가 아예 데이터를 못받더라.. 힘들었다.

 

/* --------------------------- URL 처리 함수 ------------------------------- */
// 회원가입 처리
app.post("/register", (req, res) => { // 데이터 받아서 전송
const name = req.body.name; // 닉네임
const email = req.body.email; // 이메일
const password = req.body.password; // 비밀번호

const sqlQuery = "INSERT INTO user (email, name, password) VALUES (?,?,?)";
db.query(sqlQuery, [email, name, password], (err, result) => {
  res.send("success!");
});
}
);

  그리고 MySQL로 데이터 날리기 ~ 이러면 끝이다 !!!

---

결과

잘 들어갑니다~ (본명이라 가림). 비밀번호가 보안없이 대놓고 들어가있는게 문제지만... 차차 수정해가는걸로 ㅎ_ㅎ