fetch함수로 서버와 소통하기

리.터.럴.리 fetch는 가져오다라는 뜻이다.
그럼 우리는 fetch를 어떻게 사용할 것인가?

서버와 통신을 순서대로 정리(긴글주의)

1. 회원가입 하기 (signup)

1-1. 서버주소 입력하기

//fetch(서버에서 제공하는 서버 주소,{})
fetch('00.00.0.000:8000/users/signup',{})

💥여기서 겪었던 문제!
하...초반부터 뭐가 안돼... 왜 안돼!!! 라고 했을 때, 주소가 잘못 되었다는 것을 알게 되었다.
자, fetch는 뭘까? 심지어 mdn에도 아주 대놓고 명시되어 있다.
[Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공]
주소 앞에 https://를 작성하지 않았기 때문이다.
왜 https://가 없어도 어색하지 않았지?
서버와의 연결은 처음이기 때문이다. 이제까지 항상 localhost:3000의 주소만 보다가 https://의 존재는 아예 잊고 있었다...

fetch('http://00.00.0.000:8000/users/signup', {}
//이렇게 작성하면 된다! 당연하겠지...

---

1-2. HTTP 요청방법 입력하기

fetch('http://00.00.0.000:8000/users/signup', {
 method: 'POST',
 body: JSON.stringify({}),
 })

fetch 함수로 HTTP 요청하는 방법에는 4가지가 있다.

아래의 벨로그를 참고하자!
클릭해서 꼭 읽어보자!!

위의 코드에 method: 'POST'가 입력된 이유는 서버에서 POST로 작성했기 때문이다. form 등을 사용해서 데이터를 만들어 낼 때, 보내는 데이터의 양이 많거나, 비밀번호 등 개인정보를 보낼 때 POST 메서드 사용한다.

---

1-3. id 입력값과 password 입력값을 서버에 보내주기

fetch('http://00.00.0.000:8000/users/signup', {
  method: 'POST',
  body: JSON.stringify({
    first_name: firstName,
    last_name: lastName,
    phone_number: phone_number,
    email: newId,
    password: startPW,
   }),
})

body에 입력하는 값은 사용자가 로그인 input 창에 입력한 값을 서버에 보내주는 역할을 한다. 즉, 서버에 보내주는 문서의 내용이라고 생각하면 된다.

먼저 body를 JSON 파일의 형태로 변환해야 한다. 왜?
나는(클라이언트) Javascript 언어로 작성된 input값을 백엔드(서버)에 보낸다. 하지만 백엔드에서는 Python 언어를 사용한다.
두 언어가 모두 소통하기 위해서는 JSON파일로 변환하여 보내줘야 한다. 그럼 백엔드에서는 JSON파일을 Python 언어로 다시 변환하여 값을 읽어온다.

따라서, body의 내용을 JSON.stringify로 변환한다. 어떤 내용인가?

• 회원가입 정보를 객체로!
• key와 value를 이용해서
  • key에 적어둔 이름은 백엔드에서 지정한 이름이라 똑같이 작성한다.
  • first_name, last_name 등등

//테스트용으로 작성한 변수
const firstName = 'Kim';
const lastName = 'EK';
const phone_number = '010-2222-2222';
const newId = 'kaka12345@naver.com';
const startPW = 'KaK12345!';

fetch('http://00.00.0.000:8000/users/signup', {
  method: 'POST',
  body: JSON.stringify({
    first_name: firstName,
    last_name: lastName,
    phone_number: phone_number,
    email: newId,
    password: startPW,
   }),
})

위의 변수는 key의 value값이 된다.
사실 input창에 입력되는 값을 바로 작성하기 위해서 useState를 작성하여 state값을 입력하는 것이 맞다. 위의 코드는 매우 정적인 코드이며 테스트를 위한 코드이기 때문에 실행할 때는 useState를 사용하여 실시간으로 입력되고 업데이트 되는 input값을 작성해야 한다.

💥여기서 겪었던 문제!
일단 "회원가입"을 하기 위해서 서버에서 회원가입 주소를 보내주었다.(signup)
로그인 input창에 id와 pw를 입력했다. 로그인 버튼을 클릭하면 fetch가 작동되게 <button>태그에 onClick함수 안에 fetch를 작성했다.

따라서, 로그인 버튼 기능이 활성화 되어야 한다. 내가 짠 코드에서 로그인 버튼이 활성화 되기 위해서는 id를 입력하는 input창에 "@" 을 입력해야 하며, password를 입력하는 input창에 5글자 이상 작성해야 한다. 그래서 그냥
id: "@"
pw: 12345
이렇게 작성했다.

하지만 연결된 서버에서 자꾸 error 창을 보낸다. 왜지? 로그인 버튼 눌렀으면 서버에 id 값과 pw 값이 도착했을 것인디...

알고보니 서버에서 지정한 id값의 조건과 pw의 조건이 프런트에서 짠 조건과 달랐다. 서버에서는 pw값이 8자 이상이고 특수문자, 숫자, 영어 대문자까지 포함해야 회원가입이 가능하도록 설정했다. 따라서 위에 작성한 변수 startPW의 값을 KaK12345!로 작성했다. 그랬더니 콘솔에 "SUCCESS" 값을 보내줬다ㅜㅜ행벅

기념사진 (개발자도구>network>Fetch/XHR)

---

분량조절실패... 다음 로그에 '로그인'으로 계속...