본문 바로가기
카테고리 없음

Study_240610 (Promise , HTTP)

juni_shin 2024. 6. 10. 21:18

slice - 원본 배열을 유지하며 조건을 만족 하는 새로운 배열을 리턴

splice - 조건을 만족 하는 새로운 배열을 리턴하는데 원본 배열을 리턴 값을 제외한 배열로 변경

 

psomise 관련 복습 / 아래는 fake data 사용

import { useEffect, useState } from "react";

// function App() {
//   const [message, setMessage] = useState("타이머 시작");

//   useEffect(() => {
//     const delay = (ms) => {
//       const promise = new Promise((reslove) => {
//         setTimeout(reslove, ms);
//       });
//       return promise;
//     };
//     delay(2000).then(() => {
//       setMessage("2초 후 메시지가 변경됨");
//     });
//   }, []);

//   return (
//     <>
//       <h1>{message}</h1>
//     </>
//   );
// }

// export default App;

function App() {
  useEffect(() => {
      .then((response) => response.json())
      .then((json) => console.log(json));
  });

  return (
    <>
      <h1></h1>
    </>
  );
}

export default App;

 

Promise 병렬 관리 방법

function App() {
  useEffect(() => {
    Promise.all([
      fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
        response.json()
      ),
      fetch("https://jsonplaceholder.typicode.com/posts/2").then((response) =>
        response.json()
      ),
    ]).then(([response1, response2]) => {
      console.log(response1);
      console.log(response2);
    });
  }, []);

  return (
    <>
      <h1></h1>
    </>
  );
}

export default App;

 

비동기 코드를 동기 코드처럼 작성 하는 예시

우선  async 키워드로 정의된 함수는 항상 Promise 객체를 반환함

const testFunc = async () => {
  return 1;
}
const value = testFunc();
console.log(value)

 

 

const App = () => {
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchPost = async () => {
      const response = await fetch(
      );
      const data = await response.json();
      setPost(data);
    };
    fetchPost();
  }, []);

  console.log(post);

  return <></>;
};

export default App;
// async 사용시 문제를 방지하려면 아래처럼 => catch를 해내려면
const App = () => {
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const response = await fetch(
        );
        const data = await response.json();
        setPost(data);
      } catch (error) {
        console.log("Error", error);
      }
    };
    fetchPost();
  }, []);

  console.log(post);

  return <>{post ? <div>{post.title}</div> : <div>Loading...</div>}</>;
};

export default App;

 

 

HTTP란? ( Protocol은 데이터 통신을 원활하게 하기 위해 필요한 통신 규약 )

HTTP(HyperText Transfer Protocol)는 웹 상에서 데이터를 주고받기 위한 프로토콜임

클라이언트와 서버 간의 요청과 응답을 정의하며, 상태코드와 헤더를 포함한 다양한 요소를 가지고 있음

 

특징

  • 무상태성: HTTP는 상태를 유지하지 않아요. 각 요청은 독립적이며, 이전 요청의 정보를 기억하지 않아요. 이를 무상태(stateless)라고함
  • 확장성: HTTP는 다양한 확장 헤더를 추가하여 기능을 확장 가능
  • 유연성: HTTP는 다양한 데이터 형식을 전송할 수 있음  => 텍스트, 이미지, 비디오 등 여러 형식을 지원

HTTP 메시지 구조

요청 과 응답으로 나눔

요청 : 클라이언트가 서버로 데이터를 요청 시 사용

  • 요청 라인: 메서드(GET, POST, 등), URL, HTTP 버전
  • 헤더: 요청의 추가 정보(메타데이터)를 담고 있음 => 브라우저 정보, 인증 정보 등
  • 본문: 선택적, 주로 POST 메서드에서 사용

응답 : 서버가 클라이언트의 요청에 대한 응답을 보낼 시 사용

  • 상태 라인: HTTP 버전, 상태코드(200, 404, 등), 상태 메시지
  • 헤더: 응답의 추가 정보(메타데이터) ⇒ 콘텐츠 타입, 데이터 길이 등
  • 본문: 선택적, 주로 응답 데이터

HTTP 상태코드 종류

  • 1xx: 정보
    • 100 Continue
    • 요청의 일부를 서버가 받았으며, 나머지를 계속 보내라는 의미
  • 2xx: 성공
    • 200 OK
    • 요청이 성공적으로 처리됨
    • 201 Created
    • 요청이 성공적이었으며, 새로운 자원이 생성됨
  • 3xx: 리다이렉션
    • 301 Moved Permanently
    • 요청한 리소스가 영구적으로 새로운 URL로 이동
    • 302 Found
    • 요청한 리소스가 임시로 다른 URL로 이동
  • 4xx: 클라이언트 오류
    • 400 Bad Request
    • 잘못된 요청임
    • 401 Unauthorized
    • 인증이 필요함
    • 404 Not Found
    • 요청한 리소스를 찾을 수 없음
  • 5xx: 서버 오류
    • 500 Internal Server Error
    • 서버가 요청을 처리하는 동안 오류가 발생
    • 502 Bad Gateway
    • 서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받음

HTTP 메서드 및 Rest API

HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는 데 사용함

REST API는 이러한 HTTP 메서드를 사용하여 CRUD 작업을 수행함

  • 1. GET
    • REST API에서의 사용: 특정 리소스를 조회할 때 사용
  • 서버로부터 데이터를 요청할 때 ****사용함 요청 데이터가 URL에 포함되어 전송되며, 주로 데이터를 조회할 때 사용
  • 2. POST
    • 정의: 서버에 데이터를 제출할 때 사용
    • 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용
    • REST API에서의 사용: 새로운 리소스를 생성할 때 사용
  • 3. PUT, PATCH
    • 정의: 서버의 데이터를 업데이트할 때 사용
    • 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 기존 데이터를 수정할 때 사용
    • REST API에서의 사용: 기존 리소스를 수정할 때 사용
  • 4. DELETE
    • 정의: 서버의 데이터를 삭제할 때 사용
    • 특징: 주로 특정 데이터를 삭제할 때 사용
    • REST API에서의 사용: 특정 리소스를 삭제할 때 사용

API 명세서 작성 팁

1 게시글을 추가 POST /posts
2 모든 게시글 조회 GET /posts
3 특정 게시글 조회 GET /posts/:id
4 특정 게시글 정보 업데이트 PUT /posts/:id
5 특정 게시글 정보 일부 수정 PATCH /posts/:id
6 특정 게시글 정보 삭제 DELETE /posts/:id

 

데이터를 가져오기 위한 GET 요청과

데이터를 생성하기 위한 POST 요청의 차이

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // get 요청 시, fetch는 method를 명시하지 않아도 돼요.
        const response = await fetch(
        );
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return <div>{data ? <div>{data.title}</div> : <div>Loading...</div>}</div>;
}

export default App;

 

POST에는 method , headers , boyd 모두 필요한 차이가 있음

import React, { useState } from "react";

function App() {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [response, setResponse] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          title: title,
          body: body,
          userId: 1,
        }),
      });
      const result = await res.json();
      setResponse(result);
    } catch (error) {
      console.error("Error creating data:", error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Title"
        />
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          placeholder="Body"
        />
        <button type="submit">Create Post</button>
      </form>
      {response && <div>Created Post ID: {response.id}</div>}
    </div>
  );
}

export default App;

 

저작자표시 비영리 변경금지

티스토리툴바