CRA 가장 쉽고 빠른 서버 세팅

들어가기 전,

Back-End : Express.js

DataBase : MySQL

IDE : Visual Studio Code

Root Folder Name : Rakei(내 마음대로..)

기본적으로 리액트 앱과 서버를 한번에 실행하는 구조

서버 따로 실행, 리액트 앱 따로 실행 -> X, Concurrently Package

1. Rakei 폴더 생성 후 VSC로 폴더를 열어준다.

2. (현재 위치 ~/Rakei/) 초기화 실행

   yarn init
   npm init

3. (현재 위치 ~/Rakei/) package.json이 형성된다.

• server가 쓸 패키지들을 따로 관리하는 곳

4. (현재 위치 ~/Rakei/) server folder 생성, 터미널 입력

   npx create-react-app client(이름은 마음대로)

5. (현재 위치 ~/Rakei/) 터미널 입력

• 기본적인 서버용 패키지를 한번에 다운 받는 편이다..

  yarn add express mysql mysql2 concurrently nodemon cors body-parser sequelize sequelize-cli

6. (현재 위치 ~/Rakei/package.json) script 설정

   "scripts": {
   "test" : "echo \"Error: no test specified\" && exit 1",
   "server" : "cd server &I & nodemon server",
   "client" : "cd client && yarn start",
   "start" : "concurrently --kill-others-on-fail \"yarn start\" \"yarn client\""
   },

7. (현재 위치 ~/Rakei/server/) 시퀄라이즈 초기화

sequelize init

8. (현재 위치 ~/Rakei/server/config/config.json) 필수 DB접속 계정 설정

{
  "development": { // 기본적으로 개발만 설정하면 된다. 배포와 테스트까지 할것이라면 아래에도 설정 필수
    "username": "root",
    "password": "1234", // 접속 비밀번호를 입력
    "database": "mydb", // 나의 데이터 베이스 설정
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

9. (현재 위치 ~/Rakei/server/server.js) 기본적인 서버 소스 코드

const express = require('express'); // 가장 중요
const cors = require('cors'); // Cross Origin Resource Sharing 문제 방지
const model = require('./models/index.js'); // 시퀄라이즈 모델 (추후 설정)
const app = express();
const PORT = 5000; // 포트를 5000 - 마음대로임..


const bodyParser = require('body-parser'); //  파라미터 추출용

app.use(express.json()); // json 파일로 redux 상태 관리 시


app.use(cors({ // 서버는 http://localhost:3000에서 오는  GET,POST 요청을 신뢰한다는 cors 설정
    origin : 'http://localhost:3000',
    methods : ["POST","GET"],
    credentials : true,
}));

app.get('/',(req,res)=>{ // 기본 home 출력 메세지
    res.send('Hello Express');
})
// DB 연결은 비동기, MySQL과 연결 된다.
model.sequelize.sync() 
.then(()=>{
    console.log('DB연결 성공');
})
.catch((err)=>{
    console.log('DB 연결 실패');
    console.log(err);
})


app.listen(PORT,()=>{
    console.log(`서버에 접속했습니다. 포트는 ${PORT}`);
})

10. (현재 위치 ~/Rakei/) 실행해보기

    yarn start

이제 서버와 함께 실행되는 리액트 앱의 기본이 완성되었다.