λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

πŸ‘¨‍πŸ’» web.dev/fe25

Storybook loaders 둜 story에 비동기 데이터 μ£Όμž…ν•˜κΈ° πŸ“Œ loaders 둜 데이터 μ „λ‹¬ν•˜κΈ° Storybook 6.1 λΆ€ν„° μ‹€ν—˜μ  κΈ°λŠ₯으둜 loaders κ°€ μΆ”κ°€λ˜μ—ˆμŠ΅λ‹ˆλ‹€. μ•ˆμ •ν™” 기간을 거쳐 Storybook 7.0 μ—μ„œλŠ” stable 둜 λ³€κ²½λ˜μ—ˆλŠ”λ°μš”. 기쑴에 args λ₯Ό 톡해 μ»΄ν¬λ„ŒνŠΈμ— 데이터λ₯Ό μ „λ‹¬ν•΄μ£ΌλŠ” λŒ€μ‹ , loaders 에 데이터λ₯Ό λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜λ₯Ό μ •μ˜ν•¨μœΌλ‘œμ„œ μŠ€ν† λ¦¬λΆ render context 에 이λ₯Ό ν• λ‹Ήν•  수 μžˆλŠ” 방법이 μΆ”κ°€λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λͺ¨λ“  μŠ€ν† λ¦¬μ— μ μš©λ˜λŠ”μ§€ μœ λ¬΄μ— 따라 global loader 와 story loader 두 가지 λ°©μ‹μœΌλ‘œ λ‚˜λ‰˜λŠ”λ°, 이번 κ²½μš°μ—λŠ” κ°œλ³„ μŠ€ν† λ¦¬μ— μ£Όμž…μ΄ ν•„μš”ν•΄μ„œ story loader 방식을 μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€. πŸ“Œ μ˜ˆμ‹œλ‘œ μ‚΄νŽ΄λ΄…μ‹œλ‹€. λ‹€μŒκ³Ό 같은 μ›Ή μ»΄ν¬λ„ŒνŠΈκ°€ μžˆλ‹€κ³  ν•˜κ² μŠ΅λ‹ˆλ‹€. ν•΄λ‹Ή μ»΄ν¬λ„ŒνŠΈλŠ” μž‘μ€ μΊ”λ²„μŠ€μ— .. 2023. 6. 24.
Storybook μ—μ„œ μ»΄ν¬λ„ŒνŠΈ λ‹¨μœ„ ν…ŒμŠ€νŠΈν•˜κΈ° πŸ“Œ λ“€μ–΄κ°€λ©° μŠ€ν† λ¦¬λΆμ€ component driven development νŒ¨λŸ¬λ‹€μž„μ„ μœ„ν•œ μœ μš©ν•œ 개발 λ„κ΅¬λ‘œ λ‹¨μˆœνžˆ UI λ₯Ό ν™•μΈν•˜λŠ” μš©λ„λ₯Ό λ„˜μ–΄μ„œμ„œ ν…ŒμŠ€νŠΈλ₯Ό μœ„ν•œ λ‹€μ–‘ν•œ μ†”λ£¨μ…˜λ„ ν•¨κ»˜ μ œκ³΅ν•΄μ£Όκ³  μžˆμŠ΅λ‹ˆλ‹€. 이번 ν¬μŠ€νŠΈμ—μ„œλŠ” 이λ₯Ό ν™œμš©ν•œ ν…ŒμŠ€νŠΈ 적용 사둀에 λŒ€ν•΄ μ‚΄νŽ΄λ³΄κ³ μžν•©λ‹ˆλ‹€. μš°μ„  이번 포슀트λ₯Ό μœ„ν•œ ν”„λ‘œμ νŠΈμ˜ νŒ¨ν‚€μ§€ 버전 μ •λ³΄λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€. πŸ“¦ project dependency - react/react-dom: 17.0.2 - next: 12.1.1 - storybook: 7.0.4 - typescript: 5.0.3 ✨ Next.js + jest & storybook μ„€μ •ν•˜κΈ° πŸ“Œ Next.js + jest μ„€μ • μœ λ‹›ν…ŒμŠ€νŠΈ, μŠ€λƒ…μƒ·ν…ŒμŠ€νŠΈ μž‘μ„±ν•˜κΈ° 전에 jest λ¨Όμ € μ„€μΉ˜ν•©λ‹ˆλ‹€. Next.js.. 2023. 6. 24.
React Framer Motion 톺아보기 πŸ“Œ Framer Motion? Framer Motion 은 React 둜 개발된 Animation Library μž…λ‹ˆλ‹€. κ΄€λ ¨λœ νŒ¨ν‚€μ§€μ€‘μ— μ§€μ†μ μœΌλ‘œ μ‚¬μš©λŸ‰ 및 관심도가 μ¦κ°€ν•˜κ³  μžˆλŠ” μΆ”μ„Έμž…λ‹ˆλ‹€. πŸ“ˆ μ›Ήμ•±μ—μ„œ μ• λ‹ˆλ©”μ΄μ…˜μ„ λ‹€λ£¨λŠ” λ‹€μ–‘ν•œ 방법이 μžˆμ§€λ§Œ, λ‹€μ–‘ν•œ ν™˜κ²½μ—μ„œ μΆ©λΆ„ν•œ μ„±λŠ₯을 κ³ λ €ν•˜μ—¬ κ΅¬ν˜„ν•˜κΈ°μ—λŠ” 생각보닀 κ³ λ €ν•  사항이 많고 κΉŒλ‹€λ‘œμš΄ 것이 μ‚¬μ‹€μž…λ‹ˆλ‹€. 이번 μœ„ν΄λ¦¬μ—μ„œλŠ” μ΄λŸ¬ν•œ 뢀뢄에 도움이 λ μˆ˜λ„ μžˆλŠ” νŒ¨ν‚€μ§€λ₯Ό μ†Œκ°œν•΄λ³΄λŠ” μ‹œκ°„μ„ κ°€μ Έλ³΄λ €ν•©λ‹ˆλ‹€. πŸ“Œ TL;DR Framer Motion 의 νŠΉμ§• TypeScript 지원 μ΅œμ ν™”λœ μ„±λŠ₯ 및 ν’λΆ€ν•œ API physics 기반의 사싀적인 transition효과 제곡 (spring, tween, inertia) λͺ¨λ˜ μ›Ήμ•±μ—μ„œ 반볡적으둜 ν•„μš”λ‘œ ν•˜λŠ” μ—¬λŸ¬ λͺ¨μ…˜λ“€.. 2023. 3. 27.
ν”„λ‘ νŠΈμ—”λ“œ E2E ν…ŒμŠ€νŒ… (with Cypress) πŸ’‘ 이번 ν¬μŠ€νŠΈλŠ” 사내 μœ„ν΄λ¦¬μ—μ„œ λ°œν‘œν•œ λ‚΄μš©μ„ μ •λ¦¬ν•œ κ²ƒμž…λ‹ˆλ‹€. πŸ“Œ λ“€μ–΄κ°€λ©° μž‘λ…„ 12μ›”λΆ€ν„° μ•½ 3κ°œμ›”κ°„ 항곡 μ›Ή κ°œλ°œμ„ μ§„ν–‰ν–ˆλŠ”λ°, 생각보닀 λ‹€μ–‘ν•œ 동선이 μžˆμ–΄μ„œ 고생을 ν–ˆλ˜ 기얡이 μžˆμŠ΅λ‹ˆλ‹€. λ”κ΅°λ‹€λ‚˜ μ œκ°€ μ§„ν–‰ν–ˆλ˜ 업무(μ›Ή ν—ˆλΈŒ μ˜€ν”ˆ, TF v12 μ „ν™˜)κ°€ ν•­κ³΅μ˜ 전체적인 동선에 적용이 ν•„μš”ν–ˆλ˜ κ²ƒλ“€μ΄μ–΄μ„œ λ”μš± 그랬던 것 κ°™μ€λ°μš”. 아직 E2E ν…ŒμŠ€νŠΈ μž‘μ„±κ²½ν—˜μ΄ μ—†μ–΄μ„œ 이번 κΈ°νšŒμ— 곡뢀도 ν•΄λ³Ό κ²Έ κ΅­μ œμ„  μ˜ˆμ•½λ™μ„ μ˜ E2E ν…ŒμŠ€νŠΈλ₯Ό μ§„ν–‰ν•΄λ΄€μŠ΅λ‹ˆλ‹€. πŸ“Œ E2E ν…ŒμŠ€νŠΈλž€? μš°μ„  κ°„λ‹¨ν•˜κ²Œ E2E ν…ŒμŠ€νŠΈκ°€ 무엇인지 μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€. ν”νžˆ E2E (End to End) ν…ŒμŠ€νŠΈλŠ” λΈŒλΌμš°μ € ν™˜κ²½μ—μ„œ μœ μ €κ°€ μ‚¬μš©ν•˜κ³  μžˆλ‹€λŠ” κ°€μ •ν•˜μ— μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 전체적인 λ™μž‘μ„ κ²€μ¦ν•˜λŠ” 것을 λ§ν•©λ‹ˆλ‹€. μœ λ‹› ν…ŒμŠ€νŠΈμ™€ 톡합 ν…ŒμŠ€νŠΈμ—μ„œ.. 2023. 3. 19.
Next.js styled-component μ„€μ •ν•˜κΈ° (SSR FOUC 이슈) πŸ“Œ Next.js ❀️ styled-component Next.js 와 Styled Component λ₯Ό ν•¨κ»˜ μ‚¬μš©ν•  λ•Œ μ μ ˆν•œ 섀정을 ν•˜μ§€ μ•ŠμœΌλ©΄ SSR μ‹œμ— FOUC (Flash of Unstyled Content) ν˜„μƒμ΄ λ°œμƒν•˜κ²Œ λ©λ‹ˆλ‹€. πŸ€” FOUC? νŽ˜μ΄μ§€μ˜ μŠ€νƒ€μΌμ‹œνŠΈ 정보가 λ‘œλ“œ μ‹œμ μ— ν¬ν•¨λ˜μ§€ μ•Šμ•„ μž μ‹œ μŠ€νƒ€μΌμ΄ μ μš©λ˜μ§€ μ•Šμ€ νŽ˜μ΄μ§€κ°€ λ‚˜νƒ€λ‚˜λŠ” ν˜„μƒμž…λ‹ˆλ‹€. πŸ“Œ FOUC 원인 νŒŒμ•…ν•˜κΈ° Next.js SSR (Pre Rendering) Server-side Rendering κ³Ό Static Generation λͺ¨λ‘ Pre-rendering 방식이며 ν•„μš”ν•œ data fetching κ³Ό HTML λ Œλ”λ§μ΄ client μ—κ²Œ 보내지기 전에 이미 μˆ˜ν–‰λ©λ‹ˆλ‹€. 이λ₯Ό 톡해 client λŠ” non-intera.. 2022. 11. 27.
AWS SDK 둜 s3 파일 μ‚¬μ΄μ¦ˆ μ‘°νšŒν•˜κΈ° πŸ“Œ μ—…λ‘œλ“œ ν•  λ°”μš°μ²˜μ— 크기 μ œν•œμ„ μΆ”κ°€ν•  수 μžˆμ„κΉŒμš”? νŠΈλ¦¬ν”Œ TNA νŒŒνŠΈλ„ˆμ›Ή μ—λŠ” νŒŒνŠΈλ„ˆκ°€ κ³ κ°μ—κ²Œ μ˜ˆμ•½ λ°”μš°μ²˜λ₯Ό μ „μ†‘ν•˜λŠ” κΈ°λŠ₯이 μžˆμŠ΅λ‹ˆλ‹€. κΈ°μ‘΄μ—λŠ” 파일 μ‚¬μ΄μ¦ˆμ˜ μ œν•œ 없이 μ „μ†‘ν•˜λ„λ‘ ν–ˆλŠ”λ°, μ‚¬μ΄μ¦ˆκ°€ 컀질 경우 μ΄μŠˆκ°€ μƒκ²¨μ„œ μ΄λ²ˆμ— λ¦¬λ‰΄μ–Όν•˜λ©΄μ„œ μ„œλ²„μ—μ„œ λ°”μš°μ²˜ μ‚¬μ΄μ¦ˆκ°€ 클 경우 이λ₯Ό λΆ„λ¦¬ν•΄μ„œ 전솑 μ²˜λ¦¬ν•˜λŠ” 것 이외에 ν”„λ‘ νŠΈμ—”λ“œμ—μ„œλ„ κ°œλ³„ λ°”μš°μ²˜μ— μš©λŸ‰ μ œν•œ(15MB)을 μΆ”κ°€ν•˜κΈ°λ‘œ ν–ˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄ λΈŒλΌμš°μ €μ—μ„œ μ˜¬λ¦¬λŠ” 파일 μ‚¬μ΄μ¦ˆ 체크 이외에도 S3 에 이미 μ—…λ‘œλ“œ 된 λ°”μš°μ²˜ 파일 μ‚¬μ΄μ¦ˆλ₯Ό μ‘°νšŒν•΄μ„œ 각 λ°”μš°μ²˜ ν•­λͺ©μ— μš©λŸ‰μ •λ³΄λ₯Ό ν•¨κ»˜ λ…ΈμΆœν•΄μ€˜μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ•Ό 고객이 μ–΄λ–€ νŒŒμΌμ— λ¬Έμ œκ°€ μžˆλŠ”μ§€ ν•œλ²ˆμ— 확인이 κ°€λŠ₯ν•  ν…Œλ‹ˆκΉŒμš”. πŸ“Œ S3 파일 μ‚¬μ΄μ¦ˆ (HeadObject) λΈŒλΌμš°μ €μ—μ„œ μ—…λ‘œλ“œν•œ 파일.. 2022. 11. 26.

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”