Node.js/MyTodoList

[Node.js] 01. 시작하기(express)

hyun_ji 2021. 7. 8. 07:15
반응형
SMALL

Node.js와 React를 이용하여 나만의 Todolist를 만들어봅시다.

Todolist를 이용하면 기본적인 데이터 처리 기능 CRUD(create, read, update, delete)를 구현할 수 있으므로 모든 API 시작과 끝을 맛볼 수 있게 됩니다.

학습목록

NodeJS

MySQL

Express

Sequelize

React

1. 환경세팅

에디터는 vscode를 이용하도록 하겠습니다. 없으신 분들은 설치하시면 됩니다.

제가 사용하는 vscode extension에 관한 정보는 추후에 업데이트 하도록 하겠습니다.

node와 mySQL도 자신의 환경에 맞게 설치합니다.

2. 원하는 위치에 MyTodolist폴더를 생성합니다.

저는 onedrive때문에 바탕화면이 아닌, user 디렉토리 안에 myproject를 생성하였고, 이 안에서 프로젝트들을 작업하도록 하겠습니다.

(프로젝트 마지막에 css를 제공할 예정이니, 네이밍 규칙은 가급적이면 따라해주시면 되겠습니다.)

vscode로 폴더를 엽니다.

3. package.json과 app.js 파일을 생성합니다.

package.json 는 app.js 를 정의하는 파일입니다.

저희는 todolist를 만들예정이니 name은 todolist, 버전은 초기버전인 0.0.1이 되겠고,

app.js는 메인 웹 서버를 실행할 파일입니다. 그러니 당연히 main은 app.js가 되겠죠.

app.js에 Node.js의 대중적으로 쓰이는 안정화된 웹프레임워크인 Express를 설치해서 웹애플리케이션을 구현해야 합니다.

  • 강력한 라우팅
  • 고성능에 집중
  • 매우 높은 테스트 범위
  • HTTP 도우미 (리디렉션, 캐싱 등)
  • 14 개 이상의 템플릿 엔진을 지원하는 시스템보기
  • 콘텐츠 협상
  • 애플리케이션을 빠르게 생성하기 위해 실행 가능

4. Express 설치

vscode의 터미널을 실행합니다

공식문서의 설명을 따라서 익스프레스를 설치해봅시다.

$ npm install express

설치가 완료됐으면 app.js에 import 시킵니다.

const express = require('express')
const app = express()

//익스프레스가 지원해주는 restAPI
app.get('/', function (req, res) {
  res.send('Hello World')
})

//app.listen으로 서버 실행이 가능해집니다.
app.listen(8080)

node app.js를 입력하여 파일을 실행해봅니다.

실행되어도 아무 차이를 못느끼실겁니다.

console.log를 찍어서 다시한번 확인을 해보겠습니다.

const express = require('express')
const app = express()

//익스프레스가 지원해주는 restAPI
app.get('/', function (req, res) {
  res.send('Hello World')
})

//app.listen으로 서버 실행이 가능해집니다.
app.listen(8080, () => {
  console.log('실행!');
})

확인을 위해선 서버를 껐다가 다시 켜야합니다.

ctrl + c를 눌러서 서버를 끈 후 다시 node app.js를 입력해봅시다.

콘솔이 제대로 찍힌걸 확인할 수 있죠.

하지만 껐다 켰다가 반복하기가 너무 귀찮죠?

5. nodemon 설치

노드로 실행을 하면 수정을 해도 파일이 바뀌지 않습니다.

이러한 불편함을 줄여주기 위해 수정과 동시에 서버를 껐다가 켜주는 모듈이 있습니다.

바로 nodemon 이죠

$ npm install -g nodemon

실행해봅시다.

$ nodemon app.js

원래 실행되어야 정상이지만 제 환경에서 npm오류인지 바로 실행이 되지 않네요.

하지만 더 간단하게 실행하는 방법을 알려드리겠습니다.

package.json에 scripts를 추가하여 "start": "nodemon app.js"를 작성해볼까요.

{
  "name": "todolist",
  "version": "0.0.1",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1"
  },
  "scripts": {
    "start": "nodemon app.js"
  }
}

이제 npm start를 통해 nodemon실행이 가능해졌습니다.

 

 

6. MySQL 설치

DataBase는 MySQL을 사용하도록 하겠습니다.

