[Node.js] node.js html 열기(+ 이미지)

Backend/Node.js

[Node.js] node.js html 열기(+ 이미지)

seoooc 2022. 3. 30. 18:48

http://127.0.0.1:10007/home으로 접속하면 home.html이 열리도록 한다.

html 파일 읽고 쓰기 + 이미지 파일 읽고 쓰기이 이뤄져야 함

home.html

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    img{
        width:200px;
    }
</style>
</head>
<body>
    <h1>노드를 이용한 홈페이지</h1>
    <a href="/subpage"><img src="./img/t.jpg"/></a>
    <img src="./img/tab2_3.png"/>
    <img src="./img/tab2_4.png"/>
    <img src="./img/coco.jpg"/>
</body>
</html>

첫 번째 이미지를 클릭하면 /subpage로 접속

subpage로 접속하면 subpage.html 내용을 보내준다.

node11_html_image_response.js

var http = require("http");
var fs = require("fs");

/*
    모듈 추가하는 법 : mime
    npm 명령어를 이용하여 추가
    >npm install mime@2
*/
var mime = require("Mime");

var server = http.createServer(function (req, res) {
    var addr = req.url;
    console.log(addr);

    if (addr == "/home") {
        // home.html파일의 내용을 읽고 res에 쓰기
        fs.readFile(__dirname+'/home.html', 'utf-8', function (error, data) {
            if (error) {
                console.log("파일 읽기 에러 발생");
            } else {
                res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
                res.end(data);
            }
        });
    } else if (addr=='subpage') {
        fs.readFile(__dirname + "/subpage.html", 'utf-8', function (error, data) { 
            if (!error) {
                res.writeHead(200, { "Content-Type": "txt/html; charset=utf-8" });
                res.end(data);
            }
        });

    } else if (addr.indexOf('/img') == 0) {  // 이미지일 경우
        //마임 구하기
        var mimeType = mime.getType(addr.substring(1));
        console.log(mimeType);
        // 이미지 파일 읽기
        fs.readFile(__dirname + addr, function (error, imgData) {
            if (!error) {
                res.writeHead(200, { "Content-Type": mimeType });
                res.end(imgData);
            }
        });
    }
});

server.listen(10007, function () {
    console.log("server start.... http://127.0.0.1:10007/home");

});

mime 모듈 추가하기
터미널에 npm install mime@2 입력

mime 객체 생성

var mime = require("Mime");

콘솔에 찍힌 /img/~~~는 addr 출력값이다.

클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘

이미지 Type을 알아내기 위해 substring을 사용해서 맨 앞의 /를 제외한 나머지 경로만 getType에 넣어준다.