개발 흔적 남기기

Node.js 교과서를 학습하고 각 단원별 내용을 정리하는 포스팅.

Node.js

노드는 자바스크립트 실행기로 자바스크립트 문법을 익히면 노드를 활용 할 수 있다.
기존의 자바스크립트는 웹 브라우저에서 그저 약간의 동적 처리를 위해서 존재했다.
하지만 2008년 구글에서 V8엔진을 사용해 크롬을 출시하고, 오픈소스로 코드를 공개했는데, 기존의 다른 엔진보다 속도가 월등히 빨랐다.
이전에도 자바스크립트를 브라우저 외에서 사용하고자 하는 시도가 있었으나 속도 문제로 적용을 못하던 이슈를 해결하게 되었고, 이로 인해 2009년에 노드가 탄생하게 됨.

Node.js: 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 runtime. 노드를 통해 서버를 구성하거나 자바스크립트 프로그램을 실행하는 런타임으로 사용할 수 있다.
runtime: 특정 언어로 만든 프로그램을 실행할 수 있는 환경
server: 네트워크를 통해 클라이언트로 정보, 서비스를 제공하는 컴퓨터나 프로그램들을 총칭한다.
client: 요청을 보내는 주체를 말한다. 브라우저(웹), 앱, 프로그램이나 또 다른 별도의 서버들도 클라이언트가 될 수 있다.

Node.js의 구조

노드는 V8, libuv(라이브러리)를 사용하는데, C, C++ 로 구현되었고, 해당 언어는 몰라도 된다.
libuv는 노드의 특성인 이벤트 기반, 논블로킹 I/O 모델을 구현한다.

V8: 구글 크롬 브라우저, 안드로이드 브라우저에 탑재된 자바스크립트 엔진
libuv: 비동기I/O에 중점을 두고 있는 라이브러리로 Node.js용으로 만들어졌으나 현재는 크로스 플랫폼을 지원한다. 스레드 풀을 사용하여 비동기I/O를 작업하지만 네트워크 I/O는 OS에서 처리한다.

이벤트 기반

이벤트가 발생하면 미리 지정한 작업을 수행하는 방식들로 addEventListener를 통해 등록한 클릭이나 키 이벤트 행위나 네트워크 요청들을 말한다.
이벤트가 발생하면 어떤 행위를 할지 미리 등록해야하는데, 이런 행위를 이벤트 리스너에 콜백 함수를 등록한다고 표현한다.
이벤트 기반 모델에서는 이벤트 루프라는 개념이 있는데, 동시에 이벤트가 일어나면 어떤 행위를 순차적으로 호출할지 판단해야하는데 이벤트 루프가 해당 역할을 합니다.
자바스크립트는 기본적으로 맨 위에서 아래로 실행되며 한줄씩 실행되고 호출 해야할 함수를 만나면 call stack영역에 담아두고 실행되는 동안 존재하다가 실행되면 사라진다.

📄call stack example1.js

function one(){
    two();
      console.log("one");
}
function two(){
      three();
    console.log("two");
}
function three(){
      console.log("three");
}
one();
// call stack
// 1. one() 함수가 call stack에 쌓임
// 2. two() 함수가 call stack에 쌓임
// 3. three() 함수가 call stack에 쌓임

// run
// 1. three 출력
// 2. two출력
// 3. one출력
// 각 함수별 처리때문에 실행은 call stack에 쌓인것과 반대로 출력된다.

📄call stack example2.js

function run(n){
    console.log("3초 뒤 실행");
}
console.log("start!");
setTimeout(run, 3000);
console.log("end!");

start!, end!, 3초 뒤 실행이 찍히는 걸 볼 수 있는데, 실제 호출 스택은 아래와 같이 동작한다.

1. 호출스택에 console.log("start!")가 쌓이고 테스크 큐에 의해 바로 실행된다.
2. 호출스택에 setTimeout() 메소드가 쌓이고 백그라운드로 넘긴다.
3. 호출스택에 console.log("end!")가 쌓이고 테스크 큐에 의해 바로 실행된다.
4. 백그라운드에서 3초가 지나면 테스크 큐로 run메소드를 넘긴다.
5. 테스크 큐에서 run을 실행하면서 console.log("3초 뒤 실행")이 출력된다.

event loop: 이벤트가 발생하면 호출될 콜백 함수들을 관리하고 실행순서를 결정해주는 역할을 한다.
background: setTimeout같은 타이머, 이벤트 리스너들이 대기하는 곳으로 여러 작업이 동시에 일어날 수 있다.(setTimeout시간이 되어 실행되면서 클릭도 동시에 일어날 수 있음)
task queue: 이벤트가 발생하고 백그라운드에서 테스크 큐로 타이머나 이벤트의 콜백이 넘어오는 곳 정해진 순서대로 실행되지만 특정한 경우에는 순서가 바뀔 수도 있다.

