리액트 실무 - Nopde.js, Express 수업 내용

23.04.11 수업내용

 

안녕하세요 jju_developer입니다.

 

오류사항을 해결하고 나서 node.js express 프레임워크 설치하였습니다.

 

기본적으로 NodeJS를 먼저 알아보겠습니다.

 

Node.js란?

Node.js는 Chrome의 V8엔진을 이용하여 javascript로 브라우저가 아니라 서버를 구축하고,

서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)입니다.

 

그렇다면 Express란 무엇일까요?

 

Express란?

Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 

유연한 Node.js 웹 애플리케이션 프레임워크입니다.

사실상 Nodejs의 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있습니다.

 

Express는 Nodejs의 원칙과 방법을 이용하여 웹애플리케이션을 만들기 위한 프레임워크입니다.

 

Express는 프레임워크이므로 웹 애플리케이션을 만들기 위한 각종 라이브러리와 미들웨어 등이 내장돼 있어 개발하기 편하며, 코드 및 구조의 통일성을 향상할 수 있기 때문에 사용을 합니다.

이렇게 사용을 하기 위해서 프레임워크 도입을 하는 것이죠!

가장 많은 곳에서 보편적으로 사용되기 때문에 Express를 도입하면 구글링을 통해 충분한 레퍼런스들을 검색하여 정보를 얻을 수 있습니다.

 

 

예제 108번

예제 108번은 노드 js를 실행하는 것입니다.

express 프로젝트를 생성하면 기본적인 웹 프레임워크 디렉터리 구조가 생성되며,

React 프로젝트 구조와 마찬가지로 node 경로에는 package.json 파일이 존재하고,

서버 구동에 필요한 패키지들이 작성돼 있습니다.

작성돼 있는 패키지를 설치하면 서버를 구성할 수 있다.

 

포트는 3000에서 5000번으로 변경하였습니다.

※지금은 리액트가 아니라 노드 js 프로젝트입니다!!!!

 

이전에 리액트는 기본적으로

리액트 예제

기본적으로 server-> bin-> www에 ../apps로 되어있고, 포트는 3000번인데.

 

108번 예제는

노드js예제

app에 서버로 되어있고 포트는 5000번으로 되어있습니다.

node 경로(D:\dev\workspace\react\lab\server)의 app.js 파일은 react에서 App.js 파일과 동일한 라우팅 기능을 담당합니다.

user

user는 라우터의 유저로 되어있습니다.

http get 방식으로 request 호출을 받으면 res.send 함수가 텍스트 데이터를 response로 전송합니다.

 

그래서 화면에 아래와 같이 보였던 것입니다.

코트는 아래 참고

#!/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);
}

 

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });

});

module.exports = router;

 

 

그다음 수업 내용은 109번 예제를 보았으며, yarm install, yarn start를 하고

109번은 리액트를 띄운 것이고 3000번 포트를 사용하였습니다.

---

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

 

프록시란 클라이언트가 다른 서버에 간접적으로 접속할 수 있도록 중계해 주는 프로그램입니다.

 

예를 들면, 웹 브라우저에 react 서버(localhost:3000)을 띄우고 react 페이지에서 node api를 호출해 데이터를 표시할 수 있습니다.

이때 프록시를 설정하면 node 서버 url을 localhost:5000/user가 아닌 /users (localhost:3000/users) 간략하게 사용할 수 있습니다. 

 

프록시를 보통 보안이나 캐시 목적으로 사용하는데

예제에서는 node 서버 호출 url을 간략히 사용하기 위한 용도로 사용하였습니다.

 

 

cmd는 클라이언트를 띄우는 것이고

node는 

 

App.js에서 import reactProxy인데 이름이 R109_reactProxy.js인 곳을 import 하고 있고,

5000번

package.json에 proxy가 정의되어있습니다.

여기서 users에서 받은 것을 패치로 text로 바디에 넣고 나서 

 

3000번 포트

/reactProxy 라고 요청을 하면

1. index.js에서 </App>를 부르고

2. App.js에서 /reactProxy 라고 치면

요 컴포넌트가 실행이 되어서

 

이렇게 Proxy Call Node Ap가 나오게 되는 것입니다.

 

App.js에는 / 이거랑 /reactProxy 둘만 있으니까 만약 /users를 요청하려면

그 외의 것을 요청을 하면

 

이렇게 http 다 쓰면 보안상의 문제 때문에 원래는 다 막아놓습니다.

그래서 이렇게 요청을 안 하고 프록시를 통해서

실제로 내 브라우저에 있는 것처럼 요청을 하는 것입니다.

클라이언트 밑에 package.js

여기서 5000번의 users를 받아서 실행한 것입니다.

이거는 Node.js서버

노드는 밖에 있는

라우터 폴터를 봐야 합니다.

users.js

var express = require('express');

var router = express.Router();

/* GET users listing. */

router.get('/', function(req, res, next) {

  res.send('respond with a resource');

});

module.exports = router;

 

server.js

서버 js를 보면 users 아래와 같습니다.

var express = require('express');

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

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

var app = express();

app.use('/', indexRouter);

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

module.exports = app;

---

무슨 소리인지 잘 모르시겠죠...?

 

네 맞습니다. 

 

학원 수업이 정말 빨리 지나가서

최대한 맥쌤 수업내용을 빠르게 적어봤는데...

저 조차도 이해가 잘 안 가서 적어봤는데...

 

 

 

다음에 다시 정리해서 오겠습니다... 흑흑

 

 

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

ㅎㅎ....프록시를 통해서 요청하면 내가 요청한것처럼 가능!!!

 

 

오늘도 수고하셨습니다!