๐Ÿคธโ€โ™‚๏ธ์œ„์ฝ”๋“œ 1์ฐจ ํŒ€ ํ”„๋กœ์ ํŠธ ํ›„๊ธฐ(๋กœ์ง€ํ… ํ”„๋กœ์ ํŠธ)๐Ÿคธโ€โ™‚๏ธ

hayyim0626ยท2020๋…„ 9์›” 26์ผ
2
post-thumbnail

๐Ÿ—“ ์ž‘์—… ๊ธฐ๊ฐ„

  • 2020.09.14 - 2020.09.25

๐Ÿ”ง ๊ธฐ์ˆ  Stack

  • HTML/CSS
  • JavaScript(ES6+)
  • React
  • Routes.js
  • SASS
  • Git

๐Ÿ‘ซ ํŒ€์›

๐Ÿ’ป ๊ธฐ๋Šฅ ๊ตฌํ˜„

  • ๊ณตํ†ต ์‚ฌํ•ญ
    ๐Ÿ‘‰ CRA ์ดˆ๊ธฐ ์„ธํŒ…(ํ”„๋ก ํŠธ์—”๋“œ)
    ๐Ÿ‘‰ Git์„ ํ†ตํ•œ ์ฝ”๋“œ ์ €์žฅ ๋ฐ ํŒ€์›๋“ค๊ฐ„์˜ ์ฝ”๋“œ ๊ณต์œ , ๋ฒ„์ „ ์ตœ์‹ ํ™”
  • ๋ฉ”์ธ ํŽ˜์ด์ง€
    ๐Ÿ‘‰๋ฉ”์ธ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ
    ๐Ÿ‘‰๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ๋ ˆ์ด์•„์›ƒ, ๋ฐฑ์—”๋“œ API ํ†ต์‹ 
    ๐Ÿ‘‰Footer ๋ ˆ์ด์•„์›ƒ, ๋ฐฑ์—”๋“œ API ํ†ต์‹ 
  • ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€
    ๐Ÿ‘‰๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ๋ฐ ๋ชจ๋‹ฌ์ฐฝ ๊ธฐ๋Šฅ
    ๐Ÿ‘‰๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ์œ ํšจ์„ฑ๊ฒ€์‚ฌ(validation)
    ๐Ÿ‘‰fetch๋ฅผ ํ†ตํ•œ APIํ˜ธ์ถœ, ์‘๋‹ต๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ํ†ตํ•œ ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ
  • ๊ฑฐ๋ž˜์†Œ ํŽ˜์ด์ง€
    ๐Ÿ‘‰๋งˆ์šฐ์Šค ์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ
    ๐Ÿ‘‰์ƒํ’ˆ ๋ฆฌ์ŠคํŠธ ๋ฐฑ์—”๋“œ API ํ†ต์‹ 
    ๐Ÿ‘‰filter ๊ธฐ๋Šฅ์„ ํ†ตํ•œ ๊ฐ€๊ฒฉ๋ณ„ ๊ธฐ๋Šฅ ์ถ”๊ฐ€
  • ์ƒํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€
    ๐Ÿ‘‰๋งˆ์šฐ์Šค ์ƒํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ
    ๐Ÿ‘‰์ƒํ’ˆ ๋””ํ…Œ์ผ ํŽ˜์ด์ง€ ๋ฐฑ์—”๋“œ API ํ†ต์‹  (๊ฐ ์ƒํ’ˆ์˜ ์ด๋ฏธ์ง€, ์ƒํ’ˆ ์ด๋ฆ„, ์ƒ‰์ƒ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ)
    ๐Ÿ‘‰slick slider ์‚ฌ์šฉํ•œ ์ด๋ฏธ์ง€ ์Šฌ๋ผ์ด๋”

๐Ÿ•ตโ€โ™‚Prologue

