Web Server/ mininode Server

자세한 내용은 공식 문서 참조!

HTTP 트랜잭션 해부 | Node.js

Mini Node Server 목표

클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답을 받아 화면에 보여 줍니다.

 

• 매번 파일을 실행하지 않고, npm start 명령어를 이용하는 방법은 없을까요?
  • 서버를 매번 실행시키지 않아도 되는 개발도구가 있습니다.
  • nodemon을 이용하면, 서버를 매번 실행시킬 필요가 없습니다.
  • npm install nodemon으로 설치합니다.
  • package.json의 "scripts"에 아래 코드를 추가합니다.
  • 혹은 npx로 nodemon을 따로 설치하지 않고 실행합니다.

 

 "start": "nodemon server/basic-server.js"

nodemon으로 server/basic-server.js 파일을 실행합니다.

npx nodemon server/basic-server.js

npx nodemon으로 server/basic-server.js 파일을 실행합니다.

 

클라이언트 실행

• client/index.html를 웹 브라우저에서 실행합니다.
• 특정 포트로 클라이언트를 실행하고 싶다면, serve를 이용할 수 있습니다.

npx serve -l 포트번호 client/

 

 

// 공식문서참조 >>

각 'data' 이벤트에서 발생시킨 chunk는 Buffer 입니다.

이 청크가 문자열 데이터라는 것을 알고 있다면 이 데이터를 배열에 수집한 다음 'end' 이벤트에서 이어 붙인 다음 문자열로 만드는 것이 가장 좋습니다.

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
});

 

에코 서버 예제

다음의 조건에서만 에코 응답을 보내려고 합니다.

• 요청 메서드가 POST인 경우
• URL이 /echo인 경우

위 조건이 아닌 경우에는 404를 응답합니다.

const http = require('http');

http.createServer((request, response) => {
  if (request.method === 'POST' && request.url === '/echo') {
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString();
      response.end(body);
    });
  } else {
    response.statusCode = 404;
    response.end();
  }
}).listen(8080);

---

🤗 자 여기서 우리가 할 미니노드서버도 에코 서버 예제이다!

.on('end', () => {
      body = Buffer.concat(body).toString();
      response.end(body);
    });

POST에 문자열을 담아 요청을 보낼 때는 HTTP 메시지의 body(payload)를 이용하여 해당 조건에 맞는 응답을 end에 이벤트로 보낸다.

 

response.end(body. 뒤에 toLowerCase() 와 toUpperCase() 를 붙여준다.

 

 

에러가 났었는데,,

알파벳 입력 >>

toUpperCase 버튼 클릭 후 >>

 

POST 에서 에러가 발생했다,,

 

why?

⇒ OPTION, lower, upper 각각

⇒ .writeHead() 메서드를 라우팅마다 헤더에 넣어줘야 했었다

response.writeHead(200, defaultCorsHeader);

 

완성된!

basic-server.js

const http = require('http');

const PORT = 4999;

const ip = 'localhost';

const server = http.createServer((request, response) => {
  //! 메소드가 OPTIONS
  if (request.method === 'OPTIONS'){
    // CORS 설정을 돌려줘야 한다.
    response.writeHead(200, defaultCorsHeader);
    response.end('hello mini-server sprints');

  }
  //! 메소드가 POST , url이 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());
    });
  } else if (request.method === 'POST' && request.url === '/lower'){
    //! 메소드가 POST , 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
};