Project

  • K
  • /
  • CtrlK
notion image

WeT

μš°λ¦¬λ“€μ˜ OTT WeT, ott ν”Œλž«νΌλ“€μ„ λΉ„κ΅ν•˜κ³  μ†Œν†΅ν•˜λŠ” κ²Œμ‹œνŒ ν˜•νƒœμ˜ ν”Œλž«νΌ
배포 νŽ˜μ΄μ§€ - http://www.ott-we-t.com/
κΉƒν—ˆλΈŒ - https://github.com/chuhongkyu/weT

Skills

NEXT.js, MongoDB, tailwind, Docker, Git Actions, zustand
Β 

OTT κ²½ν—˜ λ‚˜λˆ” ν”Œλž«νΌ

μš°λ¦¬λ“€μ˜ OTT We T μž…λ‹ˆλ‹€. We TλŠ” μ‚¬μš©μžλ“€μ΄ λ‹€μ–‘ν•œ OTT ν”Œλž«νΌλ“€μ˜ μ½˜ν…μΈ λ₯Ό κ³΅μœ ν•˜κ³  μΆ”μ²œν•˜λŠ” ν”Œλž«νΌμž…λ‹ˆλ‹€.

Next.js & MongoDB

Next.js둜 κ°œλ°œμ„ ν•œ μ΄μœ λŠ” React ν”„λ‘œμ νŠΈλ₯Ό ν”„λ‘œλ•μ…˜κΈ‰μœΌλ‘œ λ°œμ „μ‹œν‚¬ λ•Œ ν•„μš”ν•œ λ‹€μ–‘ν•œ κΈ°λŠ₯κ³Ό μ΅œμ ν™” 도ꡬ듀이 Next.js에 이미 μ‘΄μž¬ν•©λ‹ˆλ‹€. Next.jsλŠ” 이미지와 폰트 μ΅œμ ν™”, μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(SSR), 정적 μ‚¬μ΄νŠΈ 생성(SSG) λ“±μ˜ κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€. μ΄λŸ¬ν•œ κΈ°λŠ₯듀은 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λ‘œλ”© μ‹œκ°„μ„ 쀄이고, 검색 엔진 μ΅œμ ν™”(SEO)λ₯Ό ν–₯μƒμ‹œν‚€λŠ” 데 도움을 μ€λ‹ˆλ‹€. λ˜ν•œ API Routes와 MongoDB μ‘°ν•©μœΌλ‘œ μ„œλ²„ μ‚¬μ΄λ“œ μ½”λ“œλ₯Ό 직접 μž‘μ„±ν•˜μ—¬ APIλ₯Ό μ‰½κ²Œ 생성할 수 μžˆμŠ΅λ‹ˆλ‹€.

Tailwind CSS

Tailwind CSSλ₯Ό κ³ λ₯Έ μ΄μœ λŠ” ꡬ직 μ‹œμž₯μ—μ„œ 많이 μ“°μ΄λŠ” 것을 ν™•μΈν–ˆκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. λ˜ν•œ λ””μžμΈμ΄ μ—†λŠ” μƒνƒœμ—μ„œ κ°œλ°œμ„ ν•˜κΈ° λ•Œλ¬Έμ— ν…œν”Œλ¦Ώμ΄ 많이 곡유 λ˜μ–΄ μžˆλŠ” Tailwindκ°€ λΉ λ₯΄κ²Œ κ°œλ°œν•˜κΈ°μ— μ ν•©ν•˜λ‹€κ³  생각 λ˜μ—ˆκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

Oracle Ubuntu μ„œλ²„

Vercel의 504 Gateway Timeout 이슈 λ•Œλ¬Έμ— 자체 μ„œλ²„λ₯Ό κ΅¬μΆ•ν•˜κΈ°λ‘œ ν•˜μ˜€μŠ΅λ‹ˆλ‹€. Oracle Compute Instanceλ₯Ό μƒμ„±ν•˜μ—¬ Ubuntuλ₯Ό μ„€μΉ˜ν•˜κ³  μ„œλ²„λ‘œ ν™œμš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ΄μŠˆλŠ” κ°œλ°œν•˜λ©΄μ„œ κ²ͺ은 일 뢀뢄에 μ μ—ˆμŠ΅λ‹ˆλ‹€.

도메인 μ„€μ • 및 λ„€μž„μ„œλ²„

