fetch를 이용해서 백엔드와 소통을 해보자!

전에 만들었던 Westagram 코드로 fetch를 통해서 백엔드에서 주는 데이터를 가지고 구현해보기로 하였다!
그럼 일단?

💢Fetch란 무엇일까요?

Fetch는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공하고, Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기(병렬적으로 작업을 수행하는 것)적으로 가져올 수도 있습니다.

Westagram에서 사용한 Fetch 요청입니다.

 fetch('api주소')/users/signin', {
 //여기서 api 주소는 백엔드에서 만든 signup(회원가입),signin(로그인) api를 적어줬습니다
      method: 'post',
      //호출 방식은 POST 방식을 선택했습니다.
      body: JSON.stringify({
      //JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.
        email: id, // id,password: react 코드안에 있는 state값 
        password: password, //email,password : 백엔드분들이 만들어준 data
      }),
    })
      .then(response => response.json())
      .then(data => console.log(data)); -> 확인을 위한 console.log(data)

npm start를 해보면?

signup인 경우.

백엔드에서 정해진 조건으로 회원가입을 하면
(저희 조 같은 경우에는 이메일이 문자하나 숫자하나 '@' 하나가 들어가야했고,
비밀번호는 문자하나 숫자하나 특수문자하나 이상의 조건이 충족되면 회원가입이되는
조건이었습니다.)

Success 글귀가 나옵니다! ..(서버가 닫힌 관계로 캡쳐를 못했습니다.);

    .then(response => response.json())
      .then(data => localStorage.setItem('access_token', data.access_token));
      //그리고 로컬스토리지에 로그인할 때 받았던 토큰을 저장합니다.
      //이 받은 토큰은 나중에 로그인, 자동로그인하는데 사용됩니다!

signin인 경우.

메세지에 Success글귀와 함께 토큰이 나옵니다 !!!

앞으로 있을 프로젝트에 더 많은 조건들이 있고, 전달해야 할 data들이 많을텐데 조금 걱정이 되지만 한 편으로는 재밌을 것 같아서 기대가 됩니다!!!