Project Rule - FRONTENDBOOTCAMP-14th/Sashimi GitHub Wiki

๐Ÿงพ Coding & Git Convention Guide

๐Ÿ“Œ ํ”„๋กœ์ ํŠธ ์ผ๊ด€์„ฑ๊ณผ ํ˜‘์—… ํšจ์œจ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•œ ๊ฐ€์ด๋“œ์ž…๋‹ˆ๋‹ค.
์ฝ”๋“œ ์Šคํƒ€์ผ, ๋„ค์ด๋ฐ, Git ์ „๋žต ๋“ฑ ํŒ€ ์ „์ฒด๊ฐ€ ๊ฐ™์€ ๊ธฐ์ค€์„ ๋”ฐ๋ฅด๋„๋ก ์„ค์ •ํ•œ ์›์น™์ž…๋‹ˆ๋‹ค.


๐Ÿงฑ HTML/CSS ๋„ค์ด๋ฐ ๊ทœ์น™

  • id โ†’ camelCase
    ์˜ˆ: userCard, scrollTarget

  • class โ†’ kebab-case
    ์˜ˆ: main-banner, card-item

  • ํŒŒ์ผ๋ช…, ํด๋”๋ช…, ์ด๋ฏธ์ง€๋ช… โ†’ kebab-case
    ์˜ˆ: user-profile.js, img-folder/

๐Ÿ”” id๋ณด๋‹ค๋Š” class ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.
โ†’ id๋Š” ๊ณ ์œ ์„ฑ์œผ๋กœ ์ธํ•ด ์Šคํƒ€์ผ ์žฌ์‚ฌ์šฉ ๋ฐ ์œ ์ง€๋ณด์ˆ˜์— ๋ถˆ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.


๐ŸŽจ ์Šคํƒ€์ผ๋ง ์›์น™

  • ์ƒ‰์ƒ, ํฐํŠธ, ํฌ๊ธฐ ๋“ฑ์€ ๋ณ€์ˆ˜๋กœ ๊ด€๋ฆฌ
    โ†’ CSS ๋ณ€์ˆ˜ ๋˜๋Š” SCSS ๋ณ€์ˆ˜ ์‚ฌ์šฉ

css :root { --main-color: #1e90ff; --font-heading: 'Pretendard', sans-serif; }

  • ์•„์ด์ฝ˜/์ผ๋Ÿฌ์ŠคํŠธ๋Š” .svg + <img> ํƒœ๊ทธ ํ™œ์šฉ
    โ†’ ๋ธŒ๋ผ์šฐ์ € ์ตœ์ ํ™” ๋ฐ ๋™์  ์Šคํƒ€์ผ๋ง์— ์œ ๋ฆฌ

  • ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€ ์ฒ˜๋ฆฌ

    • picture ํƒœ๊ทธ ๋Œ€์‹  background-image ์†์„ฑ์„ ์„ ํ˜ธ
    • ์ด์œ : CSS/JS์—์„œ ์ œ์–ด ๋ฐ ๋ฆฌํŒฉํ† ๋ง์ด ์‰ฌ์›€

๐Ÿงฉ Git ์ปค๋ฐ‹ ๋ฉ”์‹œ์ง€ ์ปจ๋ฒค์…˜

์ด๋ชจ์ง€ ํƒ€์ž… ์„ค๋ช…
โœจ feat ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ์ถ”๊ฐ€
๐Ÿ› bugFix ๋ฒ„๊ทธ ์ˆ˜์ •
๐Ÿ“š docs ๋ฌธ์„œ ์ˆ˜์ •
โœ๏ธ modify ๊ธฐ๋Šฅ ๋ณ€๊ฒฝ์„ ํฌํ•จํ•œ ์ฝ”๋“œ ์ˆ˜์ •
โ™ป๏ธ refactor ๋ฆฌํŒฉํ† ๋ง (๋™์ž‘ ๋ณ€ํ™” ์—†์Œ)
๐ŸŽจ design CSS ๋“ฑ UI ๊ด€๋ จ ๋ณ€๊ฒฝ
๐Ÿ’ก comment ์ฃผ์„ ์ถ”๊ฐ€ ๋ฐ ์ˆ˜์ •
๐Ÿ’… style ์ฝ”๋“œ ํฌ๋งท, ๊ณต๋ฐฑ, ์„ธ๋ฏธ์ฝœ๋ก  ๋“ฑ ํฌ๋งทํŒ…
๐Ÿงช test ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ๊ด€๋ จ ์ž‘์—…
โš™๏ธ chore ๋นŒ๋“œ, ํŒจํ‚ค์ง€ ์„ค์ • ๋“ฑ ์šด์˜ ์ฝ”๋“œ ์ž‘์—…
๐Ÿš€ init ์ดˆ๊ธฐ ํ”„๋กœ์ ํŠธ ์„ธํŒ…
๐Ÿšš rename ํŒŒ์ผ ๋˜๋Š” ํด๋”๋ช… ๋ณ€๊ฒฝ
๐Ÿ—‘๏ธ remove ํŒŒ์ผ ์‚ญ์ œ
๐Ÿ”€ merge ๋ธŒ๋žœ์น˜ ๋ณ‘ํ•ฉ ์‹œ ์‚ฌ์šฉ
๐Ÿ—๏ธ build ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํŒจํ‚ค์ง€ ์„ค์น˜
โ™ฟ๏ธ accessibility ์ ‘๊ทผ์„ฑ ๊ด€๋ จ ์ฝ”๋“œ ์ž‘์—…

โœ… ํ˜•์‹ ์˜ˆ์‹œ:
โœจ feat: ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ๊ตฌํ˜„
โ™ป๏ธ refactor: ์นด๋“œ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ ๊ฐœ์„ 


๐ŸŒฟ Git ๋ธŒ๋žœ์น˜ ์ „๋žต

  • main
    โ†’ ์‹ค์ œ ๋ฐฐํฌ์— ์‚ฌ์šฉ๋˜๋Š” ์ตœ์ข… ๋ธŒ๋žœ์น˜

  • develop
    โ†’ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ ๋ธŒ๋žœ์น˜๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ๊ฐœ๋ฐœ ๋ธŒ๋žœ์น˜

  • feature/๊ธฐ๋Šฅ๋ช…
    โ†’ ๋‹จ์œ„ ์ž‘์—… ๋ธŒ๋žœ์น˜
    ์˜ˆ: feature/signup-form, feature/product-list


๐Ÿ“š ์ถ”๊ฐ€ ๊ฐ€์ด๋“œ๋ผ์ธ

  • ์ ‘๊ทผ์„ฑ: ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ + WAI-ARIA ์†์„ฑ ์ ๊ทน ์‚ฌ์šฉ
  • ์ฃผ์„ ์ž‘์„ฑ: ๋ณต์žกํ•˜๊ฑฐ๋‚˜ ๋น„์ง๊ด€์ ์ธ ๋กœ์ง์—๋Š” ์ฃผ์„ ํ•„์ˆ˜
  • ํŒŒ์ผ ๊ตฌ์กฐ: ๊ธฐ๋Šฅ ๋‹จ์œ„๋กœ ํด๋” ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ํ•ด ์œ ์ง€๋ณด์ˆ˜์„ฑ ํ™•๋ณด
  • ์ฝ”๋“œ ๋ฆฌ๋ทฐ: ๋ชจ๋“  PR์€ ์ตœ์†Œ 1๋ช… ์ด์ƒ์˜ ๋ฆฌ๋ทฐ ํ›„ ๋จธ์ง€
โš ๏ธ **GitHub.com Fallback** โš ๏ธ