논블로킹 I/O

작업 종류는 두종류가 있는데, 동시에 실행 가능한 작업과 동시에 실행이 불가능한 작업이 존재하는데, 일반적으로 우리가 작성한 코드들은 동시에 실행될 수 없다.
여기서 동시에 실행가능한 것은 무엇일까? 바로 I/O작업을 말하는데, 노드에서 논블로킹 방식으로 제공한다.
Input/Output: 입출력을 말하며, 파일 시스템에 접근(파일을 읽거나 쓰기)하거나 네트워크 작업 등
Blocking: 이전 작업이 있으면 끝날때까지 기다리다가 이전 작업이 끝나야 비로소 현재 작업이 수행 됨.
Non Blocking: 이전 작업을 신경쓰지않고 동시에 작업들을 수행한다.

한 작업당 1초가 걸리는데, 10개의 작업이 있다면 블로킹으로 처리시 10초가 걸린다.
하지만 논블로킹이라면? 10초보다는 훨씬 줄어들어서 완료가 된다.
setTimeout(callback, 0)형태로 논블로킹을 간접 체험 할 수 있는데, 아무리 논블로킹 형태로 작성하더라도 직접 작성하면 전체 소요시간이 짧아 지진 않는다. 직접 작성한 코드들은 동시에 실행되지 않기 때문에, I/O작업에서 효율을 볼 수 있다.

싱글 스레드

싱글 스레드란 말그대로 스레드가 한개라는 뜻이다. 우리가 작성한 코드들이 동시에 실행되지 않는 이유가 노드는 싱글 스레드이기 때문이다.
(하지만 내부를 자세히 살펴보면 노드를 실행하면 하나의 프로세스가 생성되고, 그 프로세스 안에는 여러개의 스레드가 존재하는데, 우리가 직접 제어하는 스레드가 한개뿐이다.)

멀티 스레드라는 말도 있는데, 이건 반대다 여러개의 작업을 동시에 실행할 수 있다.(ex) java)
그렇다면 멀티 스레드를 사용하는게 무조건 좋을까? 그건 또 아니다.
아래는 김밥천국을 예시로 들어본다.

싱글, 멀티스레드별 블로킹, 논블로킹

-싱글스레드&블로킹({직원 1명, 고객 3명}, {직원:thread, 고객: response})
고객 3명이 직원 1명에게 들어온 순서대로 주문을 요청하고 첫번째 음식이 나오면 다음 손님 주문을 받고 음식이 나오면 제공한다. 지연시간이 길어진다.

-싱글스레드&논블로킹({직원 1명, 고객 3명}, {직원:thread, 고객: response})
고객 3명이 직원 1명에게 동시에 주문을 요청하고 음식이 나오면 직원 1명이 고객 3명에게 주문에 알맞은 음식을 제공한다. 지연시간이 대폭 줄어든다.

-멀티스레드&블로킹({직원 3명, 고객 3명}, {직원:thread, 고객: response})
직원이 3명이므로 고객 1명당 직원이 1명씩 각각 붙어서 각 메뉴를 주문받고 완료된 요리를 제공한다. 빠르지만 효율적이지 않다.

언뜻 보기엔 좋아보이지만 손님에 맞춰 직원이 들어나다보니 비용이 많이(자원 낭비) 듭니다.
손님이 자리를 떠나면 놀고 있는 직원들이 많아질 수 있습니다.
즉, 멀티스레드이면서 논블로킹으로 작성하면 효율적으로 할 수 있지만 이런 방식의 프로그래밍은 어려운 방법으므로 멀티 프로세싱 방식을 사용한다.

서버로서의 Node.js

노드는 기본적으로 싱글 스레드&Non blocking 모델을 사용한다.(JS 특성)
서버이기 때문에 자연스럽게 클라이언트의 I/O의 요청 작업이 많은데, libuv라이브러리를 사용해 I/O 작업을 논블로킹 방식으로 처리한다.
따라서 스레드 하나가 많은 수의 I/O작업을 감당한다.
하지만 CPU부하가 많은 작업을 하게되면 서버가 죽어버릴 수 있기 때문에 위험하다.
그렇기때문에 이미지, 비디오처리, 대규모 데이터 처리와 같은 CPU에 부하 작업이 많은 곳에선 서버로 권장하지 않는다.
이 외에도 싱글 스레드로 동작하다보니 에러를 제대로 처리하지 못하는 경우에도 하나뿐인 스레드가 죽으면서 서버가 죽고 전체 서비스가 동작하지 않는 현상도 일어날 수 있다.

서버외의 노드

