πŸŽ‰ berenickt λΈ”λ‘œκ·Έμ— 온 κ±Έ ν™˜μ˜ν•©λ‹ˆλ‹€. πŸŽ‰
Mobile
React Native
09-Jest-Expo

1. ν…ŒμŠ€νŠΈ

  • μ—λŸ¬λ₯Ό 사전에 κ²€μ‚¬ν•˜κΈ° μœ„ν•œ 것
  • λ™μž‘μ΄ 이전과 λ‹€λ₯Έκ²ƒμ΄ μžˆλŠ”μ§€ κ²€μ‚¬ν•˜λŠ” 것
  • 사전 검증을 ν†΅ν•˜μ—¬ μ•ˆμ •μ„± μžˆλŠ” 앱을 전달 ν•˜κΈ° μœ„ν•¨

1.1 Static Analysis

  • μ½”λ“œ μƒμ—μ„œ μžˆλŠ” 문제λ₯Ό λ°”λ‘œ μ•Œμ•„ λ‚Ό 수 μžˆλŠ” 것
  • Type Checking (Typescript, Flow λ“±)
  • Lint (ESLint)
  • κ°€μž₯ μ‰½κ²Œ μ ‘κ·Ό ν•  수 μžˆλŠ” 방법
  • μ €λΉ„μš© 고효율

1.2 Testable code

  • μ½”λ“œλ₯Ό 각각 λ‹¨μœ„μ— 맞게 μͺΌκ°œλŠ”κ²ƒ
  • 잘게 μͺΌκ°€ 수둝 더 ν…ŒμŠ€νŠΈκ°€ μ‰¬μ›Œμ§
  • λΉ„μ¦ˆλ‹ˆμŠ€ 둜직, App State, μ»΄ν¬λ„ŒνŠΈλ“±μ˜ λ‹¨μœ„λ‘œ 뢄리

1.3 Structuring Test

  • ν…ŒμŠ€νŠΈ μž‘μ„±μ‹œ λͺ…ν™•ν•˜κ²Œ μ–΄λ–€ ν…ŒμŠ€νŠΈμΈμ§€λ₯Ό μ „λ‹¬ν•˜κΈ° μœ„ν•¨
  • κ΅¬μ‘°ν™”λœ ν…ŒμŠ€νŠΈλ¬Έμ€ λͺ¨λ‘κ°€ ν…ŒμŠ€νŠΈμ˜ μš”κ΅¬μ‚¬ν•­μ„ νŒŒμ•…ν•˜κΈ° μ‰¬μ›Œμ§
    • Given : μ–΄λ–€ 쑰건의 ν…ŒμŠ€νŠΈ 인지?
    • When : μ–΄λ–€ ν•¨μˆ˜ λ˜λŠ” 행동에 μ˜ν•΄μ„œ λ°œμƒν•˜λŠ”κ²ƒ 인지?
    • Then : μ–΄λ– ν•œ 결과값이 λ‚˜μ™€μ•Ό ν•˜λŠ”μ§€
  • 과거에 μ’‹μ•„μš” λˆ„λ₯Έ 기둝 없이 μ’‹μ•„μš”λ₯Ό ν• λ•Œ μ’‹μ•„μš”κ°€ μ˜¬λΌκ°„λ‹€

1.4 Unit Test

  • κ°€μž₯ μž‘μ€ λ‹¨μœ„μ— λŒ€ν•œ ν…ŒμŠ€νŠΈ
  • 쉽고 λΉ λ₯΄κ²Œ μž‘μ„± ν•  수 있고 λ°”λ‘œ μ‹€ν–‰ν•˜μ—¬ 검증 κ°€λŠ₯
  • function λ˜λŠ” class 등에 적용
  • μž‘μ€λ‹¨μœ„λ‘œλ§Œ ν…ŒμŠ€νŠΈ ν•˜κΈ° λ•Œλ¬Έμ—, ν•©μ³μ‘Œμ„λ•Œ λ™μž‘μ΄ 달라 질 μˆ˜λ„ 있음

1.5 Integration Test

  • 톡합 ν…ŒμŠ€νŠΈ, μœ λ‹›ν…ŒμŠ€νŠΈλ“€κ³Ό ν•¨κ»˜ ν†΅ν•©ν•΄μ„œ ν…ŒμŠ€νŠΈ ν•˜λŠ”κ²ƒ
  • 각각의 μœ λ‹› ν…ŒμŠ€νŠΈ 결과듀을 μ„žμ–΄ ν…ŒμŠ€νŠΈ 결과값을 μ •ν•˜κ²Œ 됨

1.6 Component Test

  • μ»΄ν¬λ„ŒνŠΈ μžμ²΄μ— λŒ€ν•œ 검증을 μ§„ν–‰
  • Interaction Test : λ²„νŠΌμ΄ λˆŒλ¦¬λŠ”μ§€, ν˜Ήμ€ disableλ˜μ—ˆμ„λ•Œ λˆŒλ¦¬μ§€ μ•ŠλŠμ§€ 등에 λŒ€ν•œ 검증
  • Snapshot Test : 이전에 render 되던 것과 μ§€κΈˆ renderλ˜λŠ”κ²ƒμ΄ 같은지 검증

