React & Express 통신

react와 express의 통신

중요한 정보

• react 에서 만들어진 작업물은 클라이언트에서만 동작
• 즉 , 서버를 구축하기 위해서는 express 를 설치해야한다.
• axios 는 http 통신을 위해 필요하다 . (fetch도 가능)
• mysql 사용하기 위해서는 , server폴더의 app.js 파일에 express ,mysql을 설치해야한다.
  추가로 , query를 사용해준다.

<react, express 연결>

Server_express

1. client , server 폴더 각각을 제작해주자
2. server 폴더 내에

<npm init>

으로 package.json을 깔아주자.
3. 그 후 ,

<npm i express> 

로 express 설치해주자.

• server내에 app.js를 제작 -> 여기에 , express 서버 코드를 짤것이다.
  이 부분은 , npm 공식 사이트에서 자세한 설명이 나와있다.

  예)

todolist api구축해보기

<const todoList = [] >

으로 server메모리에다가 저장하기

이때 , 저장된 데이터를 받고 새로운것을 저장시키기 위해서 아래와 같은 코드를 사용한다.

<app.get>
<app.post>
<app.listen>

사용한다.

post man

데이터가 잘 post되는지 ,get되는지 확인하는 방법 중 하나로 postman이라는 플랫폼이 있다.

client - react

1. client 폴더에서 프론트엔드 - 리액트로 구축 하기

<npx create-react-app .>

을 이용해서 react코드 생성하기

2. app.js 에서 간단한 ui로 잘 되는지 확인해보기

<div>todolist</div> 

3. 리액트 창 띄우기

<npm start> 

데이터 요청하기

1. fetch api 사용

2. axios 라이브러리 사용

위 방법에서 공통적으로 필요한 것은 크게 두가지이다.

• 1. 서버 주소
• 2. 간단한 http method

1. fetch api

데이터를 주고 받을떄 에러가 발생할 것이다.

-> "CORS ERROR"

CORS ERROR 란 쉽게 URL 주소가 다르면 데이터를 줄 수 없게 하는 정책이다.

좀 더 쉽게 설명하면 , NAVER 와 GOOGLE의 도메인 주소는 엄연히 다른데 이때

데이터를 가져가게 되면 문제가 되는 것처럼

흔히

Client 주소

• localhost:3000

server 주소

• localhost:4000

인것처럼 이는 출처 (origin)이 다른것이다.

그렇기 때문에 , cors 정책을 풀어줄 방법이 필요하다.

cors

client 와 server 중 server 가 데이터를 제공해주는 입장이기 떄문에 ,

여기서 정책을 풀어주는 것이 필요하다.

app.use(cors())

이를 통해 정책을 풀어줄 수 있다

화면에 데이터 띄워보기

• usestate 이용하기

하지만 , 이떄 상태가 계속 바뀌면서 무한루프가 될 수 있기때문에

• useEffect를 사용해주자

  const fetchData = () => {
  fetch('http://localhost:4000/api/todo')
    .then((response) => response.json())
    .then((data) => setTodoList(data));
  }
  useEffect(() => {fetchData()} , [] );

• 마지막 줄에 []에 아무것도 쓰지 않으면 , 딱 한번만 렌더링 되게 된다.

post

1. UI 를 만들어주자

이런식으로 만들어준다.

2. FORM에 onSubmit event 이용하기

 
 <form onSubmit={onSubmitHandler}>

3. onsubmitHandler 구현해주기

 const onSubmitHandler = (e) => {
    e.preventDefault();
    const text = e.target.text.value;
    const done = e.target.done.checked;  //done을 체크했을때 에스 노로 인식하게끔 해준다
    fetch("http://localhost:4000/api/todo", {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        text,
        done,
      }),
    }).then(()=> fetchData());
  };

  

• e.preventDefault()

기본동작을 막아주는 것

• fetch 안에

1. method : 기본은 get이고 , post등을 설정해 줄 수 있다.

2. body : json.stringify() 로 body로 데이터를 받는다

3. headers : content-type : aplication/json을 해줘야 오류 방지

• then() => fetchData()

화면에 데이터가 바로 나올 수 있게 하는 방법

axios

1. npm i axios

2. import axios from 'axios' ;

axios.get('url').then((response) => {setTodoList(response.data)});

추가로 ,

async , await 사용하기

-> 깔끔하게 구현 가능

result

위 방법을 통해 실제 데이터베이스에 있는 데이터는 아니지만 ,

서버와 클라이언트와 통신하는 방법에 대해서 이해 할 수 있었다.

더 나은 개발이 되길 바라며:)