์ด๋ฒˆ 2์ฃผ๊ฐ„์˜ ํ”„๋กœ์ ํŠธ๋Š” ๋‚ด๊ฒŒ ๋งŽ์€ ์ˆ™์ œ๋ฅผ ๋‚จ๊ฒผ๋‹ค.
๊ฐ€์žฅ ๋จผ์ € ๋‚˜์˜ ๋ถ€์กฑํ•œ ์‹ค๋ ฅ์„ ์—ฌ์‹คํžˆ ๊นจ๋‹ฌ์•˜์œผ๋ฉฐ,
๊ฐœ๋ฐœ์ž๋กœ์„œ ์–ด๋–ค ๋งˆ์Œ๊ฐ€์ง๊ณผ ํƒœ๋„๋ฅผ ์ง€๋…€์•ผ ํ•˜๋Š”๊ฐ€๋ฅผ ๋˜๋Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋•Œ ๋Š๊ผˆ๋˜ ๊ทธ ์ ˆ์‹คํ•œ ๊ฐ์ •๊ณผ ์ƒ๊ฐ๋“ค์„ ๋‹จ์ˆœํžˆ ํ˜๋Ÿฌ๊ฐ€๋Š” ๊ณผ๊ฑฐ๋กœ ์—ฌ๊ธฐ์ง€ ์•Š๊ณ  ์†Œ์ค‘ํ•œ ๊ฒฝํ—˜์œผ๋กœ ์‚ผ๊ณ ์ž ์žŠํ˜€์ง€๊ธฐ ์ „์— ๊ธ€๋กœ ๊ธฐ๋กํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
๋˜ํ•œ ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•œ ์ฝ”๋“œ๋ฅผ ๊ธฐ๋กํ•ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
๋ณด๋‹ค ๋‚˜์€ ์ฝ”๋“œ, ํ›Œ๋ฅญํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด, "์ง„์งœ ์‹ค๋ ฅ์žˆ๋Š” ๊ฐœ๋ฐœ์ž"๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด, ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ ์ค‘์—์„œ ์–ด๋–ค ์ ์ด ์•„์‰ฌ์› ๊ณ  ์ด๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณด์™„ํ•  ์ˆ˜ ์žˆ๊ฒ ์œผ๋ฉฐ, ๊ธฐ์–ตํ•ด์•ผ ํ•  ์ฝ”๋“œ๊ฐ€ ๋ฌด์—‡์ธ์ง€๋ฅผ ๊ธฐ๋กํ•ด๋†“๊ณ ์ž ํ•œ๋‹ค.

โœ๊ธฐ๋กํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ

๐Ÿฅ‡ map() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•œ ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ

๋กœ์ง€ํ… Account ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ์„ ํฌ๊ฒŒ ๋‘˜๋กœ ๋‚˜๋ˆด๋Š”๋ฐ
1)๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๋ชจ๋‹ฌ์ฐฝ์ด ์ผœ์ง€๋Š” ๋ถ€๋ถ„๊ณผ
2)๋งํฌ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š” ๋ถ€๋ถ„์œผ๋กœ ๋‚˜๋ˆด๋‹ค.
๋งํฌ ํŽ˜์ด์ง€๋Š” ์•„๋ž˜์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š”๋ฐ, ์ฒ˜์Œ์—๋Š” ํ•˜๋“œ ์ฝ”๋”ฉ์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ์žก์•˜์œผ๋‚˜ ๋น„ํšจ์œจ์ ์ด๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
์ด์— ๋”ฐ๋ผ InfoBox๋ผ๋Š” ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ณ , ๊ทธ ์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” ๋™์ผํ•œ ๋ฐ์ดํ„ฐ๋“ค์„ mapํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ๋ฟŒ๋ ค์ค€๋‹ค๋ฉด ๋ณด๋‹ค ํšจ์œจ์ ์ด๊ณ  ๊น”๋”ํ•œ ์ฝ”๋“œ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ํ•œ ์ปดํฌ๋„ŒํŠธ์— ๋“ค์–ด๊ฐ€๋Š” ๋งํฌ์˜ ๊ฐฏ์ˆ˜๊ฐ€ ๋ชจ๋‘ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— map ํ•จ์ˆ˜๋ฅผ ๋‘ ๋ฒˆ ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๋‹ค.

map ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋จผ์ € ๋ฟŒ๋ ค์ฃผ๊ณ 

๊ทธ ์•ˆ์— ์ž์‹์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋‹ค์‹œ ํ•œ๋ฒˆ map์„ ํ†ตํ•ด ๋งํฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฟŒ๋ ค์คฌ๋‹ค.
(์‹ค์ œ๋กœ ๋งํฌ๋ฅผ ํƒ€๊ณ  ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š” ๋ถ€๋ถ„๊นŒ์ง€๋Š” ๊ตฌํ˜„ํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์—
<span>ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ–ˆ๊ณ  <Link>ํƒœ๊ทธ์™€ ๋น„์Šทํ•œ scss๊นŒ์ง€๋งŒ ๊ตฌํ˜„ํ–ˆ๋‹ค.)

