์ œ๋ชฉ ๋…์„œ์ผ ์ถœํŒ์‚ฌ
๊ฐœ๋ฐœ์ž์˜ ๊ธ€์“ฐ๊ธฐ 2022/03/10 ์œ„ํ‚ค๋ถ์Šค

๊ฐœ๋ฐœ์ž์˜ ๊ธ€์“ฐ๊ธฐ

๋ฌธ์žฅ, ๋‹จ๋ฝ ๊ตฌ์กฐํ™”

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

์ด๋ฆ„ ์ง“๊ธฐ, ์ฃผ์„ ์“ฐ๊ธฐ

๋ช…๋ช… ๊ทœ์น™

๋ช…๋ช… ๊ทœ์น™์€ ํŒ€ ๋‚ด ๊ทœ์น™์ด ์ •ํ•ด์ ธ์žˆ์œผ๋ฉด ์‚ฌ๋‚ด ๊ทœ์น™์„ ๋”ฐ๋ฅธ ๊ฒƒ์ด ์ข‹๋‹ค. ํŒ€์›๋ผ๋ฆฌ ์ฝ”๋“œ ์ปจ๋ฒค์…˜์„ ์ž˜ ์ง€์ผœ์„œ ์ฝ”๋“œ๋ฅผ ์ง ๋‹ค๋ฉด ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์ข‹์•„์ง„๋‹ค.

  • ํŒŒ์Šค์นผ ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ํด๋ž˜์Šค ์ด๋ฆ„ ์ง“๊ธฐ.

    interface Menu
    Class CoffeeMenu implements Menu
    
  • ์นด๋ฉœ ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ํ•จ์ˆ˜, ๋ณ€์ˆ˜์˜ ์ด๋ฆ„ ์ง“๊ธฐ.

    let totalCount = null;
    
  • ์ƒ์ˆ˜๋Š” ๋ชจ๋‘ ๋Œ€๋ฌธ์ž๋กœ ์“ด๋‹ค.

    const TOTAL_COUNT = null;
    
  • ํŒจํ‚ค์ง€์™€ ๋ชจ๋“ˆ์€ ๋ชจ๋‘ ์†Œ๋ฌธ์ž๋กœ ์“ด๋‹ค.

    import developerwriting
    
  • BEM ํ‘œ๊ธฐ๋ฒ•.

    .form__button {
     ...;
    }
    

๋ณ€์ˆ˜ ์ด๋ฆ„์„ ์ž˜ ์ง“๋Š” ๋ฒ•

  1. ์˜๋ฏธ์—†๋Š” ๊ธ€์ž๋ฅผ ๋ณ€์ˆ˜๋ช…์œผ๋กœ ์ง“์ง€ ๋ง์ž.
  2. ๊ฒ€์ƒ‰์ด ์ž˜ ๋˜๋Š” ์ด๋ฆ„์œผ๋กœ ๋ณ€์ˆ˜๋ช…์„ ์ง“์ž.
  3. ์•ฝ์–ด๋Š” ๋ณดํŽธ์ ์œผ๋กœ ์‚ฌ์šฉ ๋˜๋Š” ๊ฒƒ์„ ์“ฐ์ž.
  4. ์ค‘์š”ํ•œ ๋‹จ์–ด๋ฅผ ์•ž์— ์“ฐ์ž.

์ข‹์€ ์ด๋ฆ„์ด ๊ฐ€์ง„ 5๊ฐ€์ง€ ํŠน์ง•

  1. ๊ฒ€์ƒ‰ํ•˜๊ธฐ ์‰ฝ๊ณ 

๊ณ ์ „์  ๋ฒ”์ฃผํ™”(ํŠน์ • ๋Œ€์ƒ๋“ค์„ ๋ฌถ์–ด ์ƒ์ฃผ ๋ฒ”์œ„๋ฅผ ๋งŒ๋“ค์–ด ์ดํ•ดํ•˜๋Š” ๊ฒƒ)๋ฅผ ์ด์šฉํ•ด ํ•œ ๋‹จ๊ณ„ ์ƒ์œ„ ๋ฒ”์ฃผ์˜ ์ด๋ฆ„์„ ํƒœ๊ทธ์ฒ˜๋Ÿผ ๋ง๋ถ™์ด๋ฉด ๋œ๋‹ค.

  1. ์กฐํ•ฉํ•˜๊ธฐ ์‰ฝ๊ณ 

๊ฐœ๋ฐœ ์–ธ์–ด์˜ ๋ฌธ๋ฒ•๊ณผ ์กฐํ•ฉํ•ด ์ด๋ฆ„์„ ์ง€์œผ๋ฉด ์‰ฝ๋‹ค.

  1. ์ˆ˜๊ธํ•˜๊ธฐ ์‰ฝ๊ณ 

๋Œ€์ƒ์„ ๊ตฌ๋ณ„ํ•  ํ•„์š” ์—†๋‹ค๋ฉด ์ด๋ฆ„์„ ์ƒˆ๋กœ ์ง€์„ ํ•„์š”๊ฐ€ ์—†๋‹ค (ex. for๋ฌธ์˜ i, j, k์ฒ˜๋Ÿผ)

  1. ๊ธฐ์–ตํ•˜๊ธฐ ์‰ฝ๊ณ 

๋„๋ฆฌ ์•Œ๋ ค์ง„ ์šฉ์–ด๋Š” ๊ทธ๋ƒฅ ์“ฐ๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ด๋‹ค. (ex. Hello World)

  1. ์ž…๋ ฅํ•˜๊ธฐ ์‰ฝ๊ณ 

์—ฐ์†๋˜๋Š” ์ฒ ์ž๋Š” ์ฃผ์˜ํ•˜์ž.

