2단계 프로젝트의 교훈

초보자로서 일관된 노출이 매우 중요합니다.

스키 리조트용 날씨 앱을 만들려고 3월에 이 프로젝트를 시작했습니다. 나는 꽤 좋은 진전을 이루었지만 3월에 교통사고로 꽤 긴 공백기를 갖게 되었습니다. 이 프로젝트를 다시 시작했을 때 기술 세계의 모든 것이 빠르게 움직이고 내가 너무 야심적이었을 수도 있다는 것을 깨달았습니다.

React가 몇 번 업데이트되었는데 시작할 수도 없었습니다npm start. 스택 오버플로에 며칠을 보낸 후 <React.StrictMode> 를 활용하여 해결 방법을 찾을 수 있었지만 출장 중에 며칠 후(아마도 NavLinks의 업데이트로 인해) 충돌이 다시 발생했습니다. 나는 그 시점에서 충분했고 프로젝트를 다시 시작하기로 결정했습니다.

하지만 이러한 일련의 사건은 저에게 꽤 귀중한 교훈을 가르쳐 주었습니다. 그 점에서 초보자로서 저는 계속해서 코딩을 해야 합니다. 제 두뇌가 그날 작동을 거부하기 때문에 주어진 날에 몇 시간 동안 화면을 응시하더라도 말입니다. 프로젝트를 계속 주시할 수 있었다면 업데이트 및 역량 문제를 피할 수 있었고 REACT를 다시 배우기 위해 이미 완료한 자료를 닦는 데 한 달을 더 소비하는 것도 피할 수 있었습니다.

이 프로젝트에서 외부 API를 사용하지 마세요.

지난 프로젝트에서 내부 데이터베이스를 사용했기 때문에 2단계 프로젝트에서는 외부 API를 사용하기로 했습니다. 관리하기 쉬워 보이는 APIhttps://www.refugerestrooms.org/api/docs/#!/restrooms를 발견하고 이를 사용하기로 결정했습니다. 데이터를 제시하는 것은 그다지 문제가 되지 않았습니다.

API를 살펴보니 쿼리 파라미터로 검색 기능이 동작하는 것을 알 수 있었습니다. 쿼리를 쉽게 구성하기 위해 쿼리 컨텍스트 구성 요소를 만들기로 결정했습니다.

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

const QueryContext = createContext();


function QueryProvider({ children }) {
    const [ query, setQuery ] = useState("seattle")


  return <QueryContext.Provider value={{ query, setQuery }}>{children}</QueryContext.Provider>;
}

export { QueryContext, QueryProvider };

...앱 구성 요소에서 쿼리 다운으로 도시 이름을 전달합니다.

 const { query, setQuery } = useContext(QueryContext)

  useEffect(()=>{
      fetch(`https://www.refugerestrooms.org/api/v1/restrooms/search?page=1&per_page=10&offset=0&ada=true&unisex=true&query=${query}`)
      .then(res=>res.json())
      .then(data=>setBathrooms(data))
  },[ query ])

기본값은 그다지 중요하지 않았지만 저는 시애틀에 기반을 두고 있기 때문에 그냥 시애틀로 설정했습니다. 꽤 기본적인 디스플레이 설정으로 제대로 작동하는지 확인할 수 있었습니다.



문제는 요구 사항당 2개의 CRUD 구성 요소가 있어야 한다는 것입니다. 이것은 적절한 승인 없이는 외부 API에 POST할 수 없다는 것을 알았을 때였습니다.

해결 방법

이 문제를 해결하기 위해 게시된 데이터가 저장될 추가 내부 데이터베이스인 db.json을 생성했습니다. 내 계획은 POST 요청을 포함하고 나중에 페이지에 게시된 데이터를 렌더링하는 Post 및 Pending이라는 2개의 다른 구성 요소를 만드는 것이었습니다.

처음에 렌더링을 위해 이 코드를 보류 중으로 전달했습니다.

 const [ pendings, setPendings ] = useState([])

 useEffect(()=>{
      fetch(`http://localhost:8000/bathrooms`)
      .then(res=>res.json())
      .then(data=>setPendings(data))
  },[ Pendings ])

그리고 사용

        fetch("http://localhost:8000/bathrooms", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(newBathroom)
            })
            .then(r => r.json())
             .then(data => setPendings(data))

그러나 POST 요청이 루프에서 코드를 던져 보류 중인 페이지가 계속해서 다시 렌더링되기 때문에 이것이 오류를 일으킨다는 것을 빨리 알게 되었습니다.

동일한 코드를 재구성하는 여러 가지 방법을 며칠 동안 시도한 후 마침내 두 개의 코드를 분리하는 또 다른 상태newPendings를 생성하는 해결 방법을 생각해 냈습니다. 결국 그들은 이렇게 생겼습니다.

 const [ newPendings, setNewPendings ] = useState([])

useEffect(()=>{
      fetch(`http://localhost:8000/bathrooms`)
      .then(res=>res.json())
      .then(data=>setPendings(data))
  },[ newPendings ])

   fetch("http://localhost:8000/bathrooms", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(newBathroom)
            })
            .then(r => r.json())
             .then(data => setNewPendings(data))

해결?

다른 상태 변수를 사용한 후 코드가 의도한 대로 작동했습니다. 그러나 실제로 무엇이 문제를 일으켰는지 확실하지 않으며 그 원인을 찾고 싶습니다. 또한 내가 한 일이 "올바른"솔루션이 아니라 해결 방법일 뿐이라고 거의 확신합니다. 그것도 알아내고 싶습니다.