์ธ๋„ค์ผ Week 3 Recap as a Frontend Intern @Daangn 2์ฃผ์ฐจ ๊ธˆ์š”์ผ์—, ์ฒซ ์›”๊ธ‰์ด ๋“ค์–ด์™”๋‹ค.๋‚œ์ƒ์ฒ˜์Œ์œผ๋กœ ์‹ญ์ผ์กฐ๋„ ๋‚ด๊ณ , ๋ถ€๋ชจ๋‹˜๊ณผ ์กฐ๋ถ€๋ชจ๋‹˜๋“ค๊ป˜ ์šฉ๋ˆ๋„ ๋ณด๋‚ด๋“œ๋ฆฌ๊ณ , ์ฃผ๋ง์—” ๊ฐ€์กฑ๋“ค๊ณผ ์ข‹์€ ๊ณณ์—์„œ ์‹์‚ฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.๊ทธ๋ ‡๊ฒŒ ์ ์  ์ปจ๋””์…˜์„ ํšŒ๋ณตํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ์ด๊ฒŒ ๊ทธ ๊ธˆ์œต์น˜๋ฃŒ์ธ๊ฐ€..? 3์ฃผ์ฐจ์—๋Š” ์ฒซ ๋ฌธํ™”์˜ ๋‚ ์ด ์žˆ์—ˆ๊ณ , ๋ฒ„๋””๊ฐ€ 3์ผ๊ฐ„ ์ถœ์žฅ์„ ๋‹ค๋…€์˜ค์‹œ๋ฉด์„œ ์œ ๋‚œํžˆ ๋น ๋ฅด๊ฒŒ ์‹œ๊ฐ„์ด ํ˜๋ €๋‹ค.ํŒ€ ์‹ฑํฌ๋Š” ๋…ธ์…˜์„ ํ†ตํ•ด ๋น„๋™๊ธฐ๋กœ ๋งž์ท„๊ณ , ๋ฒ„๋””๋Š” ํ‹ˆํ‹ˆ์ด ๋ฆฌ๋ทฐ์™€ ์ฝ”๋ฉ˜ํŠธ๋ฅผ ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉฐ ์ง€์†์ ์œผ๋กœ ์„œํฌํŠธํ•ด์ฃผ์…จ๋‹ค.๋‹ค์Œ ์ฃผ๋Š” ์—ฐํœด๊ฐ€ ์ดํ‹€์ด๋‚˜ ์žˆ์–ด ์ž์นซ ๋ฃจ์ฆˆํ•ด์งˆ ์ˆ˜ ์žˆ๋Š” ์ฃผ๊ฐ„์ผ ๋“ฏํ•˜์ง€๋งŒ, ๊ทธ๋Ÿด์ˆ˜๋ก ๋” ์˜ค๋žซ๋™์•ˆ ์ฑ…์ƒ ์•ž์— ๋จธ๋ฌผ๋ฉฐ ์ง‘์ค‘ํ•ด๋ณด๊ธฐ๋กœ ๋งˆ์Œ๋จน์—ˆ๋‹ค. ์ด ์ฃผ์˜ ํ‚ค์›Œ๋“œ ๋ณ„ ํšŒ๊ณ ! ์ž‘์€ ์„ฑ๊ณต | ๋‚˜๋Š” ํ‰์†Œ ํ•˜๊ณ  ์‹ถ์€ ์ผ๊ณผ ๊ธˆ๋ฐฉ ๋๋‚  ์ผ์„ ์•ž์— ๋‘์—ˆ์„ ๋•Œ, ์ „์ž๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ํŽธ์ด๋‹ค..
์ธ๋„ค์ผ Week 2 Recap as a Frontend Intern @Daangn 1์ฃผ์ฐจ์— ๋งค์ผ ํšŒ๊ณ ๋ฅผ ํ•˜๋ฉฐ, ๋ฉ˜ํƒˆ๊ณผ ์˜์š• ๊ด€๋ฆฌ๊ฐ€ ์ค‘์š”ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์˜ˆ์ƒํ–ˆ๋‹ค. ๋ฐ”๋กœ ์ „ ํšŒ๊ณ ์—๋„ ์ ์€ ๊ฒƒ์ฒ˜๋Ÿผ, ์ปจ๋””์…˜์— ๋ฌด๋ฆฌ๊ฐ€ ๊ฐ€์ง€ ์•Š๋Š” ์„ ์—์„œ, ๋‚˜์˜ ํŽ˜์ด์Šค๋ฅผ ๋นจ๋ฆฌ ์ฐพ์€ ๋’ค์— ์ ์ฐจ ์˜ฌ๋ฆฌ๋Š” ๊ฒŒ ์ค‘์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ž˜์„œ ๋งค์ผ ๋ชฉํ‘œ ๋‹ฌ์„ฑ ์ง€์ˆ˜์™€ ๊ธฐ๋ถ„ ์˜์š• ์ง€์ˆ˜๋ฅผ ์ ์ˆ˜๋กœ ๋ฉ”๊ธฐ๊ณ , ๊ทธ๋ž˜ํ”„๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ด๊ฒŒ ์ƒ๊ฐ๋ณด๋‹ค ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค๊ณ  ๋А๊ปด์ง„๊ฒŒ, ์ ์ˆ˜๋กœ ์˜ค๋Š˜ ํ•˜๋ฃจ๋ฅผ ํ‰๊ฐ€ํ•˜๋ ค๊ณ  ํ•˜๋‹ˆ ์˜คํžˆ๋ ค ์ด์„ฑ์ ์œผ๋กœ ํ•˜๋ฃจ๋ฅผ ๋˜๋Œ์•„๋ณผ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ง€๋‚˜์น˜๊ฒŒ ์ž์ฑ…์„ ํ•œ๋‹ค๊ฑฐ๋‚˜ ๋ฟŒ๋“ฏํ•ดํ•˜๋Š” ๋“ฑ์˜ ์—…๋‹ค์šด์ด ์—†๋Š” ๊ฒŒ ์ข‹๋‹ค๊ณ  ์ƒ๊ฐ๋˜์„œ ๊ฝค๋‚˜ ํšจ๊ณผ๋ฅผ ๋ดค๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์˜ค๋Š˜์˜ ์ž˜ํ•œ ์ ๊ณผ ๊ฐœ์„ ํ•  ์  ๋“ฑ์„ ์ ์€ ๋’ค์— ์ ์ˆ˜๋ฅผ ์‚ฐ์ •ํ–ˆ๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ์ ์ˆ˜๊ฐ€ ๋‚ฎ๋‹ค๊ณ  ํ•ด์„œ '์˜ค๋Š˜ ํ•˜๋ฃจ๋ฅผ ๋ง์ณค์–ด!' ๋ผ๋Š” ์ƒ๊ฐ๋„ ์•ˆ๋“ค๊ณ , ๊ทธ์ € ์˜ค๋Š˜์˜ ๋‚˜๋ฅผ ๋ƒ‰์ •ํ•˜๊ฒŒ ๋ฐ”๋ผ๋ณด๊ณ , ๋‚ด์ผ..
์ธ๋„ค์ผ Week 1 Recap as a Frontend Intern @Daangn ๋‹น๊ทผ ์•Œ๋ฐ”(Local Jobs)ํŒ€์—์„œ ํ”„๋กœ๋•ํŠธ ์—”์ง€๋‹ˆ์–ด, ๊ทธ ์ค‘์—์„œ๋„ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ด์œผ๋กœ ์ผํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์‚ฌ์‹ค ๋‹น๊ทผ ์•Œ๋ฐ”ํŒ€์˜ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ด ํฌ์ง€์…˜์€ ๋‚ด๊ฐ€ 7๊ฐœ์›” ์ „, ํ•™๊ต๋‹ค๋‹ˆ๋ฉฐ ์ค€๋น„๊ฐ€ ๋ถ€์กฑํ•œ ์ƒํƒœ๋กœ ์ฒ˜์Œ์œผ๋กœ ๋ฉด์ ‘์„ ๋ดค๋˜ ํฌ์ง€์…˜์ด๊ธฐ๋„ ํ•˜๋‹ค. ์ด์ „๋ถ€ํ„ฐ ๋‹น๊ทผ๊ณผ ์ž˜ ์–ด์šธ๋ฆฐ๋‹ค๋Š” ๋ง์„ ๋งŽ์ด ๋“ค์—ˆ๊ธฐ์— ๊ฐ€์žฅ ๊ฐ€๊ณ  ์‹ถ์€ ํšŒ์‚ฌ๊ฐ€ ๋‹น๊ทผ์ด์—ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ๋„ ๋‚˜์™€ ๊ฐ€์žฅ Fit ํ•˜๋‹ค๊ณ  ๋А๋‚€ ๋‹น๊ทผ ์•Œ๋ฐ”ํŒ€์ด ๋‚˜์˜ ์ฒซ๋ฒˆ์งธ์ด์ž ๋งˆ์ง€๋ง‰ ์ฑ„์šฉ ํ”„๋กœ์„ธ์Šค๋ผ๋‹ˆ! ๋‚˜๋งŒ ๋А๋ผ๋Š” ์šด๋ช…์ ์ธ ์ด์•ผ๊ธฐ ..~ ๋‹ค๋ฅธ ํšŒ์‚ฌ์—์„œ๋„ ํ•ฉ๊ฒฉ ์—ฐ๋ฝ์„ ๋ฐ›์•˜์ง€๋งŒ ๊ฐ€์ง€ ์•Š์•˜์„ ์ •๋„๋กœ ๋‹น๊ทผ์€, ๊ทธ ์ค‘์—์„œ๋„ ์•Œ๋ฐ”ํŒ€์€ ๋„ˆ๋ฌด๋‚˜ ํ•จ๊ป˜ํ•˜๊ณ  ์‹ถ์€ ํŒ€์ด์—ˆ๋‹ค. ํ”„๋กœ๋•ํŠธ์— ์ง„์‹ฌ์ธ ์—”์ง€๋‹ˆ์–ด๋Š” ์–ด๋–ป๊ฒŒ ์ผํ• ๊นŒ? โ‘  | ๋‹น๊ทผ ๋ธ”๋กœ๊ทธ๋‹น๊ทผ ํŒ€์ด ์ผํ•˜๋Š” ๋ฌธํ™”์™€ ๋ฐฉ์‹์„ ์†Œ๊ฐœํ•ด์š”.about.da..
์ธ๋„ค์ผ ํƒ€์ž…์ฑŒ๋ฆฐ์ง€ [์‰ฌ์›€] ๋‚œ์ด๋„ ์ค‘ ์ธ์‚ฌ์ดํŠธ ์ •๋ฆฌ โœ… 1. 14 - First๋ฌธ์ œ: ๋ฐฐ์—ด์˜ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์˜ ํƒ€์ž…์„ ์ถ”์ถœํ•˜๋ผ.type arr1 = ['a', 'b', 'c']type arr2 = [3, 2, 1]type head1 = First // expected to be 'a'type head2 = First // expected to be 3type cases = [ Expect, 3>>, Expect 123, { a: string }]>, () => 123>>, Expect, never>>, Expect, undefined>>,]type errors = [ // @ts-expect-error First, // @ts-expect-error First,]type First = T extends [] ? never : T[0];๋นˆ ๋ฐฐ์—ด..
์ธ๋„ค์ผ TypeScript์˜ ๋ชจ๋“ˆ ํ•ด์„ ์บ์‹ฑ ๋ฉ”์ปค๋‹ˆ์ฆ˜ ๋“ค์–ด๊ฐ€๋ฉฐTypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๊ฐ€ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋ชจ๋“ˆ ํ•ด์„ ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ๋งˆ์ฃผ์น˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. .d.ts ํŒŒ์ผ์˜ ์œ„์น˜๋ฅผ ๋ณ€๊ฒฝํ–ˆ๋‹ค๊ฐ€ ๋‹ค์‹œ ์›๋ž˜๋Œ€๋กœ ๋˜๋Œ๋ ธ์„ ๋•Œ, ์ด์ „์—๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋Š”๋ฐ ๊ฐ‘์ž๊ธฐ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐพ์•„๋ณด๋‹ˆ ์ด๋Š” TypeScript์˜ ๋ชจ๋“ˆ ํ•ด์„ ์บ์‹ฑ ๋ฉ”์ปค๋‹ˆ์ฆ˜ ๋•Œ๋ฌธ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŠธ์—์„œ๋Š” ์ด ๋ฉ”์ปค๋‹ˆ์ฆ˜์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ณ , ์‹ค์ œ ๊ฒฝํ—˜ํ–ˆ๋˜ ๋ฌธ์ œ์™€ ํ•ด๊ฒฐ ๊ณผ์ •์„ ๊ณต์œ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.๋ชจ๋“ˆ ํ•ด์„์ด๋ž€?๋ชจ๋“ˆ ํ•ด์„(Module Resolution)์€ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ import๊ฐ€ ๋ฌด์—‡์„ ์ฐธ์กฐํ•˜๋Š”์ง€ ์•Œ์•„๋‚ด๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์„ธ์Šค์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด:import { a } from "moduleA";์ด๋Ÿฐ import ๋ฌธ์—์„œ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” a์˜ ๋ชจ๋“  ์‚ฌ์šฉ์„ ๊ฒ€์‚ฌํ•˜๊ธฐ ์œ„ํ•ด moduleA๊ฐ€ ์ •ํ™•ํžˆ ..
์ธ๋„ค์ผ Promise.all()๊ณผ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ - ์ฝ˜์†” ๋กœ๊ทธ๋งŒ ์ถ”๊ฐ€ํ–ˆ๋Š”๋ฐ ๋ฒ„๊ทธ๊ฐ€ ๊ณ ์ณ์กŒ๋‹ค? ๐Ÿค” ๋ฌธ์ œ ์ƒํ™ฉReact ํ”„๋กœ์ ํŠธ์—์„œ Firebase Firestore๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ณผ์ •์—์„œ ์žฌ๋ฏธ์žˆ๋Š” ํ˜„์ƒ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์‹œ๋ฅผ ์™„๋ฃŒํ•œ ์‚ฌ์šฉ์ž๋“ค์˜ ๋‹‰๋„ค์ž„์„ ํ‘œ์‹œํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋˜ ์ค‘, ๋ช‡๋ช‡ ์‹œ์—์„œ ์ฒซ ๋ฒˆ์งธ ์‚ฌ์šฉ์ž์˜ ๋‹‰๋„ค์ž„์ด ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ์œ„ํ•ด ์ฝ˜์†” ๋กœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋Š”๋ฐ, ๋†€๋ž๊ฒŒ๋„ ๋กœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ๐Ÿ” ์›์ธ ๋ถ„์„์›๋ž˜ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์•˜์Šต๋‹ˆ๋‹ค:const fetchUserNicknames = async (userIds: string\[\]) => { if (!userIds.length) return; try { const nicknames: { \[key: string\]: string } = {}; ..
์ธ๋„ค์ผ CursorAI + MCP ๋กœ ์ƒ์‚ฐ์„ฑ 100๋ฐฐ ๋ถ€์ŠคํŠธํ•˜๊ธฐ (Sequential Thinking๊ณผ TalkToFigma) CursorAI์™€ MCP(Model Context Protocol)๋Š” ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋กœ ์„ธ์ƒ์ด ์‹œ๋„๋Ÿฝ๋‹ค. CursorAI ์— ํฌ๊ฒŒ ๋†€๋ž๋Š”๋ฐ, MCP ๋ฅผ ๊ฒฐํ•ฉํ•˜๋ฉด ๋” ์—„์ฒญ๋‚˜๋‹ค๋Š” ์ด์•ผ๊ธฐ๋ฅผ ์œ ํŠœ๋ธŒ์—์„œ ๋ณด๊ณ  ๋ช‡๊ฐ€์ง€ ํ™œ์šฉํ•ด๋ณด์•˜๋‹ค. CursorAI์™€ MCP์˜ ์†Œ๊ฐœCursorAI๋Š” ์ธ๊ณต์ง€๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ์ฝ”๋“œ ์ž‘์„ฑ, ๋””๋ฒ„๊น…, ์ตœ์ ํ™” ๋“ฑ์„ ์ง€์›ํ•˜๋Š” ๋„๊ตฌ๋กœ, ๊ฐœ๋ฐœ์ž์˜ ์ƒ์‚ฐ์„ฑ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚จ๋‹ค. MCP๋Š” ๋‹ค์–‘ํ•œ ํ”Œ๋žซํผ๊ณผ์˜ ํ†ตํ•ฉ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜์—ฌ, ๊ฐœ๋ฐœ์ž๊ฐ€ ์—ฌ๋Ÿฌ ๋„๊ตฌ๋ฅผ ์œ ๊ธฐ์ ์œผ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š”๋‹ค.๋‚ด๊ฐ€ ์‚ฌ์šฉํ•ด๋ณธ MCP 1 -  Sequential Thinking ๐Ÿง Sequential Thinking์€ ๋ณต์žกํ•œ ๋ฌธ์ œ๋ฅผ ๋‹จ๊ณ„๋ณ„๋กœ ์ ‘๊ทผํ•˜์—ฌ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•๋ก ์œผ๋กœ, ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ์˜ ๋…ผ๋ฆฌ์  ์‚ฌ๊ณ ๋ฅผ ๊ฐ•ํ™”ํ•œ๋‹ค. ๋‹จ๊ณ„๋ณ„๋กœ ๋ช…ํ™•ํ•˜๊ฒŒ ..
์ธ๋„ค์ผ Cursor AI ๋“ฑ .. ์ฝ”๋”ฉํ•  ๋•Œ AI ํˆด์„ ์‚ฌ์šฉํ•˜๋ฉฐ ๋А๋‚€ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ, ๋ถ€์ž‘์šฉ AI ์ฝ”๋”ฉ์˜ ์œ„ํ—˜์„ฑ์˜ค๋Š˜ ์‹ค์ œ ํ”„๋กœ์ ํŠธ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๊นจ๋‹ฌ์€ ์ค‘์š”ํ•œ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.์ฝ”๋“œ์— ๋Œ€ํ•œ ๊นŠ์€ ์ดํ•ด ์—†์ด AI๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ์œ„ํ—˜ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค.๊ธฐ์กด ์ฝ”๋“œ๋Š” ์ œ๊ฐ€ ์ง์ ‘ ๊ธฐ๋Šฅ์„ ๊ตฌ์ƒํ•˜๊ณ , ํ•˜๋‚˜์”ฉ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•œ, ๊ทธ์•ผ๋ง๋กœ '์ดํ•ด๋„๊ฐ€ ๋†’์€ ์ฝ”๋“œ' ์˜€์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜ cursorAI ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ณ , ๊ธฐ์กด์˜ Redux ์ ์šฉ ๋ฒ”์œ„๋ฅผ ํ™•์žฅํ•˜๋ฉด์„œ ์ฃผ์˜ํ•˜๊ณ , ๋‹ค์Œ๋ถ€ํ„ด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•  ์ง€ ํšŒ๊ณ ๊ฐ€ ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์•„์„œ ์ด ๊ธ€์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.  1. ์™œ ์œ„ํ—˜ํ•œ๊ฐ€?์ฒซ๋ฒˆ์งธ๋กœ ๊ธฐ๋Šฅ ์†์ƒ์˜ ์œ„ํ—˜์ด ํฝ๋‹ˆ๋‹ค. AI๊ฐ€ ์ฝ”๋“œ์˜ ์ „์ฒด์ ์ธ ๋งฅ๋ฝ์„ ์™„๋ฒฝํžˆ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ธฐ์กด ๊ธฐ๋Šฅ์˜ ์˜๋„๋‚˜ ๋กœ์ง์„ ๋ณด์กดํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ์„ ๋’ค๋Šฆ๊ฒŒ ๋ฐœ๊ฒฌํ•˜๊ธฐ๋„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‘๋ฒˆ์งธ๋กœ..
๋ฆฌ์•กํŠธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ -> ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•˜๊ธฐ! 1. ์ปดํฌ๋„ŒํŠธ ์„ ์–ธ ๋ฐฉ์‹// ๊ธฐ์กด JSconst Dashboard = () => { // ...}// ๋ณ€ํ™˜๋œ TSXconst Dashboard: React.FC = () => { // ...}React.FC (Function Component) ํƒ€์ž…์„ ๋ช…์‹œ์ ์œผ๋กœ ์„ ์–ธํ•˜์—ฌ TypeScript์—๊ฒŒ ์ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ React ์ปดํฌ๋„ŒํŠธ์ž„์„ ์•Œ๋ ค์ค€๋‹ค์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ์˜ props ํƒ€์ž…์„ ์ž๋™์œผ๋กœ ์ถ”๋ก ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, React ๊ด€๋ จ ํƒ€์ž… ์ฒดํฌ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค์ตœ์‹  React์—์„œ๋Š” React.FC ๋Œ€์‹  React.ComponentType์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค 2. Props ํƒ€์ž… ์ •์˜// ๊ธฐ์กด JSconst CategoryEditor = ({ onClose }) => { // ...}// ๋ณ€ํ™˜๋œ TSXinterfac..