์—ฌ๊ธฐ์— ์‚ฌ์šฉ๋œ Mock Data๋Š” JSํŒŒ์ผ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค.
JsonํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ ์ด์œ ๋Š” ๋ฐฑ์—”๋“œ์—์„œ ํฌ๋กค๋งํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ˆœ์ˆ˜ํžˆ map์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  ๋ฐ์ดํ„ฐ์˜€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์•„์‰ฌ์› ๋˜ ์ 
๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ์ž„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ฒ˜์Œ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•  ๋•Œ ๊ตณ์ด InfoBoxTop๊ณผ InfoBoxBottom์œผ๋กœ ๋‚˜๋ˆ  ๋˜‘๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ๋‘ ๋ฒˆ ์ผ๋‹ค๋Š” ๊ฒŒ ์•„์‰ฌ์› ๋‹ค. ๋ ˆ์ด์•„์›ƒ์„ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ๊ตฌ์„ฑํ•˜๋Š” ์—ฐ์Šต์„ ๋” ํ•ด์•ผ๊ฒ ๋‹ค.

๐Ÿฅˆ ๋กœ๊ทธ์ธ&ํšŒ์›๊ฐ€์ž… Validation


๋กœ์ง€ํ… ํŽ˜์ด์ง€์˜ ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž…์˜ ๊ฒฝ์šฐ ์•„๋ฌด ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜์ง€ ์•Š์•˜์„ ๋•Œ ์œ„์—์„œ๋ถ€ํ„ฐ ์ˆœ์ฐจ์ ์œผ๋กœ ๋นจ๊ฐ„ ์ฐฝ์ด ๋œจ๊ฒŒ ๋˜๋Š”๋ฐ, ์ด๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋กœ์ง์„ ๊ตฌํ˜„ํ–ˆ๋‹ค.

1.๋นจ๊ฐ„ ์ฐฝ ์œ„์—์„œ๋ถ€ํ„ฐ ์ˆœ์ฐจ์ ์œผ๋กœ ๋œจ๊ธฐ
์ฒ˜์Œ Boolean ๊ฐ’์œผ๋กœ ClassName์„ ๋ฐ”๊พธ๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ–ˆ์œผ๋‚˜ ๊ฒฝ์šฐ์˜ ์ˆ˜๊ฐ€ 3๊ฐ€์ง€๊ฐ€ ๋“ค์–ด๊ฐ€์•ผ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ถ€๋“์ดํ•˜๊ฒŒ ์ดˆ๊ธฐ state๊ฐ’์„ null๋กœ ์žก๊ฒŒ ๋˜์—ˆ๋‹ค.

2.ํ•œ ๊ธ€์ž ์ด์ƒ ์ž…๋ ฅ๋์„ ๋•Œ ๋นจ๊ฐ„ ์ฐฝ ์—†์• ๊ธฐ

3.์œ ํšจ์„ฑ ๊ฒ€์‚ฌ

4.๋ชจ๋“  ์กฐ๊ฑด ์ถฉ์กฑ ์‹œ fetchํ•จ์ˆ˜ ์‹คํ–‰

์•„์‰ฌ์› ๋˜ ์ 

  • Boolean๊ฐ’์˜ ๊ฒฝ์šฐ true, false์˜ ๊ฐ’์„ ๊ฐ€์ง€๋Š”๋ฐ 3๊ฐ€์ง€ ๊ฒฝ์šฐ๋ฅผ ์ƒ๊ฐํ•ด์•ผ ํ•˜๋‹ค๋ณด๋‹ˆ null๊ฐ’์„ ์“ฐ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ดˆ๊ธฐ๊ฐ’์„ ์˜๋ฏธ์žˆ๊ฒŒ ์„ค์ •ํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๋Š” ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๊ฐ€ ์–ด๋–ค ํƒ€์ž…์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š”์ง€ ๋“œ๋Ÿฌ๋‚ด๊ธฐ ์œ„ํ•œ ๋ชฉ์ ๋„ ์žˆ๋Š”๋ฐ ์ด๋ฅผ ๋ฒ—์–ด๋‚ฌ๋‹ค๋Š” ์ ์ด ์•„์‰ฌ์› ๋‹ค. ๊ธฐ๋ณธ ์ปจ๋ฒค์…˜์„ ์ง€ํ‚ค๋˜ ์›ํ•˜๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ๋ฌด์—‡์ด ์žˆ๋Š”์ง€ ๊ณ ๋ฏผํ•ด๋ด์•ผ๊ฒ ๋‹ค.
  • ํ•œ ๊ธ€์ž ์ด์ƒ ์ž…๋ ฅ๋์„ ๋•Œ ๋นจ๊ฐ„ ์ฐฝ์ด ์—†์–ด์ง€๋Š” ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ์—๋„ ๋™์ผํ•œ ํ•จ์ˆ˜๋ฅผ 4๋ฒˆ ๋ฐ˜๋ณตํ–ˆ๋‹ค. ์ด๋ฅผ ํ•˜๋‚˜์˜ ํ•จ์ˆ˜๋กœ๋งŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋Š”์ง€ ์ฐพ์•„๋ด์•ผ๊ฒ ๋‹ค.
  • ํšŒ์›๊ฐ€์ž… ์‹œ ์ •๊ทœํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ๋‹ค์Œ์—๋Š” ์ •๊ทœํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•œ ํšŒ์›๊ฐ€์ž… ๋กœ์ง์„ ๊ตฌํ˜„ํ•ด๋ด์•ผ๊ฒ ๋‹ค.

