*🔐Study Keyword :

✅Node.js의 🔑Express프레임 워크를 써보며 http와 무엇이 다른지 어떤 장점이있는지 직접 느껴보자.

Node.js

• Node.js는 비동기 이벤트 기반 런타임 환경이다.

• 자바스크립트는 브라우저에서 탄생했다. 자바스크립트를 브라우저 엔진에서만 쓰기보단 터미널(런타임 환경), 서버 상에서 사용하고자 만든 언어가 바로Node.js이다.

🌓 ) 노드의 장 단점?!

• 노드의 단점이라면 모든 초기 설정을 일일이 해줘야한다는 것이다. 초기에 node.js 설치 뒤 npm init를 해줘야 node-modules과 package.json을 받을 수 있다.
• 반면 장점은 이러한 Node.js를 기반으로 서버를 개발하면 1> 자유도가 높고 2> 무한한 확장 가능가질 수 있는데 Server-side Framework들이 다양하게 존재하기 때문이다.
• 따라서, 노드 개발자는 npm에 등록 되어있는 노드 패키지(라이브러리 또는 프레임워크)에 대한 관심을 기울어야 하고 현업에서 어떤 패키지들이 활발히 사용되는지 그리고 왜 사용되는지 관심을 기울여야한다.

- Express

• Express는 Node.js의 프레임워크로 Node.js가 웹서버를 구축할 때 편리한 기능을 제공해준다.
• Express를 사용하지 않는다면 1> Node.js의 내장모듈인 http를 사용해 서버를 생성하고 http 요청을 처리하는 함수를 구현한다.
  2> 반면 노드 기반 JavaScript 패키지인 2> Express 사용하면 보다 편리하게 서버를 구축할 수 있다.

1> Node.js 내장 모듈 http로 서버 생성

<script>
const http = require("http"); // 1번
const server = http.createServer((request, response) => {
  // 2
  console.log("request is received");
  response.setHeader("Content-Types", "application/json"); // 3
  response.end( // 4
    JSON.stringify({ 
      message: `this is minjae's first server`,
    })
  );
});
server.listen(8000, () => { // 5 
  console.log("server is listening on PORT 8000");
});
</script>  

• 1번> require은 Node.js의 http 내장모듈을 불러와 import하는 것과 같은 역할을 한다.
  import 문법은 Bable에서 사용하는 것이기에 Node에서는 자동으로 import 문법을 사용하는 도구가 없기 때문에(초기 세팅에 설치되어있지 않기에) require 문법으로 불러와야한다.
• 2번> http의 핵심은 요청과 응답이다. 즉, http의 createServer 메서드를 통해 서버 객체가 생성되어 HTTP 서버를 만들며 createServer 메서드의 인자로서 요청과 응답을 받는다.
• 3번> 서버는 요청에 대한 응답의 헤더를 response의 setHeader 메서드를 통해 설정할 수 있고
• 4>번 end 메서드를 통해 요청에 대한 응답에 해당되는 값을 넘기는데 JSON.stringify() 메서드를 통해 JavaScript 값이나 객체 형태를 JSON 문자열로 변환하여 내보내준다.
• 5번> 생성한 서버인 server는 첫번 째 인자로 PORT 번호를 받고 두번 째로 콜백함수를 받는다.
  PORT는 벡엔드에서 지정해주어야 클라이언트에서 벡엔드 서버로 접속할 수있다. 콜백함수 안에선 포트 번호로 서버를 열어 실행할 때의 로직을 처리하고 서버가 켜져있다는 로그 메세지를 남기는 게 일반적이다.

1_2> 터미널로 요청을 보내는 방식

• httpie 라는 터미널 전용 http client 프로그램을 brew install httpie 명령어로 설치한다.
• 설치가 끝나면 http localhost:8000를 입력하면 응답이 뜨면서 서버가 동작한다.

1_3. 내장 모듈 http로 다양한 라우팅 기능이 추가된 서버 생성시

• 만약 application의 규모가 커져 1> 유저를 회원가입도 시켜야하고, 2> 로그인도 처리해야 하며, 3> 프론트엔드 측에서 요구하는 상품에 대한 정보도 응답으로 보내줘야하는 많은 요청이 있다면 어떨까?

• 이렇게 해당 자원에 대해 다른 함수(로직)을 실행하도록 하는 것을 라우팅 이라고 합니다.

//- myServer.js
<script>
const http = require("http");
const { sendDB } = require("./sendDB");
const server = http.createServer((request, response) => {
  const { url, method } = request;
  response.setHeader("Content-Types", "application/json");
  if (url === "/")
    return response.end(JSON.stringify({ message: `end point` }));
  if (url === "/node" && method === "GET")
    return response.end(JSON.stringify({ message: `node is great` }));
  if (url === "/node/express" && method === "GET")
    return response.end(JSON.stringify({ message: `express is more great` }));
  if (url === "/database" && method === "POST") return sendDB(response);
  response.end(
    JSON.stringify({
      message: `this is minjae's first server`,
    })
  );
});
server.listen(8000, () => {
  console.log("server is listening on PORT 8000");
})
</script>

