react와 express 서버연동 익히기 1편 -express 서버 구축-

1. 프로젝트 시작

 

$npx create-react-app my-app으로 리액트 프로젝트 생성

 

npm start로 프로젝트 시작해서 확인해보기

 

 

2. server.js 생성

 

front와 back을 구분하고, back 부분에 server.js 파일을 생성

 

 

 

3. express 모듈 설치

 

npm install express

 

그리고 sever.js에 express 모듈을 불러오고, app이라는 변수에 express를 담는다.

 

//backend/server.js

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

 

 

4. 포트 할당

 

포트는 해당 서버가 가지고 있는, 접속할 수 있게 해주는 주소

 

반드시 해당 서버에 적용된 포트로 접근해야만 올바르게 접속 가능

 

0~65535사이 임의의 정수만 가능하다

 

프로젝트와 동일하게 3001번에 할당

 

// backend/server.js

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3001;

 

 

5. 서버의 응답

 

서버에 접속했을때, 응답을 출력하고 싶다면 app.get()을 이용하면 가능

 

// backend/server.js

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3001;

app.get('/', (req,res) => {
    res.send('환영합니다 고객님')
})

 

'/'은 경로를 나타내고, 해당 경로로 접속하면 res.send()에 의한 응답을 렌더링해준다

 

 

6. 서버 실행

 

app.listen()과 PORT를 이용해 가능하다

 

// backend/server.js

const express = require('express')
const app = express()
const PORT = process.env.PORT || 3001;

app.get('/', (req,res) => {
    res.send('환영합니다 고객님')
}

app.listen(PORT, () => {
    console.log(`Server On : http://localhost:${PORT}/`)
})

 

그리고 server.js가 있는 경로에서, npm start를 수행하면..

 

 

그리고 해당 경로로 접속해보면...

 

참조

 

React로 블로그 만들기 01 : React 서버 구축하기 : 네이버 블로그 (naver.com)

React로 블로그 만들기 01 : React 서버 구축하기