서버(server) 만들기

이동환·2020년 9월 27일
2

TIL

목록 보기
34/74

1. 서버 생성하기

: node.js에서 서버를 생성하기 위해서 노드의 내장 모듈인 http 모듈을 사용한다. 모듈을 사용하기 위해서 우리는 require라는 메소드를 사용하고 코드는 아래와 같다.

이렇게 모듈을 가지고오면 우리는 이제 http 모듈을 사용할 수 있다. 이 모듈을 가지고 createServer라는 메소드로 서버를 생성할 수 있다.

createServer 함수 안에 response.writHead 메소드와 response.end 메소드를 사용한다.

listen 메소드로 서버를 실행시킨다.

//1. 서버 사용을 위해서 http 모듈을 http 변수에 담는다.
const http = require('http');
const PORT = 5000;
const ip = "localhost";
//2. http 모듈로 서버를 생성한다.
const server = http.createServer((request, response) => {
  response.writeHead(200,{'Content-Type':'text/html'});
  response.end('Hello world');
});
// 3. listen 메소드로 포트가 5000인 서버를 실행한다. 
//서버가 실행된 것을 확인하기 위해서 콘솔에 
//'http server listen on localhost:5000'을 출력한다
server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

2. 서버 접속하기

  1. 위에서 만든 서버에 접속하기 위해서 터미널을 켜고, 해당 파일 저장된 디렉토리로 이동한다.

  2. 위치한 곳에서 $ node 파일이름.js을 터미널에 적으면 서버는 실행된다.

  3. 그리고 나서 브라우저를 켜고, http://localhost:5000 에 접속하면 된다.

3. 응용하기

위에는 그냥 서버를 만들어봤지만, 이번에는 요청 메소드에 따라 반응하는 서버를 만들어보자. 코드 스테이츠에서 연습용으로 했던 작은 서버만들기 예제이다.

서버 만들때, 많이 참고하였던 자료다. 한글로 잘 정리 되어있으니, 필독 !
HTTP 트랜잭션 해부하기 링크

// 먼저 모듈을 불러오고, 아이피와 포트를 정한다.
const http = require("http");
const PORT = 5000;
const ip = "localhost";
// createSever 메소드로 서버를 만든다.
const server = http.createServer((request, response) => {
  // 메소드가 'OPTION' 이라면 CORS설정을 돌려준다.
  // (preflight상황)
  if(request.method === 'OPTION'){
    response.writeHead(200, defaultCorsHeader);
    response.end();
  }
  // 요청 메소드가 POST이고, 
  // url의 3번째 슬래쉬부분이 upper라면
  if(request.method === 'POST' && request.url === '/upper'){
  let body = [];
  request
    .on('data', chunk =>{
      body.push(chunk);
    })
    .on('end', () =>{
      body = Buffer.concat(body).toString();
      response.writeHead(200, defaultCorsHeader);
      response.end(body.toUpperCase());
  // 요청 메소드가 POST이고, 
  // url의 3번째 슬래쉬부분이 lower라면
  })else if (request.method === "POST" && request.url === "/lower") {
    let body = [];
    request
      .on("data", chunk => {
        body.push(chunk);
      })
      .on("end", () => {
        body = Buffer.concat(body).toString();
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toLowerCase());
      });
  // 위의 두 조건이 아니라면 에러를 전송
  } else {
    response.statusCode = 404;
    response.end();
  }
  //
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
});
server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});
const defaultCorsHeader = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Accept",
  "Access-Control-Max-Age": 10
};

* Buffer와 Stream
data.toString()을 거치지 않고 data만 출력하면 <Buffer 72 65 61 64 20 6d 65 20 62 72 6f 21>와 같이 Buffer가 출력된다.
!
데이터를 조각(청크, chunk)내어 buffer에 채운 후 다 차면 buffer를 통째로 옮기고 새 buffer에 아직 옮기지 못한 데이터 조각을 다시 채운다. 데이터 조각을 buffer에 채우는 일을 버퍼링(buffering)이라고 부른다. 영상이 버퍼링 중이라며 재생되지 않는 경우를 종종 경험했을텐데 buffer에 데이터를 채울 때까지 기다리는 버퍼링 작업을 말하는 것이다.
!
한편 buffer가 다 차면 이를 전송하고 다시 buffer를 채우는 버퍼링 작업을 연속하는 것이 스트림(stream)이다. 단발성 single buffer도 존재하지만 지속적으로 buffer가 나오는 것을 stream buffer라고 한다. 버퍼를 이용해 데이터를 전송하는 '흐름'이 스트림이라고 이해하자.

위에서 새로 사용된 이벤트s
다양한 메소드 모음집

  1. response.on(event, listener)
    : 지정한 event에 대한 listener를 추가한다.

  2. response.writeHead(statusCode[, statusMessage][, headers])
    : 이 메소드는 http의 header를 설정하는 메소드이다. 첫번째인자는 코드 스테이터스 코드다. 200이나 404 와 같이 상태를 보여주는 코드다. 두번째는 사람들이 readable한 statusMessage이고, 마지막은 the response headers이다.

  1. end(data,[,encoding])
    : 엔드 메소드는 본문을 작성하는 메소드이다.

  2. server.listen()
    : (Starts the HTTP server listening for connections. This method is identical to server.listen() from net.Server.)

  1. 'end'
    : end는 더이상 data가 없을때 발동된다.

  2. 'data'
    : chunk란, data의 chunk(덩어리 또는 조각)이다. 이 청크는 Buffer가 될 수 있고 String이 될 수도 있다.
    여기에 toString() 을 사용해야 우리가 알 수 있는 데이터로 변환 시킬 수 있다.

const readable = getReadableStreamSomehow();
readable.on('data', (chunk) => {
  console.log(`Received ${chunk.length} bytes of data.`);
});
readable.on('end', () => {
  console.log('There will be no more data.');
});
profile
UX를 개선하는것을 즐기고 새로운것을 배우는것을 좋아하는 개발자입니다.

0개의 댓글