์ฃผ์„์€ ๋ฌด์กฐ๊ฑด ๋‚˜์ ๊นŒ?

์ฃผ์„์€ ๊ฐ™์ด ๊ฐœ๋ฐœ ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค๊ณผ ์†Œํ†ต์„ ํ•  ์ˆ˜ ์žˆ๊ณ  ๋” ์ข‹์€ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ์ˆ˜๋‹จ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ ๋„ˆ๋ฌด ๋งŽ์ด ์“ฐ๊ฒŒ ๋˜๋ฉด ์ฝ”๋“œ๋ฅผ ์ฝ๋Š”๋ฐ ๋ฐฉํ•ด๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค.

์ฃผ์„์ด ์ œ ์—ญํ• ์—๋งŒ ์ถฉ์‹ค ํ•˜๋‹ค๋ฉด ๋งŽ๊ณ  ์ ๊ณ ๋Š” ์ƒ๊ด€์—†๋‹ค. ์ฝ”๋“œ๋Š” ์˜๋ฏธ๋ฅผ, ์ฃผ์„์€ ์˜๋„๋ฅผ ๋‚˜ํƒ€๋‚˜๊ฒŒ ์“ฐ๋ฉด ๋œ๋‹ค.

์—๋Ÿฌ ๋ฉ”์„ธ์ง€

์—๋Ÿฌ ๋ฉ”์„ธ์ง€ ์ˆœ์„œ

  1. ์—๋Ÿฌ ๋‚ด์šฉ: ์˜ค๋ฅ˜๋กœ ์ธํ•œ ๋ฌธ์ œ์™€ ์ข…๋ฅ˜
  2. ์—๋Ÿฌ์˜ ์›์ธ: ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ ์ง์ ‘์ ์ด๊ณ  ๊ทผ๋ณธ์ ์ธ ์›์ธ
  3. ์—๋Ÿฌ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•: ์‚ฌ์šฉ์ž๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•  ๊ฐ€์žฅ ์‰ฝ๊ณ  ๋น ๋ฅธ ๋ฐฉ๋ฒ•

์›์ธ๊ณผ ๋‚ด์šฉ์ด ๋ณต์žกํ•  ๋• ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค.

์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋ณด๋‹ค ์˜ˆ๋ฐฉ ๋ฉ”์„ธ์ง€๋ฅผ ์“ฐ์ž

์˜ˆ๋ฅผ ๋“ค์–ด ํ˜ธํ…” ์˜ˆ์•ฝ ์‹œ ํ•œ ๋‹ฌ ๊นŒ์ง€๋งŒ ์˜ˆ์•ฝ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋‚ ์งœ๋ฅผ ์„ ํƒ ํ•  ๋•Œ ํ•œ ๋‹ฌ ๋’ค๋Š” disable ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋‹ค.

๋ฒ„ํŠผ์„ ํ™œ์šฉ

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

๋ฆด๋ฆฌ์ฆˆ ๋ฌธ์„œ ์“ฐ๊ธฐ

๋ฆด๋ฆฌ์ฆˆ ๋ฌธ์„œ ์“ฐ๋Š” ๋‹จ๊ณ„

  1. ์„ ์ •ํ•˜๊ธฐ

    ์‚ฌ์šฉ์ž๊ฐ€ ๋“ฃ๊ณ  ์‹ถ๊ณ , ํšŒ์‚ฌ๊ฐ€ ๋งํ•˜๊ณ  ์‹ถ๊ณ , ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ๋ฆฌ๊ณ  ์‹ถ์€ ์ฒด์ธ์ง€ ๋กœ๊ทธ๋ฅผ ์„ ์ •ํ•˜์ž.

  2. ๋ถ„๋ฅ˜ํ•˜๊ธฐ

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

  3. ์š”์•ฝํ•˜๊ธฐ

    ๋ฌธ์žฅ ๋‹จ์œ„๋กœ ์š”์•ฝ, ์„œ์ˆ ์‹ ๋ฌธ์žฅ์„ ๊ฐœ์กฐ์‹ ๋ฌธ์žฅ์œผ๋กœ ๋ฐ”๊พธ๋Š” ๋ฐฉ๋ฒ•์„ ์“ฐ๋ฉด ๋‚ด์šฉ์ด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ถ•์•ฝ๋˜๊ณ  ์˜๋ฏธ๋Š” ๋ถ„๋ช…ํ•ด์ง„๋‹ค.

  4. ์ข…ํ•ฉํ•˜๊ธฐ

    ๋‚ด์šฉ ์ „์ฒด๋ฅผ ์ข…ํ•ฉํ•ด์„œ ํ•œ ๋ฌธ์žฅ์œผ๋กœ ๋งŒ๋“ค๊ณ  ๊ทธ๊ฒƒ์„ ์ฒด์ธ์ง€ ๋กœ๊ทธ ์ฒซ ์ค„์— ์ ๋Š”๋‹ค. ๋‹จ, ๋‚ด์šฉ์„ ์ข…ํ•ฉํ•  ๋•Œ๋Š” ํ•ต์‹ฌ์ด ๋˜๋Š” ๋‚ด์šฉ๋“ค๋งŒ ๋ฐœ์ทŒํ•ด์„œ ์ข…ํ•ฉํ•œ๋‹ค. ์ฒด์ธ์ง€ ๋กœ๊ทธ ์„ ์ •ํ•˜๊ธฐ ์—์„œ 1์ˆœ์œ„๋กœ ์„ ์ •ํ–ˆ๋˜ ๋กœ๊ทธ๋ฅผ ๋ฐœ์ทŒํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

์„œํ‰

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