[React + Express] Node.js, Express란 무엇인가

안녕하세요?? 이번시간에는 React를 개발할때 프론트와 백엔드를 구축해주는 서버-클라이언트 React+ Express JS에 대해 알아보겠습니다. 이번 시간에는 가장 중요한 서버를 연결하는 부분이기에 좀더 자세히 복잡한것을 좀더 간편하게 알아보도록 하겠습니다.

 

제가 분석한 날짜는 최근 ~ 1년전 까지의 포스트를 분석하며 만들었으며 가장 중요한 라이브러리 이기때문에 업데이트에 맟춰 포스팅 해드리도록 하겠습니다.

 

먼저 Express의 대한 개념부터 살펴보도록 하겠습니다.

 

1.Express 란 ?

  - Express.js 또는 간단한 익스프레스는 Node.js를 위한 웹 프레임워크 중 하나로, MIT허가서로 라이선스되는 자유-오픈 소스 소프트웨어 입니다. 웹 어플리케이션, API 개발을 위해 설계되었습니다. Node.js의 사실상의 표준 서버 프레임워크로 불립니다.

 

 

2.Node.js 가 무엇인가요?

- Node.js 는 서버사이드 자바스크립트로 구글의 자바스크립트 엔진인 V8을 기반으로 구성된 일조의 소프트웨어 시스템입니다.

이벤트 기반으로 개발 가능하며 Non-Blocking I/O를 지원하기 때문에 비동기식 프로그래밍이 가능합니다. 이 때문에 I/O부하가 심한 대규모 서비스를 개발하는데 적합하다고 할 수 있습니다.

 

- 웹어플리케이션을 리액트로 개발할 때에는 주로 Javascript언어를 참조해 개발하는데요 모든 브라우저가 Javascript 코드를 해석하기 위해서는 Javascript Engine을 내장하고 있습니다.  

2021년 8월 30일 검색 기준 현재 Javascript에 한 버전들이 나열되어 있습니다. 현재 Chrome FireFox Safari에서 가장 많이 사용되고 있습니다.

 

Node.js는 Chrome V8엔진을 이용해 브라우저에서 Javascript를 해석하듯이 서버에서 Javascript를 동작하도록 하는 환경(플랫폼) 이라고 생각하시면 이해가 조금 되실 겁니다.

 

말그대로 환경(플랫폼)이라서 Node.js 자체로는 구현하는데 한계가 있습니다. 그래서 주로 React는 웹 Node는 서버 형식으로 개발하게 됩니다.

 

3.Express.js의 개념

• Express.js는 Node.js를 위한 빠르고 간편한 웹 프레임워크 입니다.
• 다양한 웹프레이워크가 존재하지만 현재 가장 많이 사용되는 것이 바로 Express Engine입니다.

  Express.js는 Node.js의 핵심모듈 HTTP 와 Connect 컴포넌트를 기반으로 하는 웹프레임워크로 
그러한 컴포넌트를 미들웨어(middleWare)라고 하며, 설정보다는 관례(convention over configuration)
같은 프레임워크의 철학을 지탱하는 주춧돌에 해당합니다.

쉽게말해서, Node.js 개발시 개발을 빠르고 손쉽게 할 수 있도록 도와주는 역할을 해줍니다. 이것은 미들웨어(middleWare) 구조 때문에 가능한것이고, 자바스크립트코드로 작성된 다양한 기능의 미들웨어는 개발자가 필요한것만 가지고 익스프레스를 결합해 사용할 수 있습니다.

 

참고 사이트

Node.js, Express 개념정리하기

 

2. Express 준비하기

 - Express를 구현하기위해서는 기본적으로 Node.js가 설치되어야 합니다. (설치후 버전 확인 Terminal 에서 node -v)

 

참고 : Node.Js 설치하기

Node.js

   - 설치후 세팅을 위해 package manager는 Yarn을 사용해서 세팅하겠습니다.

 

참고 : Yarn 설치하기

 

Home

3. React + Express 설치

   - 프로젝트 폴더를 생성

  

   - React에서 제공하는 CRA(Create-react-app)을 이용해 클라이언트를 생성합니다.

 

yarn create react-app react-express

프로젝트 폴더 위치에서 명령어 실행

 

- 폴더에 들어가서 yarn start 명령어를 사용해서 프로젝트를 시작해봅니다.

 

yarn add express

프로젝트 Terminal에서 express 라이브러리를 설치해주세요

기본적인 폴더 구조입니다. 이렇게 맟춰 주세요.

 

- Express 를 사용하기 위한 기본구조 & 테스트 파일을 작성합니다.

 

- React 3000번 포트를 사용하기 때문에 다른 포트를 사용하기 위해 5000번 포트를 예로 사용해봅시다.

 

const express = require("express");
const app = express();
const test = require("./Router/test");

app.use("/", test);

const port = 5000; // 노드 서버가 작동할 포트넘버
app.listen(port, () => console.log(`현재 포트 넘버는 ${port} 입니다`));

server.js 파일

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
    res.send("접속 성공");
});

module.exports = router;

test.js 파일

 

- 최상단 (프로젝트) 폴더 위치에서 명령어를 실행해 제대로 실행 되는지 확인해봅시다.

 

node ./server/server.js

현재 포트 넘버가 실행되었습니다. 그럼 브라우저에 가서 직접 확인해보면 

 

http://localhost:5000 으로 접속시 접속 성공이라는 문구가 정상적으로 나타납니다.

 

- 추가로 nodemon과 concurrently를 설치해줍니다.

 

- nodemon :  개발시 변경사항을 실시간으로 업데이트 해주고 --dev 는 개발환경에만 적용하는 모듈이다.

 

yarn add nodemon --dev

- concurrently: 리액트 서버와 노드 서버 동시에 실행 시켜주는 모듈

yarn add concurrently

 - concurrently 모듈 설치후 package.json에서 추가적인 설정을 해줍니다.

 

{
  "scripts": {
    "server": "cd server && nodemon server",
    "client": "cd client && yarn start",
    "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
    "concurrently": "^6.2.1",
    "express": "^4.17.1",
}
"devDependencies": {
    "nodemon": "^2.0.12"
  }
}

client 폴더가 아닌 package.json에 scripts 부분에 추가합니다.

 

- yarn start로 실행시 3000 번 포트로 실행되는 것을 볼수 있습니다.