[앱삼] 2. MERN 풀스택 환경 기본 세팅 - 1

<세팅목록>

1. 디렉토리/파일목록 세팅

2. Git 세팅

3. 라이브러리 세팅

4. node서버와 react 연결, 프록시 개발환경 설정 // 오늘 여기까지

5. 디렉토리에 따른 코드스플리팅과 라우터설계

6. DB세팅

7. 로그세팅

... 

1. 디렉토리 세팅

개인마다, 회사마다 달라질 수 있다 당연히

- controllers : 컨트롤러api들

- logs : log 저장공간

- middleware : 미들웨어들

- models : 몽구스 스키마 정의 공간

- public : html css js 빌드결과물

- routes : 서버에서 담당하는 router management

- app.js : req 받는 곳

- server.js : server 실행

- .env : 환경변수 설정 파일

- db.js : database 연결용

프론트엔드디렉토리

- 그런게 어딨냐 pages component css 이런거만 있을듯

- controllers, apis, DAO, 뭐 여러가지 쓰는 곳도 있더라. 비즈니스모델에 따라 많이 다른 듯 하다.

 

리액트 빌드할 폴더 바꾸는 방법

frontend폴더의 package.json에서 "scripts" 내의 "build" 변경

"build": "BUILD_PATH='../backend/public' react-scripts build",

2. Git 세팅

- backend/frontend 있는 상위 폴더에서

- git clone [레포지토리경로.git]

- 레포지토리이름폴더에 다 넣고

- git add . -> git commit -m '메시지' -> git push

3. Lib 세팅

- backend : 

일단은 이렇게 쓸거다

body-parser : json 자동파서

cors : cors 해결

date-fns : 날짜 관련 라이브러리 (log에서 주로 사용)

dotenv : 설명 필요함?

express : 나니 ?

mongodb : 뉴진스의 하입보이요

nodemon : 뉴진스의 디토요

uuid : UUID는 Universally Unique IDentifier의 약자로, 전세계에 하나밖에 없는 ID라는 뜻이다. 이런걸 생성해줌. logger에 사용

 

- frontend : 

workbox는 구글에서 만들어준 pwa 뭐시기 그런거다.

- redux/toolkit : 아직도 리덕스를 쓴다고 ? 

- axios : 아

- http-proxy-middleware : react -> node 요청 시 proxy설정해준다.

- 애니메이션 엔진 하나 있으면 퍼블리싱에 좋을 것 같다. 

4. Express 서버와 DB연결하고 React 연결해서 개발환경 구축하기

server.js

//basic code
const express = require('express');
const app = express();
const path = require('path');

// body-parser setting (json 자동파싱)
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended : true}));
app.use(bodyParser.json());

//environment variables setting (환경변수파일 가져오기)
require('dotenv').config(); 
const ENV = process.env;

// cors setting (cors 허용옵션)
const cors = require('cors'); 
let corsOption = {
    origin: `http://localhost:${ENV.PORT}`, // 허용 주소(3000), 3000은 react개발환경주소
    credentials: true  // true시 설정 내용을 응답헤더에 추가해 줌
}
app.use(cors(corsOption)); // CORS 미들웨어 추가

app.use(express.static(path.join(__dirname, './public'))) // static path 미들웨어 

app.get('/api/test', (req, res)=>{ //연결 테스트용 api
    res.send('get요청 성공!')
})

//main Page
app.get('/', (req, res)=>{
    res.sendFile(path.join(__dirname, './public/index.html'))
})

//server open
app.listen(ENV.PORT, (req,res)=>{
    console.log('u r listening to ' + ENV.PORT)
})

// 404는 react가 router를 담당
app.get('*', (req, res)=>{
    res.sendFile(path.join(__dirname, './public/index.html'))
})

서버에 기본 세팅 해주고,

 

backend/.env

PORT = 4000 //난 서버는 4000포트에 열거다
DB_URL = '몽고DB주소'

 

frontend/.env

PORT = 3000 //frontend 개발서버는 3000에 열거다

환경변수 세팅해주고,

 

 

http-proxy-middleware 사용

-frontend/ 터미널에서

npm install http-proxy-middleware

 

그리고 frontend/setupProxy.js 파일 만들어서

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api', //이건 프록시를 사용할 주소
        createProxyMiddleware({
            target: 'http://localhost:4000', //서버의 주소!
            changeOrigin: true,
        })
    );
};

복붙해주면 proxy설정 끗.

 

 

frontend/src/App.js

import axios from 'axios';
import './App.css';

function App() {

  const testAPI = ()=>{ //연결 테스트
    axios.get('/api/test')
    .then((res)=>{
      console.log(res.data)
    })
    .catch((e)=>{
      console.log(e)
    })
  }

  return (
    <div className="main">
      Hello World !
      <button onClick={testAPI}> //버튼 클릭했을 때 콘솔에 데이터 나오면됨
    where is my button
      </button>
    </div>
  );
}

export default App;

프론트에서 테스트 해보자

 

3000번 포트에서 react 실행했을 때

잘뜨네!

잘뜨는구만.

 

그렇다면 빌드했을 때도 잘 뜨려나

 

- 빌드해보기

좌터미널은 서버, 중터미널은 프론트, 우터미널은 git이다

- 터미널 여러개 키는거는 ctrl+` 로 터미널 연다음에 command + \ 하면 분할이 된당.

- /frontend 로 들어가서

npm run build

하면 backend/public에 빌드된다.

 

4000 번 접속

4000번포트로 접속하면 빌드된 public/index.html을 서버에서 보내준다.

버튼을 눌러보면?

된다

연결 완료!

매우 간단하다.