Express와 CRA를 활용하여 서버 통신 연습하기

출처: https://www.youtube.com/watch?v=d6suykcsNeY&t=1s

---

개요

프론트/백 서버 통신 연습을 위하여,
Express와 CRA를 활용한 TodoList만들기

모듈을 설치, 사용할 때,
https://www.npmjs.com/에서 설치, 사용 방법을 확인할 수 있다

---

Server - Express

설치
1. npm init // npm 설치
2. npm install express // express 설치
3. npm install cors // cors 모듈 설치

express 초기 세팅 코드
//app.js

const express = require('express')
const app = express()
const cors = require('cors') // cors 모듈 호출

app.use(express.json()) // body-parser 
app.use(express.urlencoded({extended: true})) // body-parser
// extended: true의 경우, 객체 형태로 전달된 데이터 내에서 또 다른 중첩된 객체를 허용
// extended: false의 경우, 중첩된 객체를 허용하지 않음

app.use(cors()) // cors 모듈 적용

app.get('/url', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

⚠️ express 설치 후 npm start 등의 명령어가 pakage.json에 없다면 직접 작성해줘야 한다
⚠️ express서버는 cra와 다르게, 코드 수정 후 서버를 재시작 해주어야 변경한 코드가 적용된다

---

Client - React(CRA)

설치
npm create-react-app // cra 설치

// App.js

import { useState, useEffect } from "react";

function App() {

  fetch("경로", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify( obj data ),
    })
    .then((res) => res.json())
    .then((data) => console.log(data))
    
  axios.post("경로", { data1, data2 }) // axios 요청 양식
  
  return (
    <div></div>
  );
}

export default App;

⚠️ react에서 상태 변화가 생기면 자동적으로 리랜더링이 발생한다
⚠️ setter가 실행되면, state값이 변경되지 않아도 리액트는 상태 변화가 있다고 인식한다
⚠️ fetch 시 header를 작성하지 않으면, 데이터가 전송되지 않는다
⚠️ jsx에서 map 사용 시 콜백에서 return을 명시해야만 태그가 반환된다

form, input 태그 관련 사항

onSubmit 이벤트로 submit input의 이벤트를 발생시킬 수 있다
inpue에 name="이름명"으로 name속성을 추가한 뒤, 이벤트리스너 콜백에서 event.target.이름명.value으로 input 입력값을 사용할 수 있다
input에 type="checkbox" 속성을 추가한 뒤, event.target.done.checked로 체크 유무를 값으로 사용할 수 있다

---

cors 정책

프론트/백에서 데이터 통신을 할 때,
두 개의 서버(client 서버, 백엔드 서버)가 필요하다

서버는 각각의 origin(host와 port를 포함한 데이터의 출처)를 가지며
origin이 다를 경우, 백엔드 서버에서 클라이언트의 접근을 허용해 줘야만
클라이언트가 백엔드 서버에 접근할 수 있다
따라서 기본적으로는 origin이 다른 서버는 접근이 제한되는 것이 기본 상태이다

cors모듈을 통해 이러한 접근 제한의 범위를 조절할 수 있다

---

네트워크 탭

개발자 도구의 네트워크 탭에서 서버와 클라이언트의 통신 내역을 확인할 수 있다
통신 내역의 헤더, 미리 보기, 응답 등의 탭에서 통신 정보를 확인할 수 있다

---