[TIL] 2주차 Part11. 쇼핑몰 프로젝트 - 백엔드

📁 CH13. 메인 페이지 연동하기

• img를 경로로 알아서 이미지가 적용이 되지 않음. → 다 따로 정리해주기
• order 버튼을 누르면 url 값을 불러줄 것임
• server가 특정 행동을 하게 하려면 requestHandler에게 url값을 넘겨줘야 했음
• 이처럼 실제로 우리가 버튼을 눌러서 insert를 하게 하고 싶으면 요청을 url로 해야 함.
• url 값을 어떻게 받을거야? → handle['/order'] = order을 통해...

//server.js
let http = require('http');
let url = require('url');

function start(route, handle) {
    function onRequest(request, response) {
        let pathname = url.parse(request.url).pathname;
        let queryData = url.parse(request.url, true).query;
        route(pathname, handle, response, queryData.productId);
    }
    
    http.createServer(onRequest).listen(8888);
    //localhost:8888
}

exports.start = start;

• 'start()' 함수가 정의되어 있음.
• HTTP 요청을 처리하는 서버를 생성하고 시작함
• 요청이 들어올 때마다 URL 경로와 함께 핸들러 함수를 호출함
• query를 활용하여 productID를 추출하고 핸들러 함수에 전달함
• 'route()' 함수를 사용하여 요청을 핸들러에 전달함.

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

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

function main(response) {
    console.log('main');

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

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

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

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

    mariadb.query(
        "INSERT INTO orderlist VALUES (" +
        productId + ", '" + 
        new Date().toLocaleDateString() + "');", function(err, rows) {
        console.log(rows);
    });
    response.write('order page');
    response.end();
}

let handle = {}; // key:value
handle['/'] = main;
handle['/order'] = order;

/* image directory */
handle['/img/redRacket.png'] = redRacket;
handle['/img/blueRacket.png'] = blueRacket;
handle['/img/blackRacket.png'] = blackRacket;

exports.handle = handle;

• 요청 핸들러 함수들이 정의되어 있음
• 'main()' 함수는 데이터베이스에서 데이터를 조회하고 메인 페이지를 보여줌.
• 'redRacket()', 'blueRacket()', 'blackRacket()' 함수들은 각각 다른 색상의 라켓 이미지를 반환함
• order() 함수는 주문을 처리하고, 데이터베이스에 주문 정보를 저장함
• productId를 인자로 받아와 해당 상품의 주문을 처리함

//router.js
function route(pathname, handle, response, productId) {
    if (pathname === '/favicon.ico') {
        response.writeHead(200, { 'Content-Type': 'image/x-icon' });
        return response.end();
    }
    console.log('pathname : '+ pathname);

    if (typeof handle[pathname] == 'function') {
        handle[pathname](response, productId);
    } else {
        response.writeHead(404, {'Content-Type' : 'text/html'});
        response.write('Not Found.');
        response.end();
    }
}

exports.route = route;