본문 바로가기

Programming/Node.js

5. http 모듈로 서버 만들기 (1) - 요청과 응답 [4]

node js logo image

 

 

 

 

 

앞선 아티클에서 우리는 주로 res.writeHead와 같은 메서드를 사용해 HTML 태그를 일일이 작성했습니다. 지금까지야 예시를 위해서 그렇게 작성해 왔지만, 매우 비효율적이죠. 지금부터는 HTML 파일을 실제로 작성하고, 해당 파일을 보내도록 하겠습니다. 

 

참고로 해당 HTML 파일은 fs 모듈로 읽어서 전송하게 됩니다. 아래 예제를 확인해 보겠습니다. 참고로 fs 모듈에서 우리가 이미 살펴보았던 promise 방식을 사용하니, 헷갈리는 부분이 있다면 아래 아티클을 참고하세요.

 

 

 

4. Node 기능 살펴보기 (5) - 파일 시스템 접근하기 [fs] 2

앞선 아티클에서 살펴보았듯이, fs 모듈은 콜백을 중심으로 구현되는 모듈입니다. 익숙한 형태이지만, 콜백 중심의 형식은 다소 사용하기 불편한 감이 있으니 이 역시 프로미스 형식으로 바꾸어

nozeroslope.tistory.com

 

 

그리고 async/awiat를 적극적으로 사용하니, async/awiat 문법이 잘 기억나지 않으면 아래 아티클을 다시 확인하고 옵시다. promise를 사용하는 함수에 async를 붙여 선언하고, promise로 작성된 콜백을 await로 다시 표현한다는 사실을 다시 한번 잘 이해하고 오시기 바랍니다. 

 

 

 

2. Javascript ES2015 (7) - async/awiat [1/2]

async/await는 노드 7.6 버전부터(ES2017) 추가된 기능입니다. 노드와 같이 비동기 중심의 코드를 작성하는 데 있어서 코드를 간소화하는데 큰 도움을 주는 문법이죠. 우선은 기본적으로 프로미스를

nozeroslope.tistory.com

 

 

 

 


 

 

 

<!-- [server2.html] -->

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js example</title>
</head>
<body>
    <h1>Node.js HTML 파일 전송</h1>
    <p>HTML 파일 전송 테스트</p>
</body>
</html>

 

 

// [server2.js]

const http = require('http');
const fs = require('fs').promises;

http.createServer(async (req, res) => {
    try{
        const data = await fs.readFile('./server2.html');
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'});
        res.end(data);
    } catch (err) {
        console.error(err);
        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8'});
        res.end(err.message);
    }
})
    .listen(8081, () => {
        console.log('8081포트 대기중...');
    });

/* 출력
8081포트 대기중...
*/

 

 

 

 

 

위에서 화살표 함수 전체를 async로 감싸고, fs.readFile에서 server2.html 파일 읽기를 완료하면 data 파라미터를 활용하는 콜백함수가 실행되면서 res.end( )를 통해 최종적으로 해당 HTML 파일이 실행됩니다. 사실상 요청이 들어오면 fs 모듈로 HTML 파일을 읽고, data 변수에 저장된 버퍼를 그대로 클라이언트로 보내는 것입니다. 참고로 에러 메시지는 일반 문자열이라서 text/plain을 사용합니다. 

 

 

 


 

 

 

응답을 보내면서 200, 500이라는 숫자를 작성했습니다. 이는 HTTP 상태 코드입니다. res.writeHead의 첫 번째 인자로 이 HTTP 상태 코드가 전달됩니다. 즉, 서버가 클라이언트에게 기본적으로 요청에 대한 성공/실패 여부를 코드로 리턴하는 것입니다. 브라우저는 서버에서 보내주는 이 상태 코드를 받아서 판단합니다. 아래 대표적인 상태 코드를 살펴보겠습니다. 404와 같이 많이 들어본 것들도 있을 것입니다. 

 

 

  • 2XX : 성공을 의미합니다. 200(성공), 201(작성됨)
  • 3XX : 리다이렉션을 알립니다. 어떤 url을 입력했는데, 다른 url의 페이지로 넘어간다는 의미죠. 301(영구 이동), 302(임시 이동)이 대표적입니다. 304(수정되지 않음)은 요청의 응답으로 캐시를 사용했다는 의미입니다.
  • 4XX : 요청 오류를 의미합니다. 이는 req 자체에 의미가 있다는 뜻이죠. 대표적으로 400(잘못된 요청), 401(권한 없음), 403(금지됨), 404(찾을 수 없음)을 나타냅니다. 
  • 5XX : 서버 오류입니다. 요청은 정상인데 서버 응답이 오류가 생겼을때 입니다. 참고로 이 오류는 res.writeHead 코드로 보내는 경우는 거의 없고, 예기치 못한 에러 발생 시 서버가 자동으로 보냅니다. 500(내부 서버 오류), 502(불량 게이트웨이), 503(서비스를 사용할 수 없음)이 많이 쓰입니다.