[나만무] 로그인 - 로그아웃

[나만무] 로그인 - 로그아웃

 

React-Node-MySQL 연동

---

프로젝트 진행 순서

1. CRA 생성

2. server 폴더 생성 - db 연결, 서버

3. Proxy설정 - package.json

 

폴더 구조

 

Client Server

리액트를 익히면서 클라이언트 서버가 있다는 걸 처음 알았다.

3000번 포트로 이어져 있기 때문에 이걸 proxy를 통해 포트 전환 해줘야 한다.

 

터미널창을 분리해서 두개의 서버를 돌려야 한다.

폴더 진입 주의!!

Run Client

 

Run Server

 

.env

DANGEROUSLY_DISABLE_HOST_CHECK=true 

PORT = 8000

MYSQL_HOST = 127.0.0.1
MYSQL_USERNAME = root
MYSQL_PASSWORD = [비번]
MYSQL_DB = [DataBase이름]
MYSQL_PORT = 3306

위 코드 중

DANGEROUSLY_DISABLE_HOST_CHECK=true

이 구문은 proxy 에러로 인해..

react-scripts도 4버전에서 5버전으로 업그레이드 시켜줬다.

그랬더니 proxy관련 에러는 없어졌다.

 

src/server/dbconfig.js

require('dotenv').config({ path: '../../.env' });

const mysql = require('mysql2/promise');

const pool = mysql.createPool({
    host: process.env.MYSQL_HOST,
    user: process.env.MYSQL_USERNAME,
    password: process.env.MYSQL_PASSWORD,
    port: process.env.MYSQL_PORT,
    database: process.env.MYSQL_DB,
});

module.exports = pool;

---

프록시 설정

terminal

 $ npm i cross-env

 

package.json

  },
  "proxy": "http://localhost:cross-env PORT/",
  "scripts": {
	....
  },

 

처음에 아무 생각없이 

"proxy": "http://localhost:" + process.env.PORT,

해줬는데, .js가 아니라, .json파일 이었다.

오류를 보고서야 알았다. ㅇㅅㅇ

결국 파워 검색후, 라이브러리 깔고 해결!!

---

sql 이용

src/server/server.js

const pool  = require('./dbconfig');

// get test
app.get("/users/info", async (req, res) => {
    console.log('get연결 확인!');
    let connection = null;

    try {
        connection = await pool.getConnection();
        const [result] = await connection.query(`SELECT * FROM USers`);
        connection.release();
        console.log(result);
        res.send(result);
    } catch(err) {
        connection?.release();
        res.status(400).send('ERROR');
    }
});

// 회원가입
app.post('/users/register', async(req, res) => {
    const { id, password, confirmPassword } = req.body; // 구조분해 할당

    let connection = null;

    try {
        connection = await pool.getConnection();

        const sql = `INSERT INTO Users(id, password, confirmPassword ) 
        VALUES ('${id}', '${password}', '${confirmPassword}')`
        await connection.query(sql);
        connection.release();
    } catch(err) {
        connection?.release();
        res.status(400).send('ERROR');
        connection.release();
        console.log(result);
    }
})

users테이블 생성 시, userId는 auto increment 설정해줬다.

---

리액트 코드

테스트용으로 한페이지에 만들어 둔거라, 리액트 코드라고 쓰기도 민망하다.

여러 정보를 찾아 이제 리액트 페이지도 분리해 페이지전환, 상태관리(아직 감이 안잡힌다. 클론코딩을 해야할듯..), antDesign, TailWind 등을 이용해 좀 꾸밀 생각이다.

 

App.js

import React, { useState } from "react";
// axios 쓰는 목적 : 서버에 데이터를 요청할 때 비동기적으로 요청하려고
import axios from 'axios'; // axios 모듈에서 axios 함수를 불러온다.

// 함수형 컴포넌트
function App() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const [inputId, setInputId] = useState("");
  const [inputPassword, setInputPassword] = useState("");

  // const selectAll = async() => {
  //   alert("selectAll!");
  //   const result = await axios.get('/users/info');
  //   console.log(result.data);
  // }

  const postData = async() => {
    try {
      // 응답성공
      const response = await axios.post('/users/register', {
        id: id,
        password,
        confirmPassword : confirmPassword
      });
      setId("")
      setPassword("")
      setConfirmPassword("")
      console.log(response);
    } catch (error) {
      // 응답실패
      console.log(error);
    }
  }

  const findUser = async() => {
    try {
      // 응답성공
      const response = await axios.post('/login', {
        id: inputId,
        password: inputPassword,
      });

      if (response.data.success) {
        alert('로그인 성공!'); // Display success alert
        const token = response.data.token;
        console.log(token);

        // Store the token in local storage
        localStorage.setItem('token', token);
      } else {
        alert('아이디 또는 패스워드가 잘못됐습니다.'); // Display failure alert
      }
    } catch (error) {
      // 응답실패
      console.log(error);
    }
  }

  const logout = () => {
    // Remove the token from local storage
    localStorage.removeItem('token');
    alert('Logged out successfully');
  }

  const isLoggedIn = () => {
    const token = localStorage.getItem('token');
    return token !== null; // Check if the token exists
  }

  const handleButtonClick = () => {
    if(isLoggedIn) {
      alert('Button functionality for logged-in users')
    } else {
      alert('로그인 후, 이용해주세요.');
    }
  }

  const handleIdChange = (event) => {
    setId(event.target.value);
  }

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  }

  const handleConfirmPasswordChange = (event) => {
    setConfirmPassword(event.target.value);
  }

  const handleInputIdChange = (event) => {
    setInputId(event.target.value);
  }

  const handleInputPasswordChange = (event) => {
    setInputPassword(event.target.value);
  }

  return (
    <div>
      <h1>SignUp Page</h1>
      <button onClick={handleButtonClick}>user Only</button>
      <br />
      아이디 : <input type="text" value={id} onChange={handleIdChange}/>
      <br />
      비밀번호 : <input type="password" value={password} onChange={handlePasswordChange}/>
      <br />
      비밀번호 확인 : <input type="password" value={confirmPassword} onChange={handleConfirmPasswordChange}/>
      <br />
      <button onClick={postData}>회원가입</button>

      <br /><br />
      <h1>Login Page</h1>
      아이디 : <input type="text" value={inputId} onChange={handleInputIdChange}/>
      <br />
      비밀번호 : <input type="password" value={inputPassword} onChange={handleInputPasswordChange}/>
      <br />
      <button onClick={findUser}>로그인</button>

      <br />
      <br />
      <button onClick={logout}>로그아웃</button>
    </div>
  );
}

export default App;

---

직접 프로젝트을 진입하면서 axios도 익혔다 ajax랑 큰 차이 없고 node.js는 심지어 코드 변화가 없어 좋았다.

node.js 짱인듯!

 

리액트로 페이지 꾸미기, 상태관리, 페이지 전환 등을 익히고

로그인시, logalStorage에 user정보를 저장해 세션관리를 하는게 목표!

+ 소셜 로그인진입, 내일은 back단과 refresh token까지 생성하는걸 목표로 하고 있다.

지금 구현한건 acess token만...

 

나름 재밌다!ㅎㅎㅎㅎ