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

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

3. 실습 - 2

우린 지금까지 어떤 주소에 들어오든지 HELLO WORLD! 를 출력하게 했습니다.

왜냐하면 아무 조건 없이 무조건 이 메시지를 출력하게 했기 때문입니다.

하지만, 여러 웹사이트에서는 다른 주소로 들어오면 다른 웹페이지가 출력됩니다.

눈치 채신 분도 있겠지만, request.url 을 사용하면 됩니다.

 

request는 요청이죠. request.url은 요청한 URL 을 의미합니다.

지금까지 작성한 코드에는 request.url을 console.log 하는 코드가 있습니다.

이 코드를 지우고 if문을 이용해주면, 다른 주소로 들어왔을때 다른 웹페이지를 출력할 수 있습니다.

const http = require("http");

app = http.createServer(function(request, response) {
  if(request.url == "/") {
    response.writeHead(200, { "Content-Type" : "text/html" });
    response.end("Oh! It's '/'!");
  } else if(request.url == "/hi") {
    response.writeHead(200, { "Content-Type" : "text/html" });
    response.end("Oh! It's '/hi'!");
  }
});
app.listen(80);

전체 코드를 이렇게 적으면 /로 들어왔을때 Oh! It's '/'!를 출력하고,

/hi 로 들어왔을 때 Oh! It's '/'!를 출력합니다.

 

그런데 이렇게 하면, 문제가 있습니다.

/hello 로 들어왔을 때 Oh! It's '/hi'! 가 아니라 로딩만 되고 있습니다.

왜냐하면 /hello 로 들어왔을때 실행할 코드를 만들지 않았기 때문인데요,

그럼 웹페이지를 찾을 수 없다는 사실을 브라우저에게 어떻게 알릴 수 있을까요?

 

누구나 한번 쯤 404 오류라는 것을 들어 보신 적이 있을것입니다.

404는 웹페이지를 찾을 수 없다는 것인데요,

http status code 를 검색하면 404말고도 여러 코드가 나옵니다.

 

그래서 404 오류를 만들려면, response.writeHead 부분에 있는 200 이라는 숫자를 바꾸면 됩니다.

if 문을 사용했으니, else를 이용해서 404 웹페이지를 만들어 봅시다.

const http = require("http");

app = http.createServer(function(request, response) {
  if(request.url == "/") {
    response.writeHead(200, { "Content-Type" : "text/html" });
    response.end("Oh! It's '/'!");
  } else if(request.url == "/hi") {
    response.writeHead(200, { "Content-Type" : "text/html" });
    response.end("Oh! It's '/hi'!");
  } else {
    response.writeHead(404, { "Content-Type": "text/html" });
    response.end(); // 괄호 안에 아무것도 안적으면 브라우저에서 만든 웹페이지가 표시됨
  }
});
app.listen(80);

이렇게 하고 /asdf 로 접속했더니!

localhost 페이지를 찾을 수 없음 이라는 메시지와 함께! 404 오류가 납니다.

만약 404 오류 웹페이지를 수정하고 싶다면, response.end 괄호 안에 HTML 코드를 적으면 됩니다.

 

저는 404 오류가 났을 때 웹페이지를 찾을 수 없습니다 를 출력해 보겠습니다.

const http = require("http");

app = http.createServer(function(request, response) {
  if(request.url == "/") {
    response.writeHead(200, { "Content-Type" : "text/html" });
    response.end("Oh! It's '/'!");
  } else if(request.url == "/hi") {
    response.writeHead(200, { "Content-Type" : "text/html" });
    response.end("Oh! It's '/hi'!");
  } else {
    response.writeHead(404, { "Content-Type": "text/html" });
    response.end("<h1>웹페이지를 찾을 수 없습니다</h1>");
  }
});
app.listen(80);

그리고 다시 접속해 보면!

"음..? 이게 왜 이럴까요? 이건 한글... 이긴 한데 제가 적은글자와는 차이가 나는데요...."

 

이건 인코딩 때문입니다.

인코딩은 이 글자가 어떤 식으로 이루어져 있는지를 설명하는데요,

Content-Type 부분에 text/html;charset=utf-8 을 적으면 됩니다.

(Tip: Content-Type에서는 데이터를 나눌 때 세미콜론(;) 을 사용함, UTF-8은 한국어가 깨지지 않는 인코딩 종류중 하나임)

const http = require("http");

app = http.createServer(function(request, response) {
  if(request.url == "/") {
    response.writeHead(200, { "Content-Type" : "text/html;charset=utf-8" });
    response.end("오옷! 이것은.. '/'!");
  } else if(request.url == "/hi") {
    response.writeHead(200, { "Content-Type" : "text/html;charset=utf-8" });
    response.end("오옷! 이것은.. '/hi'!");
  } else {
    response.writeHead(404, { "Content-Type": "text/html;charset=utf-8" });
    response.end("<h1>웹페이지를 찾을 수 없습니다</h1>");
  }
});
app.listen(80);

저는 모든 곳을 utf-8 인코딩으로 바꾸고, 글자도 한국어로 바꿨습니다.

그렇게 실행해보니,

localhost/

localhost/hi

localhost/asdf

"와! 이젠 완벽한 것 같아요!"

맞습니다. 정말 완벽해 보이죠.

하지만 아직 남은 게 있습니다.

 

3편에 계속... https://kronae.com/entry/Nodejs-웹-서버-만들기-3편