1.7 E2E Test (End to End Test)

  • μ‹€μ œλ‘œ λŒμ•„κ°€λŠ” μ•±μ—μ„œ μ§€μ •λœ μŠ€ν¬λ¦½νŠΈλŒ€λ‘œ 반볡 ν•˜λŠ” 것
  • μ‹€μ œλ‘œ 둜그인 ν”Œλ‘œμš°λ“± 잘 λ³€ν•˜μ§€ μ•ŠλŠ” 화면에 λŒ€ν•΄μ„œλŠ” ν…ŒμŠ€νŠΈ κ°€λŠ₯
  • μ‹€μ œ ν•Έλ“œν°κ³Ό μ—°λ™ν•˜μ—¬ ν…ŒμŠ€νŠΈ κ°€λŠ₯
  • Detox, Appiumλ“± μ˜€ν”ˆμ†ŒμŠ€λ‘œ λ˜μ–΄μžˆμŒ

2. Jest

  • Javascript Unit Test Framework
  • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μœ λ‹›ν…ŒμŠ€νŠΈλ₯Ό λ§Œλ“€λ•Œ κ°€μž₯ λ²”μš©μ μœΌλ‘œ μ‚¬μš© 됨
  • Metaμ—μ„œ 개발
  • κΈ°λ³Έ ν…ŒμŠ€νŠΈ ꡬ쑰
1
test('What to Test it', () => {
2
expect(1 + 1).toBe(2)
3
})

3. Expo둜 μŠ€ν† μ–΄ μ—…λ‘œλ“œ 및 운영

3.1 ν™˜κ²½λΆ„λ¦¬

  • 디버깅, ν”„λ‘œλ•μ…˜μ„ μœ„ν•œ μ•± λ“± μ‚¬μš©ν•˜λŠ” Config듀을 뢄리 ν•˜λŠ”κ²ƒ
  • μ½”λ“œλ ˆλ²¨μ—μ„œλ„ ν•  수 μžˆμ§€λ§Œ νœ΄λ¨Όμ—λŸ¬μ˜ λ°œμƒ κ°€λŠ₯성이 λ†’μŒ
  • μ–΄λ–€ API둜 보낼지, DBλŠ” μ–΄λ””λ₯Ό μ ‘κ·Όν• μ§€ 등을 λ‚˜λˆ λ‘ 

3.2 OTA Update λž€ ?

  • μŠ€ν† μ–΄λ₯Ό ν†΅ν•˜μ§€ μ•Šκ³  λ°”λ‘œ μ‚¬μš©μžλ“€μ΄ μ‚¬μš© ν•  수 μžˆλ„λ‘ ν•˜λŠ” μ—…λ°μ΄νŠΈ
  • Over the air Update의 μ•½μž
  • App Update λž€? λΉŒλ“œ μ™„λ£Œ β†’ μŠ€ν† μ–΄ κ²€μˆ˜ β†’ μ‚¬μš©μžμ—κ²Œ 전달
  • OTA Update : λΉŒλ“œ μ™„λ£Œ 된 λ’€ λ°”λ‘œ μ‚¬μš©μžμ—κ²Œ 전달됨
  • OTA Update μ œν•œμ 
    • μ—…λ°μ΄νŠΈκ°€ Javascript, Typescriptμ˜μ—­μ—μ„œλ§Œ κ°€λŠ₯

4. Expo의 ν•œκ³„μ 

(1) Expo SDK λ―Έμ§€μ›μ‹œ λΆˆνŽΈν•¨

  • μ§€μ›ν•˜μ§€ μ•ŠλŠ” SDKλ₯Ό μ‚¬μš©ν•˜λ©΄ eject ν•΄μ„œ μ‚¬μš© ν•΄μ•Ό 함
  • 카카였 둜그인, 넀이버 둜그인 λ“± λ„€μ΄ν‹°λΈŒ λͺ¨λ“ˆμ„ μ‚¬μš©ν• λ•Œ λ°œμƒ

(2) EAS Build System의 λΉŒλ“œ μ‹œκ°„

  • λΉŒλ“œλ₯Ό κ±Έμ–΄λ‘κ²Œ 되면 EASμ—μ„œ λΉŒλ“œκ°€ 진행됨
  • ν΄λΌμš°λ“œ λ¦¬μ†ŒμŠ€λ₯Ό μ‚¬μš©ν•˜λ‹€λ³΄λ‹ˆ μ•„λ¬΄λž˜λ„ λŒ€κΈ° μ‹œκ°„μ΄ ν•„μš”
  • λΉŒλ“œμ„œλ²„ ꡬ좕, 유료 ν”Œλžœμ„ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ λ°œμƒ (주둜 15~20λΆ„ 사이)

(3) λΉŒλ“œ 결과물의 Size

  • λΉŒλ“œ 결과물의 μš©λŸ‰μ΄ 큰편 (20MB 이상)
  • Expo SDK에 ν•΄λ‹Ήν•˜λŠ”κ²ƒλ“€μ΄ λͺ¨λ‘ λ“€μ–΄κ°€κΈ° λ•Œλ¬Έ