TIL)노마드코더 React

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

react-dom 코드를 잘못 삭제 한 후 발생한 오류 .

import ReactDOM from 'react-dom'; //->오류가 발생한 지점
import ReactDOM from 'react-dom/client'; // 'react-dom'부분에 '/client'를 추가해 오류 해결

기초부터 다시 복습

코인 api 가져오기

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    //api를 useEffect 를 통해 렌더링 될 때 최초 한번만 가져온다.
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (
    <>
      <h1>Coins! {loading ? null : `(${coins.length})`}</h1>
      {loading ? (
        <h3>Loding !!!</h3>
      ) : (
        <ul>
          {/* index가 필요없는 이유 : api의 id값을 index로 넘긴다! */}
          {coins.map((co) => {
            return (
              <li>
                {co.name} ({co.symbol}) : {co.quotes.USD.price} USD
              </li>
            );
          })}
        </ul>
      )}
    </>
  );
}

gh-pages

결과물을 github page에 등록할 수 있는 패키지

1.package.json ->"build": "react-scripts build",을 통해 웹사이트의 production ready code를 생성

production ready code :코드 압축,최적화

npm run build

 

2.package.json -> "deploy" : "gh-pages -d build"

deploy : gh-pages 실행 및 bulid 디렉터리를 임포트

build후 실행해야 하기 때문에 번거로움을 줄이기 위해 "predeploy" : "npm run build" 추가

 

이후 수정,업데이트 시 npm run deploy 적용 -> 자동 빌드 후 push됨