Node.js로 server 구동하기

node js 홈페이지에 가보자. 가보면 node는 server가 아니라 javascript runtime이라고 되어있다. 즉 javascript 코드를 해석하게 해줄 수 있는 것이다.

http는 npm에서 설치를 안해도 된다. node가 직접 http라는 모듈을 제공해준다. 

const http = require('http');
http.createSever(() => {


});
http.listen(3065);

 

 

진행중인 폴더에서 프로젝트를 진행해 보자. back 폴더로 가서 npm init 명령어를 쳐준다.

이제 백엔드 서버를 만들껀데 백앤드 서버가 어떤 역할을 하냐? 일단 sagas폴더에서 만든 post.js에서 

아래 코드의 post 부분이 백앤드 서버이다.

function addPostAPI(data) {
  return axios.post('/post', postData, {
    withCredentials: true,
  });
}

서버 한곳에다가 프론트 백엔드 서버 데이터를 다 넣었다고 쳐보자. 프론트는 SSR 즉 서버사이드 렌더링을 해주고

백엔드는 API를 제공해준다. 한 컴퓨터데 두개의 서버를 띄워도 되긴하는데 프론트에 요청은 1초에 1000개가 오고 백엔드에는 요청이 1초에 10개가 온다. 아래와 같이 비대칭적으로 요청이 올 때가 있는데 그러면 컴퓨터 서버가 메모리나 CPU가 부족해서 터져버린다. 

이걸 대비하기 위해서 스케일링을 해준다. 즉 컴퓨터를 새로 하나 만들어서 기존거를 복사를 하는 것이다. 첫 만큼의 요청을 두 컴퓨터가 나눠 갔도록 한다. 여기서 낭비가 발생하는데 프론트 서버가 요청이 많이와서 프론트 서버를 늘려준건데 한 컴퓨터에 프론트 서버 백엔드 서버 같이 있으면 프론트만 복사하는 것이 아니라 백엔드 서버도 같이 복사해준다. 즉 백엔드만큼의 공간은 쓸데없는 공간이다.(프론트만 늘려나가주면 되는데...)

이렇게 때문에 각 기능별로 서버를 나눠주는 경우가 많다. 즉 특정기능에 요청이 많이 왔을 때 그 기능만 서버 여러대로 늘려주면 되기 때문이다. 컴퓨터에다가 모든 기능들을 다 넣어두면 서버를 스케일링 할 때 모든 기능이 다 복사되는데 그러면 나머지께 다 쓸모가 없게된다.

예를 들어 배달의 민족은 피크타임때 주문이 엄청 많이 들어오는데 주문용 서버 결제용 서버 이 두개만 여러개로 늘려주면 되는데 괜히 상품등록 어드민 이런거 모두를 같은 컴퓨터에 넣어둘 필요가 없는것이다.

 

이제부터 프로젝트를 수행할 때 필요한 기능에 따라서 서버를 늘려가 보자.

 

백엔드는 API 서버로써 데이터만 데이터베이스에서 가져와서 가공을 해줄수도 있고 반대로 전달을 해줄 수도 있다.

 

 

자, 이제 노드로 첫번째 서버를 실행해준다면(http 서버를 실행해 준다면) 아래와 같이 코드를 작성하고 명령어를 입력

back폴더의 package.json 파일에 dev 명령어가 없기 때문에 node app.js로 실행한다.

const http = require('http');
http.createSever(() => {
    console.log(req.url, req.method);
    res.end('Hello node');
});
http.listen(3065);

node app.js

{
  "name": "react-nodebird-back",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jay",
  "license": "ISC"
}

 

favicon 부분은 브라우저가 자동으로 요청한다. (지구본 부분)

아래와 같이 url과 method 부분을 알고 있고 

// app.js

const http = require('http');


const server = http.createServer((req, res) => {
    console.log(req.url, req.method);
    res.end('Hello node');
});
server.listen(3065, () => {
    console.log('서버 실행 중');
});

여러 줄을 치고 싶으면 write를 이용해서 작성한다.

브라우저나 프론트 서버에서 요청에 대한 정보가(req) 있고 응답에 대한 정보가(res) 있다.

// app.js

const http = require('http');


const server = http.createServer((req, res) => {
    console.log(req.url, req.method);
    res.write('Hello node1')
    res.write('Hello node2')
    res.write('Hello node3')
    res.write('Hello node4')
    res.end('Hello node');
});
server.listen(3065, () => {
    console.log('서버 실행 중');
});

수정했으면 저절로 업데이트가 되지 않으므로 터미널 창을 껃다가 다시 실행한다.(프론트에서는 nextrk 저절로 업데이트를 해주지만 원래는 안된다고 보자.)

html도 넣을 수 있다.

// app.js

const http = require('http');


const server = http.createServer((req, res) => {
    console.log(req.url, req.method);
    res.write('<h1>Hello node1</h1>')
    res.write('<h2>Hello node2</h2>')
    res.write('<h3>Hello node3</h3>')
    res.write('<h4>Hello node4</h4>')
    res.end('Hello node');
});
server.listen(3065, () => {
    console.log('서버 실행 중');
});

앞전에 프론트에서 작성한 saga쪽을 보면 주소들이 엄청 다양하다.

// sagas 폴더의 post.js파일


// 게시글들 가져다 주고
function loadPostsAPI(data) {
  return axios.get('/api/posts', data);
}


// 게시글들 등록하고
function addPostAPI(data) {
  return axios.post('/api/post', postData, {
    withCredentials: true,
  });
}


// 게시글들 제거하고
function removePostAPI(data) {
  return axios.delete('/api/post', data);
}

// 댓글 등록하고
function addCommentAPI(data) {
  return axios.post(`/api/post/${data.postId}/comment`, data);
}

 

주소처리를 해주자. 기본적인 원리는 createServer라는 곳에서 요청 메소드나 url에 따라서 응답을 해준다고 보면 된다.

프론터 서버나 브라우저가 요청을 보내면 응답을 해주다가(서버의 기본 만약 응답을 안보내면 특정 시간(30초 정도) 후에 브라우저가 자동으로 응답 실패로 처리한다.)

 

여러개의 데이터가 필요하면 한번 요청을 보내서 여러개의 데이터를 묶어서 한번에 응답을 하거나

요청을 여러번 보내서 각각 조금씩 응답을 여러번 하거나(req res는 1:1로 되어야 한다.)

 

node 하면서 응답을 2번 보내지 말자(res.end를 두 번 사용하면 안됨)

이제 기본 노드 http보다 코드를 깔끔하고 구조적으로 짤 수 있는 express를 설치해서 진행해보자.  

const http = require('http');


const server = http.createServer((req, res) => {
    console.log(req.url, req.method);
    if (req.method === 'GET') {
        if (req.url === '/api/posts') {

        }
    }   else if (req.method === 'post') {
        if (req.url === '/api/post') {

        }
    }   else if (req.method === 'DELETE') {
        if (req.url === '/api/post') {
            
        }
    }
    res.write('<h1>Hello node1</h1>')
    res.write('<h2>Hello node2</h2>')
    res.write('<h3>Hello node3</h3>')
    res.write('<h4>Hello node4</h4>')
    res.end('Hello node');
});
server.listen(3065, () => {
    console.log('서버 실행 중');
});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의