Fetch?

Fetch API를 이용하면 Request나 Response와 같은 http의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다.
또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있다.
fetch()로부터 반환되는 promise객체는 HTTP error상태를 reject하지 않는다. code가 404나 500을 반환하더라도 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다.

fetch('http://10.58.1.245:8000/json',
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

코드가 의미하는 바는, 네트워크에서 json파일을 가져와서 콘솔에 인쇄하는 것이다.
간단한 fetch()사용 흐름을 보면 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 response객체를 반환한다. 이것은 단순한 HTTP Response이며, 실제 json이 아님에 유의해야한다. response객체로부터 사진을 가져오기 위해서는 jeon()메서드를 사용할 필요가 있다.

fetch()메서드에 두번째 파라미터를 적용하는것도 가능하다.
init오브젝트는 다른 여러 세팅을 컨트롤 할 수 있게 해준다.

samplecode from MDN

// Example POST method implementation:
postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
  .catch(error => console.error(error));

function postData(url = '', data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native JavaScript objects 
}

GET과 POST를 사용하는 이유

GET과 POST방식의 REQUEST는 서버로 본인이 가지고 있는 data를 전달하기 위해 사용한다.

Get?

(요청) -> get 가져오는거 http://10.58...:8000/users (데이터 달라고 요구하는거)
Endpoint란? 내가 원하는 데이터. user라는 endpoint

자세히설명하면 get은 서버에서 어떤 데이터를 가져와서 보여줄때 사용한다.
어떤 값이나 내용, 상태등을 바꾸지 않는 경우에 사용하는것이다. 예를들면 게시판에서 글의 내용에 대한 목록을 보여주는 경우나, 글의 내용을 보는 경우
ex) 글목록 조회, 각각의 글조회

보통 default가 get이다 (따로 메소드 써주지않아도 get이다.)
또한 입력한 정보를 url에 노출해도 상관없을때 get메소드를 수행한다.

Post?

Post -> 내가 가지고있는 데이터 이거에요! 하고 주는거

간단히 설명하면, 입력한 정보를 숨겨서(정보를 보여주면 안될때) 로그인 상황이나, 중요한 데이터를 보내는 상황에서 post메소드를 수행하게 됩니다. (사실 대부분의 웹서비스에서 데이터를 작성하거나 수정해서 요청하는 기능을 수행할때 post를 쓴다.)
ex)글쓰기, 글수정

Method: 'POST' <- 스트링형태로 만들어준다.

get에서는
fetch(API주소)
.then
이런식으로 페치다음에 바로 then이 온다.
데이터 주세요 !!! 대답이 들어왔을때 뭔가를 처리해준다
Then

비동기 : 대답이 언제 돌아올지 모르는 요청
비동기 특성 : a b c d 각각순서대로 돈다. 이 a가 끝날때까지 기다릴때가있고 끝나지않을때 바로 다음걸로 넘어가는 경우도있음
Fetch가 비동기함수
실행하는데 fetch에대한 대답이 돌아왔을때 실행되는 시점이됨

원래 한줄짜리임 fetch().then()

Fetch (주소)
.then(~콜백함수들어감~) 왜들어갈까? 이 fetch에대한 요청에대한 대답이 돌아왔을때만 뭔가를 실행해줘야하니까 콜백함수를쓴다.
Console.log(“hello”) 를찍으면 바로 실행을 한다. 다른 자스처럼

대답이 돌아오면 .then에 대해 실행하고(언제돌아오는지는 아무도 몰름)
안돌아오면 그다름 찍은 hello 실행

Btn.addEventListener (‘click’, => ) 두번째자리 콜백함수써서 만들어줬었음..
이 클릭에대한 요청이 들어왔을때 뭔가 실행해줘야하니까 콜백함수사용

Json은 자바스크립트로 변환해주는 애
Json body ? 로갖다가 자바스크립트로 바꿔주는게 제이슨함수

Function () {
Cost hello = () => console()}

.then

익명함수랑 콜백함수는 다르다/ 콜백함수는 어떤일이 일어났을때 실행하는 함수

.then(( 요기response걍 이름지정해줌 ) => {res.json( ) }) res.json을 받아서 body(내용)를 리턴함
.then( (res 여기 res는 위 res.json에대한 대답) => { this.setState{} 내가원하는 데이터 넣어줌 } ) 정상실행됬을때 then을 또 씀

Post

Fetch( api주소 , { 객체!
Method: ‘POST’, 스트링 형태로 넣어준다
Body: JSON.stringify({
user_id: this.state.InputId,
password: this.state.InputPw,

    }),

Body를 담아서 보낼때 json으로 보내줌
자스를 json으로 바꿔서 보내준다.

} )
.then(() = > { } )
.then(() = > { } )
추가정보주는걸 메타데이터라고 함
던져주는 위치가 어디냐면 fetch함수 두번째인자에다가

내가 저장하고있는 이메일 값을 보내준다 this.state.userEmail 이런 형태로!!

중괄호? 완전퓨어한 자브스크립트이다.
Jsx는 return()문 뿐이다.
jsx아닌 영역에서는 변수 그대로쓴다.

에러던 제대로 됬던 제대로됬지만 문제가 있었던 응답이 들어온다 그래서 .then을써준다
토큰이란??
내 꼬리표라고 생각하면된다.
로그인했으면 제대로된 우리 데이터베이스의 회원인지아닌지확인
우리 데이터베이스에 등록된 회원이라면 토큰을 던져준(fetch에대한 response가 들어옴)

프론트 . 클라이언트 사이드에서 호출을한다.
로그인하려고 하는구나 라는걸 알아듣고 등록된 회원인지 찾고 맞으면
Access_token or token을 만들어 DB에 넣어주기도하고 토큰이 나에 대한 정보라고생각하자
모든 HTTP통신에보낸다. 왜? ->
HTTP STATELESS한 특성이있다. 상태가 없다. 포스트보내고 게겟보내고 서로가 어떤역할을 어떤요청이었는지를 몰라
예를들어 로그인했어 EXXESS토큰 요청했어
전에 로그인했다는 사실을 HTTP통해서는 알수 없으니 알아야하자나 그 정보를 알수있는 방법이 ACCESS_TOKEN인거임!!!
TOKEN은 유저 정보

로그인
상품리스트보여주는 GET요청

알게해주는 정보가 TOKEN
그다음에 어떤요청을 보내던 이사람은 로그인한 사람입니다~~ 하고 정보를
ACCECC_TOKEN 지워버린다.