๐Ÿ‘จโ€๐Ÿ’ป๊ธฐ์–ตํ•ด์•ผ ํ•  ์ฝ”๋“œ

๐Ÿฅ‡ ๋ชจ๋‹ฌ์ฐฝ ๊ตฌํ˜„ ์ฝ”๋“œ

๋กœ์ง€ํ… ํ™ˆํŽ˜์ด์ง€์˜ ๊ฒฝ์šฐ ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ์‹œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋ชจ๋‹ฌ์ฐฝ์„ ํ†ตํ•ด ์ด๋ฃจ์–ด์กŒ๊ณ  ์ด๋ฅผ ๊ตฌํ˜„ํ–ˆ๋‹ค.

1.๋กœ๊ทธ์ธ/ํšŒ์›๊ฐ€์ž… ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ๋ชจ๋‹ฌ์ฐฝ ๋œจ๊ธฐ

2.๊ฐ’์„ ์ž…๋ ฅํ•˜๋Š” ๋ชจ๋‹ฌ์ฐฝ์„ ์ œ์™ธํ•œ ๋ถ€๋ถ„์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ํšŒ์›๊ฐ€์ž…/๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ๋‚˜๊ฐ€๊ธฐ

ํšŒ์›๊ฐ€์ž… ์ปดํฌ๋„ŒํŠธ์—์„œ props๋กœ ๋ฐ›์•„์˜จ ์ฝ”๋“œ

์•„์‰ฌ์› ๋˜ ์ 
์ฒ˜์Œ ๋ชจ๋‹ฌ์ฐฝ์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•ด์•ผ ํ• ์ง€ ๋กœ์ง์„ ์งœ๋Š” ๋ฐ ๋งŽ์€ ์‹œ๊ฐ„์„ ํˆฌ์žํ–ˆ๋‹ค.
์›ํ•˜๋Š” event๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ•˜๋‚˜ํ•˜๋‚˜(์ฐจ๊ทผ์ฐจ๊ทผ) ๋กœ์ง์„ ์งœ์•ผ ํ–ˆ๋Š”๋ฐ ํ•œ๊บผ๋ฒˆ์— ๋ชจ๋“  event๋ฅผ ๊ตฌํ˜„ํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์š•์‹ฌ๋•Œ๋ฌธ์— ์ค‘๊ฐ„์— ๋กœ์ง์ด ๊ผฌ์ด๋ฉด์„œ ์‹œ๊ฐ„์„ ํšจ์œจ์ ์œผ๋กœ ์“ฐ์ง€ ๋ชปํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
์›ํ•˜๋Š” event๋ฅผ ์ œ๋Œ€๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์†์ฝ”๋”ฉ์„ ํ•˜์ง€ ๋ง๊ณ (๋‡Œ๋ฅผ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  ์†์ด ๋จผ์ € ์›€์ง์ด๋Š” ํ–‰์œ„๋ฅผ ์ด๋ฅด๋Š” ๋ง) ๋‡Œ์ฝ”๋”ฉ์„ ํ•˜์ž!!

๐Ÿ˜ฌ๊ธฐ์–ตํ•ด์•ผ ํ•  ๊ฐ์ •(๋งˆ์Œ)๋“ค

