πŸ€– μœ μ €μš© μž‘μ—… κ΄€μ œ μ›Ή ν”„λ‘œμ νŠΈ ( μ˜€λ”ν”Όν‚Ή )

κΈ°κ°„
2023.01 ~ 2024.04
μž‘μ—… 및 μ„±κ³Ό
β€’
μœ μ €μš© λ‘œλ΄‡ κ΄€μ œ μ›Ή ν”„λ‘œλ•νŠΈ ( μ˜€λ”ν”Όν‚Ή ) 개발 및 μ„œλΉ„μŠ€
β—¦
μž‘μ—…μ˜ ν˜„μž¬ μƒνƒœ , λ‘œλ΄‡μ˜ ν˜„μž¬ μƒνƒœ , 지도 , μ•Œλ¦Όμ„ λ³Ό 수 μžˆλŠ” μ‹€μ‹œκ°„ λŒ€μ‹œλ³΄λ“œ 개발 및 μ„œλΉ„μŠ€
β—¦
λ©€ν‹°μ˜€λ”ν”Όν‚Ή , ν† νƒˆν”Όν‚Ή κΈ°λŠ₯ 개발
β–ͺ
λ©€ν‹°μ˜€λ”ν”Όν‚Ή : μ—¬λŸ¬ 솑μž₯을 λͺ¨μ•„μ„œ ν•œ λ²ˆμ— ν”Όν‚Ή μž‘μ—…μ„ μ‹€ν–‰
β–ͺ
ν† νƒˆν”Όν‚Ή : ν•œ 솑μž₯ 내에 λ§Žμ€ ν”Όν‚Ή μž‘μ—… μ‹€ν–‰
β—¦
WMS 연동이 ν•„μš” 없이 , μ—‘μ…€λ§ŒμœΌλ‘œ WMS 처럼 μž‘μ—… 생성 및 μ§€μ‹œ κΈ°λŠ₯ 개발
β–ͺ
μ—‘μ…€ λ°μ΄ν„°λ‘œ μž‘μ—… 생성 및 μœ νš¨μ„± 검사 κΈ°λŠ₯ 개발
β–ͺ
ν•œ μ—‘μ…€λ‘œ μ—¬λŸ¬ μž‘μ—… 생성 및 μ§€μ‹œ κΈ°λŠ₯ 개발
β–ͺ
μ»€λ²„λ‘œμ§€μŠ€ , ν•œμ΅μŠ€ν”„λ ˆμŠ€ λ“± 5개 μ΄μƒμ˜ 화주사에 μ‹ κ·œ 사업 유치 및 λ‚©ν’ˆ
β€’
μ›Ή ν”„λ‘œλ•νŠΈ 배포 및 버저닝 μžλ™ν™”, λ¦¬νŒ©ν† λ§ 진행
1.
github action을 μ΄μš©ν•œ 배포 및 버저닝 μžλ™ν™” 진행
β—¦
μ„œλ²„, ν…ŒμŠ€νŠΈνŒ€ , λ””μžμΈνŒ€ λ“± λ‹€λ₯Έ μ—¬λŸ¬ νŒ€λ“€κ³Ό ν˜‘μ—…ν•  λ•Œ ν†΅μΌλœ 버전이 ν•„μš”ν•΄μ§
β—¦
배포와 버저닝을 μˆ˜λ™μœΌλ‘œ μ§„ν–‰ν•˜λ‹€ λ³΄λ‹ˆ, λΉ λœ¨λ¦¬κ±°λ‚˜ 였λ₯˜κ°€ λ°œμƒν•΄μ„œ μ‹€μˆ˜ν•˜λŠ” κ²½μš°κ°€ 생김
β—¦
github action을 ν†΅ν•΄μ„œ 배포 및 버저닝 μžλ™ν™” 진행
2.
CRA β†’ VITE λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ 및 monorepo 적용
β—¦
κΈ°μ‘΄ μ‚¬μš©ν•˜λ˜ CRA 의 μ—¬λŸ¬ 문제점으둜 μΈν•΄μ„œ λΆˆνŽΈν•¨μ„ 인지
β–ͺ
CRA 개발 지원 쀑단
β–ͺ
λΆˆν•„μš”ν•œ μ˜μ‘΄μ„±μ΄ κ³Όλ‹€ν•œ 문제 ( node_modules )
β–ͺ
λΉŒλ“œ μ‹œκ°„μ΄ 였래 κ±Έλ¦¬λŠ” 문제
β—¦
κ°œλ°œν•˜λ˜ 두 ν”„λ‘œλ•νŠΈκ°€ 같은 λ””μžμΈ , λΉ„μŠ·ν•œ μ½”λ“œλ₯Ό 가지고 μžˆμ§€λ§Œ hookκ³Ό component 듀이 μ€‘λ³΅μœΌλ‘œ μ‚¬μš©λ¨
β—¦
λ”°λΌμ„œ CRA 의 λŒ€μ•ˆμœΌλ‘œ λ– μ˜€λ₯Έ VITE 및 monorepo 적용
β–ͺ
λΉŒλ“œ μ‹œκ°„ 단좕 ( 2:20 β†’ 0:40 , μ•½ 72% 속도 κ°œμ„  )
β–ͺ
yarn workspaces μ‚¬μš©ν•΄μ„œ monorepo 적용으둜 κ³΅ν†΅μœΌλ‘œ μ‚¬μš©λ˜λŠ” hook κ³Ό component λ₯Ό μ€‘λ³΅ν•˜μ§€ μ•Šκ³  μ‚¬μš© κ°€λŠ₯
β–ͺ
pnp λͺ¨λ“œ 적용으둜 zero-install 적용
3.
msw ( mock service worker ) 적용
β—¦
graphql μ‚¬μš© 쀑 , μ„œλ²„ 개발이 λŠ¦μ–΄μ§€λŠ” 경우 ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ κΈ°λ‹€λ €μ•Ό ν•˜λŠ” 경우 λ°œμƒ
β—¦
λ‹¨μˆœ API mocking은 톡합 ν…ŒμŠ€νŠΈ , μŠ€ν† λ¦¬λΆ μž‘μ„± μ‹œ μ œμ–΄ν•˜κΈ° νž˜λ“  κ²½μš°κ°€ 생김
β—¦
msw 적용으둜 μœ„ 두가지 문제 ν•΄κ²°
β–ͺ
μ„œλ²„ 개발이 λŠ¦μ–΄μ§€λŠ” 경우 , 미리 API λͺ…μ„Έμ„œλ₯Ό 보고 μž‘μ—… κ°€λŠ₯
β–ͺ
ν•΄λ‹Ή μž‘μ—… ν›„ μ„œλ²„ 츑에 API λͺ…세에 λŒ€ν•œ ν”Όλ“œλ°± 전달 κ°€λŠ₯ ( ν”„λ‘ νŠΈμ—”λ“œ 주도 μΈν„°νŽ˜μ΄μŠ€ 개발 )
β–ͺ
ν…ŒμŠ€νŠΈ , μŠ€ν† λ¦¬λΆ μž‘μ„± μ‹œ μ‹€μ œμ™€ λΉ„μŠ·ν•œ ν™˜κ²½μ—μ„œ μ‹€ν–‰ κ°€λŠ₯
β€’
ν…ŒμŠ€νŠΈ μ½”λ“œ 및 μŠ€ν† λ¦¬λΆ μž‘μ„±
1.
ν…ŒμŠ€νŠΈ μ½”λ“œ μž‘μ„±
β—¦
κΈ°λŠ₯ κ°œλ°œμ— 업무가 치우쳐져 μžˆμ–΄μ„œ ν…ŒμŠ€νŠΈ μ½”λ“œμ— λŒ€ν•œ 관심 미흑
β—¦
κΈ°λŠ₯ κ°œλ°œμ„ μ§„ν–‰ν–ˆμ§€λ§Œ , 좔후에 edge caseκ°€ λ°œκ²¬λ˜μ–΄ bug fix 의 λΉˆλ„κ°€ λŠ˜μ–΄λ‚¨
β—¦
jest, React Testing Library 와 msw ( mock service worker ) λ₯Ό μ‚¬μš©ν•΄μ„œ ν…ŒμŠ€νŠΈ μ½”λ“œ μž‘μ„±
β–ͺ
ν…ŒμŠ€νŠΈ coverage 20% β†’ 87% 달성
β–ͺ
msw λ₯Ό μ‚¬μš©ν•΄μ„œ μ‹€μ œμ™€ λΉ„μŠ·ν•œ ν™˜κ²½μ—μ„œ ν…ŒμŠ€νŠΈ μž‘μ„±
2.
μŠ€ν† λ¦¬λΆ μž‘μ„±
β—¦
λ””μžμΈνŒ€μ΄ 직접 데이터λ₯Ό λ„£μ–΄μ„œ κ²€μˆ˜ν•΄μ•Ό ν•˜λŠ” 경우 λ°œμƒ
β—¦
μΌλΆ€λ§Œ ν…ŒμŠ€νŠΈν•˜κΈ° μœ„ν•΄μ„œ 전체λ₯Ό μ‹€ν–‰ν•΄μ•Ό ν•˜λŠ” 경우 λ°œμƒ
β—¦
msw λ₯Ό μ‚¬μš©ν•΄μ„œ μŠ€ν† λ¦¬λΆ μž‘μ„±
β–ͺ
ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μˆ˜μ •ν•΄μ„œ λ””μžμΈ κ²€μˆ˜ κ°€λŠ₯
β–ͺ
전체λ₯Ό μ‹€ν–‰ν•  ν•„μš” 없이 μΌλΆ€λ§Œ ν…ŒμŠ€νŠΈ κ°€λŠ₯
κ΄€λ ¨ ν™ˆνŽ˜μ΄μ§€ 및 자료
β€’
κ΄€λ ¨ ν™ˆνŽ˜μ΄μ§€