Get

const fetchMovieTrigger = useCallback(async() => {
  setIsLoading(true);
  setError(null);     // <= 여기 null을 한 번 더 초기화하는 이유는 전에있던 error를 없애기 위함이다.
  try {
    const response = await fetch("https://url_이름/movies.json");
    console.log(response.status);
    if (!response.ok) {
      throw new Error("뭔가 심상치 않은데?!");
    }
    const data = await response.json();

    const loadedMovies = [];

    for (const key in data){
      loadedMovies.push({
        id: key,
        title: data[key].title,
        openingText: data[key].openingText,
        releaseDate: data[key].releaseDate
      })
    }

    setMovies(loadedMovies);
    setIsLoading(false);
  } catch (err) {
    setError(err.message);
  }
  setIsLoading(false);
}, []);

• 최초 페이지 로드시 data를 로드해야하는 sideEffect 때문에 useEffect 코드를 사용하였고

useEffect(()=>{
  fetchMovieTrigger();
}, [fetchMovieTrigger]);

• 위 코드로 인하여 무한 루프가 이루어지지 않도록 useCallback을 사용했다.

• 코드 초기부분에는 앞서 있을 error코드가 남아있지 않도록 초기화해주는 구문이다.

• error 코드가 발생 시 사용자로 하여금 불괘한 경험을 하지 않도록 try-catch문을 사용하여 어떤 error인지 정보를 제공하기위해 err 처리를 하였다.

• fetch로 해당 url을 request를 보내고 결과값은 항상 Promise 객체로 나온다.

• fetch 반환값을 response 변수에 담고 이를 활용하여 로직을 만들었다.

Post

async function addMovieTrigger (movie) {
  const res = await fetch("https://url_이름/movies.json",{
    method:"POST",
    body:JSON.stringify(movie),
    headers:{
      "Content-Type":"application/json"
    }
  });
  const data = await res.json();
  console.log(data);
}

• 우선 async 방식으로 작성하였다.
• header가 먼저오고 body가 오면 더 좋았을 것이다.
• 보충은 여기서