노드의 사용범위가 늘어나면서 웹, 모바일 앱, 데스크톱 앱 개발에도 사용되기 시작했다.
대표적으로 리액트, 앵귤러, 뷰가 존재한다. 모바일 앱에는 리액트 네이티브가 있고 데스크톱 앱을 개발할땐 일렉트론을 사용한다.
웹 개발을 하면서 많이 사용하는 도구인 Atom, vs code도 일렉트론으로 만들어졌다.

NVM

노드를 사용하려면 먼저 Node.js를 공식홈페이지에서 다운로드를 받아서 사용하면 된다.
이렇게 되면 하나의 노드 버전을 사용해서 개발을 하는데, nvm을 설치해서 사용하게 되면 여러 버전의 노드를 사용할 수 있다.
(기존의 노드를 삭제하지 않고 약간의 명령어를 통해 사용하려는 노드버전을 설치하고 바꾼다.)

Utility types ?
유틸리티 타입은 전역으로 사용 가능하며, 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다.

🔹 Partial

Partial<T> 프로퍼티 목록 중 선택해서 사용할 수 있는 유형을 반환한다.

//example
interface Todo {
    title: string;
    description: string;
}

// Partial Utility types
function updateTodo(obj: Partial<Todo>) {
    return obj;
}

const result = updateTodo({
    title: "title",
});

console.log(result); // { title: 'title' } 출력

🔹 Readonly

Readonly<T> 프로퍼티를 읽기 전용으로 설정하고 호출만 가능하다. (수정 불가)

//example
interface Todo {
    title: string;
}

const todo: Readonly<Todo> = {
    title: "Dlete inaxtive users",
};

todo.title = "Hello"; // (Error) readonly에서는 값을 변경할 수 없다.

🔹 Record

Record<K, T> 프로퍼티의 집합 K로 타입을 구성하며 K이외에 다른 타입으로 지정이 불가능하다.T는 프로퍼티를 다른 타입에 매핑시키는 데 사용된다.

//example
interface PageInfo {
    title: string;
}

type Page = "home" | "about" | "contact";

const x: Record<Page, PageInfo> = {
    about: { title: "about!" },
    contact: { title: "contact." },
    home: { subtitle: "home" }, // (Error) subtitle은 정의된 타입이 아니기 때문에 오류 발생
    main: { title: "main" }, // (Error) main은 K에 정의된 집합이 아니기 때문에 key값으로 사용 불가능
};

🔹 Pick

Pick<T, K> 프로퍼티 중 K의 집합을 선택해 원하는 타입만 지정할 수 있다.(Omit의 반대)

//example
interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// Pick을 이용해 title만 프로퍼티로 지정
type TodoPreview = Pick<Todo, "title">;

const todo: TodoPreview = {
    title: "Clean room",
};

🔹 Omit

Omit<T, K> 모든 프로퍼티 중 특정 프로퍼티(K)만 제거 후 사용할 수 있다.(pick의 반대)

//example
interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// Omit을 이용해 description 프로퍼티를 제외
type TodoPreview = Omit<Todo, "description">;

const todo: TodoPreview = {
    title: "Clean room",
    completed: false,
};

🔹 Exclude

Exclude<T, U> T에서 U를 제외한 타입을 구성한다.(Extract의 반대)

//example
type T0 = Exclude<"a" | "b" | "c", "a">;
// "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
// "c"

type T2 = Exclude<string | number | (() => void), Function>;
// string | number

🔹 Extract

Extract<T, U> T에서 U만 추출한다.(Exclude의 반대)

//example
type T0 = Extract<"a" | "b" | "c", "a" | "f">;
// "a"

type T1 = Extract<string | number | (() => void), Function>;
// () => void

🔹 NonNullabble

NonNullabble<T> 타입 중 null과 undefined를 제외한다.

//example
type T0 = NonNullabble<string | number | undefined>;
// string | number

type T1 = NonNullabble<string[] | null | undefined>;
// string[]

🔹 Parameters

Parameters<T> T의 값(매개변수)들이 튜플(타입이 정확히 지정된 배열의 타입) 타입으로 구성된다.

//example
declare function f1(arg: { a: number; b: string }): void;
type T0 = Parameters<() => string>; // []
type T1 = Parameters<(s: string) => void>; // [string]
type T2 = Parameters<<T>(arg: T) => T>; // [unknown]
type T3 = Parameters<typeof f1>; // [{a: number, b:string}]
type T4 = Parameters<any>; // unknown[]
type T5 = Parameters<never>; // never
// (Error) Type 'string' does not satisfy the constraint '(...args: any) => any'.
type T6 = Parameters<string>;
// (Error) Type 'Function' does not satisfy the constraint '(...args: any) => any'.
type T7 = Parameters<Function>;

🔹 ConstructorParameters

ConstructorParameters<T> 생성자 함수 유형의 유형에서 튜플 또는 배열 유형을 생성합니다. 모든 매개변수 유형(또는 함수가 아닌 never경우 유형)이 포함된 튜플 유형을 생성합니다 . --> ts 공식문서 인용

