[Node.js] express + TypeScript로 회원가입 구현

타입스크립트 맛보기 연습을 해보겠습니다!

 

우선 프로젝트 폴더하나 생성하고, package.json을 작성해볼까요

package.json

{
  "name": "TypeScript",
  "version": "0.0.1",
  "main": "app.ts"
}

타입스크립트로 만들 프로젝트니 main은 당연히 js가 아니라 ts파일이겠죠

app.ts를 파일을 생성하세요. 미리 필요한 내용을 작성해두겠습니다.

import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }))

app.listen(8080, () => {
  console.log("server on");
})

 

이제 필요한 모듈들을 깔아보겠습니다.

 

npm i express

npm i cors

npm i dotenv

npm i bcryptjs

npm i mysql2

 

npm i nodemon

모듈에 관한 설명은 todolist에 잘나와있습니다.

 

타입스크립트를 사용하기 위해서 

npm i typescript

를 해봅시다.

 

서버를 키기 위해서 scripts에 start를 추가해서 이렇게 작성하세요.

 "start": "nodemon --exec ts-node app.ts "

전체를 보여드리자면 이렇게 써있으면 됩니다.

{
  "name": "TypeScript",
  "version": "0.0.1",
  "main": "app.ts",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mysql2": "^2.2.5",
    "nodemon": "^2.0.12",
    "typescript": "^4.3.5"
  },
  "scripts": {
    "start": "nodemon --exec ts-node app.ts "
  }
}

npm start로 서버를 실행해보면 터미널에 이러한 내용이 찍힐겁니다.

ts-node모듈이 없다고 하네요. 설치해볼까요

에러가 또 나오네요. 왜냐면 타입스크립트와 연동된 모듈이 없기때문이에요.

그럼 왜 처음부터 타입스크립트 연동 모듈을 설치하지 않고 기본 모듈을 설치했을까요.

그 이유는 최종적으로 배포할때 js파일로 컴파일해서 배포하기 때문에 필요하답니다.

그럼 이제 타입스크립트와 연동된 모듈을 설치해봅시다.

npm i @types/bcryptjs
npm i @types/express
npm i @types/node
npm i @types/cors

이제 다시 서버를 실행시켜보면

쫘라란 정상적으로 서버가 실행되네요~!

 

추가적으로 ESLInt가 아닌 타입스크립트니까 TSLint를 설치해봅시다.

ESLint는 JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구입니다. ESLint의 규칙은 구성 가능하며 사용자 정의 된 규칙을 정의하고로드 할 수 있습니다. ESLint는 코드 품질과 코딩 스타일 문제를 모두 다룹니다.
위키백과(영어)

npm i tslint

tslint.json에 이렇게 작성하세요.

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules" : {
    "quotemark" : [true, "single"],
    "disable-next-line":["no-var-requires"],
  },
  "rulesDirectory": [],

}

tsconfig.json는 타입스크립트를 컴파일 하는 과정에서 여러 옵션을 지정할 수 있게 해줍니다.

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "CommonJS",
    "strict": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "suppressImplicitAnyIndexErrors": true,
  }
}

옵션에 관한 정리는 이분의 블로그를 참고했습니다.

https://geonlee.tistory.com/214

tsconfig.json 컴파일 옵션 정리

이제 타입스크립트를 사용하기 위한 기본적인 세팅이 끝났습니다.

 

이제  db를 세팅해볼게요.

우선 디렉토리에 db.ts를 생성합니다.

디렉토리 구조는 이렇게 되겠죠.

 

이제 db.ts는 이런 방식으로 입력하면 됩니다.

 그리고 .env 파일에 자신의 db와 관련된 내용을 입력하시면 됩니다.

import mysql from 'mysql2/promise';  //promise를 쓰는 이유는 에러발생 시, 에러를 잡기 위해
import 'dotenv/config'
const { DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE } = process.env || 'ERROR';

const pool = mysql.createPool({
  connectionLimit: 10,
  host: DB_HOST,
  user: DB_USER,
  password: DB_PASSWORD,
  database: DB_DATABASE
});

export default pool;

 

테이블은 알아서 디비에 만들어 놓으세요. 전 user테이블을 만들어놨답니다.

잘모르시겠으면 todolist 프로젝트를 참고해주세요.

 

만들 로직은 유저가 아이디와 비밀번호를 입력하여 회원가입을 하는 로직입니다.

그러므로 테이블에 저장할 내용은 아이디와 비밀번호가 되겠죠.

이제 app.ts에서 API를 작성해봅시다.

import express from 'express';
import cors from 'cors';
import bcrypt from 'bcryptjs';
import dotenv from 'dotenv';
dotenv.config();
const { SALT } = process.env;
import pool from './db';

dotenv.config();

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }))

app.listen(8080, () => {
  console.log("server on");
})

app.post('/user', async (req: express.Request, res: express.Response) => {
  try {
    let { id, password } = req.body;
    console.log(req.body)
    const salt = bcrypt.genSaltSync(Number(SALT));
    const hashpassword = bcrypt.hashSync(password, salt);
    const conn = await pool.getConnection(); // pool에서 커넥션을 가져오기
    let sql = 'insert into user (id,password) values(?,?)'; // db에 content를 넣는 쿼리문 작성;
    let data = [id, hashpassword]; // data에 content 담기
    console.log(data);
    const rows = await pool.query(sql, data); //쿼리문 실행 및 rows에 담기
    conn.release(); // 커넥션을 다시 pool로 반환
    if (rows) return res.status(200).json({ result: rows });
    else throw console.log('에러발생');
  } catch (err) {
    console.log(err);
  }
});

 

이렇게요.

잘작동하는지 포스트맨으로 확인해볼게요.

잘되네요.

간단하게 타입스크립트를 이용하여 서버를 작성하는 연습이 끝났습니다.

짝짝짝짞짝👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