Node.js 서버 + Express 프레임워크 구축하기

• node.js 설치 (LTS ver)

목차

• node.js 서버
  • node.js 프로젝트 만들기
  • Common JS란?
  • 초간단 node.js http 서버 만들어보기
  • API 서버 개발하기
• express 프레임워크
  1. Express 사용하기
  2. GET, POST로 데이터 처리하기
  3. Express에서 경로 파라미터 관리하기

Node.js 서버

node는 브라우저가 아닌 곳에서도 javascript를 실행할 수 있도 나온 어플리케이션입니다. 우리가 브라우저가 아닌 곳에서도 node.js를 이용하면 javascript를 실행할 수 있습니다.

Node.js 프로젝트 만들기

1. 보통 node.js 프로젝트를 만들기 위해서 처음에 npm 패키지로 초기화합니다.

   npm init 

2. 테스트 해볼 hello.js를 만들어봅니다.

   console.log("개발이 하고 싶어요.");

3. hello.js를 실행시키는 node 명령어를 만듭니다.

   node hello.js

   node.js를 이용해서 대표적으로 할 수 있는게 서버 개발입니다. 다른, 다양한 언어로도 개발할 수 있지만 웹 개발에 사용되는 언어 js이기 때문에 범용성이 높다는 장점이 있습니다.

Common JS란?

React를 개발할 때는 ES6를 기반으로 해서 import와 export를 사용해서 모듈을 불러왔습니다. 그러나 Node에서는 기본적으로 채택된 문법이 ES6가 아니라 Common JS 방식을 사용합니다.

💡 React도 Node를 기반으로 하지만, 내부 빌드 과정에서 ES6를 사용할 수 있도록 변형했다고 볼 수 있습니다.

실제로 babel이라는 것을 이용하면 Node 서버에 ES6를 사용할 수 있습니다.

Javascript의 계보가 꽤 복잡하지만.. Common JS는 ES6 문법과 유사하지만 모듈 로딩에서 차이가 있습니다.

[ES6 방식]

// hello.js
function hello() {
  ...
}
  export default hello;
  
  // home.js에서 hello.js를 import
  import hello from './hello.js'

[Common JS방식]

export할 때 module.exports를 사용합니다. import할 때는 require 방식을 이용해서 불러옵니다.

//  hello.js 모듈 export
function hello() {
  
}
module.exports = hello;

// hello.js를 import할 때
var hello = require('./hello.js')
hello();

만약 복수 개를 export하고 싶다면 exports 문법을 씁니다.

//  hello.js 모듈 export
function hello() {}
function world() {}
exports.a = hello;
exports.b = world;

// hello.js를 import할 때
var helloModules = require('./hello.js')
modules.hello();
modules.world();

초간단 node.js http 서버 만들어보기

1. 서버 역할을 하는 index.js 파일을 만듭니다.

   res는 response 객체를 의미하며 클라이언트에 응답을 해줄 때 사용됩니다.

   Response에 200번 상태 코드와 함께 문자열을 반환하는 코드입니다.

   var http = require('http'); // node 내장 모듈 불러옴
   var hostname = '127.0.0.1'; //localhost
   var port = 3000;
   
   http.createServer(function (req, res) {
       res.writeHead(200, { 'Content-Type': 'text/plain'});
       res.end("개발이 하고 싶어요.");
   }).listen(port, hostname);
   
   console.log("Server running.. http://"+hostname+':'+port);

2. Terminal 실행 node index.js

   Server running.. http://127.0.0.1:3000

3. 127.0.0.1:3000로 브라우저에 접속하면 "개발이 하고 싶어요"를 전달 받습니다.

API 서버 개발

일반적으로 서버는 다양한 API 요청을 처리해야 합니다.

ex)

• 정보 불러오기
• 작성하기
• 정보 삭제하기
• 정보 수정하기
• 회원 계정 로그인 처리
• 등등

이런 로직들을 처리하는 서버를 node.js로 간단하게 구현해볼 수 있습니다.

var http = require('http'); // node 내장 모듈 불러옴
var hostname = '127.0.0.1'; //localhost
var port = 3000;

