본문 바로가기
코딩

[Node.js] 웹 서버 만들기 3편

by KRonae 2022. 10. 19.
반응형

1편: https://kr-onae.tistory.com/entry/Nodejs-웹-서버-만들기-1편

2편: https://kr-onae.tistory.com/entry/Nodejs-웹-서버-만들기-2편

4. FileSystem 모듈

우린 지금까지 웹서버 파일(node.js로 코딩한 파일)에서 웹페이지의 코드를 작성했습니다.

하지만, 웹페이지의 코드가 길면 길수록 웹서버 파일의 길이도 길어집니다.

그렇게 되면 웹서버  파일이 간결하지 않게 되는데요,

이걸 수정하려면 웹서버  파일에서 html 파일의 데이터를 가져오면 됩니다.

그러니까, html 파일과 웹서버 파일을 따로 작성하는것입니다.

 

이럴 때 사용하는 모듈이 바로 FileSystem, 즉 fs모듈입니다.

fs 모듈은 파일을 관리할 때 사용합니다.

5. 실습 - 3

먼저 fs 모듈을 require 합니다.

const fs = require("fs");

그 다음 index.html, hi.html 그리고 404.html 파일을 만듭니다.

그리고 각 코드를 파일로 옮깁니다.

그 다음 app.js(웹서버 파일) 을 이렇게 수정합니다.

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

app = http.createServer(function(request, response) {
  if(request.url == "/") {
    response.writeHead(200, { "Content-Type" : "text/html;charset=utf-8" });
    response.end(fs.readFileSync("./index.html"));
  } else if(request.url == "/hi") {
    response.writeHead(200, { "Content-Type" : "text/html;charset=utf-8" });
    response.end(fs.readFileSync("./hi.html"));
  } else {
    response.writeHead(404, { "Content-Type": "text/html;charset=utf-8" });
    response.end(fs.readFileSync("./404.html"));
  }
});
app.listen(80);

그다음 실행하면, 이전과 같은 결과로 잘 실행됩니다.

왜냐하면, fs.readFileSync 는 파일을 읽어오는 함수 이기 때문입니다.

6. 추가적인것들

마지막으로, 웹서버를 만들 때 추가적으로 필요한 것들을 알려드리겠습니다.

1. request.method

request.method 는 말 그대로 메소드를 가져오는 것입니다.

브라우저에서는 기본적으로 GET 메소드를 이용하고,

로그인 등의 기능을 만들 때에는 POST 메소드로 요청이 올것입니다.

2. 쿼리스트링과 진짜 URL

쿼리스트링을 가져오려면 다음과 같은 코드를 사용해야 합니다.

var url_q = request.url.split("#")[0];
var querystring = url_q.indexOf("?") == -1 ? undefined : url_q.substr(url_q.indexOf("?") + 1);
var querystring_s = querystring == undefined ? [] : querystring.split("&");
var query = {};
for(var i = 0; i < querystring_s.length; i++) {
	query[querystring_s[i].split("=")[0]] = querystring_s[i].split("=")[1];
}

// querystring 은 글자고, query 는 Object입니다.

또한 쿼리스트링과 주석이 포함되지 않은 URL을 가져오려면

var url = request.url.match(/\/{0,}([^:\/\s\?\#]{1,}\/{0,})/g)[0];

이렇게 하면 됩니다.

7. 참고 하면 좋을 글

HTTP 모듈 공식 홈페이지: https://nodejs.org/api/http.html

Content-Type의 종류: https://sshkim.tistory.com/m/101

HTTP Status Code: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

FS 모듈 공식 홈페이지: https://nodejs.org/api/fs.html

8. 마치면서

지금까지 웹서버 만들기였는데요,

마음에 드셨다면 공감 한번씩 눌러주시면 감사하겠습니다.

 

이상 크로네였습니다.

반응형

댓글