๐Ÿ’ป TIL 23.02.22

๊น€์˜์šฐ(Yeongwoo Kim)ยท2023๋…„ 2์›” 22์ผ
0
post-thumbnail

โœ… ๋ฌธ์ œ

  • ์ž‘๋…„ ๋ง์— ์ฐธ์—ฌํ–ˆ๋˜ KB IT's Your Life์—์„œ ๋งŒ๋“ค์—ˆ๋˜ ๊ฐ์„ฑ์ˆ™์†Œ ์ถ”์ฒœ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋ฆฌํŒฉํ† ๋ง ๊ณ„ํš์„ ์„ธ์šฐ๊ณ  ์ง„ํ–‰ํ•˜๋ ค ํ•œ๋‹ค.
  • ๋ฆฌํŒฉํ† ๋ง์—์„œ ํ•ด์•ผํ•  ๊ณผ์ œ
    1. ์ฝ”๋“œ ๊ฐœ์„ 
      • 1๋‹ฌ๋™์•ˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋‚˜ ์ง„ํ–‰ํ•ด์•ผํ•˜๋Š”๋ฐ ํ”„๋ก ํŠธ๋ฅผ ํ˜ผ์ž ๋งก๊ฒŒ ๋˜์–ด์„œ ๊ธ‰ํ•˜๊ฒŒ ์ฝ”๋“œ๋ฅผ ์งœ๋‹ค๋ณด๋‹ˆ ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์„ฑ๋„ ๋–จ์–ด์ง€๊ณ , ์ง€์ €๋ถ„ํ•˜๋‹ค๊ณ  ๋Š๊ปด์กŒ๊ธฐ ๋•Œ๋ฌธ์—
      • MUI๋ฅผ ์จ์„œ ์ฝ”๋“œ๋ฅผ ๊ฐ„์†Œํ™”ํ•  ์˜ˆ์ •
      • ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋กœ ๋งŒ๋“ค๊ธฐ
    2. ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ๊ตฌํ˜„
      • ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋˜์ค‘์— ์ƒํƒœ๊ด€๋ฆฌ๊นŒ์ง€ ๊ณต๋ถ€ํ•˜๊ธฐ์— ์‹œ๊ฐ„์ด ๋งค์šฐ ์ด‰๋ฐ•ํ–ˆ์–ด์„œ, ๋ˆˆ๊ฐ€๋ฆฌ๊ณ  ์•„์›…์‹์œผ๋กœ ๋กœ๊ทธ์ธ์„ ๊ตฌํ˜„ํ–ˆ๋‹ค (๋กœ๊ทธ์ธ์„ ๋ˆ„๋ฅด๋ฉด ๋กœ๊ทธ์ธ ๋œ ํ™ˆํŽ˜์ด์ง€๋กœ ์ด๋™๋˜๋„๋ก...ใ…Ž)
      • redux toolkit ๋˜๋Š” react queary๋ฅผ ๊ณต๋ถ€ํ•ด์„œ ์ ์šฉํ•  ์˜ˆ์ •์ด๋‹ค.
    3. ๋ฐฐํฌ
      • ๋ฐฐํฌ๊นŒ์ง€ ํ•ด์•ผ ์™„๋ฒฝํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด๋ƒˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๐Ÿคท ์ƒˆ๋กœ ๋งŒ๋“ค๊ธฐ vs ๋ฆฌํŒฉํ† ๋ง

  • ํ˜„์žฌ ์ฝ”๋“œ๊ฐ€ ๋„ˆ๋ฌด ๋ณต์žกํ•˜๊ณ  ๋ฐฉ๋Œ€ํ•ด์„œ ๋ฆฌํŒฉํ† ๋ง์„ ํ•˜๋Š”๊ฒŒ ๋‚˜์€ ๊ฒƒ์ธ์ง€, ๋งŒ๋“ค์–ด ๋†“์€ hook์„ ๊ฐ€์ ธ์™€์„œ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ์‹œ์ž‘ํ•ด์•ผํ•˜๋Š”์ง€๋ฅผ ๊ณ ๋ฏผํ–ˆ๋‹ค.
  • ๋ฌผ๋ก  ์ƒˆ๋กญ๊ฒŒ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ๋” ๋น ๋ฅผ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚˜์ค‘์— ํ˜„์—…์— ๊ฐ”์„ ๋•Œ, ๋งค์šฐ ๋ถˆ์นœ์ ˆํ•œ ์ฝ”๋“œ๋ฅผ ๋ฆฌํŒฉํ† ๋ง์„ ํ•ด์•ผํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๊ณ , ํž˜๋“ค๊ฒ ์ง€๋งŒ ๋‚˜์˜ ์ฝ”๋“œ๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ๋œฏ์–ด ๋ณด๋ฉด์„œ ๋ฆฌํŒฉํ† ๋ง์„ ํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