자신의 컴퓨터 환경과 맞는 버전을 다운로드 합니다.

MySQL Command를 실행합니다.

 

(Workbench가 편하신 분들은 Workbench를 사용하시면 됩니다.)

위와 같이 비밀번호를 입력 후에 tododb를 생성하고 접속합니다.

이제 테이블을 생성합니다.

이번에 만들 TodoList에 기본적으로 필요한 칼럼은 할일목록이 담긴 content와 각각의 컨텐츠의 고유 번호 idx가 되겠습니다.

create table 테이블명(

필드명 타입,

필드명 타입

PRIMARY KEY(필드명)

);

위와 같은 양식에 맞춰 작성해봅시다.

idx는 숫자로 구성되어야하니 INT(최대 11 바이트이므로 11), 고유번호가 비어있으면 안되겠죠 NOT NULL, 게시물을 작성할 때마다 자동으로 숫자가 올라가야하니 AUTO_INCREMENT를 옵션으로 지정하도록 하겠습니다.

content는 당연히 문자가 들어가겠죠. 공간은 넉넉하게 200바이트를 주겠습니다. (왜 char가 아닌 varchar를 사용하는가에 대해서는 이곳에 자세히 설명되어 있습니다.) 할일목록에 아무 내용이 없으면 안되니 컨텐츠 또한 NOT NULL로 지정하겠습니다.

primary key 에 해당하는 컬럼은 당연히 idx가 되겠죠.

이를 쿼리문으로 작성하면

CREATE TABLE todoTable(
 idx INT(11) AUTO_INCREMENT NOT NULL,
 content VARCHAR(100) NOT NULL,
  PRIMARY KEY(idx)
);

이와 같이 되겠습니다.

잘완성되었는지 구조를 볼까요

desc todoTable;

잘생성되었습니다.

7. DataBase 연결

MySql을 설치하여 테이블 생성도 끝났으니 프로젝트와 연결해야합니다.

mysql2 모듈을 설치합니다.

$ npm i mysql2

설치가 완료되었으면 프로젝트 안에 databasae.js 파일을 생성합니다.

이 파일을 통해서 데이터베이스 정보를 받아올겁니다.

설치한 mysql2 모듈을 import 시킵니다.

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

const dbConfig = {
  connectionLimit : 10,
  host : DB_HOST,
  user : DB_USER,
  password : DB_PASSWORD,
  database : DB_DATABASE
};

그리고 dbconfig라는 변수에 자신의 DB정보를 담을건데요.

이는 노출되면 안되는 개인정보이기 때문에 보안을 위해서 .env파일도 생성해줍니다.

생성된 .env파일에 위와같이 자신의 DB정보를 입력하시면 되겠습니다.

그럼 이제 database.js에 작성했던 dbconfig 변수에 .env파일의 내용을 불러와 넣을건데요.

그냥 가져오면 .env파일의 내용을 읽을 수 없습니다.

하지만 npm은 이를 읽게 해주는 dotenv 모듈이 있죠.

설치합니다.

$ npm i dotenv

설치 후 database.js 파일에 설치한 내용을 import한 후 .env의 내용을 불러옵니다.

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

const dbConfig = {
  connectionLimit : 10,
  host : DB_HOST,
  user : DB_USER,
  password : DB_PASSWORD,
  database : DB_DATABASE
};

mysql연결 방법은 단일 커넥션으로 연결하는 방법과 커넥션 풀을 사용하는 방법이 있습니다.

커넥션 풀을 이용하면 사용시 메모리 사용량 감소, 속도 향상의 장점이 있으므로 커넥션 풀의 방식을 사용하도록 하겠습니다.

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

const dbConfig = {
  connectionLimit : 10,
  host : DB_HOST,
  user : DB_USER,
  password : DB_PASSWORD,
  database : DB_DATABASE
};

const pool = mysql.createPool(dbConfig);

마지막으로 app.js에서 작성할 REST API에 위의 내용을 불러와서 사용해야 하니,

module.exports 시켜줍니다.

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

const dbConfig = {
  connectionLimit : 10,
  host : DB_HOST,
  user : DB_USER,
  password : DB_PASSWORD,
  database : DB_DATABASE
};

const pool = mysql.createPool(dbConfig);

module.exports = pool;

자, 이제 REST API 작성하기 위한 기본 세팅이 끝났습니다.

 

반응형
LIST