๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Project/Blog Thumbnail Maker

[Blog Thumbnail Maker] ๊ธฐ๋Šฅ๊ฐœ์„  ์ค‘๊ฐ„์ ๊ฒ€

by Haren 2022. 10. 27.

๐Ÿ˜ข ์ด ์นดํ…Œ๊ณ ๋ฆฌ์˜ ์ง€๋‚œ ํฌ์ŠคํŒ…

 

[Blog Thumbnail Maker] ํฐํŠธ ์ƒ‰์ƒ์„ ๋ณ€๊ฒฝํ•ด๋ณด์ž

[Blog Thumbnail Maker] ์ธ๋„ค์ผ ๋ฉ”์ด์ปค ๊ธฐ๋Šฅ ๊ฐœ์„  ํ”„๋กœ์ ํŠธ [Blog Thumbnail Makr] ์ธ๋„ค์ผ ๋ฉ”์ด์ปค๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž ๊ทผ 3๊ฐœ์›” ๊ฐ„ ๋ธ”๋กœ๊ทธ์— ํฌ์ŠคํŒ…์„ ์ž‘์„ฑํ•˜์ง€ ์•Š์•˜์—ˆ๋‹ค. JLPT N2 ์‹œํ—˜ ์ค€๋น„๋กœ ํ”„๋กœ์ ํŠธ์™€ ๋ธ”๋กœ๊ทธ์—

heibondk.tistory.com

๐Ÿ˜œ ๋ฐ๋“œ๋ผ์ธ๋„ ๋ชป ์ง€ํ‚ค๋Š” ํ—ˆ์ ‘~โค๏ธ

๋ถ„๋ช…ํžˆ ์ € ๊ธฐ๋Šฅ๊ฐœ์„  ํ”„๋กœ์ ํŠธ๋Š” 2022๋…„ 6์›” ์ด๋‚ด๋กœ ๋๋‚ด๊ณ ์ž ํ–ˆ๋˜ ํ”„๋กœ์ ํŠธ์˜€๋‹ค.

๊ทธ๋™์•ˆ ๋ฐ”๋นด๋‹ˆ ์–ด์จŒ๋‹ˆ ํ•˜๋Š” ๋ง์€ ๋ป”ํ•˜๋”” ๋ป”ํ•œ ํ•‘๊ณ„ ๊ฐ™์•„์„œ ํ•˜์ง€ ์•Š๊ฒ ๋‹ค. ๋‚ด๊ฐ€ ๊ฒŒ์„๋ €๊ณ , ์•ˆํ•œ๊ฒƒ์ด๋‹ค.

์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ์ง€๊ธˆ๊นŒ์ง€ 1๋…„์ด ๋„˜๋Š” ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋Š”๋ฐ ์ด๊ฑฐ ํ•˜๋‚˜ ๋ชป ๋๋‚ด๋Š” ๋‚ด ๋ชจ์Šต์ด ์ฉ ๋ง˜์— ๋“ค์ง€๋Š” ์•Š์•˜๋‹ค.

๊ทธ๋ž˜์„œ ์ด์ฐธ์— ์ค‘๊ฐ„๊ณ ์‚ฌ๋„ ๋๋‚ฌ๊ฒ ๋‹ค. ๋‹จ๊ธฐ๊ฐ„์— ์†๋„๋ฅผ ํ›…ํ›… ๋‚ด์„œ ๊ธฐ๋Šฅ๊ฐœ์„  ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์น˜๊ธฐ๋กœ ๊ฒฐ์‹ฌํ–ˆ๋‹ค.

 

๐Ÿค” ํฌ์ŠคํŒ…์„ ์•ˆํ•œ ๊ธฐ๋Šฅ ๊ฐœ์„ ์ด ์—ฌ๋Ÿฟ ์žˆ๋‹ค.

๊ธ€์„ ์“ฐ๋Š” ํ–‰์œ„๋ž€ ์—„์ฒญ๋‚œ ๊ณ ๋‡Œ์™€ ์‹œ๊ฐ„์„ ํˆฌ์žํ•ด์•ผํ•˜๋Š” ํ–‰์œ„๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ๊ท€์ฐฎ๋‹ค.

์ฒ˜์Œ ์ •ํ–ˆ๋˜ ๋ฐ๋“œ๋ผ์ธ๋ณด๋‹ค 4๊ฐœ์›”์ด๋‚˜ ๋” ์ง€๋‚œ ์ง€๊ธˆ๊นŒ์ง€ ์•„๋ฌด๊ฒƒ๋„ ์•ˆ ํ•˜์ง€๋Š” ์•Š์•˜๋‹ค.

์ด ํฌ์ŠคํŒ…์„ ํ•˜๋Š” ์ง€๊ธˆ์„ ๊ธฐ์ค€์œผ๋กœ 16์ผ ์ „์—๋„ ์ธ๋„ค์ผ ๋ฉ”์ด์ปค์˜ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— ์ปค๋ฐ‹์„ ํ–ˆ์œผ๋‹ˆ๊นŒ.

์–ด์จŒ๋“ , ๊ทธ๋™์•ˆ ํ•ด๋‘” ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๊ณ , ์ด์— ๋Œ€ํ•œ ๋‚ด์šฉ์€ ์ •๋ฆฌ๋ฅผ ํ•ด์„œ ํฌ์ŠคํŒ…์„ ๊ทผ์‹œ์ผ ๋‚ด์— ํ•˜๊ฒ ๋‹ค.

 

๊ทธ๋™์•ˆ ํ•œ ๊ฒƒ

