Fetch API

관련  : Web Workers 

Web Workers API - Web API | MDN (mozilla.org)

Web Workers API - Web API | MDN

웹 워커를 이용하면 특정 작업을 멀티스레드로 병렬 처리할 수 있다. 클라이언트 측 자바스크립트는 싱글 스레드며, 그렇기 때문에 파일을 읽어들이거나 데이터를 가져오는 작업을 비동기로 실행한다. 

new Worker(URL) 생성자로 생성하며, 이 객체에 원하는 코드(이벤트처리기)를 등록해서 사용한다.

워커와 메인스레드의 데이터 교환은 메시지 시스템을 사용하며

전송은 postMessage() , 이렇게 보낸 데이터는 onmessge 이벤트 처리기를 사용해 수신한다. (복사해서 보낸다)

ex. const worker = new Worker('workers.js;);

worker.onmessage = function(e){

 e.data 로 수신하여 처리될 작업 코드 ... };

 

---

Fetch API는 ES6부터 자바스크립트의 내장라이브러리로 추가되었다.

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며 XMLHttpRequest보다 강력하고 유연한 대체제이다.

 

Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고 CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함하고 있다.

 

사용법! 

요청을 생성하고 리소스를 취득하려면 fetch 메서드를 사용한다.

fech() 는 window와 worker 컨텍스트 양쪽에서 모두 사용할 수 있는 전역 메서드이므로, 리소스를 취득할 상황에선 거의 모두 사용할 수 있다 

fetch() 가 반환하는 프로미스 객체는 서버에서 헤더를 포함한 응답을 받는 순간 정상적으로 이행한다. 404나 500과 같은 HTTP 오류상태를 수신해도 거부되지 않는다.

fetch 응답이 성공하면 Response 객체로 표현되며 직접 json 응답 본문을 받을 수는 없다. 

Response 객체는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 콘텐츠를 추출하기 위해서는 json()메서드를 호출해야한다. json() 은 응답 본문 텍스트를 json으로 파싱한 결과로 이행하는 또 다른 프로미스를 반환한다.

---

 

react-router-dom의 <Form> 을 사용해 넘긴 input 데이터들은, 라우터의 엘리먼트가 가진 action 프로퍼티의 값 함수로 넘어가는데, 이때 넘겨지는 데이터는 Object 객체이다. 여기서 받아온 Object에서 request 프로퍼티를 받아오면 요청에 대한 데이터를 읽어올 수 있다.

 

1. Form으로 넘겨주는 데이터

 

 <Form method='POST' className={classes.form} >
          <p>
            <label htmlFor="title">제목</label>
            <input
              type="text"
              id="title"
              name="title"
            ></input>
          </p>
          <p>
            <label htmlFor="body">내용</label>
            <textarea
              rows={10}
              id="body"
              name="body"
            ></textarea>
          </p>
          <p>
            <label htmlFor='date'>완독</label>
            <input type='date'
            id='date'
            name='date'/>
          </p>
          <p className={classes.buttons}>
            <button>작성</button>
            <Link to='..' type="button" >취소</Link>
          </p>
        </Form>

--> 위와 같은 React Form 컴포넌트는 

import NewPost, { action as newpostAction } from "./routes/NewPost.jsx";

  { path: "/newpost", element: <NewPost />, action: newpostAction },

라우터에 의해, action 값으로 넘겨지고

export async function action({request}) // Object에서 객체분해로 request 프로퍼티만 가져옴

const formData = await request.formData();  //request를 formData() 메소드로 FormData 객체를 가진 promise로 반환받기

const postData = Object.fromEntries(formData); 전역함수인 Object객체의 fromEntries를 사용하여 데이터를 키값쌍으로 바꿔준다

fetch("http://localhost:3000/posts", {     // fetch로 서버와 연결후, option 인수로 요청 method와 header, body를 

      method: "POST",                                  설정해주는데 body에 postData를 (현재 postData는 키값쌍의 formdata 상태)  

      body: JSON.stringify(postData),           내장객체인 JSON의 stringify 메서드로 객체를 JSON 문자로 변환

      headers: {

        "Content-Type": "application/json",

      },

    });

  return redirect('/');     그리고 return 되는 Promise 객체를 redirect로 '/' 에 해당하는 라우팅 컴포넌트로 보내 그곳에서 데                                            이터를 사용할 수 있다.

action 프로퍼티에 호출이 되는 함수 (해당 컴포넌트에 export 함수로 작성)에 의해 리다이렉트 된다.

 

 

---

FormData() 와 함께 사용

1. 빈 FrormData 객체 생성

let formData = new FormData();  

2. append() 사용하여 키/값 쌍 추가

formData.append('username', 'Chris');

Formdata 객체는 get 메서드를 이용해서 데이터를 꺼낼수 있고, [ ...formdata]이런식으로 전개연산자를 배열에 넣어서 할당하면 데이터들의 배열을 얻을 수 있다.