[Project] React + Node.js 프로젝트 개발 환경 세팅

간단한 프론트 개인 프로젝트를 시작하기 전, 초기 프로젝트 세팅에 대해 작성하려 한다.

우선 크게 세 가지를 사용!
서버는 node, 프론트는 React(js), 데이터베이스는 MongdoDB를 사용하려고 한다!
node도 제대로 배워본 적도 없고 기존에 제공해주는 api로 사용하여 데베 없이 진행할 수도 있지만... 만들고 싶은 게 생긴 이상... 열심히 해야되지 않겟슴카...
그럼 GPT + 기타 기술 블로그들을 참고하여 우선 프로젝트 세팅을 해봅시다!
(node는 이미 설치 되어있는 상태입니다)

백엔드 세팅

프로젝트 루트 폴더 생성 후, 그 밑에 backend 폴더를 생성해줍니다
그리고 cd backend로 넘어가서

npm init -y
npm install express mongoose dotenv cors
npm install --save-dev nodemon

실행!
그리고 기본적으로 사용될 server.js와 .env 파일을 생성해주세요~

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

app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

const PORT = process.env.PORT || 3002;
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

이런식으로 간단하게 server.js를 작성해주시고
node server.js를 실행해주시면 (backend 폴더위치에서 실행해주세요!)

요렇게 3002번 포트에 express 서버가 정상적으로 작동되는 걸 볼 수 있습니다!

우선 기초적인 express 서버 가동 완료!

프론트엔드 세팅

React 프로젝트 생성

npx create-react-app frontend
cd frontend
npm install axios react-router-dom

이렇게 생성한 뒤 cd frontend 로 들어가서 npm start 를 하시면!

요렇게 port 3000번에 리액트 서버도 실행됩니다!

서버 동시 실행

백엔드 서버 실행 (nodemon)

cd backend
npx nodemon server.js

http://localhost:3002 에서 실행

프론트엔드 서버 실행

cd frontend
npm start

http://localhost:3000 에서 실행

둘 다 동시에 실행하는 방법은 없을까?!

서버 동시 실행

프로젝트 루트 폴더 밑에 있는 package.json 파일에
(없다면 npm init -y로 생성 )

// package.json
{
  "name": "teenieping-encyclopedia",
  "version": "1.0.0",
  "description": "Teenieping Encyclopedia Project",
  "scripts": {
    "start": "concurrently \"npm run server\" \"npm run client\"",
    "server": "cd backend && npm run dev",
    "client": "cd frontend && npm start"
  },
  "devDependencies": {
    "concurrently": "^7.0.0"
  }
}

npm install --save-dev concurrently 설치!

백엔드 스크립트 설정

{
  "scripts": {
    "dev": "nodemon server.js"
  }
}

프론트엔드 스크립트 설정

npm install --save-dev cross-env 설치 후

"scripts": {
  "start": "cross-env PORT=3000 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

요렇게 하면!!!
npm start 만 하면 node와 react서버가 동시에 실행된다!

---

배포는 vercel이나... 깃헙 페이지 생각 중인데 이건 나중에 좀 더 생각해봐야겠다 백엔드 배포는 알아본 적이 없어서 좀 더 서치 후에 봐야할 거 같고...
데베도 사진이 들어갈 거라 nosql이어야하구... 노드엔 MongoDB를 다들 쓴대서 요걸로... 알아봐야할게 참 많구만 그래도 제로부터 모든 걸 혼자하는 프로젝트를 기획하다 보니 지식이 좀 느는 것 같기는 했다!