[2024.07.01] TIL 49일차

스터디 새 프로젝트 시작

[ 프로젝트 세팅 ]

1. repo clone 하기
   git clone [레포지토리 주소]

2. todoList 폴더로 이동
   cd todoList/

3. react, typescript, next.js, tailwind css 프로젝트 세팅
   git config pull.rebase false

   What is your project named? my-app
   Would you like to use TypeScript? Yes
   Would you like to use ESLint? Yes
   Would you like to use Tailwind CSS? Yes
   Would you like to use src/ directory? Yes
   Would you like to use App Router? (recommended) Yes
   Would you like to customize the default import alias (@/)? Yes
   What import alias would you like configured? @/

4. cd 3번에서만든본인프로젝트명/

5. supabase 세팅

   • supabase 프로젝트 생성
     

   • 프로젝트 세팅 > API 로 들어가서 url, key 받아오기
     

   • .env.local 파일 만들고 url과 key 넣기

      NEXT_PUBLIC_SUPABASE_URL = ""
      NEXT_PUBLIC_SUPABASE_ANON_KEY = ""

6. src > app > shared > supabase.ts 에 아래 내용 넣기

    import { createClient } from "@supabase/supabase-js";
    import { Database } from "@/app/shared/supabase";

    const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
    const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

    export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_ANON_KEY);

- 주의 : 아직 Database type 지정을 안해서 오류가 발생한다. (추후 추가 예정)