Skip to content
Helena Park edited this page Mar 29, 2025 · 30 revisions

ν”„λ‘œμ νŠΈ μ„€μ •

이 ν”„λ‘œμ νŠΈμ— 관심을 κ°€μ Έμ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€. κΈ°μ—¬λŠ” μ–Έμ œλ‚˜ ν™˜μ˜μž…λ‹ˆλ‹€! πŸŽ‰

λ³Έ ν”„λ‘œμ νŠΈλŠ” GitHub의 ν’€ λ¦¬ν€˜μŠ€νŠΈ(PR) 기반으둜 κΈ°μ—¬λ₯Ό κ΄€λ¦¬ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.
λ¨Όμ € ν”„λ‘œμ νŠΈλ₯Ό ν¬ν¬ν•˜κ³  PR을 λ³΄λ‚΄λŠ” 방법을 μ°Έκ³ ν•΄ μ£Όμ„Έμš”.

둜컬 μ‹€ν–‰ ν™˜κ²½ μ„€μ •

  1. Bun μ„€μΉ˜ν•˜κΈ°

  2. ν„°λ―Έλ„μ—μ„œ μ•„λž˜ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€:

    cd path/to/clone-repo
    bun install
    bun run dev
    bun run sb or storybook         # Storybook μ‹€ν–‰
    

μ½”λ“œ κΈ°μ—¬ κ°€μ΄λ“œ

μ™ΈλΆ€ κΈ°μ—¬μž (λ‹¬λ ˆ μŠ€ν„°λ”” μ™ΈλΆ€ 인원)

  • 이슈 νŽ˜μ΄μ§€μ—μ„œ ν•΄κ²°ν•˜κ³ μž ν•˜λŠ” 이슈λ₯Ό μ„ νƒν•˜κ±°λ‚˜, 직접 이슈λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.

λ‚΄λΆ€ κΈ°μ—¬μž (λ‹¬λ ˆ μŠ€ν„°λ”” ꡬ성원)

κΈ°μ—¬ 절차

  1. ν”„λ‘œμ νŠΈ μ„€μ •

  2. 브랜치 생성

    • main λΈŒλžœμΉ˜μ—μ„œ μƒˆλ‘œμš΄ feature 브랜치λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
    • 브랜치 μ΄λ¦„μ—λŠ” -, _ μ™Έμ˜ 특수문자 μ‚¬μš©μ€ μ œν•œλ©λ‹ˆλ‹€.
      참고 이슈
  3. κΈ°λŠ₯ κ΅¬ν˜„ 및 컀밋

    • 브랜치 λ‚΄μ—μ„œ μ†ŒμŠ€ μ½”λ“œλ₯Ό μˆ˜μ •ν•˜κ³  μ»€λ°‹ν•©λ‹ˆλ‹€.
  4. ν…ŒμŠ€νŠΈ μž‘μ„±

    • κΈ°μ—¬ν•œ μ½”λ“œκ°€ μ •μƒμ μœΌλ‘œ λ™μž‘ν•˜λŠ”μ§€ 확인할 수 μžˆλŠ” ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•©λ‹ˆλ‹€.
  5. PR 생성

    • Pull Requests νŽ˜μ΄μ§€μ—μ„œ μƒˆλ‘œμš΄ PR을 μƒμ„±ν•©λ‹ˆλ‹€.
    • PR이 λ“±λ‘λœ μ΄μŠˆμ™€ μ—°κ΄€λ˜μ–΄ μžˆλ‹€λ©΄, PR 생성 ν›„ 였λ₯Έμͺ½ μ‚¬μ΄λ“œλ°”μ˜ Development ν•­λͺ©μ—μ„œ ν•΄λ‹Ή 이슈λ₯Ό 선택해 μ—°κ²°ν•΄μ£Όμ„Έμš”.

    PR 이슈 μ—°κ²° μ˜ˆμ‹œ

  6. PR 리뷰 및 병합

    • μ΅œμ†Œ ν•œ λͺ… μ΄μƒμ˜ κ΄€λ¦¬μžκ°€ PR을 κ²€ν† ν•˜κ³  μ½”λ©˜νŠΈλ₯Ό λ‚¨κΉλ‹ˆλ‹€.
    • λ³€κ²½ μš”μ²­μ΄ μžˆμ„ 경우, μˆ˜μ •μ„ λ°˜μ˜ν•œ ν›„ λ‹€μ‹œ ν‘Έμ‹œν•˜κ³  리뷰λ₯Ό μš”μ²­ν•©λ‹ˆλ‹€.
    • μ΅œμ†Œ 1개의 μŠΉμΈμ„ 받은 ν›„ main λΈŒλžœμΉ˜μ— λ³‘ν•©λ©λ‹ˆλ‹€.
    • 이후 릴리즈λ₯Ό 톡해 κΈ°μ—¬ν•œ λ‚΄μš©μ΄ λ°°ν¬λ©λ‹ˆλ‹€.

