์ต์ข ํ๋ก์ ํธ ํต์ฌ ๊ธฐ๋ฅ ๋ถ์์ ํตํด ์ ํด์ง ์ฃผ์ ๋ '์ฌ๋ ๋ณ ์ผ์ ๊ด๋ฆฌ ์๋น์ค'ํต์ฌ๋๋ ๊ธฐ๋ฅ ์ค '์บ๋ฆฐ๋'๋ฅผ ๊ตฌํํ๊ฒ ๋์๋ค.์บ๋ฆฐ๋๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ง์ ๊ตฌํํ๊ธฐ ๋ก ๋๋ ์ ์๋ค. ์บ๋ฆฐ๋ ๊ตฌํ ๋ฐฉ๋ฒ 2๊ฐ์ง ๋น๊ต๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋น๊ต์ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๊ตฌํ์ด ๊ฐ๋ฅํ์ง๋ง ์ปค์คํฐ๋ง์ด์ง์ด ์ด๋ ต๋ค.์ง์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ปค์คํฐ๋ง์ด์ง์ด ์์ ๋กญ์ง๋ง ๊ตฌํ์ด ์ค๋ ๊ฑธ๋ฆฐ๋ค. ์บ๋ฆฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ง์ ๊ตฌํํ๋ ๋ฐฉ์์ ๋น๊ตํด๋ณด์๋ค. ์๊ฐ ์์ ์งํํด์ผ ํ๋ ํ์ ํ๋ก์ ํธ์ด๊ธฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ๋ง์ฅ์ผ์น ! ์บ๋ฆฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋น๊ต์๋๋ ๊ณต์ ๋ฌธ์์์ ๋ณผ ์ ์๋ ๋ฌ๋ ฅ๋ค์ด๋ค.๋๋ณด๊ธฐ1. Toast UI Calendar 2. React-Calendar 3. React-Big- Calendar 4. FullCalend..
์ต์ข ํ๋ก์ ํธ ์์ ๋จ๊ณ์์ ์ฃผ์ ์ ํ์ด์ง ๊ตฌ์ฑ, ์ ์ ํ๋ก์ฐ ๋ฑ ์ผ์ถ ๊ฐ๋ฅ์ด ์ ํด์ก๋ค.๋์์ด๋๋ถ๊ณผ ๋ฏธํ ์ ์๋๊ณ ์ ๋ฆฌํด ๋ณธ ํต์ฌ ๊ธฐ๋ฅ์ ๊ธฐ๋กํ๋ค.3์กฐ ๋ ธ์ ๋งํฌ3์กฐ ํผ๊ทธ์ ฌ ๋งํฌ ์ฐ๋ฆฌ ์กฐ์ ์ฃผ์ ๋ '์ฌ๋ ๋ณ ์ผ์ ๊ด๋ฆฌ ์๋น์ค' ์์ ์์๋์๋ค.๊ฐ์ธ์ด ์ฌ์ฉํ๋ ํ์ด์ง์ด๋ฉฐ (์ถํ ์์ ์๋น์ค๋ก ํ์ฅ ๊ฐ๋ฅ์ฑ ๋ค๋ถ)์ฌ์ฉ์๊ฐ ์ฃผ๋ณ ์ฌ๋๋ค์ ์ถ๊ฐํ๊ณ ๊ทธ ์ฌ๋๊ณผ์ ์ผ์ ์ ์ ๋ฆฌ, ๊ธฐ๋กํ๋ค๋ ์ ์์ ์ผ๋ฐ ์ผ์ ๊ด๋ฆฌ ์๋น์ค์๋ ์ฐจ๋ณ์ ์ ๋๊ณ ์๋ค. ๋ณดํต ์ผ์ ๊ด๋ฆฌ๋ ๋ชจ๋ฐ์ผ์์ ์ฃผ๋ก ์ฌ์ฉํ์ง๋ง, ์น ๊ฐ๋ฐ์ ์ฃผ๋ก ๋ฐฐ์ด ์ฐ๋ฆฌ๋ pc๋ฅผ ์ฐ์ ์ผ๋ก ๊ฐ๋ฐ, ์ถํ ๋ฐ์ํ/์ ์ํ์ ๊ณ ๋ คํ์ฌ ๋ชจ๋ฐ์ผ์์๋ ์ฌ์ฉ ๊ฐ๋ฅํ๋๋ก ์ด์ผ๊ธฐ ๋๋์๋ค. MVP ๊ตฌํ๋ฒ์ ์ค์ ๋ฐ ํต์ฌ ๊ธฐ๋ฅ MVP(์ต์ ํ์ ๊ธฐ๋ฅ)๋ ์๋ ๊ทธ๋ฆผ ์ค ๋นจ๊ฐ์์ผ๋ก ํ์ํ์์ผ๋ฉฐ์ฝ..
zustand์ supabase๋ฅผ ํ์ฉํด์ ๋ก๊ทธ์ธ ํ ํฐ ์ ํจ์ฑ ๊ฒ์ฆ์ ํ๋ ค๊ณ ํ๋ค.๋ก๊ทธ์ธ ํ ํฐ ์ ํจ์ฑ ๊ฒ์ฆ์ด ๋ฌด์์ผ๊น?๋ก๊ทธ์ธ ํ ํฐ ์ ํจ์ฑ ๊ฒ์ฆ์ด๋? ๐์ฌ์ฉ์๊ฐ ๋ณด์ ํ ์ธ์ฆ ํ ํฐ์ด ์ ํจํ์ง ํ์ธํ๋ ๊ณผ์ ์ฆ, ์ฌ์ฉ์๊ฐ ๋ก๊ทธ์ธ ์ํ๋ฅผ ์ ์งํ๊ณ ์๋์ง ํ์ธํ๋ ์ญํ ์ด๋ค.Supabase์์๋ auth.getSession() ๋๋ auth.refreshSession()์ ์ด์ฉํด์ ํ ํฐ์ ๊ฒ์ฆํ ์ ์๋ค. ๋ก๊ทธ์ธ ํ ํฐ ๊ฒ์ฆ ๋ก์ง ํ๋ฆ ๐๋ก๊ทธ์ธ ๊ณผ์ ์ฌ์ฉ์๊ฐ ์ด๋ฉ์ผ๊ณผ ๋น๋ฐ๋ฒํธ๋ฅผ ์ ๋ ฅํ์ฌ ๋ก๊ทธ์ธ ์์ฒญ์ ๋ณด๋supabase.auth.signInWithPassword()๋ฅผ ํตํด ์ธ์ฆ (๋น๋ฐ๋ฒํธ๋ฅผ ํตํด ์ฌ์ฉ์ ์ธ์ฆํ๋ ๋ฐฉ์)์ธ์ฆ์ด ์ฑ๊ณตํ๋ฉด ์์ธ์ค ํ ํฐ(Access Token)๊ณผ ๋ฆฌํ๋ ์ ํ ํฐ(Refresh Token) ์ด ..
ํ์ด์ง๋ค์ด์ (1)์์ ์๋ชป๋ searchParams์ ์ฌ์ฉ์ผ๋ก API ์๋ํฌ์ธํธ๊ฐ ์๋ ํ์ฌ ํ์ด์ง์ ์ ๊ทผํ๋ค. [NEXTFLIX_Day3] ํ์ด์ง๋ค์ด์ (1) - ๊ธฐ๋ฅ ํ์ ์นดํ ๊ณ ๋ฆฌ๋ณ ์ํ ์์ธํ์ด์ง์์ ํ์ด์ง๋ค์ด์ ์ ๊ตฌํํ๋ ค๊ณ ํ๋ค.์ถํ์ ์ด๋ป๊ฒ ํ์ฉ๋ ์ง ๋ชจ๋ฅด๋, ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ๊น์ง์ ํธ๋ฌ๋ธ ์ํ ์ ์์ธํ ๊ธฐ๋กํ๊ณ ์ ํ๋ค.์ด๋ฒ ๊ธ์๋ ์๋ชป๋ ๋ฐฉํฅ์ฑcoco910.tistory.com ๊ตฌํํ๊ณ ์ ํ๋ ๋ฐฉํฅ์ ๋ง๋ ๋ฐฉ๋ฒ์ธ '๋์ ๋ผ์ฐํธ ๊ตฌ์กฐ'๋ฅผ ์ ์ฉํ๋ฉฐ ์๋ ๋ฐฉ์์ ํจ๊ป ์ ๋ฆฌํด๋ณด๊ณ ์ ํ๋ค.์ถ๊ฐ๋ก ํ์ด์ง์ ๋ฒํผ์ ๋ก์ง์ ์ดํด๋ณด๋ฉฐ ๋์ ํ๋ฆ๋ ํ์ ํด๋ณธ๋ค.ํ์ด์ง๋ค์ด์ ๋ฒํผ์ ๊ธฐ๋ฅ๋ค์ ์ง์ด๋ณด๋ ๋ฒํผ์ ๊ธฐ๋ฅ๊ธฐ๋ฅ 1 : Page = 1 ๊ธฐ๋ณธ๊ฐ๊ธฐ๋ฅ 2 : ๋ฒํผ ํด๋ฆญ ๋ง๋ค -1 / +1๊ธฐ๋ฅ 3 : ์ฒซ ํ์ด์ง : ‘์ด์ ’ ๋ฒ..
์นดํ ๊ณ ๋ฆฌ๋ณ ์ํ ์์ธํ์ด์ง์์ ํ์ด์ง๋ค์ด์ ์ ๊ตฌํํ๋ ค๊ณ ํ๋ค.์ถํ์ ์ด๋ป๊ฒ ํ์ฉ๋ ์ง ๋ชจ๋ฅด๋, ๊ธฐ๋ฅ์ ๊ตฌํํ๊ธฐ๊น์ง์ ํธ๋ฌ๋ธ ์ํ ์ ์์ธํ ๊ธฐ๋กํ๊ณ ์ ํ๋ค.์ด๋ฒ ๊ธ์๋ ์๋ชป๋ ๋ฐฉํฅ์ฑ์ผ๋ก ๊ตฌํํ์ ๋์ ๋ฌธ์ ์ ์ ๊ธฐ๋กํ์ผ๋ฉฐ ์ต์ข ๋ฐฉ๋ฒ์ 2ํธ์์ ํ์ธํ ์ ์๋ค. [NEXTFLIX_Day3] ํ์ด์ง๋ค์ด์ (2) - ๋์ ๋ผ์ฐํ ์๋ ๋ฐฉ์ํ์ด์ง๋ค์ด์ (1)์์ ์๋ชป๋ searchParams์ ์ฌ์ฉ์ผ๋ก API ์๋ํฌ์ธํธ๊ฐ ์๋ ํ์ฌ ํ์ด์ง์ ์ ๊ทผํ๋ค. [NEXTFLIX_Day3] ํ์ด์ง๋ค์ด์ (1) - ๊ธฐ๋ฅ ํ์ ์นดํ ๊ณ ๋ฆฌ๋ณ ์ํ ์์ธํ์ด์ง์์ ํ์ด์ง๋ค์ด์ ์ ๊ตฌcoco910.tistory.com ํ์ด์ง๋ค์ด์ ์ด๋?์ฝํ ์ธ ๋ฅผ ์ฌ๋ฌ ํ์ด์ง๋ก ๋๋์ด ๋ค์ ๋๋ ์ด์ ํ์ด์ง๋ก ์ด๋ํ๊ฑฐ๋ ํน์ ํ์ด์ง๋ก ์ด๋ํ ์ ์๋ ์์ ํ์ด์ง๋ค์ด..
์ง๋ ๊ฐ์ธ ๊ณผ์ ๋ถํฐ ๋๋ฌด ํท๊ฐ๋ฆฌ๋ ๋ผ์ฐํธ ํธ๋ค๋ฌ, ์๋ฒ ์ก์ ๋๋ณด๊ธฐ[๊ธฐ์กด ์ง์]๋ผ์ฐํธ ํธ๋ค๋ฌ๋ ์ฃผ๋ก ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๋ฉฐ GET, POST ๋ฑ์ ์ด์ฉํด์ ์๋ฒ๋ก ์์ฒญ์ ๋ณด๋ด๊ณ ,๋์ ๋ก์ปฌํธ์คํธ ์๋ฒ๋ก ์๋ต์ ์ค๋ค. ์๋ฒ ์ก์ ์ ์ฃผ๋ก ์๋ฒ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๋ฉฐ ๋น๋๊ธฐ ํจ์๋ฅผ ํตํด ์์ฒญํ๊ณ ์๋ต์ ๋ฐ๋๋ค.์ ๋๋ก ์๊ณ ์์๋ค. ๋์ ์ฐจ์ด์ ์ ์๋ต์ ์ฌ์ฉํ๋ ๋ถ๋ถ์ ์๋ค๊ณ ์๊ฐํ๋ค.๋ผ์ฐํธ ํธ๋ค๋ฌ : ํธ๋ค๋ฌ -> ๋ด ์๋ฒ ํจ์ -> ์ค์ ์ฌ์ฉ์๋ฒ ์ก์ : ํจ์ -> ์ค์ ์ฌ์ฉ๋์ ํน์ง์ ํ์คํ ๋น๊ตํด๋ณด๊ณ ์ ํ๋ค.Route Handler// app/api/hello/route.tsimport { NextResponse } from "next/server";// 1. GET ์์ฒญ์ ์ฒ๋ฆฌํ๋ ํธ๋ค๋ฌexport ..
2025.03.21(๊ธ) Taskํ ํ์- ERD : ํ์ด์ง ๊ตฌ์กฐํ- supabase DB ์ค์ - ํ๋ก์ ํธ ์ ์ - ์ญํ ๋๋๊ธฐ ๊ฐ์ธ ๊ธฐ๋ฅ ๊ตฌํ- ์ด๊ธฐ ์ค์ - ๊ธฐ๋ฅ ํ์ ๋ฐ ๊ตฌํ ํ ํ์ ERD : ํ์ด์ง ๊ตฌ์กฐํ๐์ธ์ฆ / ์ธ๊ฐ ๋ฐฉ๋ฒ : ๋นํ์ ์ต๋ช ์ - ํ*๋, ๋๊ธ ์์ฑ ์ ๋น๋ฐ๋ฒํธ ์ค์ ๐CUD : ์ํ ์์ธ ํ์ด์ง ๋๊ธ ์์ฑ, ์์ , ์ญ์ ๐์์ด์ดํ๋ ์์ ํตํด์ ํ์ด์ง ๋ค์ ์ ํ๊ธฐ๐ํ์ด์ง ๊ตฌ์กฐ ์ ํ๊ธฐ๐ํ์ ๊ธฐ๋ฅ ์ฒดํฌ supabase DB ์ค์ ๐ํ์ ์ด๋๐comments ํ ์ด๋ธ ์ค์ id : uuidcreated_at : timestamptzname : varcharpassword : varcharcontent : varcharmovie_id : int8 ํ๋ก์ ํธ ์ ์ ๐Next.js ์ค์น..
Tanstack Query + Context API + Zustand๋ก ์ ์ญ ์ํ ๊ด๋ฆฌํ๊ธฐ *Context API : ์ํ๋ฅผ ์ ์ญ์ผ๋ก ๊ณต์ 4์ฃผ์ฐจ ์์ ๐ค Tanstack Query + Zustand ์ ๊ฐ์ด ์ธ๊น?ํ ์คํ์ ์๋ฒ ์ํ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์บ์ฑํ๋ค.์ฃผ์คํ ์ค๋ ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌ๋ฅผ ๊ฐํธํ๊ฒ ํ ์ ์๋ค.๋์ ํจ๊ป ์ฌ์ฉํ๋ฉด, ์๋ฒ ์ํ๋ฅผ ํด๋ผ์ด์ธํธ ์ํ๋ก ๋๊ธฐํํ๋ ํจํด์ ๋ง๋ค ์ ์๋ค. ์์ ์ํ ๋จ๊ณ 1. RQProvider.tsx ์์ ์๋ฒ/๋ธ๋ผ์ฐ์ ๊ฐ๊ฐ ์๋ก์ด ์ฟผ๋ฆฌ ํด๋ผ์ด์ธํธ ์์ฑ๋๋ณด๊ธฐ"use client";import { isServer, QueryClient, QueryClientProvider,} from "@tanstack/react-query";function makeQue..
Next.js๋ ์น์ ๋ง๋ค๊ธฐ ๋๋ฌธ์ ์น ์๋ฒ๋ฅผ ์คํํ ์ ์๋ ํ๋ ์์ํฌ์ด๋ค.๊ทธ๋ ๋ค๋ฉด Next์์์ '์น ์๋ฒ'๋ ๋ฌด์์ผ๊น? React์ ์น ์๋ฒ์ ์ญํ ์ ๋น๋ ์์ ์ ๋น html(id๊ฐ root์ธ ๋น divํ๊ทธ)๊ณผ JS ๋ฒ๋ค ํ์ผ์ ์ ๊ณตํ๋ค.๊ทธ๊ฒ์ ๋ฐ์ ๋ธ๋ผ์ฐ์ ๋ ์์์ JS๋ฅผ ํด์ํ์ฌ ๋น ํ๊ทธ์ JS ํ์ผ๋ค์ ๋ฐ๊ฟ ๋ผ์ฐ๋ ํ์์ผ๋ก ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ค.๋ธ๋ผ์ฐ์ ๋ ๋น html์ ๋ฐ์๊ธฐ ๋๋ฌธ์ JS๋ฅผ ์ธ์ํ ๋๊น์ง ์๊ฐ์ด ๊ฑธ๋ฆด ์ ๋ฐ์ ์๋ค. ์ฆ, TTV๊ฐ ๊ธธ๋ค.ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง(CSR)์ด ๋ฐ๋ก ์ด๋ฌํ ๋ฐฉ์์ด๋ค. Next.js์ ์น ์๋ฒ์ ์ญํ ์ ๋น๋ ์์ (SSG)๊ณผ ์์ฒญ ์์ (SSR)์ HTML์ ์์ฑํ๊ณ API ๋ผ์ฐํธ๋ฅผ ํตํ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ค.๋๋์๋ฉด html์ ํ๋ก ํธ์๋, API๋ฅผ ์ ๊ณตํ๋ ๊ฑด ..
๐พ LoL info App ๋ฉ์ธ ํ๋ฉด ๋ฐ ์๋ ์์ Github ๋งํฌ : https://github.com/JinchaeKim/lol-info-app.git๋ฐฐํฌ ๋งํฌ : https://lol-info-app-git-main-jinchaes-projects.vercel.app๐ฅ๏ธ ํ๋ก์ ํธ ์๊ฐLoL์ ์์ดํ , ์ฑํผ์ธ, ์ฑํผ์ธ ๋กํ ์ด์ ๋ฑ ๋ค์ํ ๋ฐ์ดํฐ๋ฅผ ์กฐํํ๋ ํ์ด์ง์ ๋๋ค.TypeScript๋ฅผ ํ์ฉํ์ฌ ํ์ ์ ์ธ, useState์์ ์ ๋ค๋ฆญ์ ์ฌ์ฉํ์์ต๋๋ค.Next.js๋ฅผ ํ์ฉํ์ฌ ๋์ ๋ผ์ฐํ , App Router, ๋ ์ด์์ ๊ตฌ์ฑ, Route Handler๋ฅผ ๋ค๋ฃจ์์ต๋๋ค.Riot Games์ API์ Data Dragon๋ฅผ ํ์ฉํ์ฌ LoL์ ๋ค์ํ ์ ๋ณด๋ฅผ ๋ํ๋ ๋๋ค. ๐ฐ๏ธ ๊ฐ๋ฐ ๊ธฐ๊ฐ2025 / ..