[1]셋팅

디렉토리 구조

1.server 프로젝트 만들기.

원하는 디렉토리에 cd 명령어로 이동한다.

npm이 설치되어있다는 가정하에, express와 express의 뼈대를 만들어주는 express-generator를 전역으로 설치

express 전역설치, express-generator 전역설치

npm install express -g
npm install express-generator -g

express 명령어 확인하기

express -help

이상 없다면, express server(server라는 프로젝트명) 를 설치해준다

express server

npm install
//이거 꼭 해줘야 한다 아니면 에러가 납니당.

/server/bin/www로 들어가서

port 3001로 바꾼후

npm run start

express 서버 올리기 성공! localhost:3001로 들어가진다

• Nodemon 설치
  Nodemon이란 node.js 서버단에서 수정을 했을때 코드를 반영을 하려면 서버을 껏다가 다시켜야하는 번거로움이 있는데 이를 소스코드의 변화를 감지하여 자동으로 해주는 모듈

npm install nodemon --save-dev

"scripts": {
    "start": "node ./bin/www",
    "nodemong" : "nodemon index.js"
  },
  //package.json

"nodemong" 이라고 안하고 원하는 명령어로 해도됨.
주의) cd명령어로 server폴더에서 npm install 할것

npm run nodemong

서버가 정상적으로 실행되고 node 코드를 수정하면 자동으로 빌드되는걸 알 수 있다.

2. client 프로젝트 만들기.

create-react-app도 전역으로 설치해준다.

npm install -g create-react-app

client 프로젝트 생성.

create-react-app client

리액트앱 실행해보자.

npm run start

server 노드 프로젝트는 3001포트를 가지게 만들었고 리액트앱은 3000포트를 가지게 만들었다.

3. express와 react 연동시키기.

Proxy 설정해주기.

//client/package.json 

"proxy": "http://localhost:3001"

서버에 데스트 데이터 생성.
server/routes/users.js

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.json([
    {id:1, username:"test"},
    {id:2, username:"무야호"},
    {id:3, username:"퇴근"}
  ]);
});
module.exports = router;

서버와 통신을 하기 위한 비동기 라이브러리 설치.

npm install axios

client/src/App.js

import React, { useEffect, useState } from "react";
import axios from "axios";
function App() {
	const [data, setData] = useState([]);
	const getUsers = async () => {
  	const result = await axios.get('/users');
  		setData(result.data);
}
useEffect( () => {
  getUsers();
}, []);
  return (
    <div className="App">
      {data.map(user => (
                <li key = {user.id}>
                  {user.username}
                </li>
            ))}
    </div>
  );
}
export default App;

http://localhost:3000/
접속해보면 성공!