2020.코딩일지

basic-server(2)express로 refactoring / nodemon을써보자 본문

WebServer&DB&CTI

basic-server(2)express로 refactoring / nodemon을써보자

개발하는라푼젤 2022. 8. 5. 09:21
728x90

im-sprint-mini-node-server

 

app.use(express.json({ strict: false })); 

—>이게있어야 JSON을 알아듣는다!⭐️매우중요! (false면 배열,객체 이외에 값도 JSON으로 읽을 수있다)

app.use(express.urlencoded({ extended: true, }) );

—>요즘은 거의 제이쓴이라 app.use(bodyParser.json()); 이걸 선호하고 위와같은 방식은 잘안쓰긴하는데

POST, PUT 요청의 headers에 "Content-Type”이 application/x-www-form-urlencoded 일 때 필요한 기능

extended: true, 는 인코딩 방식을 설정 true라면 qs 모듈 -> 배열및객체 모두 입력가능하고

false라면 query-string 모듈 -> 객체만 입력가능; 에러확률이높아짐!


킹규명님의노션 

(기존)에서 (express)로 간결해졌음.

(캡쳐오른쪽엔 Logger적용해보려다가 망한거 ㅋ)

 

 

신규코드

더보기 
const express = require("express");
const app = express();
const cors = require("cors");
const { renderMatches } = require("react-router-dom");
const port = 4999;

//어느 요청, 주소 상관없이 무조건 실행되는 app.use()
app.use(cors()); //하나로해결 ..
app.use(express.json({ strict: false })); 
//⭐️이게있어야 JSON을 알아듣는다!**매우중요! false면 배열,객체 이외에 값도 JSON으로 읽을 수있다)

app.use(
  express.urlencoded({
    extended: true,
  })
);
//요즘잘안쓰긴하는데
//POST, PUT 요청의 headers에 "Content-Type”이 application/x-www-form-urlencoded 일 때 필요한 기능
//extended: true, 는 인코딩 방식을 설정 true라면 qs 모듈, 
//false라면 query-string 모듈
//참고 https://green-consonant-515.notion.site/7a7dfb9cfb3d41f1a0af44f25e2cc425

app.post("/upper", (req, res) => {
  res.json(req.body.toUpperCase());
});

app.post("/lower", (req, res) => {
  res.json(req.body.toLowerCase());
});

//app.listen(3000); //서버실행, 대기중.
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

//node = JS
//express = react 프레임워크다 더 쓰기좋은방법.

 

기존코드

더보기 
const express = require("express");
const router = express.Router();
const cors = require("cors");
const app = express();
const http = require("http");
const PORT = 4999;
const ip = "localhost";

const server = http.createServer((request, response) => {
  if (request.method === "OPTIONS") {
    //CORS설정
    // response.writeHead(200, defaultCorsHeader);
    app.use(cors()); //모든요청에대해 허용
    response.end();
  }
  if (request.method === "POST" && request.url === "/upper") {
    //대문자로 응답돌려주기
    let body = "";
    request
      .on("data", (chunk) => {
        body += chunk;
      })
      .on("end", () => {
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toUpperCase());
      });
  } else if (request.method === "POST" && request.url === "/lower") {
    //소문자로 응답돌려주기
    let body = [];
    request
      .on("data", (chunk) => {
        body.push(chunk);
      })
      .on("end", () => {
        body = Buffer.concat(body).toString();
        body = body.toLowerCase();
        response.writeHead(200, defaultCorsHeader);
        response.end(body);
      });
  } 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,
};

 

index.html

더보기 
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .input-text {
        resize: none;
        font-size: 1.5rem;
        width: 80%;
        height: 10ch;
        border: 1px solid #000;
      }
      #response-wrapper {
        width: 80%;
        font-size: 2rem;
        border: 1px solid #000;
        height: 10ch;
      }
      button {
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h2>요청</h2>
      <textarea
        placeholder="여기에 작성한 데이터를 서버로 보내면 응답으로 받을 수 있어야 합니다."
        class="input-text"
      ></textarea>
      <div>
        <button id="to-upper-case">toUpperCase</button>
        <button id="to-lower-case">toLowerCase</button>
      </div>
      <h2>응답</h2>
      <pre id="response-wrapper"></pre>
    </div>

    <script src="./App.js"></script>
  </body>
</html>

 

 

nodemon노드몬으로 디버깅하기 터미널에 노드몬설치하기

npm -g install nodemon -

.json파일에서 start부분이 있다면 수정하고 없다면 추가하기.

"start": "nodemon --inspect-brk server/basic-server.js",

 

아하 그럼 둘다 잘 돌아용 ㅋㅋ

'WebServer&DB&CTI' 카테고리의 다른 글

[DB]im-sprint-cmarket-database:test파일안돌고뭐해에러[BEB 6th][nodemon] app crashed - waiting for file changes before starting...  (0) 2022.08.09
[데이터베이스]MySQL사용 (macOS)  (0) 2022.08.08
basic-server(1)  (0) 2022.08.05
express 미들웨어 작동원리이해하기  (0) 2022.08.05
[HTTP/네트워크] REST API [BEB 6th]  (0) 2022.07.29
'WebServer&DB&CTI' Related Articles more
Comments