์ด๋ฒ ์ฅ์์๋State์ Props์ ๊ฐ๋
๊ณผ ์ฐจ์ด์ ์ ์์ธํ ๋ค๋ค๋ณผ ์์ ์
๋๋ค.์ฌ๋ฌ๋ถ์ React์ state์ ์ผ๋งํผ ์๊ณ ๊ณ์ ๊ฐ์ ? ๋์ ์ฐจ์ด๋ ๋ญ๊น์ ? ๊ฒฐ๋ก ๋ถํฐ ๋ณด์๋ฉด,state ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๋ํ๋ด๋ ๋ฐ์ดํฐ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๊ด๋ฆฌ๋๋ ๋์ ์ธ ๋ฐ์ดํฐ๋ก, ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ฉฐ ์ฃผ๋ก UI์ ๋์์ ์ ์ดํฉ๋๋ค.props ์ธ๋ถ๋ก๋ถํฐ ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ก ์ ๋ฌ๋๋ ์ฝ๊ธฐ ์ ์ฉ ๋ฐ์ดํฐ๋ก, ์ฃผ๋ก ์ปดํฌ๋ํธ ๊ฐ ๋ฐ์ดํฐ ์ ๋ฌ์ ์ฌ์ฉ๋ฉ๋๋ค. ์ฐ๋ฆฌ๊ฐ ๋ฐ์ดํฐ ๋ณ๊ฒฝ์ด ์๋ ์น ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ์ถ๋ค๊ณ ๊ฐ์ ํ์ ๋ state๊ฐ ์์๋ค๋ฉด.์ด๋ฅผ ์ํด์ ํ์ด์ง์ ์๋ ๋ฐ์ดํฐ ๋ถ๋ถ์ด ๋ณ๊ฒฝ๋์์ ๋๋ง๋ค DOM์ ์ ๊ทผํ์ฌ ์ง์ ์์ ํด ์ฃผ์์ ๊ฒ์
๋๋ค.๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋งํผ ๋น์ฐํ ํ๋ฉด๋ ๋ณ๊ฒฝ๋์ด์ผ ํ๋๊น์ ์ฌ๊ธฐ์ ์ ..
๊ธฐ์ด ํ๋ก์ ํธ์์ ์ฒ์์ผ๋ก Jotai๋ฅผ ์ฌ์ฉํด๋ณด์๊ณ , ๊ทธ ๊ฒฝํ์ ๋ฐํ์ผ๋ก Jotai์ ์ฅ์ ๊ณผ ๋จ์ ์ Context์ Zutand๋ฅผ ๋น๊ตํด๋ณด๋ ค ํฉ๋๋ค. Jotai ์ฌ์ฉ ํ Context์ Zustand์์ ๋น๊ต ๐ซ ๐ Jotai ์ฌ์ฉ ์์ import React from 'react';import { atom, useAtom } from 'jotai';// atom ์ ์const countAtom = atom(0);function Counter() { const [count, setCount] = useAtom(countAtom); return ( ์นด์ดํธ: {count} setCount(count + 1)}>์ฆ๊ฐ );}export default function ..
var์ let์ ์ฃผ์ ์ฐจ์ด์ ์ ๋ํด์ ์์๋ด
์๋ค ! ๐์ค์ฝํ(Scope)var: ํจ์ ์ค์ฝํ๋ฅผ ๊ฐ์ง๋๋ค. ์ฆ, ํจ์ ๋ด์์๋ง ์ ํจํ๋ฉฐ, ํจ์ ์ธ๋ถ์์๋ ์ ๊ทผํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ํจ์ ๋ด๋ถ์์ ์ ์ธ๋ ๊ฒฝ์ฐ, ๋ธ๋ก({}) ๋ด์์ ์ ์ธ๋ ๊ฒ๊ณผ ์๊ด์์ด ํจ์ ์ ์ฒด์์ ์ ๊ทผ ๊ฐ๋ฅํฉ๋๋ค.let: ๋ธ๋ก ์ค์ฝํ๋ฅผ ๊ฐ์ง๋๋ค. ์ฆ, ์ค๊ดํธ({})๋ก ๋ฌถ์ธ ๋ธ๋ก ๋ด์์๋ง ์ ํจํ๋ฉฐ, ๋ธ๋ก ์ธ๋ถ์์๋ ์ ๊ทผํ ์ ์์ต๋๋ค.๋ณ์ ํธ์ด์คํ
(Variable Hoisting)var: ์ ์ธ์ด ํธ์ด์คํ
(๋ณ์ ์ ์ธ์ด ์ฝ๋์ ์ต์๋จ์ผ๋ก ๋์ด์ฌ๋ ค์ง๋ ํ์)๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด๊ธฐํ๋ ํธ์ด์คํ
๋์ง ์์ undefined ๊ฐ์ ๋ฐํํ ์ ์์ต๋๋ค.let: ์ ์ธ์ ํธ์ด์คํ
๋์ง๋ง, ์ด๊ธฐํ๊ฐ ํธ์ด์คํ
๋์ง ์์์ ์ด๊ธฐํ ์ ์ ๊ทผํ๋ฉด ReferenceEr..
๐ช ๋ค์ด๊ฐ๋ฉฐNext.js์์๋ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง(SSR)์ ํตํด ์ฌ์ฉ์๊ฐ ํ์ด์ง์ ์ ๊ทผํ๊ธฐ ์ ์ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฏธ๋ฆฌ ๊ฐ์ ธ์ ํ์ด์ง๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ด ๊ณผ์ ์๋ ๋ ๊ฐ์ง ์ค์ํ ์์๊ฐ ์๋ํฉ๋๋คAPI ํธ๋ค๋ฌ (@api/article.ts)ํ์ด์ง ์ปดํฌ๋ํธ (@pages/community/index.tsx)์ด ๋ ์์๊ฐ ์ด๋ป๊ฒ ์ํธ์์ฉํ์ฌ ๋์ ์ฝํ
์ธ ๋ฅผ ํจ์จ์ ์ผ๋ก ์ ๊ณตํ๋์ง ์ดํด๋ณด์ โญ๏ธ1. @api/article.ts์ญํ : API ํธ๋ค๋ฌ๊ธฐ๋ฅ: ํด๋ผ์ด์ธํธ์ GET, POST, DELETE ์์ฒญ์ ์ฒ๋ฆฌํ๊ณ , ์ธ๋ถ API๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ํธ์์ฉํ์ฌ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋ ์์ ํฉ๋๋ค.์ด๋ ๋ฐฑ์๋์์ ๋ฐ์ดํฐ ์ฒ๋ฆฌ๋ฅผ ๋ด๋นํฉ๋๋ค.์์: getArticles() ํจ์๋ ๊ฒ์๊ธ ๋ชฉ๋ก์ ๊ฐ์ ธ์ JSON ํ..
Tailwind CSS์์ ์ ํธ๋ฆฌํฐ ํด๋์ค์ ๋๊ดํธ []๋ฅผ ์ฌ์ฉํ๋ฉด ๋ง์ถค ๋๋ ๋์ ๊ฐ์ ์ ์ฉํ ์ ์๋ ๋ฐ๋ฉด,๋๊ดํธ๋ฅผ ์ฌ์ฉํ์ง ์์ผ๋ฉด ์ฌ์ ์ ์๋ ํ์ค ์ ํธ๋ฆฌํฐ ๊ฐ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋๊ดํธ []๋ฅผ ์ฌ์ฉํ์ง ์๋ ์์ (์ฌ์ ์ ์๋ ํด๋์ค ์ฌ์ฉ)์ด ๊ฒฝ์ฐ, Tailwind์ ์ฌ์ ์ ์๋ ๊ฐ์ ์ฌ์ฉํ์ฌ ๋๋น, ๋ฐฐ๊ฒฝ์, ํจ๋ฉ ๋ฑ์ ์ค์ ํฉ๋๋ค. ์ฌ์ ์ ์๋ ์ ํธ๋ฆฌํฐ ํด๋์ค w-32: ๋๋น๋ฅผ 8rem(128px)์ผ๋ก ์ค์ ํฉ๋๋ค.bg-blue-500: ์ฌ์ ์ ์๋ ํ๋์์ ๋ฐฐ๊ฒฝ์์ผ๋ก ์ ์ฉํฉ๋๋ค.p-4: 1rem(16px)์ ํจ๋ฉ์ ์ถ๊ฐํฉ๋๋ค. ๋๊ดํธ []๋ฅผ ์ฌ์ฉํ๋ ์์ (๋ง์ถค ๊ฐ ์ฌ์ฉ)์ฌ๊ธฐ์๋ []๋ฅผ ์ฌ์ฉํ์ฌ Tailwind๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ํ์ง ์์ ๋ง์ถค ๊ฐ์ ์ ์ฉํฉ๋๋ค. ๋ง์ถค ์ ํธ๋ฆฌํฐ ํด๋์ค w-[200..
Tailwind CSS ์ฌ์ฉํด๋ณด๊ธฐTailwind CSS(opens in a new tab) ๋ ?Next.js์ ๋งค์ฐ ์ ์ด์ธ๋ฆฌ๋ ์ ํธ๋ฆฌํฐ ์ฐ์ CSS ํ๋ ์์ํฌ์
๋๋ค.์ฅ์ ์ ํธ๋ฆฌํฐ ์ฐ์ ํ๋ ์์ํฌ: Tailwind CSS๋ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ์คํ์ผ๋ง์ ๊ฐ๋ฅํ๊ฒ ํ๋ฉฐ, ํ๋ก์ ํธ ์ ๋ฐ์ ๊ฑธ์ณ ์ผ๊ด๋ ์คํ์ผ์ ์ ์งํ๋ฉด์๋ ์ฝ๊ฒ ๋์์ธํ ์ ์์ต๋๋ค.๋ง์ถคํ ๊ฐ๋ฅ: Tailwind CSS๋ ๋ชจ๋ ๋์์ธ ์์คํ
์ ๋ง๊ฒ ํ์ฅ ๋ฐ ๋ง์ถค์ค์ ์ด ๊ฐ๋ฅํด, ๋ค์ํ ํ๋ก์ ํธ์ ์ ์ฐํ๊ฒ ์ ์ฉํ ์ ์์ต๋๋ค.๋ค์ํ ํ๋ ์์ํฌ์ ํตํฉ: Next.js, Nuxt.js, Vue.js ๋ฑ๊ณผ ์ ํตํฉ๋๋ฉฐ, PostCSS๋ฅผ ์ง์ํ์ฌ ์๋ ์ ๋์ด ์ง์ ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ํ์ฑํํ ์ ์์ต๋๋ค.์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ๋ถ๋ฆฌ: Ta..