• handler function sendDB.js

<script>
const sendDB = (res) => {
  res.end(
    JSON.stringify({
      data: [
        { id: 1, name: "Mysql" },
        { id: 2, name: "Oracle DB" },
        { id: 3, name: "Mongo DB" },
      ],
    })
  );
};
module.exports = { sendDB };
</script>

• 이를 구현하기 위해서 라우팅을 직접 request 객체에서 url과 method에 따라 조건문으로 분기하여 여러 로직을 처리해 줘야한다.
• 서버를 실행하는 함수 안에 많은 조건문과 많은 로직을 모듈화 하는데 너무 많은 시간이 들어간다.

2_1> Express로 서버 생성

• 따.라.서! 이런 불편함을 해소하기 위해 탄생한 프레임워크가 Express이다.

• Express가 해주는 역할 2가지

1> url을 if 조건문으로 매칭을 안해줘도되고 리액트에서 라우팅하듯 첫번 째 인자로 url을 써주고 두번 째 인자로 어떤 함수를 호출할지만 넣어준다.
2> JSON.stringify 메서드로 일일이 처리 해줘야하는데 번거로운 과정을 안해줘도 된다.
Express가 JSON으로 자동으로 변환을 해줘 핸들러 함수에 대해 response 객체에 json() 메서드를 활용하여 전달해주면 된다.

2_3> Express로 구현한 코드

<script>
const http = require("http");
const express = require("express");
const { sendNode } = require("./sendNode");
const { sendExpress } = require("./sendExpress");
const { sendDB } = require("./sendDB");
const app = express();
app.get("/", (request, response) => {
  response.json({ message: `end point` });
});
app.get("/node", sendNode);
app.get("/node/express", (req, res) => {
  sendExpress(req, res);
});
app.get("/database", sendDB);
app.post((request, response) => {
  response.json({
    message: `this is minjae's first server`,
  });
});
const server = http.createServer(app);
server.listen(8000, () => {
  console.log("server is listening on PORT 8000");
});
</script>

• Express 모듈을 require로 불러온 후 함수를 실행해서 app 변수에 담아주는 것이 컨벤션이다.
• 이는 클라이언트의 요청을 처리하는 http server application을 의미한다.

1. 요청을 받을 http method 함수를 app으로 부른
2. 요청을 받을 endpoint url을 string으로 첫번째 인자에
3. 요청과 응답을 인자로 받는 콜백함수를 두번 째 인 자로 넣는다.
   => 이는 각각의 메소드와 엔드포인트에 대해 처리하는(핸들링) 함수이다.**

<script>
// - sendNode.js
const sendNode = (req, res) => {
  res.json({
    message: "node is great",
  });
};
module.exports = { sendNode };
// - sendExpress.js
const sendExpress = (req, res) => {
  res.json({
    message: "Express is more great",
  });
};
module.exports = { sendExpress };
// - databale.js
const sendDB = (req, res) => {
  res.json({
    data: [
      { id: 1, name: "Mysql" },
      { id: 2, name: "Oracle DB" },
      { id: 3, name: "Mongo DB" },
    ],
  });
};
module.exports = { sendDB };
</script>

번외> Node.js 작성 시 유의할 점

• http.createServer에 전달된 응답의 콜백함수는 클라이언트의 요청(= API에 접속해야)이 들어와야 호출된다.
  • 즉, 요청이 들어와야 함수가 호출되고 이는 서버의 아이피 주소로 클라이언트가 접속 했음을 의미한다.
  • 함수를 만들 때 인자로 res를 넘겨줘야하는 이유는 res에 무언가를 담아서 보내주기 위해 res 객체에 있는 end 메소드를 호출하여 요청에 대해서 인자로 어떤 것을 보내줄 지 넣어줘야하기 때문에 res를 콜백함수로 받아야한다.
• 일반적으로 로컬호스트 8000 ,8080과 같이 사용하는 주소는 개발자들 사이에서 통신할 때 쓰이는 url 이고 중복되서 사용하면 안된다.

패키지> nodemon

• 작성한 서버의 코드를 수정한다면 서버에서 나갔다가 (컨트롤 c) 다시 접속을해야 수정이 적용된다.
• 그러나 nodemon이라는 패키지를 설치하면 즉시 수정하여 반영되어, 서버를 껐다 킬 필요가 없어 편리하다.

*💡conclusion

• Express과 http 내장 모듈로 서버를 생성할 때 무엇이 다르며 어떤 장점을 가지는 지 잘 알아두좌

#📑Study Source

• 위코드 벡엔드 소헌님의 두번 째 열띤 섹션 강의 중