[React] 리액트 블로그 - 시작 & 서버 연동

[ 서버 생성 ]

 

 서버 폴더를 에디터를 사용하여 열어줍니다. 저는 서브 폴더명을 blog-server로 했습니다. 

 

 다음 명령어를 사용하여 서버 구축에 필요한 패키지와 파일을 생성합니다. 

 

$ npm init -y
$ npm i express
$ npm i cors

 

 blog-server 폴더 내부에 server.js 파일을 생성하여 다음과 같이 입력합니다. 

 

// blog-server/server.js

const express = require('express');
const path = require('path');
const app = express();
const cors = require('cors');
const PORT = 8080;   // 서버의 포트번호 -> http://localhost:8080

// 서버단에서 리액트와 nodejs 간 ajax 요청이 잘 되려면 cors 설치해야함
// cors는 다른 도메인 주소끼리 ajax 요청 주고받을 때 필요
app.use(cors());

// localhost:8080 에 { "host": "ahyoung" } 보내기
app.get('/', (req, res) => {
  res.send({ host: 'ahyoung' });
});

// 웹 서버 만들기 
app.listen(PORT, function(){
  console.log(`listening on ${PORT}`);
})

 

 서버를 실행하고 싶다면 다음 명령어를 입력합니다. 

 

$ node server.js

 

 

 

 

[ 리액트 앱 생성 ]

 

 blog-server 위치에서 다음 명령어를 입력하여 리액트 앱을 생성합니다. 

 

$ npx create-react-app myblog

 

 

 myblog 디렉토리로 이동하여(저는 에디터를 따로 열었습니다) axios를 설치합니다.(fetch와 동일 기능)

 

$ cd myblog
$ npm i axios

 

 

 

 

[ 테스트 ]

 

 리액트 앱의 App.js를 다음과 같이 수정합니다. 

 

// myblog/src/App.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const server = 'http://localhost:8080';

const App = () => {
  const [host, setHost] = useState('');

  const sendRequest = async() => {
    const response = await axios.get(server);
    console.log(response);
    console.log(response.data);
    setHost(response.data.host);
  }

  useEffect(()=>{
    sendRequest();
  }, []);

  return (
    <div>
      <h1>서버 연결, host: {host}</h1>
    </div>
  );
};

export default App;

 

 

 blog-server 폴더로 돌아와 서버를 구동합니다. 

 

// blog-server
$ node server.js

 

 

 myblog 폴더로 돌아와 리액트 앱을 실행합니다. 

 

// blog-server/myblog
$ npm run start