[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 2주차 회고 및 배운 것

---

🙋‍♀️배운것들

supabase + Next.js에 대해서 새로 배웠다..!

 

 

📌 Next.js 프로젝트 생성

 

우선, shadcn ui와 함께 Next.js를 시작하기 위해서 Shadcn ui의 getting started를 따라서 프로젝트를 생성해준다.

npx shadcn@latest init

Next.js + shadcn ui 기반의 프로젝트 만들기

이후 실행은 react와 동일하게 해주면된다.

(npm install해주고, npm run dev로 확인하기)

 

 

📌 supabase 연결

우선 supabase에서 계정과 프로젝트를 만들어주자

프로젝트 만들기

 

next.js에서도 supabase를 사용하기 위해서 설치를 해주자

npm install @supabase/supabase-js

 

그리고 연결하기 위해서 env를 설정해주자

connect를 선택하고,

여기 밑에 있는 env파일을 그대로 만들어주면 된당

 

그리고, next.js에 supabase.ts파일을 lib폴더에 생성해주자

// lib/supabase.ts

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseKey);

 

 

 

📌 supabase 테이블 만들고 api로 통신하기

supabase는 정말 쉽게 테이블을 생성할 수 있다..!

supabase > table editer에서 create table을 하면 간단히 생성할 수 있음

 

원하는 column 생성

 

테이블을 만들면 api docs를 통해 어떻게 연결하는지 친절한 설명이 나와있다.

쭉 내리다 보면 Insert rows가 있는데 이걸로 간단하게 버튼을 누르면 table에 column을 추가하는 걸로 테스트를 해보자

처음 next.js 프로젝트를 생성했을 때의 화면에서 shadcn ui를 이용해서 간단한 버튼을 하나 만들어주자

npx shadcn@latest add button

이제 이 버튼을 누르면 테이블에 column이 들어오도록 만들어보자

 

app/page.tsx에서 button에 onClick으로 위의 예시코드를 그대로 붙여넣어서 테스트를 해보자

// app/page.tsx

"use client"

import Image from "next/image";
import { Button } from "@/components/ui/button";
import { supabase } from "@/lib/supabase";


export default function Home() {

  const handleTestButton = async () => {
    const { data, error } = await supabase
    .from('test-table')
    .insert([
      {  },
    ])
    .select()       
  }
  
  ....
  
  <Button onClick={() => handleTestButton()}>테이블 테스트!</Button>

 

이렇게 해주고 버튼을 누르면 table에 데이터가 생성되는 것을 확인할 수 있다.

 

 

 

 

🙎‍♀️ 2주차 회고

Next.js가 생각보다 리액트와 크게 다르지 않은 것 같다.

supabase를 좀 더 기깔나게 활용하는 방법을 3주차에 배우는 중인데,,,, 쉽지 않아서 연습이 많이 필요해보인다.

 

사실 2주차 내내 최종면접이랑 겹쳐서 집중도 안되고 바로바로 따라가지도 못했다...

이제 시원하게 떨어졌으니까... 열심히 해봐야지 화이팅

 

마지막 주차인 3주차에는 바로바로 따라가는 것도 그렇고 다시 혼자서 차분히 하는 것도 해봐야겠다.

내껄로 만들어야 의미가 있는거니까!!!

 

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 과정(B-log) 리뷰로 작성 되었습니다.