[FE - ConnecTo] DAY14 TIL๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

JUNYยท2022๋…„ 7์›” 28์ผ
0

๐Ÿ“šZeroBase ConnecTo Front-End

๋ชฉ๋ก ๋ณด๊ธฐ
4/53
post-thumbnail

22.07.28 ์ˆ˜์—…์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ๊ณผ ๊นจ๋‹ฌ์€ ์ ์„ ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค ๐Ÿ˜Š
ํ”ผ๋“œ๋ฐฑ์€ ์–ธ์ œ๋‚˜ ํ™˜์˜์ž…๋‹ˆ๋‹ค! ๐ŸŠ

โœ”์˜ค๋Š˜ ์ˆ˜์—… ๋‚ด์šฉ


์˜ค๋Š˜์€ EDIYA ์‹œ์•ˆ์œผ๋กœ, ์—ฌํƒœ ๋ฐฐ์› ๋˜ ๋‚ด์šฉ๋“ค์„ ์ ์šฉํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ์Šต๋‹ˆ๋‹ค.

์‹œ์•ˆ์„ ํ˜ผ์ž์„œ ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, 2์ฃผ์ฐจ ํŒ€์›๋“ค๊ณผ ๋ฏธ๋‹ˆ ํŒ€ ํ”„๋กœ์ ํŠธ๋กœ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค! ๐Ÿ˜‰

์–ด์ œ ์ฒ˜์Œ ํšŒ์˜๋ฅผ ํ–ˆ์„ ๋•Œ๋Š”, ํŽ˜์ด์ง€ ๋ณ„๋กœ ์ž‘์—…์„ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ,

์ปดํฌ๋„ŒํŠธ ๋ณ„๋กœ ๋‚˜๋ˆ ์„œ ํŒ€์›๋“ค์ด ํ•œ ํŽ˜์ด์ง€๋ฅผ ์ž‘์—…ํ•ด๋„ ๋‹ค ๊ฐ™์ด ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋…ผ์˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค!

์‹œ์•ˆ์„ ๋ณด๊ณ , ์ฒ˜์Œ ์ž‘์—…์„ ํ•  ๋•Œ๋Š” ๊ธˆ๋ฐฉ ๋๋‚  ์ค„ ์•Œ์•˜๋Š”๋ฐ,

๋ง‰์ƒ ์‹œ์ž‘ํ•˜๊ณ  ๋ณด๋‹ˆ, ๊ฐ์ž ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ํ•˜๋Š” ์‹œ๊ฐ„์ด ๋งŽ์•„์ง€๋‹ค ๋ณด๋‹ˆ,

์ด 8ํŽ˜์ด์ง€ ์ค‘ 1ํŽ˜์ด์ง€๋ฅผ ์ˆ˜์—… ์‹œ๊ฐ„ ๋‚ด์— ์ž‘์—…ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜ข๐Ÿ˜ญ

์ฒ˜์Œ์˜ ์˜๋„๋Š” ํ•œ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋”๋ผ๋„ ์šฐ๋ฆฌ ์ œ๋Œ€๋กœ ์ƒ๊ฐํ•˜๋ฉฐ ๋งŒ๋“ค์–ด๋ณด์ž!! ์˜€๋Š”๋ฐ

์‹œ๊ฐ„์ด ํ๋ฅด๊ณ , ์ž‘์—… ์‹œ๊ฐ„์ด ๊ธธ์–ด์ง€๋ฉด์„œ,

๋‹ค๋ฅธ ํŒ€๋“ค์˜ ๋น ๋ฅธ ์ž‘์—… ์†๋„๋ฅผ ๋ณด๊ณ , ์กฐ๊ธ‰ํ•จ์ด ์ƒ๊ฒผ๋˜ ๊ฒƒ์€ ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ, ๊ฐ•์‚ฌ๋‹˜๊ณผ์˜ ํ”ผ๋“œ๋ฐฑ ์ž๋ฆฌ ์ดํ›„, ์ €ํฌ๊ฐ€ ๋‹ค์‹œ ์ดˆ์‹ฌ์œผ๋กœ ๋Œ์•„๊ฐ€์„œ!!

ํ•œ ํŽ˜์ด์ง€๋ฅผ ์ œ๋Œ€๋กœ ๋ฆฌํŽ™ํ† ๋ง๊นŒ์ง€ ํ•ด์„œ ์™„์„ฑ์„ ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค!

๐Ÿ’ก ์˜ค๋Š˜์˜ ์—ญํ• 
header, footer ์˜์—ญ CSS ์Šคํƒ€์ผ๋ง ๋ฐ Sass ์ž‘์—…ํ•˜๊ธฐ

header, footer ์˜์—ญ์„ ๊ฐ€๋ณ๊ฒŒ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ๊ฐ€๋ณ์ง€ ์•Š์•„์„œ ๋†€๋ž์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ํŒ€์›๋“ค๊ณผ ์ œ๋Œ€๋กœ ๋œ ํŒ€ ์ž‘์—…์„ ํ•œ ๊ฒƒ ๊ฐ™์•„์„œ ์ฆ๊ฑฐ์šด ์ž‘์—…์ด์—ˆ์Šต๋‹ˆ๋‹ค.
ํ˜‘์—…์„ ํ•˜๋‹ค ๋ณด๋‹ˆ, git ์‚ฌ์šฉ์„ ๋งŽ์ด ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, git์ด ์•„์ง ์ต์ˆ™ํ•˜์ง€ ์•Š์•„์„œ, ๊ณต๋ถ€๋ฅผ ๋” ๋งŽ์ด ํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค..!

๐Ÿค”์ถ”๊ฐ€ ํ•™์Šต์ด ํ•„์š”ํ•œ ๋‚ด์šฉ


  • git - fetch, pull ๊ด€๋ จ ๋‚ด์šฉ ๊ณต๋ถ€ํ•˜๊ธฐ
  • git - rebase, squash merge ๊ด€๋ จ ๋‚ด์šฉ ๊ณต๋ถ€ํ•˜๊ธฐ
  • picture / srcset์œผ๋กœ image ๋ฐ˜์‘ํ˜• ์ž‘์—… ๊ด€๋ จ ๊ณต๋ถ€ํ•˜๊ธฐ

๐Ÿ’ก ๋‚ด์ผ์€, Tailwind ์ˆ˜์—…์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค!
์ฒ˜์Œ ์จ๋ณด๋Š” ๊ฑฐ๋ผ, ๊ถ๊ธˆํ•˜๊ธฐ๋„ ํ•˜๊ณ , ๊ธฐ๋Œ€๊ฐ€ ๋ฉ๋‹ˆ๋‹ค!
์˜ค๋Š˜ ๋ฆฌํŽ™ํ† ๋ง๊นŒ์ง€ ํ™”์ดํŒ…..! ๐Ÿ”ฅ

๊ณต๋ถ€ํ•˜๋‹ค ์ถ”๊ฐ€ํ•  ๋‚ด์šฉ์ด ์žˆ์œผ๋ฉด ์ถ”๊ฐ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! ๐Ÿš™

profile
์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๐ŸŒผ

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