http.createServer(function (req, res) {
    const url = req.url;
    const method = req.method;
    
    if (url === '/board') { // 아티클 정보를 받아오는 요청
        if (req.method === 'GET') { // 멤버들 정보를 받아오는 요청
        
        } else if (req.method === 'POST') { // 회원가입, 작성할 때 요청
        
        }
        
    } else if (url === '/board/1') { // 1번째 아티클 상세 정보를 받아오는 요청
    
    }
}).listen(port, hostname);

console.log("Server running.. http://"+hostname+':'+port);

그런데 node.js 만으로 서버를 개발하게 되면 문제점들이 꽤 많습니다.

• 한글이 내보낼 때 깨짐
• GET의 query string과 POST Body 부분을 처리하기 위해 복잡한 로직이 필요
• 복잡한 응답을 처리할 수록 필요한 코드양이 많아짐

이러한 문제들을 손쉽게 처리하기 위해서 나온게 express 프레임워크 입니다.

Express 프레임워크

express 프레임워크를 이용하면 더 쉽게 API 서버를 개발할 수 있습니다.

1. Express 사용하기

1. npm을 이용해서 해당 프로젝트에 express패키지를 설치합니다. 그리고 브라우저의 CORS(Cross Origin REsource Sharing)이슈를 막기 위해 cors 패키지도 설치합니다.

   npm install express
   npm install cors

2. express.js라는 새 파일을 만들어봅니다.

   const express = require("express");
   const cors = require('cors');
   const app = express();
   const port = 3000;
   
   app.use(express.json()); // json 형식의 데이터 처리 가능하게 함
   app.use(cors()); // cors 이슈 방지
   
   app.get("/board", async (req,res) => {
       res.send("게시판 목록입니다.");
   });
   
   app.post("/board", async (req, res) => {
      res.send("게시판이 등록되었습니다.")
   });
   
   app.listen(port, () => {
       console.log("게시판 서버 실행중입니다.");
   });
   

   3. 실제로 board를 전달하는 API의 경우 아래와 같이 response를 하게 됩니다.

      res.send 메소드 안에 클라이언트에게 전달해줄 article 배열을 넣을 수 있습니다.

      app.get("/board", async (req,res) => {
          res.send({
              "board" : [
                  {
                      "id": 1,
                      "title": "게시판 제목입니다.",
                      "content": "게시판 내용입니다.",
                      "created_at": "2022-05-20"
                  },
                  {
                      "id": 2,
                      "title": "게시판 제목입니다.",
                      "content": "게시판 내용입니다.",
                      "created_at": "2022-05-20"
                  }
              ]
          });
      });

      

2. GET, POST로 데이터 처리하기

클라이언트가 HTTP 통신으로 데이터를 전달하기 위해선 크게 2가지 방식이 있습니다.

GET 요청은 query를 통해서만 데이터를 전달받을 수 있습니다. 반면 클라이언트가 POST 요청을 하면 query & body 모두 이용할 수 있습니다.

[GET Query처리]

url 요청 http://localhost:3000/board?id=1

app.get("/board", async (req,res) => {
    const query = req.query;
    console.log(query.id);
});
---- 서버 console ----
1

[POST에서 Body 처리]

클라이언트에서 POST 요청을 할 때 Body에 데이터를 담아 보낼 수 있습니다. express 서버에서는 req.body값으로 접근합니다.

postman 실행 (또는 그와 비슷한 기능을 하는)

app.post("/board", async (req, res) => {
    const body = req.body;
    console.log(body);
   res.send("게시판이 등록되었습니다.")
});


--- 서버 콘솔 출력화면
게시판 서버 실행중입니다.
{ board: [ { title: '제목입니다.', content: '내용입니다.' } ] }

3. Express에서 경로 파라미터 관리하기

Front에서 작업할 때 /:id이런식으로 url처리를 하는데, 이때 id는 parameter가 되고, 이렇게 동적 경로를 관리하기 위해서는 파라미터를 사용하는 것입니다.

app.get('/board/:id', async (req,res) => {
    const params = req.params; // {id: 값} Json 형태
    const {id} = params; // ES6 Destructuring
});