Written by Parkdev
on January 26, 2024

[React]Node+Express서버와의 연동 해보기

Node.js란?

크롬의 자바스크립트 실행 엔진인 V8을 기반으로 작성된 런타임 환경이다.
- 웹사이트를 구성하는 기본적인 요소인 JS는 오랜 세월 동안 발전해오면서 브라우저의 자바스크립트 실행 엔진이 발전되어왔다.
- 그리고 이러한 엔진의 성능으로 Js로 작성된 코드는 그 어떤 언어보다 웹사이트에서 빠르게 구동된다.
- 때문에 이를 기반으로한 node.js로 백엔드를 구성하면 속도가 빠른 웹사이트 구현이 가능하다.
그중 크롬에서 사용하는 V8엔진을 기반으로 백엔드를 코딩할 수 있게 도와주는 도구가 Node.js이다.

장점

non-blocking I/O (비동기 처리)
- 일반적인 서버는 먼저 온순서대로 요청을 처리한다.
  - 때문에 중간에 시간이 오래걸리는 작업이 들어오면
  - 그 뒤의 요청이 계속 밀린다.
- 하지만 node.js는
  - 요청을 한번에 받은 이후 빨리 처리할 수 있는 요청부터 처리하고, 오래 걸리는 작업을 처리한다
  - 총 시간은 동일하다고 할 수 있지만, 오래 걸리는 처리를 나중에 처리함으로써 오래 걸리는 작업 이후에 들어온 짧은 작업에 대한 처리 속도를 개선 시킬 수 있다.
    - 이는 서비스 개선에 큰 부분을 차지한다
      
      오래 걸리는 작업을 요청한 사람은 일반적으로 작업이 오래 걸릴 것이라는 것을 인지하고 있기 때문에 기다릴 확률이 높지만, 간단한 작업을 요청한 사용자가 본인의 요청이 생각과 다르게 오래 걸린다면, 해당 서비스에 불만을 가질 가능성이 높다.
- 파일 입출력, DB 연결과 입출력 처리 등 시간이 오래 걸리는 작업들은 모두 비동기로 처리된다.

단점

싱글 스레드로 작동되기 때문에 CPU를 많이 사용하는 기능 (이미지 변환, 동영상 압축)이 들어가야 되면 관련 라이브러리가 적어 개발이 어렵다.
- 자바스크립트를 실행하는 스레드는 하나밖에 없기때문이다.

비고

타입 관련 버그들이 많이 발생했었으나 Typescript을 사용하면 이를 방지할 수 있다.
이전과 다르게 콜백 함수도 최소화 되어 코드의 복잡함도 줄어들었다.

초기설정을 해보자

우선 프로젝트를 시작할 폴더를만들고 세팅을 하자

npm init -y

이렇게하면 기본 설정이 담긴 package.json이 생긴다.
서버설정을 쉽게하기 위한 라이브러리 express를 설치하자

npm install express

간단한 서버 로직을 만들어준다

// package.json이 있는 위치에 server.js 파일을 만들고 아래 내용을 입력

// express 라이브러리 사용 설정
const express = require('express')
const app = express()

// 서버 생성 코드
app.listen(8080, () => {
    console.log('http://localhost:8080 에서 서버 실행중');
})

// 서버 기능
app.get('/', (request, respond) => {
    respond.send("Hello world") // 콜백함수
})

이후 실행하면 정상적으로 서버가 작동한다

node server.js

참고

nodemon을 사용하면 값이 변경될때마다 새로고침을 해준다.

npm install -g nodemon
// 설치 이후
nodemon (파일명)
// 이러면 실시간으로 새로고침 해주는 웹사이트를 확인할 수 있다.

추가적인 CSS나 JS파일같이 static파일을 인식시키고 싶으면 다음과 같이 설정해야한다.

// server.js
app.use(express.static(__dirname + '/public'));

// 이후 다른 페이지에서 public폴더 안에있는 스테틱 파일들에 접근이가능하다.
// index.html
<link href="/main.css" rel="stylesheet">

이전에 만든 React 프로젝트를 node.js로 띄워보자

우선 위와 유사한 환경을 만든 이후 build파일을 가져와서 다음과 같이설정하면된다.

const express = require('express'); // express 라이브러리 사용 설정
const app = express(); // express 라이브러리 사용 설정
const path = require('path'); // 루트 path경로를 가져오는 라이브러리

app.use(express.json()); // 유저가 보낸 array/object 데이터를 출력할 수 있는 설정
var cors= require('cors'); // 다른 도메인주소끼리 ajax 요청을 주고 받을때 사용하는 라이브러리
app.use(cors());

//React의 build폴더를 불러오자
app.use(express.static(path.join(__dirname, 'shop/build')));

// 서버 생성 코드
app.listen(8080, () => {
    console.log('listening on 8080');
})

// 참고. 리엑트와 node js의 파일 전송을 원할히 하려면 아래설정을 하는게 좋다.
// 1. express.json
app.use(express.json()); // 유저가 보낸 array/object 데이터를 파싱하여 js객체로 변환해주는 미들웨어

// 2. CORS (Cross-Origin Resource Sharing) 
var cors= require('cors'); 
app.use(cors());// 다른 도메인주소끼리 ajax 요청을 주고 받을때 사용하는 미들웨어
// 나중에 로컬에서 각각 연결해서 개발을 진행할때 유용하다.

//리엑트 라우터를 사용하는 경우
app.get('*', (request, respond)=> {
    respond.sendFile(path.join(__dirname, 'shop/build/index.html'));
})

// 비고: restful api 는 다음과같이 만들면된다.
app.get('/product', function(request, respond) {
    respond.json({name : 'black shoes'}); //해당중에 DB query를 해와 보내주면된다.
})

참고. 동일한 도메인에 다른 html을 보여주고 싶은경우

/react 이렇게 접속하면 리액트로 만든 html
/ 은 public 폴더의 main.html을 보여주고 싶다면

// server.js

app.use( '/', express.static( path.join(__dirname, 'public') ))
app.use( '/react', express.static( path.join(__dirname, 'react-project/build') ))

app.get('/', function(request,respond){
  respond.sendFile( path.join(__dirname, 'public/main.html') )
}) 
app.get('/react', function(request,respond){
  respond.sendFile( path.join(__dirname, 'react-project/build/index.html') )
})

라우팅을 각각 설정해주고

// 리액트프로젝트 내의 package.json
{
  ...
  "homepage": "/react",
  "version": "0.1.0",
  ...
} 

▲ 리액트 프로젝트 내의 package.json에 homepage url을 라우팅과 동일하게 설정해주면된다.

← → Top