ν’ˆμ§ˆ 검사

main λΈŒλžœμΉ˜μ— ν’ˆμ§ˆ 기쀀에 λ―Έλ‹¬ν•˜λŠ” μ½”λ“œκ°€ μœ μž…μ΄ λ˜μ§€ μ•Šλ„λ‘ PR을 μ˜¬λ¦¬μ‹œλ©΄ μžλ™μœΌλ‘œ ν’ˆμ§ˆ 검사가 μ§„ν–‰λ˜κ³  μ‹€νŒ¨ν•  경우 병합이 λΆˆκ°€λŠ₯ν•©λ‹ˆλ‹€. 각 ν’ˆμ§ˆ κ²€μ‚¬λŠ” κ°œλ°œμžκ°€ 둜컬 ν™˜κ²½μ—μ„œ 직접 μ§„ν–‰ν•˜μ‹€ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

Formatting

Prettierλ₯Ό ν†΅ν•΄μ„œ 일관적인 μ½”λ“œ ν¬λ©§νŒ…μ„ μœ μ§€ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. VSCode μ‚¬μš©μž 뢄듀은 Pretteir μ΅μŠ€ν…μ…˜μ„ μ“°μ‹œλ©΄ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λ©΄μ„œ μžλ™μœΌλ‘œ μ½”λ“œλ₯Ό ν¬λ©§νŒ…ν•  수 μžˆμ–΄μ„œ νŽΈν•˜λ‹ˆ μΆ”μ²œλ“œλ¦½λ‹ˆλ‹€.

Linting

ESLintλ₯Ό ν†΅ν•΄μ„œ 잠재적인 문제λ₯Ό λ°œκ²¬ν•˜κ³  보범 사둀λ₯Ό λ”°λ₯΄κ³  μžˆμŠ΅λ‹ˆλ‹€. λ¦°νŒ… κ·œμΉ™μ„ μœ„λ°˜ν•˜κ³  μžˆλŠ” μ½”λ“œκ°€ μžˆλŠ”μ§€ ν™•μΈν•˜λ €λ©΄ λ‹€μŒ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€.

$ bun run lint

Type Checking

TypeScirptλ₯Ό ν†΅ν•΄μ„œ 정적 νƒ€μž… 검사λ₯Ό ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. νƒ€μž… 였λ₯˜κ°€ μžˆλŠ”μ§€ ν™•μΈν•˜λ €λ©΄ λ‹€μŒ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€.

$ bunx tsc

ν”„λ‘œμ νŠΈ ꡬ쑰

  • src/components μ•„λž˜μ— 폴더λ₯Ό λ§Œλ“€κ³ , κ·Έ μ•ˆμ— μ»΄ν¬λ„ŒνŠΈ 파일, μŠ€ν† λ¦¬ 파일, ν…ŒμŠ€νŠΈ νŒŒμΌμ„ μœ„μΉ˜μ‹œν‚΅λ‹ˆλ‹€.
  • 폴더 이름, 파일 이름, μ»΄ν¬λ„ŒνŠΈ 이름은 λͺ¨λ‘ PascalCase둜 letter caseλ₯Ό ν†΅μΌν•©λ‹ˆλ‹€.
  • λ³€μˆ˜ 이름, ν•¨μˆ˜ 이름, prop 이름은 λͺ¨λ‘ camelCase둜 letter caseλ₯Ό ν†΅μΌν•©λ‹ˆλ‹€.
  • index.tsx νŒŒμΌμ„ ν†΅ν•΄μ„œ re-exportν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ Checkbox
β”‚   β”‚   β”‚   β”œβ”€β”€ Checkbox.stories.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Checkbox.test.tsx
β”‚   β”‚   β”‚   └── Checkbox.tsx

ν…ŒμŠ€νŒ…

  • ν…ŒμŠ€νŠΈ νŒŒμΌμ€ λ³„λ„μ˜ 디렉토리에 쀑앙화 ν•˜μ§€ μ•Šκ³  μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 파일 λ°”λ‘œ μ˜†μ— λ‘‘λ‹ˆλ‹€.
  • λ‹¨μˆœν•œ ν…ŒμŠ€νŠΈ ꡬ쑰λ₯Ό μœ„ν•΄μ„œ ν…ŒμŠ€νŠΈ λŒ€μƒ λͺ¨λ“ˆμ˜ ꡬ쑰가 λ³΅μž‘ν•˜μ§€ μ•Šλ‹€λ©΄ describer()-it() λŒ€μ‹ μ— test()λ₯Ό μ”λ‹ˆλ‹€.

μ»¨λ²€μ…˜

  • ν•¨μˆ˜λ₯Ό μž‘μ„±ν•  λ•ŒλŠ” 가급적 ν™”μ‚΄ν‘œ λ¬Έλ²•λ³΄λ‹€λŠ” function ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜κΈ°

κ΄€λ ¨ 링크

Clone this wiki locally