[react] 회원가입/로그인 기능 구현에 필요한 fetch메소드

우유·2022년 11월 11일

회원가입/로그인 기능을 구현하기 위해서는 백엔드와의 통신이 필요하다.
따라서 fetch에 대해 더 자세히 알아보고 실제로 어떤 데이터들을 받아오는지 알아보자

fetch

fetch 정의

특정 정보가 필요할 때 클라이언트는 서버에 HTTP통신으로 요청을 보내고, 정보를 응답 받을 수 있다. 이때 사용되는 메서드가 fetch메서드 이다.
클라이언트는 fetch 메서드로 서버에 데이터를 요청해서 read,create,update,delete등 의 기능을 수행할 수 있다.

fetch 요청(request)

fetch메서드를 호출할 때, 첫 번째 인자로는 전달한 API주소에 정보를 달라고 요청을 합니다. API의 주소는 백엔드와의 소통으로 알 수 있다.
fetch 메서드를 호출할 때, 두 번째 인자는 요청의 옵션 값들로 필요에 따라 객체 형태로 넣을 수 있다.
*method mode credentials omit same-origin include cache redirect referrer referrerPolicy integrity keepalive signal 등의 key와 각각 해당하는 value를 넣을 수 있다.

// fetch의 구조예시

fetch('api주소', {
  method: '...',
  headers: { 'key': 'value' },
  body: JSON.stringify({ 'key': 'value' }),
})                                      //요청
  .then((response) => response.json())
  .then((data) => console.log(data));
                                        //응답

fetch는 크게 요청과 응답 부분으로 나눌 수 있는데 여기서는 두 번째 인자로 전달하는 객체의 key 중에 자주 사용하는 method, headers, 그리고 body가 있는 요청과 body가 없는 요청으로 나눠서 알아보자.

첫번째 인자(API 주소) -필수

fetch 첫 번째 인자 자리에 정보를 요청할 API주소를 입력하는데 여기서 중요한 포인트는 API주소를 사용할 때는 path Parameter 와 query Parameter 가 존재한다는 것이다.

path parameter

특정 리소스 정보를 반환하는 API를 설계할 때, 접근하는 고유한 정보를 변수화 하여 지정해둔 매개변수를 path Parameter 라 한다. 해당 변수는 유일한 값을 식별하는 역할을 한다.

query parameter

필요한 조건을 요청에 따라 데이터를 선택적으로 처리할 수 있는 통일된 API를 구성할 때 사용하는 매개변수를 query parameter라 한다. 유일 값을 식별하기 위한 용도가 아닌 옵션을 줄 때 사용합니다.
Query parameter는 필터링, 정렬, 페이지네이션, 검색등의 경우에서 활용한다.

url자원으로 한정된 일관적인 인터페이스(uniform interface)를 구현하는 것으로 자원 조작을 톨일하는 것이 좋다.
일반적으로 HTTP를 구성하는 URL, HTTP method, Status Code를 통해 인터페이스를 구현한다.

URI는 동사를 제외한, 명사로 구성한다.
어떠한 요청을 진행할 대상(URI)는 자원이므로, 해당 자원을 정확하게 지칭하는 명사로 구성하는 것이 좋다.
Resource에 대한 행위를 HTTP method (GET, POST, PUT, DELETE)만으로 표현한다.
어떠한 작업을 수행할 것인지에 대한 혼선을 줄이기 위해 통일하는 것이 좋다.
Resource 사이에 연관 관계 및 계층 관계가 있는 경우 slash('/') 를 사용한다.
URI 마지막 문자로 /를 포함하지 않는다.
URI가 길어지는 경우 - 를 사용하여 가독성을 높인다.
파일 확장자는 URI에 포함시키지 않는다. 이때, payload에 포함되는 파일의 확장자는 headers에 포함된다.
응답 Response 의 status code의 기본적인 규칙을 따른다.

[출처] : https://study.wecode.co.kr/session/content/323

두 번째 인자 (method) - 선택 사항

GET, POST, PUT, PATCH, DELETE 등 어떤 method로 요청할지 적는다.

fetch('API주소', {
  method: 'POST',
});

두 번째 인자 (headers) - 필수

headers는 서버에 요청할 때 보낼 부가적인 정보를 담는다.만약 method:"POST" 로 요청하는 경우 headers에 Content-Type: application/json; charset=utf-8 은 필수로 담아야 한다. headers에 선택적으로 쓸 수 있는 키 들은 Host, user-Agent, Authorization 등등이 있다.

두 번째 인자 (bode) - 선택사항

body에는 서버에 요청할 때 보낼 실질적인 정보를 담습니다. 여기서 요청 body가 있는 경우와 없는 경우로 나눌 수 있다.

요청 body가 있는 경우

서버에 보낼 정보가 있는 경우, 요청 body에 담아서 보낸다. 그런데 body value를 보면 JSON.stringify라는 메서드에 담아서 보내고 있다.

//POST - body 예시

fetch('API 주소', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  body: JSON.stringify({
    title: 'update title',
    content: '서버에 요청할때 담아서 보내는 정보',
  }),
});

*body에 담긴 정보를 서버로 보낼 때 데이터 형태를 JSON 형태로 보내고 받아야 하는데, JSON으로 형 변환을 해주는 메서드가 JSON.stringify이다.

요청 body가 없는 경우

요청 body가 없는 경우는 서버에 전달해 줄 정보 없이 정보를 달라고 요청만 한다.

fetch 응답 (response)

.then() 메서드는 Promise를 처리할 수 있는 메서드이다. .then()은 Promise를 return 하고 두 개의 콜백 함수를 인자로 받는다. 하나는 Promise가 이행됐을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. .then() 메서드는 Promise를 return 하기 때문에 첫 번째. then()에서 반환된 값을 두 번째. then()에 이어서 처리할 수 있는 메서드 체이닝(chaning)이 가능하다.

// fetch 요청 전문 예시

fetch('API주소', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  body: JSON.stringify({
    title: 'update title',
    content: '서버에 요청할때 담아서 보내는 정보',
  }),
}) 
                                              //요청
  .then((response) => response.json())
  .then((data) => console.log(data));
                                              //응답

첫 번째 응답을 반환하는. then()의 콜백에 response라고 하는 매개변수를 console.log로 실행해 보면 이런 값이 반환되는 걸 알 수 있다.

첫번째 응답에서 반환된 객체로 두번째 응답에서 분기 처리

통신에 성공해서 JSON을 객체로 변환했다면, 변환된 객체를 활용해서 분기 처리할 수 있다.

//두번째 응답 분기처리 예시

fetch('로그인 API', {
  method: 'post',
  body: JSON.stringify({
    id: 'qawsedrf',
    password: '123456',
  }),
})
  .then((response) => {
    if (response.ok === true) {
      return response.json();
    }
    throw new Error('에러 발생!');
  })
  .catch((error) => console.log(error))
  .then((data) => {
    if (data.message === 'login success') {
      localStorage.setItem('TOKEN', data.token);
      alert('로그인 성공');
    } else {
      alert('로그인 실패');
    }
  });

//data 예시
  data: {
    message: 'login success',
    token:    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo1fQ.Dy3PPHIOFFe3ScGTb8x3hewItnpOcgC9YDdW7v27XHg',
  },