๐Ÿฅณ ์˜ค๋Š˜์˜ ๋ฆฌํŒฉํ† ๋ง ํŽ˜์ด์ง€

LandingPage

  • Before & After!
before
  • ์‚ฌ์ง„์—์„œ ๋ณด์—ฌ์ฃผ๋“ฏ์ด Before(์™ผ์ชฝ)์€ ์•„์ดํฐ ํ™”๋ฉด์œผ๋กœ ๋ดค์„ ๋•Œ 40%๊ฐ€๋Ÿ‰์ด ์ž˜๋ฆฌ๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ After(์˜ค๋ฅธ์ชฝ)์—์„œ๋Š” ์•„์ดํฐ ํ™”๋ฉด์œผ๋กœ ๋ดค์„ ๋•Œ๋„ ์ •์ƒ์ ์œผ๋กœ ๋‚˜์˜ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ํ•ด๋‹น ๋ถ€๋ถ„์€ ์ „์ฒด ์ปดํฌ๋„ŒํŠธ๋ฅผ MUI Container๋ฅผ ํ†ตํ•ด ๊ฐ์‹ธ์„œ ํฌ๊ธฐ๋ฅผ ๊ณ ์ •์‹œ์ผฐ๊ณ , ๊ธฐ์กด px๋กœ margin ๋ฐ width height์ด ์„ค์ • ๋˜์–ด์žˆ์—ˆ๋Š”๋ฐ vw๋ฅผ ์ด์šฉํ•ด์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ณ€๊ฒฝ๋˜๊ฒŒ ์„ค์ •ํ•˜์˜€๋‹ค.
  • ๊ธ€์ž๋Š” MUI Typography๋ฅผ emtion style๋กœ customizingํ•˜์—ฌ์„œ media query๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ธ€์žํฌ๊ธฐ๋ฅผ ์ˆ˜์ •ํ•˜์˜€๋‹ค.

๋Š๋‚€์ 

  • ๋ฆฌํŒฉํ† ๋ง์„ ํ•˜๊ธฐ์ „์— ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ๊ฝค ๊ฑธ๋ฆฌ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ... ์ƒ๊ฐ๋ณด๋‹ค ๋” ๊ฑธ๋ ธ๋˜ ๊ฒƒ ๊ฐ™์•˜๋‹ค.
  • media query๋ฅผ ์ด์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ emotion์œผ๋กœ mui๋ฅผ customize๋ฅผ ์ด์šฉํ•˜๋‹ˆ ํŽธํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
  • ๋‹ค๋ฅธ ์‚ฌ๋žŒ์„ ์œ„ํ•ด ๋˜๋Š” ๋ฏธ๋ž˜์˜ ๋‚˜๋ฅผ ์œ„ํ•ด.... ํ•จ์ˆ˜๋ช…๊ณผ ์ฝ”๋“œ์— ์‹ ๊ฒฝ์„ ์“ฐ์ž..!
profile
์ฐจ๊ทผ์ฐจ๊ทผ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€