1. ๊ฐ„์ ˆํ•จ
์–ด๋–ค ์ผ์„ ํ•˜๋“  ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋งˆ์Œ์ธ ๊ฒƒ ๊ฐ™๋‹ค. ๋ฌด์—‡์ด๋“  ๊ฐ„์ ˆํ•˜์ง€ ์•Š์œผ๋ฉด ์›ํ•˜๋Š” ๋ชฉํ‘œ์— ๋„๋‹ฌํ•˜์ง€ ๋ชปํ•œ๋‹ค.
์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์Šค์Šค๋กœ๋ฅผ ๋˜๋Œ์•„๋ดค์„ ๋•Œ ๊ฐ€์žฅ ๋ถ€์กฑํ–ˆ๋˜ ๋ถ€๋ถ„์ด ์ด ๋ถ€๋ถ„์ด์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ๊ฐ„์ ˆํ•จ๋ณด๋‹ค๋Š” ์•ˆ์ผํ•จ์ด ๋” ์ปธ๋‹ค. '์ด ์ •๋„๋ฉด ๋๊ฒ ์ง€'๋ผ๋Š” ๋งˆ์Œ์œผ๋กœ ๋งค ์ˆœ๊ฐ„ ํƒ€ํ˜‘ํ–ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‹ค๋ณด๋‹ˆ ๋” ์ข‹์€ ์ฝ”๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ๋” ๋งŽ์€ ๊ธฐ๋Šฅ๋“ค์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์•ˆ์ผํ•˜๊ฒŒ 2์ฃผ๋ฅผ ๋ณด๋ƒˆ๋‹ค.
ํ”„๋กœ์ ํŠธ ๋งˆ์ง€๋ง‰ ๋‚ , ๋‹ค๋ฅธ ํŒ€๋“ค์˜ ๋ฐœํ‘œ๋ฅผ ๋ณด๋ฉด์„œ '๋‚˜๋„ ์กฐ๊ธˆ ๋” ์š•์‹ฌ๋ƒˆ๋”๋ผ๋ฉด, ์กฐ๊ธˆ ๋” ๊ฐ„์ ˆํ•˜๊ฒŒ ์ž„ํ–ˆ๋”๋ผ๋ฉด...'์ด๋ผ๋Š” ์ƒ๊ฐ์ด ๋จธ๋ฆฟ์†์„ ๋– ๋‚˜์ง€ ์•Š์•˜๋‹ค.
๊ฒฐ๊ตญ ๊ฐ„์ ˆํ•จ์ด ๋‚˜๋ฅผ ์„ฑ์žฅํ•˜๊ฒŒ ๋งŒ๋“ ๋‹ค. ๊ฐ„์ ˆํ•˜๊ฒŒ ์ž„ํ•ด์•ผ ์›ํ•˜๋Š” ๋ฐ”๋ฅผ ์ด๋ฃฐ ์ˆ˜ ์žˆ๋‹ค.

