개발 흔적 남기기

이전글 정보 ↓

https://myhappyman.tistory.com/302
 

서버 설정이 끝났으니 뷰를 작성하고 rest api를 통해 요청을 진행한다.
* 전부 클라이언트(react) 부분에 대한 설정이므로 모든 경로는 'client/~' 으로 시작한다.
 

🗂️ 작업 디렉토리 구조

⚙️ 추가 설치

추가할 라이브러리부터 설치한다.

$ cd client
$ npm install recoil

• recoil: 전역 state 관리
   

🚀 React 설정 및 개발

전역 state 처리용

📄/src/atom.ts

import { atom } from "recoil";

export const loginInfo = atom({
    key: "loginInfo",
    default: "",
});

📄/src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);
root.render(
    <React.StrictMode>
        <RecoilRoot>
            <App />
        </RecoilRoot>
    </React.StrictMode>
);

recoil 적용
 

📄/src/App.tsx

import React from "react";
import { useRecoilValue } from "recoil";
import { loginInfo } from "./atom";
import Login from "./components/login/login";
import MyPage from "./components/login/mypage";

function App() {
    const loginUser = useRecoilValue(loginInfo);
    return (
        <div className="App">{loginUser !== "" ? <MyPage /> : <Login />}</div>
    );
}

export default App;

loginInfo정보에 따라 로그인 페이지, 마이페이지 컴포넌트 설정
아직 MyPage에 대한 작성이 없으므로 작성을 시작한다.
 

🪄 마이페이지 작성

📄/src/components/login/mypage.tsx

import { useRecoilState } from "recoil";
import { loginInfo } from "../../atom";
import { useEffect, useState } from "react";

export default function MyPage() {
    const [loginUser, setLoginUser] = useRecoilState(loginInfo);
    const [userEmail, setUserEmail] = useState("");

    const logout = () => {
        fetch("/login/logout")
            .then((res) => res.json())
            .then((res) => {
                console.log(res);
                setLoginUser("");
            });
    };

    useEffect(() => {
        fetch("/login/getUserInfo")
            .then((res) => res.json())
            .then((res) => {
                const { user_email } = res.data;
                setUserEmail(user_email);
            });
    }, []);
    return (
        <div>
            <h2>My Page!</h2>
            <div>
                <label htmlFor="">접속한 아이디</label>
                <div>{loginUser}</div>
            </div>
            <div>
                <label htmlFor="">이메일</label>
                <div>{userEmail}</div>
            </div>
            <div>
                <button onClick={logout}>로그아웃</button>
            </div>
        </div>
    );
}

🔑 로그인 페이지 구현

📄/src/components/login/login.tsx

import { useState, useEffect } from "react";
import { useSetRecoilState } from "recoil";
import { loginInfo } from "../../atom";

export default function Login() {
    const [userId, setUserId] = useState("");
    const [userPw, setUserPw] = useState("");
    const setLoginInfo = useSetRecoilState(loginInfo);

    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.name === "userId") {
            setUserId(e.target.value);
        } else if (e.target.name === "userPw") {
            setUserPw(e.target.value);
        }
    };

    const goLogin = () => {
        const data = {
            userId: userId,
            userPw: userPw,
        };
        fetch("/login/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application / json",
            },
            body: JSON.stringify(data),
        })
            .then((res) => res.json())
            .then((data) => {
                const { msg } = data;
                if (msg === "success") {
                    setLoginInfo(userId);
                }
            })
            .catch((err) => console.log(err));
    };

    useEffect(() => {
        fetch("/login/getUserInfo")
            .then((res) => res.json())
            .then((res) => {
                const { msg, data } = res;
                if (msg === "success" && data?.user_id) {
                    setLoginInfo(data?.user_id);
                }
            });
    }, [setLoginInfo]);

    return (
        <div>
            <h2>Login Test</h2>
            <div>
                <label htmlFor="">아이디</label>
                <input
                    type="text"
                    name="userId"
                    value={userId}
                    onChange={handleInput}
                />
            </div>
            <div>
                <label htmlFor="">비밀번호</label>
                <input
                    type="password"
                    name="userPw"
                    value={userPw}
                    onChange={handleInput}
                />
            </div>
            <div>
                <button type="button" onClick={goLogin}>로그인</button>
            </div>
        </div>
    );
}

이전글 정보 ↓

https://myhappyman.tistory.com/301

이번 글에선 NodeJS가 로그인, 로그아웃에 대한 세션 처리를 동작 할 수 있도록 서버에 관한 설정을 한다.

2가지 파일 작성(/api/login.js, db/mysql_pool.js)

🗂️ Mysql Pool moduel 작성(DB 연결)

📄/db/mysql_pool.js

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

// require("dotenv").config(); // -> 환경변수 사용시 추가

