[클라우딩 어플리케이션 엔지니어링 TIL] 10. 프론트엔드 백엔드 연결

1.학습 주제

• DB와 Node js 연결
• 프론트엔드와 백엔드 연결

2.주요 메모 사항 소개

DB와 Node.js 연결

• Node.js 터미널에 'npm install my sql -save' 입력 시 다음과 같이 json파일이 생성.

DB 연동 명령어

실행 결과

• mysql 모듈을 사용하여 데이터베이스에 연결한다.

const mariadb = require('mysql'); //mariadb.js

const conn = mariadb.createConnection(
    {
        host: 'localhost',
        port: 3306,
        user: 'root',
        password: 'root',
        database: 'Tennis'
    }
);

module.exports = conn;

• 그 후, 아래 코드와 같이 다른 파일에서 끌어다 사용 가능해진다.

const mariadb = require('./mariadb');

mariadb.query("SELECT * FROM product", function(err, rows){
        console.log(rows);
    });

프론트엔드와 백엔드의 연결

• fs 모듈을 이용하여 프론트엔드의 html을 모듈화하고 이를 백엔드에 연결한다.

const fs = require('fs');
const main_view = fs.readFileSync('./main.html','utf-8');

function main(response) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.write(main_view);
    response.end();
}

• 연결 시 HTML에 연결시켰던 이미지가 깨지는 현상이 발생
• requestHandle.js에서 이미지 디렉토리를 url로 바꿔서 처리

function testImage1(response) {
    fs.readFile('./img/testImage1.png', function(err, data){
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write(data);
        response.end();
    })
}

function testImage2(response) {
    fs.readFile('./img/testImage2.png', function(err, data){
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write(data);
        response.end();
    })
}


let handle = {};

handle['/img/testImage1.png'] = testImage1;
handle['/img/testImage2.png'] = testImage2;

• 버튼 클릭 시 db에 값 저장
• location.href를 이용하여 넘길 값과 이동할 웹 페이지에 대한 url 정보를 넘긴다.

<input type="button" onclick="location.href='/test?valueName=1'">
                                        <!--/이동할 url?넘길 값-->

• requestHandler.js 까지 가기 위해 있는 server.js와 router.js에도 값(valueName)을 넘겨줄 칸을 만든다.

//server.js
let queryData = url.parse(request.url, true).query;

route(pathname, handle, response, queryData.valueName);

//router.js
function route (pathname, handle ,response, valueName){
    handle[pathname](response, valueName);
}

• requestHandler.js에서 SQL를 이용하여 값을 저장한다.

function test(response, valueName){
    response.writeHead(200, {'Content-Type': 'text/html'});

    mariadb.query("INSERT INTO orderlist VALUES("+valueName+");", function(err,rows){
        console.log(rows);
    });

    response.write('order Page');
    response.end();
}


let handle = {};
handle['/'] = main;
handle['/test'] = test;

3. 공부하며 느낀 점

굉장히 많은 곳이 엮어있다고 느꼈다. 그렇게 난이도는 어렵지는 않지만 js언어 숙련도로 인해 어렵게 느꼈어서 다시 보면서 공부해야겠다는 생각했다.

4.출처