2. ์‹คํŒจ๋ฅผ ๋‘๋ ค์›Œํ•˜์ง€ ์•Š์„ ์šฉ๊ธฐ(ํฌ๊ธฐํ•˜์ง€ ์•Š๋Š” ๋งˆ์Œ)
๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•œ ์ง€ ๊ณ ์ž‘ ๋‘๋‹ฌ์—ฌ๋ฐ–์— ๋˜์ง€ ์•Š์•˜์ง€๋งŒ, ์ด ๊ธฐ๊ฐ„ ๋™์•ˆ ๊ฐ€์žฅ ๋งŽ์ด ๋Š๊ผˆ๋˜ ์ ์€, ๊ฐœ๋ฐœ์ž๋Š” ๊ทธ ์–ด๋–ค ์ง์—…๊ตฐ๋ณด๋‹ค ๋งŽ์€ ์‹คํŒจ๋ฅผ ๊ฒฝํ—˜ํ•˜๋Š” ์ง์—… ์ค‘ ํ•˜๋‚˜๋ผ๋Š” ๊ฒƒ์ด์—ˆ๋‹ค.
๋‚ด๊ฐ€ ์˜๋„ํ–ˆ๋˜ ๋Œ€๋กœ ํ•œ ๋ฒˆ์— ๊ธฐ๋Šฅ์ด ๊ตฌํ˜„๋  ๋•Œ๋ณด๋‹ค ๊ทธ๋ ‡์ง€ ์•Š์•˜๋˜ ๊ฒฝ์šฐ๊ฐ€, ์ฝ”๋“œ์˜ ๋กœ์ง์ด ์™„๋ฒฝํ–ˆ์„ ๋•Œ๋ณด๋‹ค ๊ทธ๋ ‡์ง€ ์•Š์•˜์„ ๋•Œ๊ฐ€ ์••๋„์ ์œผ๋กœ ๋” ๋งŽ์•˜๋‹ค.
์ˆ˜๋งŽ์€ ์‹คํŒจ์— ์ ์‘๋  ๋ฒ•๋„ ํ–ˆ์œผ๋‚˜ ์‹คํŒจ๋Š” ํ•ญ์ƒ ๋‚ฏ์„ค์—ˆ์œผ๋ฉฐ ์ขŒ์ ˆ๊ณผ ๋ฌด๋ ฅ๊ฐ์œผ๋กœ ๋‹ค๊ฐ€์™”๋‹ค.
๊ทธ๋Ÿฌ๋‹ค๋ณด๋‹ˆ ์ฝ”๋“œ๋ฅผ ์น˜๋Š” ๊ฒƒ์ด ๋‘๋ ค์›Œ์กŒ๊ณ , '๋” ์ด์ƒ ์‹คํŒจํ•˜๊ณ  ์‹ถ์ง€ ์•Š๋‹ค๋Š” ๋งˆ์Œ'์ด ๋‚ด ๋งˆ์Œ์†์— ์•ˆ์ผํ•จ์„ ํ‚ค์›Œ๋ƒˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ์•ž์œผ๋กœ๋Š” ํ•ญ์ƒ ๋งˆ์Œ์ด ์•ฝํ•ด์งˆ ๋•Œ๋งˆ๋‹ค, ์Šค์Šค๋กœ์™€ ํƒ€ํ˜‘ํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋งˆ๋‹ค "๊ฐœ๋ฐœ์ž์˜ ์‹ค๋ ฅ์€ ๊ณ ํ†ต์˜ ์ดํ•ฉ์ด๋‹ค"๋ผ๋Š” ์ž„๋ฐฑ์ค€ ๊ฐœ๋ฐœ์ž๋‹˜์˜ ๋ง์”€์„ ๊ธฐ์–ตํ•˜๋ ค ํ•œ๋‹ค.
ํ˜„์žฌ์˜ ์‹คํŒจ์™€ ๊ณ ํ†ต์„ ๋‘๋ ค์›Œํ•˜์—ฌ ํšŒํ”ผํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ด๋ฅผ ๊ทน๋ณตํ•˜๋ ค๋Š” ์šฉ๊ธฐ์™€ ํฌ๊ธฐํ•˜์ง€ ์•Š์œผ๋ ค๋Š” ๋งˆ์Œ์ด ๊ทธ ์–ด๋Š ๋•Œ๋ณด๋‹ค ํ•„์š”ํ•˜๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์–ด์ฉŒ๋ฉด, ๊ฐœ๋ฐœ์ž๋Š” ํ‰์ƒ ์‹คํŒจ์™€ ์ขŒ์ ˆ์„ ๋งˆ์ฃผํ•˜๊ฒŒ ๋ ํ…Œ๋‹ˆ ์ด ๊ฐ์ •์— ๋นจ๋ฆฌ ์ต์ˆ™ํ•ด์ง€๋Š” ๊ฒŒ ๋” ์ข‹์„์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

