React - 프론트에서 서버로 데이터 요청하는 방법 (fetch, axios 사용. .)

특정 url에서 데이터 가져오고

뭐 입력한 값을 보내고

 

이건 알겠는데

 

그럼 회원가입과 로그인등을 진행 할때

인증절차같은건 뭐 어디서 어떻게 구현하는거임..?

 

서버측에서 뭘 해줘야 하나..?

쿠키? 세션? 공부를 그렇게 했어도 이게 모르는걸 보면 시간도 없고.. 죽것다ㅜ

---

	npm init -y
	npm i express 이젠 서버 기본 코드는 아니깐 그냥 바로 작성.. npm i nodemon까지 걍 넣어주자 코드 바뀔때마다 재실행 귀찮음.. 라우트 굳이 분리 안해도 됨 할줄 알잖음

여기까지 셋팅은 끝

---

TooDoList를 만들어보자

	뭐 이런게 있다고 하자
	값을 get해서 가져오는거 있고 직접입력한 text 와 done를 post 보내는게 있는데 이때 내가 입력한 값을 보내려면
	bodyParser를 사용해야한다 이 역할은 내가 body 에서뭐 뭘 입력하면 그걸 꺼내쓰기 좋게 해주는 5.x 버전부터는 이런식으로 바꼈나보다 개발할때 걍 복붙 때리믄 안되는 이유 좀 찾아보고 뭐 변한거 있나 봐야함
	됬으면 밀어 넣어줘야지

확인 함 해보

---

	데이터 잘 넘어오는거 확인
	직접 입력한 데이터 들어가지나 확인. .
	아 오케이 들어가지는거까지 확인

그래 자 여기까지가 나 혼자 서버 만들수있는 부분. .

물론 DB연결해서 까지 말이지..

---

react 만들자

	npx create-react-app . 해주면 현재 폴더에 생성이 됨.
	먼저 안쓰는거 좀 읎애고 import 된거 읎애야한다
	얘 없애
	쟤 읎애
	<App /> 이거 안에 다 비우고 여기다 좀 간단하게만 만들어주자..

웹 UI 대충 셋팅 끝

---

★ 이제 서버에 데이터를 요청을 할거다

먼저 그 방법은 라이브러리를 설치해 쓰는방법(axios)과

기본 제공 api를 쓰는 방법(fetch)이 있음

fetch 사용하여 서버에서 데이터 받아오기 서버에 데이터를 요청(request) 하려면 먼저 알아야 할게 뭘까? 1. 서버의 주소 2. 사용할 HTTP method
	코드를 뭐 다 외우고 다니고 그런거 아니다 https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch 공식문서를 잘 활용하면된다. 코드를 다 외우고다닐필요 읎다 모양은 좀 다르지만 .then()을 사용해서 암튼. .
	F12 눌러 네트워크 열어보면 저기 지금 todoList랑 연결된거 확인! 근데 뭔가 좀 이상하다 저거 전에 본건데.. CORS error?
	해결법은 일단 server가서 저거 설치해서 불러와주면 된다

---

CORS

 

Cross origin resource sharing 의 약자

 

Client인 react 서버는 http://localhost:3000/ 이고

Sercer인 express 서버는 http://localhost:5000/ 로

 

그 origin이 다름

이 말은 즉 출처, 그 포트가 다르다는건데

 

그럼 보자고

 

웹개발자 입장 : 어라? origin이 다른데 이거 데이터를 뭐 막꺼내가도 되는거여???

당근 안됨!

네이버웹 개발자가 구글서버에 들어가 데이터 막 갖다 쓴다? 라고 극단적으로 생각해보면 감이 옴

일단 다르면 막는다가 원칙이 된것

 

지금이야 뭐 localhost 고 포트만 다르니 상관 없다 이건데

 

이 제약을 풀어주는 곳은 데이터를 제공하는 쪽인 server이다

 

그래서

cors 정책을 허용해준거다

저기 cors() 이렇게 안에 아무 옵션도 안넣으면

난 아무 origin이든 다 갖다 쓸수 있어요~ 란 의미다

이제 뭐가 잘 나온다

저 두개씩 나오는건 index.js에 

React.StrictMode 얘 때문임

---

이게 목적이 아니잖음. .

화면에 보여줘야지

데이터를 담을 그릇이 필요함 그래서 useState()를 사용해서 데이터를 안에 넣기로 함 useEffect()는 이제 화면에서 뭔가 변한게 있을때 그때 동작하는건데 isToDo를 안에 넣었네? 그럼 저거 바뀔때마다 재렌더링을 한다는 말임 isToDo는 배열이다. 해서 map()이 가능한데 각연결된 key값은 아까 consol.log찍어봐서 뭐뭐든지 알지? 그렇게 불러온걸 원하는 위치에 넣어주면 됨

---

데이터를 추가하는것도 해야지

	form에 처음 보는 onSubmit가 있음
	이것은 event Handler로 뭔가 전송을 할때 쓰는거다 e.preventDefault() : 이벤트 발생시 새로고침 방지 const text = e.target.text.value; const done = e.target.done.value; 이벤트를 일으키는 타깃인 text의 value를 갖고와라 는 말 method: "POST",  HTTP 메소드 body: JSON.stringify({ 직접 입력한값을 JSON으로   text,  아까 담은 text와    done, done를 }), 전송해라

여기까지 직접입력한 값을 server에 전송하는 방법이였음

---

그런데 넘어온 데이터를 보니

텍스트는 안넘어왔네? 왜?

headers: {         "Content-Type": "application/json",       }, 이거 안넣어줘서 그렇다 이것은 내가 지금 보내는 데이터가 JSON이다 라는걸 명시해준

이러면 데이터 전송은 되지만 UI에 적용까지는

내가 새로고침 하지않으면 안된다

 

빠진 코드가 데이터를 넣으면 새로 불러와라인데

이 새로 불러와라가 빠진 상황..

	우린 이미 데이터 불러와라~ 는 만들었잖음..? 그럼 저걸 한번 더 조건으로 넣어주면 되는거 아님?
	그런데 공통코드는 어떻게해야 한다? 그렇지 빼내 변수에 담으면 된다

여기까지 fetch 사용법

---

axios 사용법은 더 쉽다!

익숙치 않아 잘 몰라 그렇지 쉽다

	npm i axios 설치부터 해주고
fetch	axios
	더 깔끔하게도 된다

---

fetch	axios

저 긴걸 그냥 단 한줄로 줄여버리는 마법같이 간편한 코드가 완성 됬다

aixos의 장점이다 

 

그리고 코드도 중복되는건 따로 뽑아 놓는게 좋다

 

여기서 한발 더 나아가 더 쉬운게 react-query 라는건데

 

그 사용법은 

https://whaledowny.tistory.com/150

에서 했었음