//example
type T0 = ConstructorParameters<ErrorConstructor>; // [message?: string]
type T1 = ConstructorParameters<FunctionConstructor>; // string[]
type T2 = ConstructorParameters<RegExpConstructor>; // [pattern: string | RegExp, flags?: string]

interface Inew {
    new (arg: string): Function;
}
type T3 = ConstructorParameters<Inew>; // [string]

function f1(a: T3) {
    a[0], a[1]; // (Error) Tuple type '[arg: string]' of length '1' has no element at index '1'
}

🔹 ReturnType

ReturnType<T> 함수 T의 반환 타입으로 구성된 타입을 생성한다.

//example
declare function f1(): { a: number; b: string };
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // unknown
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<typeof f1>; // {a: number;b: string;}
type T5 = ReturnType<any>; // any
type T6 = ReturnType<never>; // never
// (Error) Type 'string' does not satisfy the constraint '(...args: any) => any'.
type T7 = ReturnType<string>;
/* (Error) Type 'Function' does not satisfy the constraint '(...args: any) => any'. 
Type 'Function' provides no match for the signature '(...args: any): any'. */
type T8 = ReturnType<Function>;

🔹 Required

Required<T> 기존 정의된 프로퍼티가 옵셔널(?)로 필수값이 아니더라도 T의 모든 프로퍼티가 필수로 사용하도록 설정된다.

//example
interface Props {
    a?: number;
    b?: string;
}

const obj: Props = { a: 5 };

// (Error) Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.
const obj2: Required<Props> = { a: 5 };

지금까지 작성한 결과물을 동작을 확인해보고 회고록을 작성한다.
 

👀 결과물(캡쳐)

로그인 화면

초기 로그인된 적이 없기 때문에 로그인 페이지가 렌더링 된다.

(recoil의 상태값 loginInfo로 체크)

이후 db에 저장된 정보로 로그인을 처리하고 서버쪽으로 응답을 받는다.

여기서 일치한다면 서버쪽에선 세션에 정보를 저장한다.

이후 정상적으로 응답을 받았다는 메시지를 통해 recoil쪽에 로그인된 유저라는 흔적용으로 로그인ID를 등록한다.

loginInfo에 값이 생겼기 때문에 MyInfo페이지로 렌더링된다.
 

마이페이지

변경된 MyPage 컴포넌트에선 useEffect에 의해 rest api로 현재 세션에 담긴 유저의 정보를 달라고 요청한다.

세션이 아직 살아있는 상태라면 세션에 등록된 id정보를 통해 유저 테이블에서 조회 후 적절한 데이터를 json으로 제공한다.

다만, React에서 recoil의 상태값은 새로고침하는 순간 날라간다.

이점을 임시적으로 처리하기 위해 로그인 페이지 useEffect에서 세션에 로그인된 정보가 있다면 recoil에 강제로 값을 처리하고 MyPage로 넘어가도록 처리해주었다.

강제로 새로고침을 많이 하게되면 서버와의 통신도 많아지고 효율적이지 못한 동작이 될 수 있다.
 

로그아웃

로그아웃을 요청하는 rest api가 처리되면 서버측에서 세션에 담긴 로그인 정보를 destory처리한다.

이후 응답에 따라 recoil상태값을 비워서 다시 로그인페이지로 렌더링 될 수 있게 하였다.
 

🤔 작업 후기

가볍게 노드서버도 익혀보고 리액트도 붙여서 동작을 해보려고 만만하게 보고 시작했는데, github에 소스도 올리고 블로그에 지금까지 사용된 라이브러리나 소스코드를 정리하다 보니 시간이 많이 걸렸다.

의외로 서버쪽 처리하는 부분을 설정하는게 시간을 많이 잡아먹었는데, 노드에 대해서 하나도 모르고 접근하다보니 시간 낭비하는 작업이 좀 많았던 것 같다.

일단 로그인 세션처리야 서버측에서 알아서 해주니 어느정도 작업을 마치고부턴 큰 문제가 없었는데, recoil로 유저의 정보를 담다보니 효율적이 못하다는 생각이 들었다. redux나 recoil에 localstorage를 붙여보는 방법 등등을 연구해보고 추가 글을 작성해보아야 할 듯 하다.
 

아래는 작업 해 본 내용을 정리한 글이다.

https://myhappyman.tistory.com/301

https://myhappyman.tistory.com/302

https://myhappyman.tistory.com/303
 

아래는 github에 지금까지 작성한 소스 부분을 올려놨다.

중간중간 가볍게 유효성검사나 로직등을 수정할 수도 있다.

https://github.com/myhappyman/NodeJsAndReactLoginModules

이전글 정보 ↓

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로 부터 응답을 받아서 클라이언트쪽에서 콘솔 로그에 결과값이 잘 찍히고 있다.