Week 4 Recap as a Frontend Intern @Daangn 4์ฃผ์ฐจ์—” 3์ผ๋งŒ ์ถœ๊ทผํ–ˆ์–ด์„œ ์‚ฌ์‹ค ์ž˜ ๊ธฐ์–ต์ด ๋‚˜์ง„ ์•Š๋Š”๋‹ค.. (5์ฃผ์ฐจ๋ฅผ ๋งˆ์นœ ์‹œ์ ์ด๋ผ ๋”๋”์šฑ .,,ใ…Žใ…Ž )ํ•˜๋ฃจ๋ฅผ ๊ฝ‰ ์ฑ„์›Œ ์‚ด๋ฉด ์˜คํžˆ๋ ค ์ผ์ฃผ์ผ ๋™์•ˆ ๋ญํ–ˆ๋‚˜ ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“œ๋Š” ๊ฒƒ ๊ฐ™๋‹ค .. ๊ทธ๋งŒํผ ๋งค์ผ ํšŒ๊ณ ๋ฅผ ํ•˜๊ธฐ ์‹œ์ž‘ํ•œ๊ฒŒ ์ฐธ ์ž˜ํ•œ ์ผ ๊ฐ™๋‹ค. ์›”์š”์ผ๋ถ€ํ„ฐ ๊ธฐ๋ถ„์ข‹๊ฒŒ 2๊ฐœ ํ…Œ์Šคํฌ ๋ฆด๋ฆฌ์ฆˆ์˜ค๋žœ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋˜ navbar์™€ ๊ทผ๋ฌด์ „ ํ‘œ์‹œํ•˜๋Š” ๊ฒŒ ๋ฆด๋ฆฌ์ฆˆ๋˜์—ˆ๋‹ค! navbar ๋Š” ์‚ฝ์งˆ์„ ๋„ˆ๋ฌด ๋งŽ์ดํ•ด์„œ ๋‚ด๊ฐ€ ์‹œ๋„ํ–ˆ๋˜ ๊ฒƒ๋“ค์„ ์‹œ๊ฐ„์œผ๋กœ๋งŒ ํ™˜์‚ฐํ•˜๋ฉด ๋น™๋น™ ๋Œ์•˜๋‹ค๋Š” ๊ธฐ๋ถ„์ด ๋“ค์ง€๋งŒ, ๋˜ ํ•œํŽธ์œผ๋กœ๋Š” ๊ทธ ์‚ฌ์ด์— Stackflow, Stitches.css ๋„ ๊ณต๋ถ€ํ•˜๊ณ  ์ฝ”๋“œ๋“ค๋„ ๋งŽ์ด ๋””๊น…ํ•  ์ˆ˜ ์žˆ์—ˆ๊ธฐ์— ์–ป์–ด๊ฐ€๋Š” ๊ฑด ์ถฉ๋ถ„ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์…€ํ”„๋ฆฌ๋ทฐ โžก๏ธ (๋ฒ„๋”” ๋ฆฌ๋ทฐ โžก๏ธ ๋ฆฌ๋ทฐ ๋ฐ˜์˜)โœ–๏ธN ์ด์   ์œ„์˜ ์‚ฌ์ดํด์ด ์ ์ฐจ ์ต์ˆ™ํ•ด์ง€๊ณ  ์žˆ๋‹ค. 4์ฃผ์ฐจ ์ดˆ์— ๊นจ๋‹ฌ..
์ธ๋„ค์ผ 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];๋นˆ ๋ฐฐ์—ด..
์ธ๋„ค์ผ 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๊ฐ€ ์ฝ”๋“œ์˜ ์ „์ฒด์ ์ธ ๋งฅ๋ฝ์„ ์™„๋ฒฝํžˆ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ์•˜๋‹ค. ๊ทธ๋ž˜์„œ ๊ธฐ์กด ๊ธฐ๋Šฅ์˜ ์˜๋„๋‚˜ ๋กœ์ง์„ ๋ณด์กดํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ์„ ๋’ค๋Šฆ๊ฒŒ ๋ฐœ๊ฒฌํ•˜๊ธฐ๋„ ํ–ˆ๋‹ค. ๋‘๋ฒˆ์งธ๋กœ ์†์ƒ๋œ ๊ธฐ๋Šฅ์„ ์•Œ์•„์ฑ„๋Š” ๊ฒƒ์ด ..
์ธ๋„ค์ผ ๐ŸŒ— Styled Components๋กœ ๋ผ์ดํŠธ/๋‹คํฌ ๋ชจ๋“œ ์ „ํ™˜ํ•˜๊ธฐ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๋‹คํฌ ๋ชจ๋“œ์™€ ๋ผ์ดํŠธ ๋ชจ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ UX ์š”์†Œ ์ค‘ ํ•˜๋‚˜์ด๋‹ค.styled-components์™€ ThemeProvider๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์ „์—ญ ํ…Œ๋งˆ ์ „ํ™˜์„ ๋งค์šฐ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.โœ… 1. ํ…Œ๋งˆ ๊ฐ์ฒด ์ •์˜ํ•˜๊ธฐ// themes.jsexport const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke",};export const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111",};โœ… 2. App์—์„œ ํ…Œ๋งˆ ์ƒํƒœ ๊ด€๋ฆฌ์—ฌ๋Ÿฌ๊ฐœ์˜ property๋ฅผ ๊ฐ€์ง„ ๊ฐ์ฒด๋ฅผ ๋‘๊ฐœ (๋‹คํฌ/๋ผ์ดํŠธ) ์„ค์ •ํ•จ์œผ๋กœ์จ ๊ฐ„ํŽธํ•˜๊ฒŒ theme์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.  // Ap..
์ธ๋„ค์ผ Styled Components - ์• ๋‹ˆ๋ฉ”์ด์…˜, ์ปดํฌ๋„ŒํŠธ ์„ ํƒ์ž, ์ค‘์ฒฉ ์Šคํƒ€์ผ๋ง ์ด๋ฒˆ์— ๋”๋“ฌ์–ด๋ณผ ๊ธฐ์–ต์€ ..  keyframes ๋„ const ๋กœ ๋”ฐ๋กœ ๋นผ์„œ ๊ด€๋ฆฌํ•˜๋Š” ๊ฑฐ + styled component ์กฐ๊ฑด๋ฌธ์ฒ˜๋Ÿผ ์“ฐ๊ธฐ !! โœ… ํšŒ์ „ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋งŒ๋“ค๊ธฐ๋จผ์ € keyframes๋ฅผ ์‚ฌ์šฉํ•ด ํšŒ์ „ํ•˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ •์˜ํ•œ๋‹ค.import styled, { keyframes } from "styled-components"; const rotationAnimation = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { border-radius: 100px; } 100% { transform: rotate(360deg); border-radiu..