[TIL] 230807

새 프로젝트 시작

S.A

https://deeply-silence-9a4.notion.site/React-ccd853f975594eb3a38ce778f6dd41d8?pvs=4

TS styled-component 설치

yarn add styled-components @types/styled-components

React Outlet Error

const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/detail/:id" element={<Detail />} />
        <Route path="/mypage" element={<Mypage />} />
        <Route path="/study" element={<Studyboard />} />
        <Route path="/freeboard" element={<Freeboard />} />
        <Route path="/write" element={<Write />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};

Header와 Footer의 위치를 변경해주었다.

Supabase

React로 처음 시작할 때, 먼저 라이브러리를 설치해주어야 한다.
yarn add @supabase/supabase-js

공식문서에서는 데이터를 다음과 같이 가져온다.

  import { useEffect, useState } from "react";
  import { createClient } from "@supabase/supabase-js";

  const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");

  function App() {
    const [countries, setCountries] = useState([]);

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

    async function getCountries() {
      const { data } = await supabase.from("countries").select();
      setCountries(data);
    }

    return (
      <ul>
        {countries.map((country) => (
          <li key={country.name}>{country.name}</li>
        ))}
      </ul>
    );
  }

  export default App;

URL과 인증 key를 입력하고 방금 만든 컴포넌트를 가져와서 사용하면 된다.

오늘은 계획에 많은 시간을 소요했다. supabase는 메서드를 어떻게 사용하는지 문서를 읽어보면서 이해를 해봐야할 것 같다.