3. ์Šค์Šค๋กœ ํ•ด๊ฒฐํ•˜๋ ค๋Š” ์˜์ง€
ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„๋™์•ˆ ๊ฐ€์žฅ ์•„์‰ฌ์› ๋˜ ๋ถ€๋ถ„์ด์—ˆ๋‹ค.
2์ฃผ๊ฐ„์˜ ํŒ€ ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„์ด ๋„ˆ๋ฌด๋‚˜๋„ ์งง๊ฒŒ ๋Š๊ปด์กŒ๊ณ , ๋‚ด๊ฐ€ ๋งก์€ ํŽ˜์ด์ง€์™€ ๊ธฐ๋Šฅ์„ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ๊ตฌํ˜„ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ƒ๊ฐ์— ์‚ฌ๋กœ์žกํ˜€ ์Šค์Šค๋กœ ์ถฉ๋ถ„ํžˆ ๊ณ ๋ฏผํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ–์ง€ ๋ชปํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
์ฝ”๋“œ๋ฅผ ์งœ๋‹ค๊ฐ€ ๋ง‰ํž ๋•Œ๋ฉด ํ˜ผ์ž ์‹œ๊ฐ„์„ ๊ฐ–๊ณ  ์—ฌ๋Ÿฌ ์‹œ๋„๋ฅผ ํ•ด๋ณธ๋‹ค๊ฑฐ๋‚˜ ์นจ์ฐฉํ•˜๊ฒŒ ๋กœ์ง์„ ํ•œ ๋‹จ๊ณ„์”ฉ ์ƒ๊ฐํ•ด๋ด์•ผ ํ–ˆ๋Š”๋ฐ, ์กฐ๊ธ‰ํ•จ์œผ๋กœ ์ธํ•ด ์ถฉ๋ถ„ํžˆ ๊ณ ๋ฏผํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ–์ง€ ์•Š๊ณ  ์ฃผ๋ณ€ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์—๊ฒŒ ๋ฐ”๋กœ ๋ฌผ์–ด๋ณด๊ฑฐ๋‚˜ ๋ฉ˜ํ† ๋‹˜๋“ค๊ป˜ ๋ฐ”๋กœ ์งˆ๋ฌธํ–ˆ๋‹ค.
๊ทธ๋ ‡๋‹ค๋ณด๋‹ˆ ๋‚ด๊ฐ€ ๊ณ ๋ฏผํ–ˆ๋˜ ๋ถ€๋ถ„์ด ๋‚˜์˜ ๊ฒƒ์ด ๋˜์ง€ ์•Š์•˜๊ณ , ๋‹ค๋ฅธ ๋ˆ„๊ตฐ๊ฐ€์˜ ์ฝ”๋“œ๊ฐ€ ๋˜์–ด๋ฒ„๋ ธ๋‹ค.
๊ฐœ๋ฐœ์ž๋กœ์„œ ๊ฐ€์žฅ ์ตœ์•…์ธ ์Šต๊ด€์„ ๊ธฐ๋ฅด๊ณ  ์žˆ์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ซ๊ณ  ์ด์™€ ๊ฐ™์€ ์‹ค์ˆ˜๋ฅผ ๋‹ค์‹œ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์•„์•ผ ๊ฒ ๋‹ค๋Š” ๋‹ค์ง์„ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.
์ตœ์†Œํ•œ 1์‹œ๊ฐ„ ์ •๋„๋Š” ์Šค์Šค๋กœ ๊ณ ๋ฏผํ•ด๋ด์•ผ ํ•œ๋‹ค. ๊ณ ๋ฏผํ•˜๋Š” ์‹œ๊ฐ„์ด ๋น„๋กœ์†Œ ๋‚˜์˜ ๊ฐœ๋ฐœ ์‹ค๋ ฅ์ด ๊ธธ๋Ÿฌ์ง€๋Š” ์‹œ๊ฐ„์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
๋˜ํ•œ ๋ชจ๋ฅด๋Š” ๋ถ€๋ถ„์ด ์ƒ๊ฒผ๊ฑฐ๋‚˜ ๋ง‰ํ˜”๋‹ค๊ณ  ํ•ด์„œ ๋ฐ”๋กœ ์ฃผ๋ณ€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋„์›€์„ ์ฒญํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ StackOverFlow๋‚˜ MDN๊ฐ™์€ ์‚ฌ์ดํŠธ๋ฅผ ์„œ์นญํ•ด์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋Šฅ๋ ฅ๋„ ๊ธธ๋Ÿฌ์•ผ ํ•œ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

4. ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์˜ ์ค‘์š”์„ฑ
์ด๋ฒˆ ํŒ€ ํ”„๋กœ์ ํŠธ์—์„œ ์ฒ˜์Œ์œผ๋กœ ๋ฐฑ์—”ํŠธ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๊ณผ ์ง์ ‘์ ์œผ๋กœ ์†Œํ†ตํ•˜๊ณ  ์„œ๋ฒ„๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค. ๊ธฐ์กด์—๋Š” ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž์™€์˜ ์ง์ ‘์ ์ธ ์†Œํ†ต์„ ๊ฒฝํ—˜ํ•ด๋ณด์ง€ ๋ชปํ•œ ํ„ฐ๋ผ ๊ทธ ์ค‘์š”์„ฑ์„ ํฌ๊ฒŒ ๊นจ๋‹ซ์ง€ ๋ชปํ–ˆ์œผ๋‚˜ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด์„œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ์ •๋ง ์ค‘์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ซ๊ฒŒ ๋˜์—ˆ๋‹ค.
ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋ฅผ ๋งก์•˜๋˜ ๋‚˜๋Š” ๊ทธ ๋ˆ„๊ตฌ๋ณด๋‹ค ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๊ณผ์˜ ์†Œํ†ต์ด ์ •๋ง ์ค‘์š”ํ–ˆ๋Š”๋ฐ, ๋ฐ์ดํ„ฐ๋ฅผ ์–ด๋–ค ํ˜•ํƒœ๋กœ ์–ด๋–ป๊ฒŒ ์ฃผ๊ณ  ๋ฐ›์„์ง€, ๋กœ๊ทธ์ธ ์„ฑ๊ณต ๋˜๋Š” ์‹คํŒจ ์‹œ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ๊ฒฐ๊ณผ๊ฐ’์„ ํŽ˜์ด์ง€์— ๋‚˜ํƒ€๋‚ด์•ผ ํ• ์ง€ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๊ณผ ๋งŽ์€ ๋Œ€ํ™”๊ฐ€ ํ•„์š”ํ–ˆ๋‹ค.
๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•˜๋‚˜์˜ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ์—ฌ๋Ÿฌ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋‚˜๋ˆ ์„œ ์ž‘์—…ํ•˜๋‹ค๋ณด๋‹ˆ, ์ดˆ๊ธฐ git setting๋ถ€ํ„ฐ publicํด๋”์— ๋“ค์–ด๊ฐˆ Data ์„ค์ •, common.scss, css nesting๋“ฑ๋“ฑ ํ”„๋กœํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฆฌ๋„ ์„œ๋กœ ์†Œํ†ตํ•ด์•ผ ํ•  ๋ถ€๋ถ„์ด ๋งŽ์•˜๋‹ค.

