React + Express 따라해보기

Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Judaeng

React + Express 따라해보기 본문

Project

React + Express 따라해보기

Judaeng 2021. 9. 27. 20:00

오늘은 프로젝트를 간단하게 만들어 보겠습니다.

클라이언트, 서버 따로 나누지 않고 view엔 프론트, 나머지는 서버 구축 이런 식으로 만들어 볼 예정입니다.

1. react app 을 하나 생성합니다. 이름은 원하는 이름으로 지어주세요.

mac 기준 iTerm 쉘을 시작하여 원하는 경로에 아래 코드를 작성해주세요.

npx create-react-app [원하는 이름]
# 설치가 완료되었다면

# 폴더로 이동합니다.
cd [원하는 이름]

# npm 프로젝트 설정
npm init
# 기본설정으로 계속 Enter

# 일단 실행하여 리액트 홈페이지가 잘 나오는지 확인합니다.
npm start

그럼 React 기본 웹페이지가 뜨게 됩니다.

위 페이지가 나왔다면 express도 설치해줍니다.

npm install express

서버에서 json 형식으로 데이터를 주고받을 것이기 때문에 body-parser를 설치해주겠습니다.

npm install body-parser

위에 코드를 사용하여 설치하는 것도 좋지만 express 서버단에 넣어도 됩니다.

express.js 빌트인 body parser를 넣었다고 하니까요 (Express v4.16.0 기준)(출처: Express Docs)

const express = require('express')
const app = express();
app.use(express.json())
app.get('/', (req, res) => {
  console.log('Judeang Hello')
})

Express를 사용할 때, body-parser를 따로 임포트 하지 않아도 되는 것은 기억해두면 좋을 것 같습니다.

VSC를 열어서 React 코드를 수정해줍니다.

src 아래에 App.js를 수정해줍니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username:null
        };
    }

  render() {
    const {username} = this.state;
    return (
        <div className="App">
          <header className="App-header">
            {username ? `Hello ${username}` : 'Hello World'}
          </header>
        </div>
    );
    ;
  }
}

export default App;

이러면 페이지에 Hello World가 표시됩니다.

저 username을 서버단에서 받아오도록 해보겠습니다.

root에서 servers라는 폴더를 만들고 servers.js 파일을 생성합니다. (express 서버 작성)

서버 코드 작성

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());
app.use('/api', (req, res)=> res.json({username:'bryan'}));

app.listen(port, ()=>{
    console.log('express is running on 3000');
})

이렇게 작성하고 프로젝트 root에서 express만 실행해봅니다.

터미널 로그에 'express is running on 3000'을 확인하고, 웹페이지에서 확인합니다.

http://localhost:3000/api 들어갑니다.

{"username":"bryan"}라고만 나오면 성공한 것입니다!

그럼 client 쪽에서 이 데이터를 받아야겠죠?

App.js 에서 commponentDidMount() 메서드를 추가합니다.

    componentDidMount() {
        fetch('http://localhost:3000/api')
            .then(res=>res.json())
            .then(data=>this.setState({username:data.username}));
    }
    
    render(){
    	// ...
    }

서버를 다시 정지해주시고 다시 npm start를 해주세요.

저는 오류가 안 났는데 다른 분들은 cors 관련 오류가 나온다고 합니다. (Access-Control-Allow-Origin)

"다른 곳에서 요청이 왔기 때문에 허용할 수 없다"라는 오류인데요. 서버 쪽에서 막아둔 것입니다.

이건 서버가 어디까지 api를 제공할 것인가에 따라 보안으로 막을 수도 있고 열 수도 있습니다.

일단 cors를 허용하는 방법을 적용해보겠습니다.

server.js에서 cors를 사용할 것이기 때문에 cors를 설치해줍니다.

npm i cors

그리고 server.js 서버단을 수정해줍니다.

const express = require('express');
const app = express();
const cors = require('cors');
const port = 3000;

app.use(cors());

app.use(express.json());
app.use('/api', (req, res)=> res.json({username:'bryan'}));

app.listen(port, ()=>{
    console.log('express is running on 3000');
})

서버를 재시작해주세요. (node./servers/server.js)

React 페이지를 새로고침 해주면 원하던 결과가 나왔을 것입니다.