React와 Express 개발 설정하기(concurrently)
웹 개발은 프론트엔드와 백엔드로 나뉘어진다. 아직 학생이지만 웹 개발에 있어서 이제 백엔드는 API만 보내주고 나머지 작업은 프론트 단에서 하는게 작업이 깔끔하게 이루어 진다고 생각한다.
프론트 엔드는 리액트로 백 엔드는 nodejs의 라이브러리인 express를 이용하여 풀스택 개발 기초 설정에 대해 알아보자.
요구사항 : React 기초, NodeJS 기초
작업 폴더를 생성해보자. 이 글에선 ReactExpress라고 하겠다.
폴더에 접근해서 npm init로 package.json 파일을 생성해주자.
$npm i nodemon --save -dev
$npm i -g create-react-app
$npm i concurrently express --save
기초적인 세팅을 위해 필요한 라이브러리는 3개이다.
nodemon, concurrently , creat-react-app
이다 세 가지를 전부 다운받아준다.
nodemon
은 코드 변화에 따라 실시간으로 로컬 서버를 업데이트 해주는 역할을 하기 때문에 NodeJS를 이용한 개발을 할 때 필수적이다.
create-react-app
은 리액트 라이브러리이다.
concurrently
는 리액트 서버와 express 서버를 동시 실행해주는 역할을 하는데 이는 잠시 후에 concurrently의 사용을 직접 보면서 이해하면 편하다.
package.json에 server 커맨드를 추가해준다
{
"name": "reactexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server" : "nodemon server.js"
},
"author": "",
"license": "ISC"
}
커맨드 추가 후 package.json
그 후 작업폴더 안에 server.js라는 파일을 만들어서 다음과 같이 작성하여 express의 기본적인 서버 세팅을 한다.
const express = require('express');
const app = express();
const PORT = 5000;
app.get('/data',(req,res)=>{
const data = {
lastname : "dl",
firstname : "wlrma"
};
res.json(data);
})
app.listen(PORT,()=>{
console.log(`server running on PORT ${PORT}`);
})
터미널에서 server 커맨드를 실행후 http://localhost:5000/data
에 접속하면 json 형식으로 데이터가 전달 되는 것을 볼 수 있다.
이렇게 우리는 간단하게 백 엔드에서 데이터를 보내는 역할을 한 것이다.
이제 백엔드에서 들어온 데이터인 dlwlrma을 프론트 단인 리액트에서 받아서 출력해보자.
리액트를 실행할 터미널을 하나 더 열자. vscode 에디터는 익스텐션으로 터미널을 지원하기 때문에 터미널 추가가 편하다. vscode 사용시 ctrl + ` 키로 터미널을 열수 있고 열린 터미널 우측 상단 + 표시를 누르면 또다른 bash쉘을 열수 있다.
$create-react-app front
또 다른 쉘에서 위와 같은 명령어를 실행해 front라는 이름으로 기본적인 리액트 어플리케이션을 생성한다. 여기서 create-react-app을 찾을 수 없다는 에러가 뜰 수 있는데, 그 경우 creact-react-app 라이브러리를
$npx create-react-app front
이렇게 실행하면 된다. 설치하는데 시간이 조금 걸릴 것이다.
이제 front 폴더 안의 package.json에 proxy를 추가해준다.
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy":"http://localhost:5000"
}
백 엔드 서버가 5000번 포트에서 작동 중이므로 5000으로 적어준다. 이는 이후 리액트에서 백 엔드 데이터를 fetch해 올때 유용하다.
이제 리액트 서버도 실행해보자.
$cd front && $npm start
front 폴더에 있는 터미널에서 npm start로 리액트 서버를 열면 3000번 포트에서 리액트 서버가 실행된다.
이렇게하면 현재 5000번 포트에서 백 엔드, 3000번 포트에서 프론트 엔드가실행 되었다. 이제 5000번 포트의 백 엔드 데이터를 3000번 포트로 불러와보자.
작업을 하며 글을 적고 있었는데 리액트를 오랜만에 들어왔는데 조금 바뀌어있다. create-react-app 라이브러리 실행 안될 때 부터 불안했다. 알고는 있었지만 create-react-app으로 설정되는 기본 리액트 세팅이 함수형 프로그래밍으로 바뀌었다.(class 기반의 리액트을 사용하지 않나 보다.)따라서 아아아아주 간단한 React Hooks를 이용하여 작업을 진행할 것이다.
/front/src 폴더안에 App.js부터 수정하자
import React from 'react';
import Data from './Data';
function App() {
return (
<div>
<Data />
</div>
);
}
export default App;
필요 없는 걸 전부 버린다. src 폴더 내 App.css,logo.svg도 삭제해도 좋다.
이제 src폴더 안에 Data.js라는 파일을 새로 만들어주고 다음과 같이 작성한다.
import React,{ useState } from 'react';
function Data() {
const [data,setData] = useState({});
fetch('/data')
.then(res => res.json())
.then(data => setData(data),()=>{
console.log('data read : ' , data);
})
return (
<div>
{data.lastname} {data.firstname}
</div>
);
}
export default Data;
Hooks의 함수형 프로그래밍을 이용하니 class 기반으로 작성할 때 보다 훨씬 코드가 짧아졌다. state를 this.setState({data}) 이런식으로 갈때 보다 훨씬 간편해졌다. 여기서 Hooks를 설명할 순 없으니
Hook의 개요 - React
Hook 가 React 버전 16.8에 새로 추가되었습니다. Hook를 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. useState 라는 새로운 함수는 우리가…
ko.reactjs.org
이제 localhost:3000에 보면 5000번에서 읽어온 데이터가 잘 출력되어 있을 것이다. 이제 concurrently를 이용하여 두 서버를 한 커맨드로 실행시켜보자.
백 엔드 서버의 package.json으로 이동하여 다음과 같이 concurrently를 추가한다.
{
"name": "reactexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "nodemon server.js",
"front" : "cd front && npm start",
"dev" : "concurrently \"npm run server\" \"npm run front\""
},
"author": "",
"license": "ISC",
"dependencies": {
"concurrently": "^4.1.2",
"express": "^4.17.1",
"mysql": "^2.17.1",
"nodemon": "^1.19.1"
}
}
이제 두 터미널 보두 ctrl + c 로 서버를 닫고 ReactExpress 폴더에서
$npm run dev
명령어로 한번에 두 개의 서버를 실행할 수 있게 되었다.
Author And Source
이 문제에 관하여(React와 Express 개발 설정하기(concurrently)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peppermint100/React와-Express-개발-설정하기concurrently저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)