React - Mysql 연동

 

 

※환경

 - CentOS7

 

※설치

 

**1번~7번 아래 블로그 참고

verdana1012.tistory.com/entry/React-CentOS7-React-create-react-app-yarn-Node-js-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95#

[React] CentOS7 / React + create-react-app + yarn + Node js 환경 구축

 1. curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -

 

 2. sudo yum install nodejs

#확인
 $> node --version
 $> npm --version

 3. sudo npm install yarn -g

#확인
yarn --version

 4. 설치할 폴더로 이동

  cd /data/ncnmsLogWeb

 5. yarn global add create-react-app
 6. create-react-app ncnmslogweb-app

 

Success! Created ncnmslogweb-app at /data/ncnmsLogWeb/ncnmslogweb-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd ncnmslogweb-app
  yarn start

 

 

**8번~10번부터 아래 블로그 참고

m.blog.naver.com/PostView.nhn?blogId=choseyoung45&logNo=221535788764&proxyReferer=https:%2F%2Fwww.google.com%2F

 

 7. yarn eject

 

 8. yarn add express

 

 9. Webpack, package.json 추가

devServer: {
  port: '4000',
  open: true,
  proxy: {
    "/": "http://localhost"
  }
},

문제는 개발 환경에서는 도메인은 localhost로 같지만 포트번호가 다르다는 점. 리액트는 4000번 포트, 노드는 3000번 포트를 사용한다.

다행이도 webpack-dev-server 옵션에는 proxy 설정이 있다. 비슷하게 create-react-app도 proxy 설정을 할 수 있는데 패키지 파일에 추가하면 된다

이제 개발환경에서 클라이언트가 요청한 모든 api 요청은 자신의 3000번 포트가 아니라, 프록시로 설정한 4000 포트로 전달된다. 따라서 GET /users 를 클라이언트에서 요청하더라도 개발환경에서는 GET http://localhost:3000/users로 요청해 주는 것이다.

 

10. package.json 마지막줄 추가

"proxy" : "http://localhost:4000"

11. yarn add mysql

12. 소스 수정!

 - router.js

 - server.js

 - App.js

 - dbconnction.js

 

13. 알아서 로딩해라

 - yarn add morgan nodemon concurrently --dev 

 

14. scipts 수정

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "server": "nodemon server/server.js",
    "dev": "concurrently \"yarn server\" \"yarn start\"",
    "test": "node scripts/test.js --env=jsdom"
  },