์ค์ ์คํฌ๋ผ ์๊ฐ์ ์บ๋ฆฐ๋ ๊ตฌํ ๊ธฐ๋ฅ์ ์ด์ผ๊ธฐ ๋๋๋ ์ค, ํํฐ๋์ ํ ๋ง๋"์ฝ์ ๋ฐ์ดํฐ๋ ํ ๋ฒ์ ๋ค ๋ฐ์์ค๋์? ์๋ณ๋ก ๋์ด๊ฐ ๋๋ง๋ค ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฑด ์ด๋จ๊น์?" ํ ์คํธ ๋จ๊ณ์ธ ์ง๊ธ์ ์์์ ๊ฐ ๋์ด ๊ฐ๋ง ๋ฃ์ด๋๊ณ ์ ์ฒด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ์ ํฌ๊ฒ ๋ฌธ์ ๊ฐ ์ ๋๊ฒ ์ง๋ง,์ค์ ๋ก ์ด ์๋น์ค๊ฐ ํ์ฑํ๋๋ค๋ฉด..์ฌ๋ฌ ์ ์ ๊ฐ ์ฝ์ ์ผ์ ์ ์ถ๊ฐํ๊ฒ ๋๊ณ , ์๊ฐ์ด ์ง๋ ์์ฃผ ์์ ๋ฐ์ดํฐ๊น์ง ๋ค ๋ถ๋ฌ์ค๊ฒ ๋๋ค๋ฉด... ์ ๋๊ฒ ๋ค. ๋งค ๋ฌ๋ง๋ค ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์บ์ฑํด๋์ด์ผ๊ฒ ๋ค. ์๋ณ ๋ฐ์ดํฐ ์บ์ฑํ๊ธฐ ๊ฐ๋จํ ์ค๋ช ํ์๋ฉด ์บ๋ฆฐ๋ ์ปดํฌ๋ํธ - useQuery ์ปค์คํ ํ - supabase ๋ฐ์ดํฐ ํ์นญ ํจ์ ์ธ ๋ก์ง์ ๊ด๊ณ๋ฅผ ์์ ํ๋ฉด ๋๋ค. ์บ๋ฆฐ๋ ์ปดํฌ๋ํธ์บ๋ฆฐ๋ ์ปดํฌ๋ํธ์ ์ญํ ์ ๋ค์๊ณผ ๊ฐ๋ค.ํด๋น ๋ฌ์ ์ํ ๊ด๋ฆฌ - Date ๊ฐ์ฒด..
๋ฌ๋ ฅ์ด๋ผ๋ฉด ํ์ํ ๊ณตํด์ผ ! ๊ณต๊ณต๋ฐ์ดํฐ API ๋ฐ๊ธ ๊ณตํด์ผ ์ ๋ณด๋ฅผ ์ป์ด์ค๊ธฐ ์ํด์ ๊ณต๊ณต๋ฐ์ดํฐ๋ฅผ ์ด์ฉํ์๋ค. ํ์๊ฐ์ ๊ณผ ๋ก๊ทธ์ธ์ ํ๊ณ ํ์ฉ์ ์ฒญ์ ํด๋ฆญํ๋ค.์ ์ฒญ์ด ์๋ฃ๋๋ฉด ์ผ๋ฐ ์ธ์ฆํค ๋ ๊ฐ๊ฐ ๋ฐ๊ธ๋๋๋ฐ, Encoding ํค๋ฅผ ์ด์ฉํ์๋ค. API ์ ์ฉ ๋ผ์ฐํธ ํธ๋ค๋ฌ.env.local ํ์ผ์ ํค ๊ฐ์ ๋ ๋ ํ ๊ฐ์ง ์ ์ํ ์ ์ด ์๋ค.supabase์ ์ด๋ ผํค ๊ฐ์ ๊ฒฝ์ฐ๋ ๋ธ๋ผ์ฐ์ ์ ๋ ธ์ถ๋์ด๋ ํฌ๊ฒ ๋ฌธ์ ๊ฐ ์ ๋๊ธฐ ๋๋ฌธ์ 'NEXT_PUBLIC'์ ๋ถ์ฌ์ ์ฌ์ฉํ๋ค. ํ์ง๋ง ๊ณต๊ณต๋ฐ์ดํฐ ๊ฐ์ ๊ฒฝ์ฐ๋ ํ์๊ฐ์ ํ ๋ฐ๊ธ๋ฐ์๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ์ ๋ ธ์ถ์ด ์กฐ๊ธ ๊บผ๋ ค์ก๋ค.๋ฐ๋ผ์ 'NEXT_PUBLIC'์ ์ฌ์ฉํ์ง ์์๋ค.const ENV = { SUPABASE_URL: process.env.NEXT_PUBLIC_SUPAB..
์์ ์์ผ, ์๊ฐ๋ง ๋ณด์ฌ์ฃผ๊ธฐ ์์์ผ๋ถํฐ ์์const localizer = dateFnsLocalizer({ format, parse, startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 1 }), // ์์์ผ ์์ getDay, locales,}); ์๊ฐ๋ง ๋ณด์ฌ์ฃผ๊ธฐ RBC ์ฃผ์ ์ปดํฌ๋ํธ ์ข์ธก ์๋จ์ ๋ ์ง ๋๊ธฐ๊ธฐ / ์ค๋ ๋ ์ง ๋ฒํผ์ ๋์ด ๋ฌ๋ ฅ์ ์ด๋์ ๊ตฌํํ๊ณ ์ถ์๋ค.์ฌ๋ก๋ฅผ ์ฐพ๋ค๋ณด๋ RBC์ ์์๋ค์ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ก ์ชผ๊ฐ์ ์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ ์๊ฒ๋์๋ค. ์ชผ๊ฐค ์ ์๋ ์ฃผ์ ์ปดํฌ๋ํธ๋ ๋ค์๊ณผ ๊ฐ๋ค.components={{ toolbar, // ์๋จ ํด๋ฐ event, // ์ด๋ฒคํธ ์ ..
RBC์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋ฅ ๋ฐ ์ค์ ์ ์ผ์ถ ๋ง๋ฌด๋ฆฌ๋๊ณ , ์ค์ ๋ฐ์ดํฐ์ ์ฐ๋ํ๊ณ ์ ํ๋ค.supabase ํ ์ด๋ธ์ ์ ์ฉ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ์บ๋ฆฐ๋์ ์ถ๋ ฅํด๋ณด์๋ค.supabase ํ ์ด๋ธ ์ฐ๊ฒฐ ์ค์ ์ ๊ฐ๋ตํ ์๋์ ๊ฐ์ด ์งํํ๋ค.ํ์ด์ง, ์ปดํฌ๋ํธ ์์ฑ ๋ฐ ์ฐ๊ฒฐsupabaseClient ์์ฑ (supabaseClient.ts)plans ํ ์ด๋ธ ๊ฐ ๋ถ๋ฌ์ค๊ธฐ ๋ก์ง (supabaseApi.ts)plans ํ์ ์ง์ ์ปดํฌ๋ํธ์์ ํธ์ถ : useState, useEffect new Date() ์ด๊ธฐ๊ฐ์ ๋น ๋ฐฐ์ด๋ก ๋์ด ์ด๋ฒคํธ ์ํ๋ฅผ ๊ด๋ฆฌํ์๋ค.ํ์ง๋ง state์ ํ์ ์ ๋ก ์ง์ ํ์์ ๋ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ์๋ฌ๋ ๋ค์๊ณผ ๊ฐ์ด ๋ํ๋ฌ๋ค."์ด ํธ์ถ๊ณผ ์ผ์นํ๋ ์ค๋ฒ๋ก๋๊ฐ ์์ต๋๋ค. '"start"' ํ์์~ , '"end"' ..
RBC์ ๋ ๋๋ง ๋ฐฉ๋ฒ(CRS)๊น์ง ํ์ ํ์ฌ ์บ๋ฆฐ๋ ํํ๋ฅผ ์ถ๋ ฅํ์๋ค!RBC์ ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ์ด๋ฉฐ, ์ปค์คํฐ๋ง์ด์ง์ ์ํ ๋ด์ฉ๋ค์ ์ ๋ฆฌํ๋ค. RBC์ ๊ธฐ๋ณธ ์คํ์ผ RBC npm ๋ฌธ์๋ฅผ ์ฝ๋ ์ค SASS์ ๋ํด ์๊ฒ ๋์๋ค.๋ฌธ์์๋ ๋ค์๊ณผ ๊ฐ์ด ๋์์๋ค. ์ด ๋ง์ธ์ฆ์จ, RBC์ ๊ธฐ๋ณธ ์คํ์ผ์ด ์ ์ฉ๋ CSS ํ์ผ(react-big-calendar.css)์ด ์๊ณ ์ด๋ฅผ ๋ฐ๋ก import ํ์ฌ ์ ๊ทผํ ์ ์๋ค.ํ์ง๋ง ์คํ์ผ์ ์ปค์คํฐ๋ง์ด์งํ๋ ค๋ฉด SASS ํ์ผ์ ์์ ํด์ผ ํ๋ค.์ด๋ ๊ฒ ์์ ํ SASS ํ์ผ์ ์๋ก์ด CSS ํ์ผ์ ๋น๋ํ๋ฉฐ ์ง์ import ํ๋ค. ์ด๊ธฐ ์ธํ ์ค ์๋์ ๊ฐ์ด ์บ๋ฆฐ๋ ์ปดํฌ๋ํธ์ ์ธ๋ผ์ธ ์คํ์ผ ์์๋ฅผ ์ ์ฉ์์ผฐ๋ค.๊ณต์ ๋ฌธ์์ ๋์์๋ฏ ๋ฌ๋ ฅ์ ์ปจํ ์ด๋ ์์์ ๋์ด๋ฅผ ์ฃผ์ด์ผ ํ๋ฉด์ ๋ํ๋๊ธฐ ๋..
๋ฆฌ์กํธ ๋น ์บ๋ฆฐ๋(RBC)๋ฅผ ๊ตฌํํ๊ธฐ ์ , ์บ๋ฆฐ๋๋ ์ฌ์ฉ์์์ ์ํธ์์ฉ์ด ๋ง์ด ํ์ํ๊ธฐ ๋๋ฌธ์(์ด๋ฒคํธ ํธ๋ค๋ฌ) ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์ฌ์ผ ํ๋ค๊ณ ์๊ฐํ๋ค.์ค์ ๋ก "use client"๋ฅผ ๋ช ์ํ์ง ์์ผ๋ฉด ์๋์ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค. CSR์ธ ์ด์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค๋ ๊ฒ์ ํํ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์ฌ์ผ ํ๋ค๋ ๊ฒ์ธ๋ฐ.. ๐ค๊ทธ ์ด์ ๊ฐ ๋ฌด์์ผ๊น?1. RBC๋ ๋ด๋ถ์ ์ผ๋ก ํด๋์ค ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉ์ฐ์ ์ฌ์ง๊ณผ ๊ฐ์ ์ค๋ฅ๋ ํด๋์ค ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์๋ฒ ์ปดํฌ๋ํธ์์ ๋ ๋๋งํ๋ ค๊ณ ํ ๋ ๋ฐ์ํ๋ค.ํด๋์ค ์ปดํฌ๋ํธ๋ ์๋ฒ ์ปดํฌ๋ํธ์์ ๋์ํ ์ ์๋๋ก ์ค๊ณ๋์ง ์์๋ค.๋ฐ๋ผ์ RBC๋ Next.js์ ์๋ฒ ์ปดํฌ๋ํธ ํ๊ฒฝ์์๋ ์ด๋ฅผ ์ง์ ์คํํ ์ ์๋ค. 2. ์ด๋ฒคํธ ํธ๋ค๋ง์ผ์ ํด๋ฆญ, ๋๋๊ทธ ๋ฑ ์ฌ์ฉ์์์ ์ํธ์์ฉ์ด ํ์ํ..
RBC npm ๋ฌธ์๋ฅผ ์ฝ๋ ์ค, ๋ ์ง ํ์์ ์ง์ ํด์ผ ํ๋ค๋ ์ ์ ์์๋ค.RBC๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ ์ง ๋ฐ ์๊ฐ์ ์ฒ๋ฆฌํ์ง ์๊ธฐ ๋๋ฌธ์ํ์์ ์ง์ ํ๊ธฐ ์ํด ๋ค ๊ฐ์ง์ ํ๋ฌ๊ทธ์ธ์ ์ง์ํ๊ณ ์๋ค.๋๋ง์ ์๊ฐ ์ ๋ฆฌRBC๋ ๋ฌ๋ ฅ ํํ๋ฅผ ๋ง๋ค์ด ์ค ๋ฟ,ํด๋น ์ซ์๊ฐ ๋ ์ง๋ฅผ ๋ปํ๋ ๋ฐ์์ ์๊ฒ ํด์ฃผ๋ ๊ฒ์ ํ๋ฌ๊ทธ์ธ์ ์ญํ ์ด๋ค.์ฆ, ์บ๋ฆฐ๋์ ์ฌ์ฉ์ ์ฌ์ด์์ ์บ๋ฆฐ๋์๊ฒ๋ ๋ฌธ์์ด๋ก ์ ๋ฌ, ์ฌ๋์๊ฒ๋ ๋ ์ง๋ก ์ ๋ฌํด ์ฃผ๋ ํต์ญ๊ฐ ์ญํ ์ด๋ค. RBC์์ ์ง์ํ๋ ๋ค ๊ฐ์ง ํ๋ฌ๊ทธ์ธ์ ๋น๊ตํด๋ณด์๋ค.๊ณต์๋ฌธ์: Moment.js , Globalize.js , date-fns , Day.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฒ๋ค ํฌ๊ธฐ์ฑ๋ฅTree Shaking ์ง์TypeScript ์ง์ํ์์กด ์ง์Moment.js์ฝ 260KB๋๋ฆผXO(moment-timezone ํ..
๋ฆฌ์กํธ ๋น ์บ๋ฆฐ๋(RBC)๋ฅผ ํ๋ก์ ํธ์ ์ ์ฉํ๊ธฐ ์ , ํ์ ๊ฒธ ์ฐ์ต์ผ๋ก ๊ฐ์ธ ํ์ผ์ ์์ฑํ๋ค.์ด๊ธฐ ์ธํ ๋ถํฐ ๋๊ด์ด ์์๋๋๋ฐ...ํ์ ์ ์ ์ฉํ๊ธฐ ์ํด ๊ธฐ๋กํด๋ณธ๋ค. ์งํ ์ํฉ๋ฆฌ์กํธ ๋น ์บ๋ฆฐ๋ ์ค์นpnpm dev์ค๋ฅ : You forgot to add 'mini-css-extract-plugin' plugin 'please read' ๋งํฌ๋ก ๋ค์ด๊ฐ๋ณด๋ 'CSS ์ฝ๋๊ฐ ํฌํจ๋ JS ํ์ผ ๋ณ๋ก CSS ํ์ผ์ ์์ฑ' ๋ฌด์จ ๋ง??Webpack์ ๋ชจ๋ ์ฝ๋(JS, CSS ๋ฑ)๋ฅผ ๋ฒ๋ค๋งํด์ ํ๋์ JavaScript ํ์ผ๋ก ๋ง๋ฌํ์ง๋ง ์ด๋ ๊ฒ ํ๋ฉด CSS๊ฐ JS ๋ฒ๋ค์ ํฌํจ๋์ด ๋ธ๋ผ์ฐ์ ์์ ๋ก๋ฉํ ๋ ์ต์ ํ๋์ง ์์ ์ ์์ mini-css-extrant-plugin ์ ์ฉ [๋ฆฌ์กํธ ํ๊ฒฝ] ์๋๋ ๋ฆฌ์กํธ ํ๊ฒฝ์์ min..
์ต์ข ํ๋ก์ ํธ ํต์ฌ ๊ธฐ๋ฅ ๋ถ์์ ํตํด ์ ํด์ง ์ฃผ์ ๋ '์ฌ๋ ๋ณ ์ผ์ ๊ด๋ฆฌ ์๋น์ค'ํต์ฌ๋๋ ๊ธฐ๋ฅ ์ค '์บ๋ฆฐ๋'๋ฅผ ๊ตฌํํ๊ฒ ๋์๋ค.์บ๋ฆฐ๋๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ง์ ๊ตฌํํ๊ธฐ ๋ก ๋๋ ์ ์๋ค. ์บ๋ฆฐ๋ ๊ตฌํ ๋ฐฉ๋ฒ 2๊ฐ์ง ๋น๊ต๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋น๊ต์ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๊ตฌํ์ด ๊ฐ๋ฅํ์ง๋ง ์ปค์คํฐ๋ง์ด์ง์ด ์ด๋ ต๋ค.์ง์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ปค์คํฐ๋ง์ด์ง์ด ์์ ๋กญ์ง๋ง ๊ตฌํ์ด ์ค๋ ๊ฑธ๋ฆฐ๋ค. ์บ๋ฆฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ง์ ๊ตฌํํ๋ ๋ฐฉ์์ ๋น๊ตํด๋ณด์๋ค. ์๊ฐ ์์ ์งํํด์ผ ํ๋ ํ์ ํ๋ก์ ํธ์ด๊ธฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ๋ง์ฅ์ผ์น ! ์บ๋ฆฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋น๊ต์๋๋ ๊ณต์ ๋ฌธ์์์ ๋ณผ ์ ์๋ ๋ฌ๋ ฅ๋ค์ด๋ค.๋๋ณด๊ธฐ1. Toast UI Calendar 2. React-Calendar 3. React-Big- Calendar 4. FullCalend..
์ต์ข ํ๋ก์ ํธ ์์ ๋จ๊ณ์์ ์ฃผ์ ์ ํ์ด์ง ๊ตฌ์ฑ, ์ ์ ํ๋ก์ฐ ๋ฑ ์ผ์ถ ๊ฐ๋ฅ์ด ์ ํด์ก๋ค.๋์์ด๋๋ถ๊ณผ ๋ฏธํ ์ ์๋๊ณ ์ ๋ฆฌํด ๋ณธ ํต์ฌ ๊ธฐ๋ฅ์ ๊ธฐ๋กํ๋ค.3์กฐ ๋ ธ์ ๋งํฌ3์กฐ ํผ๊ทธ์ ฌ ๋งํฌ ์ฐ๋ฆฌ ์กฐ์ ์ฃผ์ ๋ '์ฌ๋ ๋ณ ์ผ์ ๊ด๋ฆฌ ์๋น์ค' ์์ ์์๋์๋ค.๊ฐ์ธ์ด ์ฌ์ฉํ๋ ํ์ด์ง์ด๋ฉฐ (์ถํ ์์ ์๋น์ค๋ก ํ์ฅ ๊ฐ๋ฅ์ฑ ๋ค๋ถ)์ฌ์ฉ์๊ฐ ์ฃผ๋ณ ์ฌ๋๋ค์ ์ถ๊ฐํ๊ณ ๊ทธ ์ฌ๋๊ณผ์ ์ผ์ ์ ์ ๋ฆฌ, ๊ธฐ๋กํ๋ค๋ ์ ์์ ์ผ๋ฐ ์ผ์ ๊ด๋ฆฌ ์๋น์ค์๋ ์ฐจ๋ณ์ ์ ๋๊ณ ์๋ค. ๋ณดํต ์ผ์ ๊ด๋ฆฌ๋ ๋ชจ๋ฐ์ผ์์ ์ฃผ๋ก ์ฌ์ฉํ์ง๋ง, ์น ๊ฐ๋ฐ์ ์ฃผ๋ก ๋ฐฐ์ด ์ฐ๋ฆฌ๋ pc๋ฅผ ์ฐ์ ์ผ๋ก ๊ฐ๋ฐ, ์ถํ ๋ฐ์ํ/์ ์ํ์ ๊ณ ๋ คํ์ฌ ๋ชจ๋ฐ์ผ์์๋ ์ฌ์ฉ ๊ฐ๋ฅํ๋๋ก ์ด์ผ๊ธฐ ๋๋์๋ค. MVP ๊ตฌํ๋ฒ์ ์ค์ ๋ฐ ํต์ฌ ๊ธฐ๋ฅ MVP(์ต์ ํ์ ๊ธฐ๋ฅ)๋ ์๋ ๊ทธ๋ฆผ ์ค ๋นจ๊ฐ์์ผ๋ก ํ์ํ์์ผ๋ฉฐ์ฝ..