✨ web front 데이터 요청 (1)

✨프론트에서 서버의 데이터 요청하기

React

💻 React 웹 프론트에서 express 서버에 데이터 요청하기

Step 1. React 프로젝트 생성

1. window + R, cmd 입력

2. CMD terminal 접속

3. npx create-react-app 프로젝트명(React 프로젝트 생성 시 npx 사용)

4. vscode에서 해당 폴더 열기

* tip) 필요없는 리액트 파일 삭제 <logo.svg, App.css, App.test.js, index.css> 및 해당 import 지워주기

5. 터미널 npm start

Step 2. Express Server 프로젝트 생성

1. 서버 폴더 생성 후 vscode 열기

2. 터미널 npm init (node.js 프로젝트 생성 시 npm init으로 package.json 생성)

3. npm i express (express 설치하기)

* tip) 구글에 npm 검색 -> npm 사이트 들어가기 - express 검색 -> sample코드 복사 붙연넣기

4. 샘플 코드 활용하여 작동 테스트

const express = require('express') //설치된 express 모듈 갸져오기
const app = express() //express 앱 서버 만들기 
// Get 요청 -> 해당 경로 방문 의미
app.get('/', function (req, res) {  //req: 요청, res: 응답
  res.send('Hello World') //응답으로 Hello, World를 보내준다. (/경로의 화면에 출력됨) 
})
// 4000번 port 번호에 서버 열림. ex) localhost:4000
app.listen(4000, () => {
	console.log("Server Start");
})

5. 데이터 출력 서버 코드 작성

app.get('/data/read', (req, res) => {
	res.json(Data); //json 형식으로 응답 받기
});

6. 데이터 삽입 서버 코드 작성

app.post('/data/insert', (req, res) => {
	const {data1, data2} = req.body;
    Data.push({
    	id: id++,
        data1, 
        data2
    });
   	return res.send('success');
})