์ด์ ์ํฉ : Tanstack Query ์ ์ฉ ์ค undefined ๋ฐฉ์งuseEffect๋ก ์ฒ๋ฆฌํ๋ ์ด์ ๋ก์ง์ tanstack์ผ๋ก ๊ด๋ฆฌํ๊ธฐ ์ํด ์ปค์คํ ํ ์ผ๋ก ๋บ๋ค.์๋ ๋ก์ง์ formatted ๋ก์ง์ ์ ์ธํ, supabase์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ ๋ถ๋ถ๋ง ์ปค์คํ ์ผ๋ก ๋บ์ ๋์ ๋ก์ง์ด๋ค.'use client';import { Calendar, dateFnsLocalizer } from 'react-big-calendar';import { format, parse, startOfWeek, getDay } from 'date-fns';import { enUS } from 'date-fns/locale/en-US';import { ko } from 'date-fns/locale/ko';import { useS..
25.01.01 Today I Learned๐ก1. ์ธ๋ฑ์ค ์๊ทธ๋์ฒ VS Record2. ์ ๊ทํํ์์ธ๋ฑ์ค ์๊ทธ๋์ฒ VS Record ์ธ๋ฑ์ค ์๊ทธ๋์ฒ์์ดํ ์ ๋์ ์ซ์๋ค์ key๋ก ์ฌ์ฉํ๊ธฐ ์ํด ๋์ ํ์ ์ ๋ฐ๋ก ์ง์ Item์ value์ ์ ๊ทผํ ๋ key๊ฐ ์ธ์์ด ๋์ง ์์ ๊ณค๋ํ ์ํฉexport type Item = { name: string; plaintext: string; image: { full: string }; gold: { total: number }; stats: { FlatMovementSpeedMod: number };};// ๋์ key (1001, 1002...)export type ItemResponse = { data: { [key: string]: Item };};..
25.03.13 Today I Learned๐ก1. ‘์ผ์นํ๋ ์ค๋ฒ๋ก๋๊ฐ ์๋ค’๋ ์๋ฌ (serverApi.ts)2. ๊ฐ์ฒด ๋ฐ์ดํฐ๋ฅผ ๋ฐฐ์ด๋ก ๋ณํ3. Next์ Image ํ๊ทธ์ src ์์ฑ์ ๋์ ์ธ url4. ์ฑํผ์ธ ๋ชฉ๋ก ํ์ด์ง ํ์ ์๋ฌ '์ผ์นํ๋ ์ค๋ฒ๋ก๋๊ฐ ์๋ค' ๋ ์๋ฌ(serverApi.ts) fetch()์ ์ฒซ๋ฒ์งธ ์ธ์๋ ๋ฌธ์์ด(url) ๐๐ป await๋ก promise ๋ฒ๊ธฐ๊ธฐ// roitDataURL.ts// ์ฑํผ์ธ ๋ชฉ๋ก APIexport const CHAMPION_LIST_URL = async (): Promise => { const version = await getLatestVersion(); return `${RIOT_BASE_URL}/cdn/${version}/data/ko_KR/..
Next 14๋ฒ์ ์์๋fetch ์ต์ ๊ธฐ๋ณธ๊ฐ์ SSG ๋ ๋๋ง์ฒ๋ผ ์ ์ ๋ฐ์ดํฐ๋ฅผ ๋น๋ํ๊ฒ ๋์๋ค.ํ์ง๋ง ์ค์ ๋ก ์๋ฌด๋ฐ ์ต์ ์ ์ ์ง ์์์ ๋, ์์์น ์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค. ์๋ ๋ก์ง์ fetch ์ต์ ์ ์ฃผ์ง ์๊ณ SSG ๋ ๋๋ง์ ๊ตฌํํ์๋ค.// SSG > page.tsximport { Post } from "@/types/type";import React from "react";const SSGPage = async () => { const response = await fetch("http://localhost:4000/posts", { cache: "force-cache", }); const data: Post[] = await response.json(); console.log(..
์ผ๋ฐ์ ์ธ ๋น๋๊ธฐ ํจ์ ์ฒ๋ฆฌ์์ API ์์ฒญ์ ํ๋ฉด await๊ฐ ์๋ ์๋ ๋ชจ๋ ์์ฒญ์ผ๋ก ๋ฐ์๋ค์ฌ์ง๋ค.await๊ฐ ์๋ ๋น๋๊ธฐ ํจ์ ์์ฒญ ๋ก์ง์ ์ฝ์์ ์ฐ์ผ๋ฉด Promise{} ์ผ๋ก ๋์ค๋ฉฐ๊ฐ์ฒด ๋ด๋ถ์๋ 'fulfilled'๋ก ๋ฐ์ดํฐ ํ์นญ์ด ์งํ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.ํน์ ๋ชฐ๋ผ ๋ฐ์ดํฐ ๋งํฌ ๋ถ๋ถ์ ์คํ๋ฅผ ๋ด์ด ์ผ๋ถ๋ฌ ์ค๋ฅ๋ฅผ ๋ด์๋๋ ์ฝ์์ ์ค๋ฅ๊ฐ ์ฐํ๋ฉฐ ์ ์คํ๋์๋ค. let query = supabase.from(HOTPLACE).select('*'); if (area) query.eq('area', area); console.log('query', query); const getHotplaces = async () => { // let query = await supabase.from(HOTP..
2025.02.16 (์ผ) Works 1. ๊ฒ์์ด ํํฐ๋ง 1-1. ์ํฐ ๊ฒ์ 1-2. join ํด์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ 1-3. ๊ฒ์ value ํํฐ๋ง2. ์ฅ์ ํํฐ๋ง (์ ์ฒด / ๊ตญ๋ด / ๊ตญ์ธ) 2-1. onClick ์ด๋ฒคํธ ์ฃผ๊ธฐ 2-2. ํํฐ๋ง ํจ์ ๋ง๋ค๊ธฐ ๊ฒ์์ด ํํฐ๋ง ์ํฐ ๊ฒ์๊ฒ์ ํจ์ ๋ด๋ถ์ ์ํฐ๋ก ๊ฒ์ํ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค.๊ฒ์ ํ์๋ ๊ฒ์์ฐฝ์ด ๋น ๊ฐ์ผ๋ก ์ค์ ๋๋ค.// SearchInput.jsxconst handleSearch = e => { if (e.key === "Enter") return; setSearchInput("");}; join ํด์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ & ๊ฒ์ value ํํฐ๋ง๊ฒ์์ด ๋๋ ๊ฐ๋ค์๊ธ ์ ๋ชฉ, ๋๋ค์, MBTI, ๊ธ ๋ด์ฉ์ผ๋ก ์ ํ๋ค.๋ฐ๋ผ์ ๋ค ๊ฐ..
2025.02.15 (ํ ) Works 1. HomeContext ์ ์ญ๊ด๋ฆฌ2. Modal ๊ด๋ฆฌ 2-1. ์ ํ ์นด๋ state ๊ด๋ฆฌ 2-2. ๋ซ๊ธฐ ๋ฒํผ HomeContext ์ ์ญ๊ด๋ฆฌ ์ด์ ์๋ HomeContext์์ posts์ ๊ฐ๋ง ์ ์ญ์ผ๋ก ๊ด๋ฆฌ, HomePostCard์์๋ post์ ๊ฐ์ props๋ก ๋ฐ๊ณ users์ comments๋ฅผ state๋ก ๊ด๋ฆฌํ๋ค. ์ค๋์ ๊ฒ์๊ธ์ ํด๋ฆญํ์ฌ ๋ชจ๋ฌ์ฐฝ์ ๋์ฐ๊ณ ์ ํ๋ค.๊ทธ๋ฌ๊ธฐ ์ํด์ ์ด์ ๋ Home, HomePostCard, PostingModal๋ฅผ ํจ๊ป ์ฐ๊ฒฐํ์ฌ ๊ด๋ฆฌํด์ผ ํ๋ค. ๋ฐ๋ผ์ Context์์ posts, users, comments๋ฅผ ํจ๊ป ๋ฌถ์ด๋์๋ค. ์๋๋ supabase์์ Promise.all์ ํตํด posts, users, comm..
2025.02.14 (๊ธ) Works 1. DB ๋ฐ์ดํฐ ๋๊ธฐํ & Home ๊ฒ์๊ธ ๋ถ๋ฌ์ค๊ธฐ (props ์ ๋ฌ)2. ๊ฒ์๊ธ ์ถ๊ฐ ๋ฒํผ3. Layout ์์ ๋ฐ ํ์ด์ง ์ฐ๊ฒฐ(Link) DB ๋ฐ์ดํฐ ๋๊ธฐํ ๐์์ ๋ด์ฉ 1HomeContext ์์ฑํ์ฌ App ์ต์์์ ์ ์ฉsupabase์์ posts ํ ์ด๋ธ์ ๊ฐ์ ๊ฐ์ ธ์ดposts ๋ฐฐ์ด์ state๋ก ๊ด๋ฆฌํจvalue๋ก posts ๋ฐฐ์ด ๋ด๋ ค์คHomePostCard ์ปดํฌ๋ํธ ๋ถ๋ฆฌusers, comments ํ ์ด๋ธ์ ๊ฐ์ ๊ฐ์ ธ์ดusers, comments ๋ฐฐ์ด์ state๋ก ๊ด๋ฆฌํจcard ์๋จ user profile ๊ฐ์ ์ถ๋ ฅํจ (setUserProfile ํจ์)card ํ๋จ comments ๊ฐ์ ์ถ๋ ฅํจ (setComment ํจ์)posts, users, c..
2025.02.13 (๋ชฉ) Works 1. supabase ํน๊ฐ2. git conflict & issue ์ปจํผ๋ฐ์ค3. Prettier ํ์ผ ๊ด๋ฆฌ4. Home ํ์ด์ง UI ๊ตฌํ5. supabase์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ Home ํ์ด์ง UI ๊ตฌํ ๊ฐ๋จํ ๋ง๋ค์ด ๋ณธ Home UIindex.css์ body ์คํ์ผ์ ์ ์ง ์ค์ด๋ผ ํค๋๊ฐ ์งง๊ฒ ๋์จ๋ค.์ง๊ธ์ div๋ก ์ฃผ์์ง๋ง ์ถํ์ ํ๋กํ ์ฌ์ง๊ณผ post ์ฌ์ง์ผ๋ก ๋์ฒดํ ์์ ์ด๋ค. Supabase DOM์ ํตํด ํ๋ฉด ์ปดํฌ๋ํธ์ ์ ๊ทผํ๊ณ ,React๋ฅผ ํตํด ์ํ ๊ด๋ฆฌ๋ฅผ ํ๊ณ ,Redux, Context๋ฅผ ํตํด props๋ฅผ ์ ์ญ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ ,RRD๋ฅผ ํตํด ํ์ด์ง๋ฅผ ์ด๋ํ๊ณ ,RTK๋ฅผ ํตํด store๋ฅผ ์์ฑํ์ฌ ๊ฐํธํ๊ฒ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ์๋ค. ์ด๋ฒ ํ๋ก์ ํธ์์๋ ์ด์ ๋ด์ฉ..
์ด์ ์ JS ๋ฌธ๋ฒ์ผ๋ก ๊ตฌ์กฐ๋ถํดํ ๋น์ ๋ฐฐ์ ๋ค.[๐ฆ] JS ๋ฌธ๋ฒ - Destructuring (๊ตฌ์กฐ ๋ถํด ํ ๋น) (ํด๋ฆญ) ๋น์์๋ ๋จ์ํ ์์ ๋ก๋ง ์ตํ๋๋ฐ ๋ค์ํ ๊ณณ์์ ๋ง์ด ์ฌ์ฉํ๊ณ ์์ด์ ์ ์ ํท๊ฐ๋ฆฌ๋ ์์ค์Context -> RTK ๋ฅผ ์งํํ๋ฉฐ ์ค์ ์ฌ์ฉ ์์์ ํจ๊ป ์ถ๊ฐ๋ก ์ ๋ฆฌํด๋ณด๊ณ ์ ํ๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๊ตฌ์กฐ๋ถํดํ ๋น์ (๊ฐ์ฒด๋ ๋ฐฐ์ด์์) ๋ง์ ๊ฐ๋ค ์ค ๋ด๊ฐ ํ์ํ ๊ฐ๋ง ๋ฝ์์ผ ํ ๋ ์ฌ์ฉํ๋ค. ๐๊ฐ์ฒด ์ฌ์ฉ๊ฐ์ฒด ๋ด์ key ๊ฐ์ ์ง์คํ๊ธฐ!๋ค์ํ key : value pair๊ฐ ์๋ ๊ฐ์ฒด์์ ํ์ํ ๊ฐ์ key์ ๋์ผํ๊ฒ ๋ณ์๋ฅผ ์ง์ ํ๋ค.๊ทธ ๋ณ์๋ฅผ { } ๋ด์ ์ ๋ ฅํ์ฌ "๊ตฌ์กฐ๋ถํดํ ๋น ์ ๋๋ค~" ๋ผ๊ณ ์๋ ค์ค๋ค๊ณ ์๊ฐํ๋ฉด ์ฝ๋ค ! ์์ 1: "๋ฉ์ง์ ์ธ "๋ '์ํ๋ช '์ด๋ผ๋ ๋ณ์์, 10000์ '๊ฐ๊ฒฉ'์ด๋ผ๋..