const config = {
    host: process.env.host,
    user: process.env.user,
    password: process.env.password,
    database: process.env.database,
};

//mysql connection pool 생성
let pool = mysql.createPool(config);

/**
 * 1. 생성한 커넥션 풀을 통해 비동기로 쿼리를 던짐
 * 2. 응답이 오면 리소스 제거
 * 3. 조회된 결과값 리턴
 * @param {*} query
 * @returns array || boolean
 */
async function getConnection(query) {
    try {
        const connect = await pool.getConnection(async (conn) => conn);
        try {
            const [rows] = await connect.query(query);
            connect.release();
            return rows;
        } catch (err) {
            console.log("Error", err);
            connect.release();
            return false;
        }
    } catch (err) {
        console.log("DB Error");
        return false;
    }
}

module.exports = getConnection;

config부분에 각자 환경에 맞는 mysql정보를 넣는다.
 

환경변수를 사용하는경우

환경변수로 config를 채우는 경우 dotenv를 설치하고 아래 메소드를 mysql_pool.js에 추가합니다.

$ npm install dotenv

require("dotenv").config();
 

동작 구성

• mysql2의 promise를 활용하여 커넥션 풀을 생성
• getConnection 메소드에 쿼리를 던져서 비동기로 결과값을 받는다.
• release()를 통해 pool을 반납한다.

📥 Api통신 모듈 작성

login에 관한 동작을 처리할 모듈을 작성한다.

시작하기전 필요한 모듈을 설치한다.

$ npm install express-session memorystore body-parser

• express-session: express에서 제공하는 세션 관리 매니저
• memorystore: 세션을 메모리에 저장하기 위해 같이 사용
• body-parser: body로 전달받은 request데이터를 json으로 처리하기 위해 사용
   

📄/api/login.js

const getConnection = require("../db/mysql_pool");

exports.findOneUser = (userId) => {
    const sql = `select * from shin_games_user_table
    where user_id="${userId}"`;
    return getConnection(sql);
};

exports.findLoginUser = (userId, userPw) => {
    const sql = `select * from shin_games_user_table
    where user_id="${userId}" and user_pw="${userPw}"`;
    return getConnection(sql);
};

exports.Login = (req, res) => {
    const { userId, userPw } = req.body;
    this.findLoginUser(userId, userPw).then((result) => {
        if (result === false) {
            res.json({ msg: "fail" });
        } else {
            if (result.length > 0) {
                req.session.userId = result[0].user_id;
                res.json({ msg: "success" });
            } else {
                res.json({ msg: "fail" });
            }
        }
    });
};

exports.Logout = (req, res) => {
    let code = 200;
    if (req.session.userId) {
        req.session.destroy();
        res.json({ msg: "success", code });
    } else {
        res.json({ msg: "fail", msg: "권한이 없습니다.", code });
    }
};

exports.getUserInfo = (req, res) => {
    if (req.session.userId) {
        this.findOneUser(req.session.userId).then((result) => {
            if (!result) {
                res.json({ msg: "fail", code: 200 });
            } else {
                res.json({
                    data: result[0],
                    msg: "success",
                    code: 200,
                });
            }
        });
    } else {
        res.json({ msg: "fail" });
    }
};

api 모듈 작성이 완료되면 연결한다.

🔧 서버 모듈 적용하기

설치한 라이브러리 적용과 설정, 모듈을 적용한다.
 

📄index.js

const express = require("express");
const session = require("express-session");
const MemoryStore = require("memorystore")(session);
const bodyParser = require("body-parser");

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

app.listen(port, function () {
    console.log(`server running on ${port}`);
});

const sessionTime = 1000 * 60 * 30; // 30분
const sessionObj = {
    secret: "shin",
    resave: false,
    saveUninitialized: true,
    store: new MemoryStore({ checkPeriod: sessionTime }),
    cookie: {
        maxAge: sessionTime,
    },
};
app.use(session(sessionObj));
app.use(bodyParser.json());

// rest api callback module
const LoginApi = require("./api/login");

// 로그인 체크용
app.use("/login/login", LoginApi.Login);
// 로그아웃
app.use("/login/logout", LoginApi.Logout);
// 유저정보 조회
app.use("/login/getUserInfo", LoginApi.getUserInfo);

세션에 대한 설정처리와 rest api시 받은 데이터의 파싱을 위해 body-parser를 적용했다.
이후 각 rest api별 동작해야 할 모듈을 적용으로 서버에 대한 설정을 마친다.
이제 클라이언트단 작성을 하면 된다.

리액트를 학습하고 로그인, 로그아웃, 회원가입 페이지를 다뤄본 적이 없어서 경험을 해볼 겸 학습을 시작하였다.

먼저 리액트에선 프론트를 담당하고 db와 연결 및 데이터 검증을 해줄 서버 구성이 필요했다.