κ°€λΉ„μ•„μ—μ„œ 16,000원에 1λ…„μ§œλ¦¬ λ„€μž„μ„œλ²„λ₯Ό μƒ€μŠ΅λ‹ˆλ‹€.
  • velog: 기둝 Docker μ„€μ •(https://velog.io/@hongkyu_mr_chu/Docker-NEXT.js)

CI/CD μ„€μ •

항상 νšŒμ‚¬μ—μ„œλŠ” μ  ν‚¨μŠ€λ‘œ 이미 ꡬ좕이 λ˜μ–΄ μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ 개인 ν”„λ‘œμ νŠΈλ₯Ό 진행할 λ•Œλ„ λ„·ν‹€λ¦¬νŒŒμ΄λ‚˜ vercel덕뢄에 μ‰½κ²Œ CI/CDλ₯Ό ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 직접 μ΄λ ‡κ²Œ 섀정을 ν•΄λ³΄λ‹ˆ μ‰¬μš΄μΌμ΄ μ•„λ‹ˆλž€ 것을 μ•Œκ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
Docker + Git Actions 으둜 docker-image.yml νŒŒμΌμ„ μž‘μ„±ν•˜μ—¬ main 브랜치 ν‘Έμ‰¬μ‹œ 지속적인 배포가 이루어지도둝 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • velog: 기둝 CI/CD μ„€μ •(https://velog.io/@hongkyu_mr_chu/Docker-Git-Actions)
Β 

UXλ₯Ό κ³ λ €ν•œμ 

* UXλž€, μ‚¬μš©μžμ˜ μ‹€μˆ˜λ₯Ό μ€„μ—¬μ€˜μ•Όν•œλ‹€.
κΈ€μ“°κΈ° κΈ°λŠ₯이 μžˆλŠ” μ›Ή,앱을 μ‚¬μš©ν•˜λ‹€λ³΄λ©΄ μ‹€μˆ˜λ‘œ λ’€λ‘œκ°€κΈ°κ°€ μ‹€ν–‰λ˜λŠ” 일이 κ°„ν˜Ή μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό 막기 μœ„ν•΄μ„œ λΈŒλΌμš°μ €μ˜ λ’€λ‘œκ°€κΈ°κ°€ μ‹€ν–‰μ‹œ 확인창이 뜨게 ν•˜λŠ” κΈ°λŠ₯을 λ„£μ—ˆμŠ΅λ‹ˆλ‹€. 이둜써 μ‚¬μš©μžκ°€ μ‹€μˆ˜λ‘œ λ’€λ‘œκ°€κΈ°λ₯Ό λˆŒλŸ¬λ„ 확인을 λ°›κ²Œ ν•˜μ—¬ μ‚¬μš©μžμ˜ μ‹€μˆ˜λ₯Ό μ€„μ˜€μŠ΅λ‹ˆλ‹€.
Β 

κ°œλ°œν•˜λ©° κ²ͺ은 λ¬Έμ œλ“€

  • dangerouslySetInnerHTML did not match
      • velog μ°Έμ‘° - https://velog.io/@hongkyu_mr_chu/dangerousSlysetInnerHTML-did-not-match
  • μ•žμœΌλ‘œ ν•΄κ²°ν•΄μ•Όν•  문제 504 β‡’ 자체 μ„œλ²„λ‘œ λ³€κ²½
      • 졜근 ν”„λ‘œμ νŠΈλ₯Ό Vercel에 λ°°ν¬ν•˜κ²Œ 되면 둜컬 둜그인, 둜컬 νšŒμ›κ°€μž…μ΄ 504 Gateway Timeout 였λ₯˜λ₯Ό λ°˜ν™˜ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
      문제의 원인은 Vercel의 무료 ν”Œλžœκ³Ό κ΄€λ ¨λœ μžμ› μ œν•œμ΄ μ£Όμš” 원인 쀑 ν•˜λ‚˜λ‘œ μΆ”μ •λ˜μ—ˆμŠ΅λ‹ˆλ‹€. μ‹€μ œλ‘œ Vercel Pro ν”ŒλžœμœΌλ‘œ μ—…κ·Έλ ˆμ΄λ“œ ν•œ ν›„, λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
      Vercel:Β Serverless functions have a timeout of only 10 secondsΒ (300 seconds if you upgrade to pro plan)
      μœ„μ˜ κΈ€μ—μ„œ 볼수 μžˆλ“―μ΄ Vercel의 무료 ν”Œλžœμ—μ„œλŠ” μ„œλ²„λ¦¬μŠ€ ν•¨μˆ˜μ˜ μ‹€ν–‰ μ‹œκ°„μ΄ 10초둜 μ œν•œλ©λ‹ˆλ‹€.
      κ·Έλž˜μ„œ 제 해결책은 자체 μ„œλ²„λ₯Ό κ΅¬μΆ•ν•˜μ—¬ λ°μ΄ν„°λ² μ΄μŠ€ μš”μ²­μ˜ 처리 속도와 νš¨μœ¨μ„±μ„ ν–₯μƒμ‹œν‚€λŠ” κ²ƒμž…λ‹ˆλ‹€. μ„œλ²„λ¦¬μŠ€ μ•„ν‚€ν…μ²˜μ˜ νŽΈλ¦¬ν•¨μ—λ„ λΆˆκ΅¬ν•˜κ³ , μ œν•œλœ λ¦¬μ†ŒμŠ€μ™€ κ³ μ •λœ ν™˜κ²½μ€ λ•Œλ‘œ μ˜ˆμƒμΉ˜ λͺ»ν•œ μ„±λŠ₯ 문제λ₯Ό μ•ΌκΈ°ν•  수 μžˆμŒμ„ κΉ¨λ‹¬μ•˜μŠ΅λ‹ˆλ‹€.
Β