[🍏 MongoDB] 리액트 서버와 몽고디비 연동!

준비물 : 서버 폴더, 리액트로 작성한 클라이언트 폴더

서버 폴더 안에 클라이언트 폴더를 담아 둔 상태로 작업을 시작했다.

준비!

서버를 사용하기 위해서 다음과 같이 명령어를 작성해준다.

npm install
npm install express
npm init -y

아래가 서버 기본 구조이다.

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080,function(){
  console.log('서버 오픈 완료!')
})

---

서버와 리액트 파일 연결 하기

'/' 경로로 접속시 서버에 내가 원하는 리액트 파일을 보여주기 위해서는 다음과 같이 작성한다.

이때 리액트 파일을 사용하기 위해서는 build 를 먼저 해주어야 한다.
build시 생성된 html 파일을 응답으로 보내줄 것이기 때문이다.

npm run build

빌드를 마쳤으면 build 내부에 여러개의 파일들이 생성된다.
그리고 server.js 파일을 다음과 같이 작성해보자.
이때 알맞는 파일 경로를 제대로 입력해주어야 한다.

그리고 위에 따로 app.use로 부가 코드를 적었는데, 이게 있어야 특정 폴더의 파일들을 함께 전송이 가능하다고 한다.

server.js

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080,function(){
  console.log('서버 오픈 완료!')
})

// 이게 있어야 특정 폴더의 파일들 전송가능 
app.use(express.static(path.join(__dirname,'my-todo-client/build')))


// '/'경로로 접속시에 저 파일을 보내주자! 
app.get('/',(res,req)=>{
  req.sendFile(path.join(__dirname,'my-todo-client/build/index.html'));
})

이제 nodemon server.js를 실행하면 내가 작성한 리액트 코드가 정상적으로 출력되는 것을 확인할 수 있다.

---

이때쯤 궁금한점

여러 페이지를 만들고 싶은 경우?

서버에서 /detail 로 접속하면 디테일 페이지로 요청한다.
반면 리액트에서 라우터로 경로를 분기한 경우에는 /detail과 같이 명령을 주어도 동작하지 않는다.

왜냐하면 /detail 이는 서버에서 해당 페이지를 요청하는 것이기 때문이다.

-> 리액트 라우터가 처리하게 하고 싶으면 맨 아래에 다음과 같은 코드를 추가해주자.

app.get('*',(res,req)=>{
  req.sendFile(path.join(__dirname,'my-todo-client/build/index.html'))
})

---

DB 데이터를 리액트에서 보여주고 싶으면?

html의 경우에는 (server-side Rendering)

db에서 데이터를 받아 -> 서버가 html 파일에 넣고 -> html 파일을 유저에게 보내는 방식이었다.

반면 리액트에서는 (client-side Rendering)

db에서 데이터를 받아 -> 서버가 데이터 파일을 그대로 -> 프론트엔드로 보내는 방식이다.
받은 데이터로 리액트가 html 파일을 생성!
(왜? 리액트는 html 파일을 생성해주는 라이브러리니까!)

그래서 DB에 있는 상품목록을 가져와서 리액트에서 보여주고 싶으면 이런 식으로 코드를 짠다.

1. 서버는 누군가 /product로 GET요청을 하면 DB에서 데이터 꺼내서 보내주라고 API를 짜놓습니다.

2. 리액트는 상품목록을 보여주고 싶을 때 서버 /product 주소로 GET요청 날리면 됩니다.

3. 그럼 데이터 받아오겠죠? 그걸 가지고 html에 집어넣든 맘대로 개발하면 됩니다.

리액트는 서버와의 통신을 거의 ajax로 진행합니다.
POST요청, 로그인해서 세션만들기 이런것도 ajax로 실행하면 된다.

예를 들어 DB에 들어있는 상품명을 보여주기 위해서는 다음과 같이 작성한다.

app.get('/detail',(res,req)=>{
  req.json({name:'supark'})
})

위와 같이 서버와 통신하기 위해서는 cors 설정을 해두어야 통신이 잘된다. 터미널에 cors 설치후

npm install cors

서버 app.listen 밑에 아래 코드를 추가해준다.

app.use(express.json());
var cors = require('cors');
app.use(cors());

server.js 전체 코드

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080,function(){
  console.log('서버 오픈 완료!')
})

//ajax 실행 잘되게 하기 위해서 
app.use(express.json());
var cors = require('cors');
app.use(cors());

// 이게 있어야 특정 폴더의 파일들 전송가능 
app.use(express.static(path.join(__dirname,'my-todo-client/build')))

//서버의 입장에서. '/'이 요청을 받으면. -> 응답으로 저거 보내주고 
app.get('/',(res,req)=>{
  req.sendFile(path.join(__dirname,'my-todo-client/build/index.html'));
  console.log(req.json({name:'me'})) // -> 서버의 응답으로 저걸 보내줌 
})

---