기존에 해보던 Java로 해도 괜찮지만 NodeJS를 적용해보면 간편하고 쉬울 것 같아서 시작하게 되었다.(새PC에 자바가 없어서 세팅하기가 귀찮다는 그런 이유도 있다...)

🚀 목표

• 리액트로 로그인 페이지 구현
• 로그아웃 처리
• 회원가입 기능
• 노드JS에서 REST API 처리
• DB연결 및 쿼리 작성
• 세션 처리

💡 생각해 볼 것

로그인 처리 후 인증 방식에 크게 Session과 JWT가 있다.

아직 JWT를 경험하지 못해서 학습할 겸 적용해봐도 좋지만 노드JS도 다뤄본적이 없는데 너무 헤멜것 같아서 먼저 이번 목표를 수행하고 다음 과제로 수행 해 볼 예정이다. 고로 클래식한 Session처리로 한다.

🔧 설치할 모듈

• express: nodeJS에서 서버를 구성하기 위한 라이브러리
• nodemon: node기반에서 변경사항이 발생하면 자동으로 재시작해주는 라이브러리
• cocurrently: 명령어를 동시에 실행시켜준다.(node, react동시 실행용)
• react & typescript: 리액트(ts.ver) 설치
• http-proxy-middleware: 프록시 설정을 위해 필요한 라이브러리(react -> node로 fetch때 사용예정)
• mysql2: mysql접속을 위해 설치(설정 문제 때문에 2로 설치하였다.)

⚙️ 환경 설정

서버 구성하기(NodeJS )

먼저 서버로 작업할 디렉토리를 하나 파고 아래의 명령을 수행한다.

$ npm init -y
$ npm install express nodemon concurrently mysql2

이것만으로 가볍게 웹서버를 구성할 수 있다.
서버로 사용할 index페이지를 생성한다.

📄index.js

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

app.listen(port, function () {
  console.log(`server running on ${port}`);
});

nodemon 설정을 위해 package.json을 수정한다.
 

📄package.json

"scripts": {
  "start": "nodemon index.js"
}

프론트 생성(리액트 ts.ver)

$ npx create-react-app client --template typescript

리액트(client)에서 프록시 설정을 위해 아래 명령어로 라이브러리를 설치한다.

$ cd client
$ npm install http-proxy-middleware

설치가 끝나면 setupProxy파일을 생성하고 아래와 같이 입력한다.
 

📄/client/src/setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/login/**", {
      target: "http://localhost:3001",
      changeOrigin: true,
    })
  );
};

개발 실행 환경 구성하기

package.json을 손봐야 vscode하나를 켜놓고 서버와 리액트를 동시에 실행하여 편하게 개발할 수 있다.

scripts부분을 아래와 같이 추가한다. (리액트쪽 package.json이 아님!!)
 

📄package.json

"scripts": {
  "start": "nodemon index.js",
  "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
  "dev:server": "npm start",
  "dev:client": "cd client && npm start"
}

앞으로 개발시 npm run dev를 통해 개발 테스트를 할 수 있다.
 

🔥 임시 작성 테스트 결과

리액트 설정

📄/client/src/login/login.tsx

import { useEffect, useState } from "react";

export default function Login() {
    const [userId, setUserId] = useState("");
    const [userPw, setUserPw] = useState("");

    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.name === "userId") {
            setUserId(e.target.value);
        } else if (e.target.name === "userPw") {
            setUserPw(e.target.value);
        }
    };

    const goLogin = () => {
        console.log("click!");
    };

    useEffect(() => {
        fetch("/login/test")
            .then((res) => res.json())
            .then((data) => console.log(data));
    }, []);

    return (
        <div>
            <h2>Login Test</h2>
            <div>
                <label htmlFor="">아이디</label>
                <input
                    type="text"
                    name="userId"
                    value={userId}
                    onChange={handleInput}
                />
            </div>
            <div>
                <label htmlFor="">비밀번호</label>
                <input
                    type="password"
                    name="userPw"
                    value={userPw}
                    onChange={handleInput}
                />
            </div>
            <div>
                <button type="button" onClick={goLogin}>
                    로그인
                </button>
            </div>
        </div>
    );
}

📄src/App.tsx

import React from "react";
import Login from "./components/login/login";

function App() {
    return (
        <div>
            <Login />
        </div>
    );
}

export default App;

서버 설정

📄index.js

const express = require("express");
const app = express();
const port = process.env.PORT || 3001;

app.listen(port, function () {
    console.log(`server running on ${port}`);
});

app.use("/login/test", function (req, res) {
    res.json({ test: "success" });
});

테스트 캡처

login/test로 부터 응답을 받아서 클라이언트쪽에서 콘솔 로그에 결과값이 잘 찍히고 있다.