๋ณ„๋„์˜ CSS ํŒŒ์ผ๋กœ ์ž‘์„ฑ๋˜์–ด์žˆ๋˜ ์Šคํƒ€์ผ์„ Styled Compnents๋กœ ๋ณ€๊ฒฝ

๋ญ์•ผ ๋งŽ์€ ์ค„ ์•Œ์•˜๋Š”๋ฐ ์ด๊ฒƒ๋ฐ–์— ์—†๋‹ค. ์–ด์ด์—†์–ด.

 

๐Ÿ˜ฃ ์ƒˆ๋กœ์šด ๋ชฉํ‘œ

ํ›„์ˆ ํ•  ์•ž์œผ๋กœ์˜ ๊ณ„ํš ๋•Œ๋ฌธ์— ๋ช‡ ๊ฐ€์ง€ ๋ชฉํ‘œ๋ฅผ ์ˆ˜์ •ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ธฐ์กด์˜ ๋ชฉํ‘œ๋Š” ์ด๋žฌ๋Š”๋ฐ...

์ด ์นดํ…Œ๊ณ ๋ฆฌ์˜ ์ฒซ ํฌ์ŠคํŒ…์—์„œ ์ฐ์–ด์˜ด.

์ˆ˜์ •๋œ ๋ชฉํ‘œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ํฐํŠธ ์„ ํƒ ๊ธฐ๋Šฅ ์ถ”๊ฐ€
  • ํฐํŠธ ์‚ฌ์ด์ฆˆ, ์บ”๋ฒ„์Šค ์‚ฌ์ด์ฆˆ ์กฐ์ • select ์Šคํƒ€์ผ๋ง

๊ทธ๋ ‡๋‹ค. ๋‹จ ํ•˜๋‚˜๋‹ค.

 

๐Ÿ˜  ์ƒˆ๋กœ์šด ๋ฐ๋“œ๋ผ์ธ

๋ฐ๋“œ๋ผ์ธ์„ ์›” ๋‹จ์œ„๋กœ ์žก์œผ๋ฉด ๋‚˜๋„ ๋ชจ๋ฅด๊ฒŒ ๋‚˜ํƒœํ•ด์ง€๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ด๋ฒˆ์—๋Š” 2์ฃผ๋ณด๋‹ค ์กฐ๊ธˆ ๋„˜๋Š” ์ •๋„๋กœ ํƒ€์ดํŠธํ•˜๊ฒŒ ์žก์•„์„œ ๋์žฅ์„ ๋‚ด์•ผ๊ฒ ๋‹ค.

~ 2022๋…„ 11์›” 13์ผ

๋ญ ์ด ๊ธฐ๊ฐ„๋ณด๋‹ค ๋นจ๋ฆฌ ๋๋‚ผ ์ˆ˜๋„ ์žˆ๊ธฐ์•ผ ํ•˜๊ฒ ์ง€๋งŒ ์ ์–ด๋„ ๋„˜๊ธฐ์ง€๋Š” ๋ง์ž๋Š” ๊ฑฐ๋‹ค.

 

โœ๏ธ ์•ž์œผ๋กœ์˜ ๊ณ„ํš?

์Šฌ์Šฌ ์ทจ์—…์„ ํ•ด์•ผํ•  ์‹œ๊ธฐ๊ฐ€ ๋‹ค๊ฐ€์˜ค๊ณ  ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‚˜๋ฅผ ๋ณด์—ฌ์ค„ ๋ฌด์–ธ๊ฐ€๊ฐ€ ํ•„์š”ํ•˜๊ณ , ์‹ฌ์ธต์ ์œผ๋กœ Web FE์— ๋Œ€ํ•œ ๊ณต๋ถ€๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค.

๊ทธ๋ž˜์„œ ๋‚˜์˜ ํฌํŠธํด๋ฆฌ์˜ค ํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•˜๊ธฐ๋กœ ๋งˆ์Œ์„ ๋จน์—ˆ๋‹ค. ์•„์ง ๊ตฌ์ฒด์  ๊ณ„ํš์€ ์—†๊ณ  ๋Œ€๋žต์ ์ธ ๊ณ„ํš๋ฐ–์— ์—†์ง€๋งŒ, ์•„๋งˆ ์ด ์ธ๋„ค์ผ ๋ฉ”์ด์ปค์˜ ๋ฐฐํฌ๋Š” ์ด ํฌํŠธํด๋ฆฌ์˜ค ํŽ˜์ด์ง€๋ฅผ ํ†ตํ•ด์„œ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

 


ํ ... ๋„ˆ๋ฌด ์†์„ ์•ˆ ๋Œ€์„œ ์ด๋ ‡๊ฒŒ๋ผ๋„ ์ƒˆ๋กœ ํ•  ์ผ์„ ๋งŒ๋“ค์–ด๋ƒˆ๋‹ค. 

Styled-Compnents๋กœ ์Šคํƒ€์ผ๋ง์„ ์˜ฎ๊ธด ๊ฒƒ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ์„œ๋‘˜๋Ÿฌ์„œ ๋งˆ๋ฌด๋ฆฌ๋ฅผ ์ง“๊ณ  ์ƒˆ ํ”„๋กœ์ ํŠธ, ์ƒˆ ๊ณต๋ถ€์— ์ž„ํ•ด์•ผ๊ฒ ๋‹ค.

๋ญ˜ ๋” ์จ์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค. ๊ทธ๋ž˜์„œ ์—ฌ๊ธฐ์„œ ๋ฟ…!