개인블로그있는 개발자들이 멋있어서 따라한
리액트로 블로그를 개발하는 개인프로젝트를 진행하고 있다.

DB는 firebase를 사용해서 구현하고 있었는데,
firebase로 구현보다는 직접 백엔드를 구현하는게 더 멋있는 것 같아서,
node.js를 공부하면서 server도 만들어 보려고 한다.

물론 아직 리액트블로그도 완성하려면 많이 남았는데,
일 벌리고 더 기술 늘리는게 재밌고 공부할 맛도 나서 일단 ㄱ

리액트 블로그

• URL: https://jangdu-85756.web.app/
• DB는 firebase로 구현, 배포
• 20230523 미완성

Express + React 연동

리액트랑 서버를 연결하려면, 서버는 사용자가 접속했을 때 리액트로 만들어둔 html파일을 보내주면 된다.

npm build를 이용해서 리액트 프로젝트를 html로 빌드하고

일단 백엔드 프로젝트파일을 블로그 리액트 프로젝트 파일이 들어있는 경로에 만들었다.
아래 사진에서 blog가 리액트 프로젝트임

Express 서버 열기

만들어둔 blog-backend파일에 server.js를 만들고 아래 코드를 작성한다.

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

app.listen(8080, function () {
  console.log("listening on 8080");
});

require()는 모듈 불러오는 법이다.
app.listen 어쩌고로 서버 여는거라고 보면 됨

그리고 server.js있는 경로 터미널에서

> npm init -y
> npm install express

이제 nodemon이나 node 명령어로 server.js파일 실행하면 서버가 포트번호 8080으로 열린다.

이제 사용자가 서버에 접속하면 html을 보내주면 된다.

Express로 html파일 전송

리액트의 경우 spa로 작동해서 yarn build이런거로 빌드하면
기본적으로index.html파일 하나에 리액트 완성본이 들어간다.
즉, 서버에서는 그 html 파일만 보내주면 끝이란거임

이제 server.js에서 보내주는 작업을 해보자

// server.js
...
app.use(express.static(path.join(__dirname, "../blog/build")));

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "../blog/build/index.html"));
});

위 코드를 추가하면 된다.
express.static은 특정한 폴더에 있는 파일을 static파일로 사용자한테 전송 할 때 사용하는데,
위 코드처럼 전송해야만 빌드할 때 생긴 js파일이나 이미지같은게 제대로 작동한다.

이렇게하고 localhost:8080들어가보면 잘 나옴
너무 쉽게 서버로 html파일 보내기 끝이다.

리액트 라우팅 처리

나의 경우 리액트로 이미 만들어둔 프로젝트여서 react-router-dom으로 라우팅을 처리 했는데,
주소창에 localhost:8080/posts를 입력하니 아무것도 안뜬다.

저렇게 주소창에 입력하면, 서버한테 요청을 보내는 것이라서 서버에서도 라우팅 처리를 해주어야한다.
근데 이미 리액트에서 프로젝트 라우팅을 처리한 경우에는
즉, 리액트한테 라우팅 전부 다 맡기려면,

app.get("*", function (req, res) {
  res.sendFile(path.join(__dirname, "../blog/build/index.html"));
});

위 코드를 추가하면 된다.
*는 모든 문자를 의미한다.
사용자가 주소창에 뭘 입력하든 전부 리액트 프로젝트 보낸단 뜻이다.
이제 브라우저에 주소 입력해도 라우팅이 잘 된다.

리액트 연동시 항상 하단에 놓아야한다.

리액트에서 DB데이터 받기

react는 기본적으로 cliend side rendering이라서 html을 브라우저 안에서 만든다.

위에서 처럼 node로 서버를 사용하는 경우에
DB에서 어떤 데이터를 가져와서 보여주고 싶으면,
리액트에서 ajax같은거로 요청을 보내고, 그 요청을 서버에서 받아서 처리해야한다.

예를들면, 리액트가 서버에 /about 주소로 GET요청을 보낼 때
서버에서는 그 요청을 받아 DB데이터를 보내라는 작업을 하면 된다.

server.js에서 ajax받으려면 상단에 아래 코드를 넣어야한다.

cors모듈 설치하고

> npm install cors

...

app.use(express.json());
const cors = require("cors");
app.use(cors());

...

위 코드를 넣으면 리액트와의 ajax요청이 잘 된다.
express.json()은 유저가 보내는 데이터들 잘 보려고 하는 거

그리고 밑에 app.get("/about", function (req, res) { 어쩌고뭐 이렇게 추가하면서 요청들 처리하면 됨