Transparent White Star

๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ๊ณต๋ถ€ ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป
์ด๋ฒˆ ์žฅ์—์„œ๋Š”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..
yyezzzy
'๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก