Node.js로 웹서버 만들기_요청과 응답

이애옹·2022년 12월 29일
0

Node.js

목록 보기
13/32

📝 http 모듈을 이용해 서버 가동하기

이제 본격적으로 웹서버를 만들건데, 만들기 전 서버클라이언트에 대한 이해가 필요하다.

클라이언트에서 서버로 요청(request)을 보내고, 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에게 응답(response)을 보낸다.

따라서, 서버에는 요청을 받는 부분과 응답을 보내는 부분이 있어야한다. 여기서 요청과 응답은 이벤트 방식이라고 생각하면 된다. 클라이언트로부터 요청이 왔을때 어떤 작업을 수행할지 이벤트 리스너에 미리 등록해둬야한다.

  • createServer.js
const http = require('http');

http.createServer((req,res) => {
    //등록할 내용을 입력하는 부분
});

이렇게 이벤트 리스너를 가진 서버를 만들어줬다.

http 서버가 있어야 웹 브라우저 요청을 처리할 수 있으므로, http 모듈을 추가해두었다. http 모듈에는 createServer 메서드가 있기 때문에, 인자로 요청에 대한 콜백 함수를 넣을 수 있다. 요청이 들어올때마다 매번 콜백 함수가 실행되기 때문에, 이 콜백 함수에 응답을 넣어주면 된다.

createServer의 콜백 부분을 보면, reqres 매개변수가 있다.

이름의미용도
reqrequest의 줄임말요청에 관한 정보를 담음
resresponse의 줄임말응답에 관한 정보를 담음

물론, 아직 코드를 실행해도 아무 일도 일어나지 않는다.(요청에 대한 응답을 넣지도 않고 서버와 연결되지도 않음)

const http = require('http');

http.createServer((req,res) => {
    res.write('<h1>Hello world!</h1>');
    res.end('<p>Hello server!</p>');
}).listen(8080,() => {
    console.log('8080번 서버에서 대기중입니다!');
});

createServer 메서드뒤에 listen 메서드를 붙이고 클라이언트에게 공개할 포트 번호와 포트 연결 후 실행 할 콜백 함수를 넣어주었다.

이제 이 파일을 실행하면 서버는 8080 포트 에서 요청이 오기를 대기한다.

const http = require('http');

const server = http.createServer((req,res) => {
    res.write('<h1>Hello world!</h1>');
    res.end('<p>Hello server!</p>');
});
server.listen(8080);
server.on('listening', () => {
    console.log('8080번 포트에서 서버 대기중입니다.');
})
server.on('error',(error) => {
    console.error(error);
});

다음은 listen 메서드에 콜백함수를 넣는대신 listening 이벤트 리스너를 붙인 예제이다. 추가로 error 이벤트 리스너도 추가하였다.

res 객체에는 res.writeres.end 메서드가 있다.

  • res.write : 클라이언트로 보낼 데이터 (HTML 문자열 뿐만 아니라 버퍼도 보낼 수 있음, 여러번 호출해서 데이터를 여러개 보내는것도 가능하다)

  • res.end : 응답을 종료하는 메서드

이제 해당 코드를 실행하면, 콘솔창에

8080번 포트에서 서버 대기중입니다.

다음과 같은 값이 출력된다.

인터넷 브라우저를 열어 localhost:8080 또는 127.0.0.1:8080에 접속하면

요렇게 나오는걸 확인할 수 있당.

localhost와 포트란?
localhost란 현재 컴퓨터의 내부 주소를 가리킨다. 외부에서는 접근 불가능하고 자신의 컴퓨터에서만 접근 가능하다는 특징이 있다.
또한, 127.0.0.1처럼 숫자로 표현하는 주소는 IP라고 한다.


포트는 서버 내에서 프로세스를 구분하기 위해 사용된다. 서버는 HTTP 요청을 대기하는 것 외에도 FTP 요청을 처리하기도 하고, 데이터베이스와 통신하기도 하는데, 이럴때마다 서버는 프로세스에 포트를 다르게 할당하여 요청을 구분한다. 포트번호는 IP주소 뒤에 클론(:)을 붙여 함께 사용한다.
( 21:FTP / 80:HTTP / 443:HTTPS / 3306:MYSQL )


하지만 사이트 주소 뒤에 아무 포트 번호도 붙지 않은 경우도 확인할 수 있는데, 이런 경우는 80번 포트를 사용하기 때문이다. 80번 포트를 사용할 경우 주소를 포트에서 생략할 수 있다.


위 예제들에서 8080번 포트를 사용하는 이유는, 다른 서비스와의 충돌을 방지하기 위함이라고 한다!(Error::listen EADDRINUSE) 보통 포트 하나에 서비스 하나만 이용이 가능하다.
추가로, macOS와 리눅스에서는 1024번 이하 포트를 연결하기 위해서 sudo 명령어를 붙여야 한다고 하니 참고.


📝 HTML 파일 작성 후 불러오기

매번 res.write, res.end를 통해서 한줄씩 코드를 작성하면 번거롭기 때문에, HTML 파일을 따로 작성해서 불러올거다!

  • server2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>node.js 웹서버</title>
</head>
<body>
    <h1>Node.js 웹서버</h1>
    <p>만들 준비되셨나요?</p>
</body>
</html>

! 치고 엔터 누르면 자동 생성된다. 안에 내용만 조금 수정해주면된댜

  • server2.js
const http = require('http');
const fs = require('fs');

http.createServer((req,res) => {
    fs.readFile('./WebServer_Test/server2.html',(err,data) =>{
        if(err){
            throw err;
        }
        res.end(data);
    });
}).listen(8081,() => {
    console.log('8081번 서버에서 대기중입니다!');
});

이번에는 8081번 포트를 사용해서 코드를 실행시켰다! fs 모듈을 이용해서 HTML 파일을 읽어왔당.

콘솔창에는 이렇게뜬다.

8081번 서버에서 대기중입니다!

  • 실행결과

profile
안녕하세요

0개의 댓글