본문 바로가기
코딩

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

by KRonae 2022. 10. 18.
반응형

안녕하세요 크로네입니다.

 

오늘은 Node.js 에서 웹 서버를 만드는 법을 알려드리겠습니다.

앞쪽에는 간단한 설명과 예시를 보여드리고,

뒷쪽에서는 더 전문적인 것들도 설명드리겠습니다.

 

1. HTTP 모듈

일단 http 라는 모듈이 필요합니다.

하지만 이 모듈은 별도의 다운로드 없이

Node.js를 설치하면 같이 설치되서 추가로 다운로드 할 필요는 없습니다.

그럼 이 모듈에 대해 간단히 설명하겠습니다.

 

http 모듈은 통신을 할때 사용 합니다.

하지만 이 모든 기능을 사용하지는 않고,

그 기능들 중 웹 서버를 만드는 기능을 이용할겁니다.

다른 모듈도 있을 수 있지만, 잘 알려진것은 http 모듈이라

검색했을때도 설명같은 것들이 잘 나와서 코딩하기 편할겁니다.

 

2. 실습 - 1

먼저 http 모듈을 require 합니다.

const http = require("http");

그 다음, 웹서버에 접속했을때 실행될 코드를 적어줍니다.

app = http.createServer(function(request, response) { // http.createServer([옵션][, 요청수신기])
  console.log(request.url);
});

이 코드는 웹사이트에 연결했을 때 콘솔에 URL 을 출력하는 코드입니다.

 

여기에서 request(요청) 은 브라우저에서 보낸 데이터고,

response(응답) 은 우리가 보낼 데이터입니다.

 

하지만 localhost(현제 컴퓨터에 접속하는 URL) 로 들어가면....

안들어가집니다! 왜냐하면,

 

웹사이트에 들어왔을때 실행할 코드만 적었고, 아직 서버를 키진 않았기 때문입니다.

 

아래의 코드를 적으면 80 포트로 서버를 엽니다.

app.listen(80); // app.listen(옵션[, 컬백])

 

이제 실행하고 localhost에 들어가면!

콘솔에 주소가 출력됬습니다.

하지만 브라우저에는 아무 것도 표시되지 않고 로딩중입니다.

그럼 서버가 브라우저에게 데이터를 줘야됩니다.

눈치가 빠르다면 위에서 말한 '응답'을 해야 한다고 생각할 수 있습니다.

정답입니다!

 

응답은 response 이기 때문에 response.무언가() 를 해야 될 것 같죠!

아래와 같이 response.writeHead 와 response.end 를 사용하면 브라우저에게 데이터를 보낼 수 있습니다.

app = http.createServer(function(request, response) {
  console.log(request.url);
  response.writeHead(200); // response.writeHead(상태코드[, 상태메시지][, 헤더])
  response.end("HELLO WORLD!"); // response.end([데이터[, 인코딩]][, 컬백])
});

이렇게 하고 웹사이트에 들어가면!

"음... 제가 적은 HELLO WORLD! 라는 글은 잘 전달 됬는데... 글씨체가 이상하네요...?"

그 이유는 헤더를 적지 않았기 때문입니다.

 

헤더는 보낸 정보에 대해 설명하는 데이터입니다.

코드에 있는 주석을 잘 살피셨다면, response.writeHead 에 헤더가 있는것을 알 수 있습니다.

그럼 이 코드를 아래와 같이 바꾸면 어떻게 될까요? ( Content-Type 에 대해서는 잠시 후에 설명하겠습니다 )

response.writeHead(200, { "Content-Type" : "text/html" });
// 대문자 소문자 주의!

그랬더니!

마음에 안들던 글씨체가 바뀌었습니다!

 

이건 Content-Type 때문인데요
Content-Type을 한국어로 번역하면 내용-유형 입니다.

이해가 되시죠!

text/html 은 HTML 코드를 의미하는데

Content-Type 을 text/html 로 설정하니

브라우저가 이 헤더를 보고 받은 데이터가 HTML 로 작성한 것이라는것을 알게된것입니다!

 

Content-Type은 이것 말고도 여러 종류가 있습니다.

text/xml, Application/xml,

text/html, Application/html,

text/javascript, Application/javascript,

text/json, Application/json,

text/css, Application/css,

text/plain,

audio/mpeg,

audio/mp3

등 여러가지 Content-Type이 있습니다.

 

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

반응형

댓글