Node.js

Node.js express 서버 만들기

개갑순이돌이짱 2021. 11. 1. 21:24

 

express란?

express를 정의하자면 웹 프레임워크이다.

웹을 빠르게 개발할 수 있는 편리한 도구들의 집합체이다.

웹을 모르는 사람들도 관련된 정보를 기반으로 쉽게 개발 할 수 있다.

express-generator

express의 application skeleton이다.

무슨 말이냐? 뼈대라고 한다.

express를 편리한 도구들의 집합이라고한다면 

express generator는 말 그대로 express로 생성한 간단한 뼈대 이다.

뼈대를 구축했기 때문에 움직일 수 있지만 뼈대만 있다.

하지만 뼈대를 구축해주었기 때문에 살만 붙이면 되는 장점이 존재

express-generator

 

 

nodefolder 폴더 생성

 

nodefolder 안에 있는 폴더와 파일들을

상위 폴더로 옮겨주고 nodefolder를 삭제

 

nodefolder에 있는 내용을 옮긴 폴더 위치에서

 

명령어를 실행해 package.json에 작성된 패키지를 설치

node_modules 폴더 생성되어 있는지 확인

 

node 경로에서 

명령어 실행하여

서버 구동

 

client안에는 react 프로젝트 생성

 

server.js

var express = require('express');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();


app.use('/', indexRouter);
app.use('/users', usersRouter);

const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listenning on port ${port}`));

 

라우팅이란?

네트워크 주소에 따라 목적지 경로를 체계적으로 결정하는 경로 선택 과정

 

rotues/users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.post('/', function(req, res, next) {
  res.send({'message':'respond with a resource'});
});

module.exports = router;

 

bim/www.js

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../server');
var debug = require('debug')('nodefolder:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '5000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

 

react와 node 서버를 프록시로 연결

 

proxy란?

영어로는 대리인

중개 서버를 의미한다.

CORS 이슈를 방지할 수 있다.

 

CORS(Cross-Origin Resource Sharing) 이슈란?

CORS(Cross-Origin Resource Sharing)는  클라이언트와 서버의 포트가

다른 상태에서 클라이언트 측에서 서버 측으로 무언가를 요청 했을 때 브라우저가

보안상의 이유로 요청을 차단하는 문제

 

프록시를 사용하는 이유

1. 회사의 직원들이나 집 안의 아이들이 특정한 사이트를 들어갈수 없도록 방지

2. 캐쉬를 이용해 더 빠른 인터넷 이용제공

프록시 서버는 서버 측의 정적 이미지 등을 저장시켜놓을 수 있기 때문에

굳이 서버까지 않아도 프록시 서버를 통해 더욱 빠르게 이미지에 접근

 

3. 더 나은 보안을 제공

IP를 바꿔서 보내줄 수 있기 때문

 

client /package.json

{
"development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://127.0.0.1:5000"
}

 

node 서버를 api를 post로 json 데이터 호출 하기

node 경로 routes/users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.post('/', function(req, res, next) {
  res.send({'message':'respond with a resource'});
});

module.exports = router;

 

 

components/R111_ApiPostJson.js

import React,{Component} from 'react';

class R110_ApiPostJson extends Component {
    compoenentDidMount = async () => {
        const response = await fetch('/users');
        const body = await response.json();
        console.log("body.message :" + body.message);
        
    }
    render() {
        return (
            <div>
                <h1>call</h1>
            </div>
        );
    }
}

export default R110_ApiPostJson;

 

 

get은 url에 쿼리(데이터가 남는다) 해당 데이터를 가져온다 보안 취약한다.

post는 남지 않는다 해당 정보를 서버에 보내서 확인한다

 

concurrently는 여러 개의 명령어를 동시에 실행할 수 있게 해주는 패키지

서버 경로로 이동 후 

concurrently 설치

 

nodemon 설치

 

 

 

 

node의 package.json

{
  "name": "nodefolder",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev"  : "concurrently --kill-others-on-fail \" yarn server\" \"yarn client\""
  },
  "dependencies": {
    "concurrently": "^6.3.0",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.14"
  }
}

 

node 경로의 sever.js 파일을 수정

 

var express = require('express');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();


app.use('/', indexRouter);
app.use('/users', usersRouter);

const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listenning on port ${port}`));

 

 

저작자표시