사이드프로젝트
-
5. Message 보내기. - 메세지 테이블 만들기, Policy 생성, type 생성사이드프로젝트 2024. 7. 22. 17:32
https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s를 보며 따라하는 실습 ---저번시간에 이어서 메세지 만들기를 진행한다. components/ChatInput.tsx 파일을 만들어준다."use client";import React from "react";import { Input } from "./ui/input";export const ChatInput = () => { // 메세지 전송 펑션 const handleSendMessage = (text: string) => { alert(text); }; return ( { if (e.key === "Enter") { // enter 키를 누르면..
-
4. Chat UI사이드프로젝트 2024. 7. 22. 14:02
https://www.youtube.com/watch?v=-xXASlyU0Ck&t=2007s이 동영상을 보며 만드는 챗 웹 실습예제 다음으로 이어서 채팅 UI를 만든다.import ChatHeader from "@/components/ChatHeader";import { Button } from "@/components/ui/button";import InitUser from "@/lib/store/InitUser";import { createClient } from "@/utils/supabase/server"; // supabase 객체 불러오기. // 서버 컴포넌트니깐 서버에서 임포트해온다.import React from "react";const page = async () => { const s..
-
NextJS + Supabase 채팅 앱 만들기 - 3. 로그아웃, 유저 상태관리 (Zustand), OAuth User생성 Trigger를 통해 public Schema에도 유저 생성해주기사이드프로젝트 2024. 7. 22. 02:23
https://www.youtube.com/watch?v=-xXASlyU0Ck&t=1114s 이분의 유튜브를 보며 실습하는 글 -------- 저번시간에 이어서, 이제 로그인이 되었으면 로그인버튼을 로그인 버튼이 아니라 로그아웃 버튼으로 바꿔주는 것부터 하겠다.app/page.tsx로 이동해서 import ChatHeader from "@/components/ChatHeader";import { Button } from "@/components/ui/button";import { createClient } from "@/utils/supabase/server"; // supabase 객체 불러오기. // 서버 컴포넌트니깐 서버에서 임포트해온다.import React from "react";const pa..
-
NextJS + Supabase 채팅 앱 만들기 - 2. Supabase 기본설정 + Github Oauth 로그인 1사이드프로젝트 2024. 7. 20. 00:11
https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.comsupabase 홈페이지에서 new project를 만들어준다. 이제 docs로 가서, authentication을 어떻게 설정해주면 좋을지를 본다.https://supabase.com/docs/guides/auth/server-side/nextjs Setting up Server..
-
NextJS + Supabase 채팅 앱 만들기 - 1. 기본 설정 + 첫 페이지사이드프로젝트 2024. 7. 19. 22:25
https://www.youtube.com/watch?v=-xXASlyU0Ck이 분의 강의를 보며 따라하는 기록이다. 가장 먼저 당연히 프로젝트를 시작할 디렉토리를 만들어준다. 그리고, NextJS 프로젝트를 시작하면 되는데, NextJS 홈페이지에 들어가면 Getting Started를 쉽게 찾아볼 수 있다.https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.jsCreate a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.nextjs...