๐ŸคจEpilogue

2์ฃผ๊ฐ„์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๊ฐ€์žฅ ๋งŽ์ด ๋“ค์—ˆ๋˜ ์ƒ๊ฐ์€ "๊ฐ™์ด ์ผํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์ž"๋Š” ๊ฒƒ์ด์—ˆ๋‹ค.
๊ฐ™์ด ์ผํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ๋‚˜๋Š” ์–ด๋–ค ๋Šฅ๋ ฅ์„ ๊ฒธ๋น„ํ•ด์•ผ ํ• ๊นŒ ๊ณ ๋ฏผํ•ด๋ดค๋‹ค.

์ฒซ ์งธ, ๋„ˆ๋ฌด๋‚˜๋„ ๋‹น์—ฐํ•˜์ง€๋งŒ ๊ฐœ๋ฐœ ์‹ค๋ ฅ์ด๋‹ค. ์‹ค๋ ฅ์ด ์—†์œผ๋ฉด ์•„๋ฌด๊ฒƒ๋„ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
์‹ค๋ ฅ์„ ๊ธฐ๋ฅด์ž.
ํ•ญ์ƒ ๊ฐ„์ ˆํ•˜๊ณ  ์ง„์ง€ํ•˜๊ฒŒ ์ž„ํ•˜์ž.
์Šค์Šค๋กœ ํ•ด๊ฒฐํ•˜๋ ค๋Š” ์˜์ง€๋ฅผ ๊ธฐ๋ฅด์ž.
์‹คํŒจ๋ฅผ ๋‘๋ ค์›Œํ•˜์ง€ ๋ง๊ณ  ๋Š์ž„์—†์ด ๋„์ „ํ•˜์ž.

๋‘˜ ์งธ, ์ข‹์€ ์‚ฌ๋žŒ์ด ๋˜๋Š” ๊ฒƒ์ด๋‹ค. ๋ˆ„๊ตฐ๊ฐ€ ๋‚˜์˜ ์ด๋ฆ„์„ ๋– ์˜ฌ๋ ธ์„ ๋•Œ "๊ฐ™์ด ์ผํ•˜๊ธฐ ์ข‹์€ ์‚ฌ๋žŒ" ๋˜๋Š” "๊ฐ™์ด ์ผํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ"์œผ๋กœ ์ธ์‹๋  ์ˆ˜ ์žˆ๋„๋ก
๋Š˜ ๊ฒธ์†ํ•˜๊ณ ,
๋ชจ๋‚˜์ง€ ์•Š์€,
๋‚˜๋ณด๋‹ค ๋‚จ์„ ๋จผ์ € ์ƒ๊ฐํ•˜๋Š”,
๊ฑด๊ฐ•ํ•œ ์ฒ ํ•™์„ ์ง€๋‹Œ ์ƒ๊ฐํ•˜๋Š” ์‚ฌ๋žŒ์ด ๋˜์ž.

profile
๋‚ด์‹ค ์žˆ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ์˜ค๋Š˜๋„ ์ตœ์„ ์„ ๋‹คํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2020๋…„ 9์›” 27์ผ

ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹์›ƒ๊ธด ๊ฐœ๋ฐœ์ž ์˜ˆ์ฐฌ๋‹˜ 2์ฃผ๋™์•ˆ ์ˆ˜๊ณ  ๋งŽ์•˜์–ด์š”!! ํ”Œ์  ์žฌ๋ฐŒ์—ˆ์Šต๋‹ˆ๋‹ค!!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2020๋…„ 9์›” 28์ผ

์ž˜๋ณด๊ณ ๊ฐ‘๋‹ˆ๋‹ค

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