Codingbear
@codingbeer
Reviews Written
11
Average Rating
4.2
Posts
Q&A
์ฌ์ ์ ๋ฑ๋ก ๋ฒํธ๊ฐ ์๋ ๊ฒฝ์ฐ๋ ์ด๋ป๊ฒ ํ์ฃ ?
๊ฐ๋ฐ๋ชฉ์ ์ผ๋ก ์์์ ์ผ๋ก ๋น์ฆ์ฑ ๋ฑ๋ก์ด ๊ฐ๋ฅํฉ๋๋ค. ์ฑ ์ค์ ์์ ๋น์ฆ๋์ค ํญ๋ชฉ์ '๋น์ฆ ์ฑ ๋ฑ๋ก' ๋งํฌ๋ก ๋ค์ด๊ฐ๋ฉด ๊ฐ์ธ ๊ฐ๋ฐ์ ๋น์ฆ์ฑ ํญ๋ชฉ์ '๊ฐ์ธ ๊ฐ๋ฐ์ ๋น์ฆ ์ฑ ์ ํ' ๋ฒํผ์ด ์์ด์ ๊ทธ๊ฑธ ํด๋ฆญํ๊ณ ๋น์ฆ์ฑ ์ ํ ๋ชฉ์ (ํ์) ๋์ ์ด๋ฉ์ผ ํ์ ๋์ ์ ํํ์๋ฉด ์์ค ๋ก๊ทธ์ธ ํ ๋ ์ด๋ฉ์ผ ์ ๋ณด๋ฅผ ๋ฐ์ ์ ์์ ๊ฒ๋๋ค.
- 0
- 2
- 39
Q&A
๋ฆฌ์กํธ ์ค์น์ vite์ create React APP ์ฐจ์ด
CRA(Create React App)์ผ๋ก ์ฌ์ฉํด๋ ์๊ด์ ์์ต๋๋ค.ํ์ง๋ง ์์ฆ์ CRA ๋๋ฆฐ ๋น๋ ์๋์ ๋ณต์กํ ๋น๋ ์ค์ ๋ฑ์ ํ๊ณ ๋์..Vite๋ฅผ ๋ง์ด ์ฌ์ฉํฉ๋๋ค. vite ์ฌ์ฉํ๋ฉด CRA ์ฌ์ฉ ์ ์ํ๊ฒ ๋ฉ๋๋ค.
- 0
- 3
- 63
Q&A
๊ฐ์์ ๋ง๋ค์ด์ง ์ฝ๋๊ฐ ๋ฌ๋ผ์
ํจ์(๋ฉ์๋)๋ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์กฐ๋ถํดํ ๋น(destructuring assignment)ํ์ฌ ๊ฐ์ ธ์จ ์ฐจ์ด์ ๋๋ค.React ์ ReactDOM ์ ๊ฐ์ ธ์(import) ReactDOM.createRoot(), React.StrictMode ๋ฅผ ์ฌ์ฉํ๋๊ฐ?์๋๋ฉด ๊ตฌ์กฐ๋ถํดํ ๋น ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ createRoot(), StrictMode ๋ก๋ง ์ฌ์ฉํ๋๊ฐ์ ์ฐจ์ด์ ๋๋ค.React์์๋ ์ด๋ฐ ๊ตฌ์กฐ๋ถํดํ ๋น์ด ๋ง์ด ์ฌ์ฉ๋๋ ๊ผญ ํด๋น ๋ฌธ๋ฒ์ ์ตํ๋์๋ ๊ฒ ์ข์ต๋๋ค.
- 0
- 3
- 31
Q&A
67๊ฐ ์ํ์ ๋ฐ์ดํธ ๊ฐ์ ์ค ๊ถ๊ธํ ์
Prop Drilling ์ ๋ฐฐ์ฐ์ จ๋์? ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ก props๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๊ณผ์ ์์ ๋ฐ์ดํฐ๊ฐ ํ์์น ์์ ์ค๊ฐ ์ปดํฌ๋ํธ๋ค๋ ํด๋น props๋ฅผ ์ ๋ฌ ๋ฐ๋ ํจํด์ธ๋ฐ.. ์ข์ ํจํด์ ์๋์ฃ .. ๊ทธ๋์ ๊ฐ๊น๊ฒ๋ Context API๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ธ ๊บผ๊ตฌ์. ์ข ๋ ๋ค์ด๊ฐ๋ฉด ์ปค์คํ ํ , ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ redux, zustand ์ฌ์ฉํ ๊ฒ๋๋ค.
- 0
- 3
- 46
Q&A
isLoading ๊ธฐ๋ฅ ์ถ๊ฐํ๋๋ฐ, ์กด์ฌํ์ง ์๋ ์ผ๊ธฐ ์ ๋๋ค.
isLoading ์ํ๋ localStorage.getItem() ๊ฐ ๋น๋๊ธฐ๊ฐ ์๋๋ฏ๋ก ์ ๋๋ก ๊ฐ์ ๋ณ๊ฒฝํ ์ ์์ด์.๊ณ์ true ๋ก '๋ฐ์ดํฐ ๋ก๋ฉ์ค...' ๋ง ๋ฐํํ ์ ์์ต๋๋ค.์ฐ์ ์ isLoading ์ํ๊ฐ์ false ๋ก ์ด๊ธฐํ ํ๊ณ ์ useEffect ๋ด์์ localStorage.getItem('daiary') ํ๊ธฐ์ ์ true๋ก ๋ณ๊ฒฝํ๊ณ ์ฝ๋๋ฅผ ์งํํด ๋ณด์ธ์. const [isLoading, setIsLoading] = useState(false); useEffect(() => { setIsLoading(true); const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const parsedData = JSON.parse(storedData); if (!Array.isArray(parsedData)) { setIsLoading(false); return; } let maxId = 0; parsedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; console.log(parsedData); dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); }, []);
- 0
- 3
- 47
Q&A
tsconfig.app.json์์ ์๋ฌ๋ฐ์
TypeScript ๋ฒ์ ์ด 7, 6์ด ๋์๋์?? ํ์ฌ ๋ฒ์ ์ด 5.9.x ์ธ๊ฑธ๋ก ์๊ณ ์๋๋ฐ..baseUrl , paths ์ค์ ๋ถ๋ถ์ tsconfig.json ํ์ผ๊ณผ tsconfig.app.json ํ์ผ์๋ง ์ค์ ํ์๋์ง ํ์ธํด ๋ณด์ธ์. ํน์ tsconfig.node.json ์ ์ค์ ํ์๋ค๋ฉด ๊ทธ๊ณณ์๋ ํด๋น ์ค์ ์ ์ ๊ฑฐํ์ธ์.tsconfig.json ํ์ผ์ baseUrl, paths ์ค์ ์ ๋ค์๊ณผ ๊ฐ์์ง ํ์ธํ์ธ์.{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], /* ํ ํ๋ฆฟ ์ฝ๋์ ์ถ๊ฐ๋ ๋ถ๋ถ : Path Alias */ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }
- 0
- 3
- 74
Q&A
15๋ฒ์ ์ดํ์ (searchParams,Params) Promiseํ์ ๋ช ์ํ ๋ฆฌ์กํธ ์์คํ์ค ์ค์ต ์ง๋ฌธ
Next 15๋ฒ์ ๋ถํฐ cookies, headers, params, searchParams, draftMode ๋ฑ์ด ๋น๋๊ธฐ API ํ ๋์์ต๋๋ค.๋ฐ๋ผ์ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ์ฝ๋๋ฅผ ์ฒ๋ฆฌํด์ผ ํ๋ฉฐ ๋ฐ๋ผ์ ํจ์์ async๋ฅผ ์ ์ธํด์ค์ผ ํฉ๋๋ค. ๋ง์ฝ ์ผ์์ ์ธ ๋๊ธฐํ ๋ฐฉ์์ผ๋ก ์ฒ๋ฆฌํ๊ณ ์ ํ๋ค๋ฉด ์๋ ์ฝ๋์ ๊ฐ์ด React์ use() ์ฌ์ฉํด ๋ณด์ธ์.'use client'; import { use } from 'react'; export default function Page({ searchParams }: { searchParams: Promise }) { const { q } = use(searchParams); //.... ์๋ต }
- 1
- 3
- 95
Q&A
`2.4 Shadcn/ui๋ฅผ ์๊ฐํฉ๋๋ค` ์์ ๊ถ๊ธํ ๋ถ๋ถ์ด์์ต๋๋ค.
์๋ง Color Highlight ๋ Colorize ํ์ฅ ํ๋ก๊ทธ๋จ์ผ๋ก ๋ณด์ ๋๋ค.
- 0
- 2
- 85
Q&A
ํ์๊ฐ์ ๊ตฌํ ๊ด๋ จ ์ง๋ฌธ
Supabase ์ ํด๋น ํ๋ก์ ํธ์์Authentication ๋ฉ๋ด ๊ตฌ์ฑ์ Configuration > Sign In/ Providers ํญ๋ชฉ์์ Confirm email ์ต์ ํญ๋ชฉ์ ์ฐพ์ ์ ์์ต๋๋ค. (์ฌ์ง)
- 1
- 3
- 49
Q&A
์๋ฐ์คํฌ๋ฆฝํธ ์ง๋ฌธ
์์ด์คํฌ๋ฆผ ์ค์ ๊ธฐ๋ณธ์ด ๋๋ ์์ด์คํฌ๋ฆผ์ด ๋ฐ๋๋ผ ์์ด์คํฌ๋ฆผ์ด๋ฏ์ด๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ผ๋ ์๋ฏธ๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ์ ํต์ฌ, ๊ทผ๋ณธ์ด ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ผ๋ ๋น์ ์ ์๋ฏธ๋ฅผ ๋ํ๋ ๋๋ค. ์ฆ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ ์์ํฌ๋ฑ์ด ํฌํจ๋์ง ์์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ผ๋ ํจ์ถ์ ์ธ ์๋ฏธ์ ๋๋ค.๊ทธ๋ฌ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ์ ๋ฐฐ์ฐ์ค๋ ค๋ฉด Vanilla JavaScript ๋ฐฐ์ฐ์ ๋ ๋ฉ๋๋ค.
- 1
- 2
- 59




