[Web Project #1] Todo List Day5

앞선 과정에서 계속 html에 사용된 이미지 파일을 업로드 하는데 애를 먹었었다.

기존의 코드는 http.createServer를 사용해 웹서버를 구축했다.
이 방법을 이용해 이미지를 출력하는 방법들을 구글링 해보았지만.. 아무것도 작동하지 않았다ㅜㅜ

결국 express를 이용해 서버를 다시 구축해 간단하게 이미지를 출력하는데 성공하였다.

참고 사이트 : https://velog.io/@goody/NodeJs-Express-%EB%A1%9C-%EC%9B%B9%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

이제 미리 생성해 놓았던 데이터 베이스에 연결을 해 저장된 list들을 불러올 차례다.
사실 spring으로 구현했을때부터 가장 머리 아픈 부분이였는데 이렇게 쉬울줄 몰랐다...

참고사이트 : https://velog.io/@nocturne9no1/Express.js-%EA%B2%8C%EC%8B%9C%ED%8C%90-CRUD%EB%A5%BC-%ED%86%B5%ED%95%B4-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%B2%98%EB%A6%AC%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

필요한 패키지들을 npm을 이용해 설치해주었다.

npm install cors body-parser mysql2

내 경우에는 계속 premission deny 이런 에러가 나서 sudo 붙여서 돌려주었다.

위 링크를 참고해서 다음과 같이 코드를 작성하였다.

main. js

const express = require('express');         //package 불러옴
const app = express();                      // express 함수의 변환값 저장
const port = process.env.PORT || 3000;      //process.env = 환경변수 호출, 환경변수가 입력되지 않을 시 port에 3000번으로 설정

const mysql = require('mysql2');
const cors = require('cors');
const bodyparser = require('body-parser');

const dbconfig = require('./config/database.js');       //db 정보 로드

const db_conn = mysql.createPool(dbconfig);             //mysql과 express 연결 -> 이 변수를 통해 db접근 가능
const jsonParser = bodyparser.json();                   //body-parser을 위한 변수 할당

//get 정의
app.get('/', (req, res) => {
    res.sendFile(__dirname + "/static/home.html");
});

app.get('/todolists', (req, res) => {
    db_conn.query('SELECT * FROM LIST', (err, rows) => {
        if(err) throw err;
        console.log(rows);
        res.send(rows);
    })
});

app.listen(port, () => {
    console.log(`server is listening at localhost:${process.env.PORT}`);
});

app.use(express.static('static'));

database.js

module.exports = {
    host: '127.0.0.1',
    port: '3306',				//안적어도 무방
    user: 'root',
    password: 'test1234',
    database: 'Todo_db'
};

참고 링크에서는 port는 적지 않으셨지만 일단 혹시 몰라 적어 놨다.(없어도 돌아감)

https://kong-dev.tistory.com/122