Skip to content

MinJunKim21/nowuc_project_client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

36 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

λ‚΄κ°€λ³΄κ³ μ‹Άμ€κ²ƒλ§Œλ³Όλž˜!

유튜브의 보고 싢은 μ˜μƒλ“€λ§Œ μžλ™ μ—…λ°μ΄νŠΈλ˜μ–΄ νŽΈν•˜κ²Œ λ³΄λŠ” μ„œλΉ„μŠ€

배포 : https://watchwhatuwatch.vercel.app/

βœ¨Β μ„œλΉ„μŠ€ μ†Œκ°œ

  • 본인의 μ·¨ν–₯이 λ°˜μ˜ν•˜μ—¬ μ„ μ •ν•œ μ½˜ν…μΈ μ˜ μ΅œμ‹  μ—…λ°μ΄νŠΈλœ μ˜μƒμ˜ 제λͺ©, μ˜μƒ 링크, μ—…λ‘œλ“œμ‹œκ°„μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
  • μ•Œκ³ λ¦¬μ¦˜ 방식이 μ•„λ‹Œ μΉ΄ν…Œκ³ λ¦¬λ₯Ό ν†΅ν•˜μ—¬ μ‚¬μš©μ˜ λͺ©μ μ— λ§žλŠ” λͺ©λ‘μ΄ ν•œλˆˆμ— λ“€μ–΄μ˜€λŠ” λ””μžμΈμž…λ‹ˆλ‹€.
  • μœ νŠœλΈŒμ—μ„œ κ²ͺλŠ” λΉ„νš¨μœ¨μ μΈ 과정을 μƒλž΅ν•˜μ—¬ 기쑴보닀 더 효율적인 μ‚¬μš©μž κ²½ν—˜ μ œκ³΅ν•©λ‹ˆλ‹€.

πŸ€”Β μœ νŠœλΈŒ 뢈편 사항

[문제점]

  • κ΅¬λ…ν•œ 채널이 많으면 μ‚¬μš©μž κ²½ν—˜μ΄ μ•ˆμ’‹μŒ

  • μ±„λ„λ“€μ˜ μ΅œμ‹  μ˜μƒμ„ ν•œλˆˆμ— νŒŒμ•…μ΄ 어렀움

  • μ•Œκ³ λ¦¬μ¦˜ κ΅΄λ ˆμ— λΉ μ Έ 첫 μ˜λ„λ³΄λ‹€ 였랜 μ‹œμ²­

  • ν”Œλ ˆμ΄λ¦¬μŠ€νŠΈμ™€ 채널을 λΆ„λ¦¬ν•˜κ³  μ‹ΆμŒ

    : β€™νŠ€λ₯΄ν‚€μ˜ˆμ¦ˆ 온 더 λΈ”λŸ­β€™λ§Œ(μ„ΈλΆ€ μž¬μƒλͺ©λ‘) 보고 μ‹Άμ§€λ§Œ μŠ€νŠœλ””μ˜€ μ™€ν”Œ(채널)의 β€˜λ°”ν€΄λ‹¬λ¦°μž…β€™(λ‹€λ₯Έ μ„ΈλΆ€μž¬μƒλͺ©λ‘)의 μ •λ³΄κΉŒμ§€ 전달 λ°›μŒ.

[ν•΄κ²° 방법]

  • λ§Žμ€ λ¦¬μŠ€νŠΈμ—μ„œ μ›ν•˜λŠ” 채널을 λ“€μ–΄κ°€λ³΄κ±°λ‚˜, κ²€μƒ‰ν•΄μ„œ 채널에 λ“€μ–΄κ°„ ν›„ μ—…λ°μ΄νŠΈλœ μ˜μƒμΈμ§€ ν™•μΈν•˜λŠ” κ³Όμ • μƒλž΅
  • μ„ μ •ν•œ 채널 μ˜μƒμ˜ ν•„μˆ˜ μ •λ³΄λ“€λ§Œ μš”μ•½, νŒŒμ•…
  • μ„ μ •ν•œ μ½˜ν…μΈ λ“€μ˜ μ—…λ°μ΄νŠΈ μ—¬λΆ€λ§Œ ν™•μΈν•˜μ—¬ 유튜브 μ•Œκ³ λ¦¬μ¦˜ λ…ΈμΆœ μ΅œμ†Œν™”
  • μ„ΈλΆ€ μž¬μƒλͺ©λ‘κΉŒμ§€λ„ κ°œλ³„μ μΈ μ½˜ν…μΈ λ‘œ λΆ„λ₯˜ν•˜μ—¬ μ„œλΉ„μŠ€ 제곡

πŸ‘¨β€πŸ‘¨β€πŸ‘¦β€πŸ‘¦Β νŒ€μ› ꡬ성

  • 개발자 & 기획자 1λͺ… (본인) : μ„œλΉ„μŠ€ 기획, μ›Ή 개발 λͺ¨λ‘ λ‹΄λ‹Ή
  • λ””μžμ΄λ„ˆ 1λͺ… : μ„œλΉ„μŠ€ 기획, μ„œλΉ„μŠ€ λͺ¨λ“  λ””μžμΈ 파트 λ‹΄λ‹Ή

πŸ”‘Β ν•΅μ‹¬ κΈ°λŠ₯

  1. μ‚¬μš© λͺ©μ μ— λ§žλŠ” μΉ΄ν…Œκ³ λ¦¬

    유튜브 μ‚¬μš©μ—λŠ” μ˜μƒμ„ 톡해 곡뢀 λ˜λŠ” μ—¬κ°€λ₯Ό μ¦κΈ°λŠ” λͺ©μ μ΄ μžˆμ§€λ§Œ, κ΅¬λ…ν•œ 채널듀은 λΆ„λ₯˜ 없이 μ—΄κ±°λ˜μ–΄μžˆμŠ΅λ‹ˆλ‹€. μœ νŠœλ²„λ₯Ό μ°ΎλŠ” κ³Όμ •μ—μ„œ λ…ΈμΆœλœ μ—¬κ°€ μ‹œκ°„μ„ μœ„ν•œ μœ νŠœλ²„μ˜ 유혹으둜 μΈν•˜μ—¬, 접속할 λ•ŒλŠ” κ³΅λΆ€ν•˜λ €λ˜ μ˜λ„μ—μ„œ μ΄νƒˆν•˜κ²Œλ©λ‹ˆλ‹€. 그렇기에 κ΄€μ‹¬μžˆλŠ” μ½˜ν…μΈ λ“€μ„ λͺ©μ μ— 맞게 λΆ„λ₯˜ν•˜μ—¬, μ΅œλŒ€ν•œ μ˜λ„μ— λ§žλŠ” μ‚¬μš©μ„ λ„μ™€μ£Όκ³ μž ν•©λ‹ˆλ‹€.

  2. μ›ν•˜λŠ” μ •λ³΄λ§Œμ„ 효율적이게 μ ‘ν•˜λ©°, μ‹œμ²­ν•  μ˜μƒμ— λŒ€ν•œ μ ‘κ·Όμ„± ν–₯상

    본인이 μ„ μ •ν•œ μœ νŠœλ²„λ“€ μ€‘μ—μ„œ μ–΄λŠ μœ νŠœλ²„κ°€ μ—…λ°μ΄νŠΈ λ˜μ—ˆλŠ”μ§€ λ°”λ‘œ 확인 κ°€λŠ₯ν•©λ‹ˆλ‹€. μ—…λ°μ΄νŠΈκ°€ 되면 μ—…λ°μ΄νŠΈ μ‹œκ°„, 제λͺ©, 링크가 μ œκ³΅λ˜μ–΄ λ°”λ‘œ μ˜μƒμ„ μ ‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” 기쑴의 λΆˆν•„μš”ν•œ μ‚¬μš©μž κ²½ν—˜ 과정을 μƒλž΅ν•˜μ—¬ νš¨μœ¨μ„±μ„ λ†’μ—¬μ€λ‹ˆλ‹€.

βš’οΈΒ κΈ°μˆ  μŠ€νƒ

ν”„λ ˆμž„μ›Œν¬ : React Next.js

μ–Έμ–΄ : HTML CSS JavaScript

μŠ€νƒ€μΌ : Tailwind CSS Styled-Components

API : YouTube Data API

μ½”λ”© μŠ€νƒ€μΌ : ESlint Prettier

배포 : Vercel

λ””μžμΈ : Figma

πŸ§‘β€πŸ’»Β ν˜‘μ—… 파트

[FE 개발]

  • YouTube APIλ₯Ό ν™œμš©ν•  경우 μ‚¬μš© κ°€λŠ₯ν•œ 정보, ν•œκ³„λ₯Ό μ •λ¦¬ν•˜μ—¬ μ„œλΉ„μŠ€ν•˜κ³ μž ν•˜λŠ” λ²”μœ„λ₯Ό μ„€μ •ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • λ””μžμ΄λ„ˆμ™€ UX/UI ν˜‘μ˜ ν›„, λ°œμ „λœ λ””μžμ΄λ„ˆμ˜ μ‹œμ•ˆμ„ ν† λŒ€λ‘œ κ΅¬ν˜„, κ΅¬ν˜„ κ³Όμ •μ—μ„œ μ§€μ†λœ ν˜‘μ˜

[κΈ°λŠ₯ κ΅¬ν˜„]

  1. YouTube API
    • YouTubeμ—μ„œ μ œκ³΅ν•˜λŠ” API 곡식 λ¬Έμ„œλ₯Ό ν™•μΈν•˜λ©΄μ„œ ν•„μš”ν•œ 데이터λ₯Ό μš”μ²­κ³Ό 응닡 λ°›λŠ” 과정을 κ³΅λΆ€ν•˜μ—¬ κ΅¬ν˜„ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
    • μœ νŠœλ²„λ₯Ό μ„ μ •ν•˜μ—¬ λ¦¬μŠ€νŠΈμ—…ν•œ λ’€, λ¦¬νŒ©ν† λ§μœΌλ‘œ 데이터듀을 효율적이게 κ΅¬μ„±ν•˜λŠ” 것을 μ‹œλ„ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
    • API Key 유좜 λ°©μ§€λ₯Ό μœ„ν•΄ .env νŒŒμΌμ„ 톡해 λ³€μˆ˜ν™” ν•˜μ—¬ μ‚¬μš©ν•˜μ˜€κ³ , gitignore νŒŒμΌμ— .envλ₯Ό ν¬ν•¨μ‹œμΌœ Github에 μ—…λ‘œλ“œλ˜μ–΄ μœ μΆœλ˜λŠ” 사항을 λ°©μ§€ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  2. Tailwind CSS & Styled-Components
    • Tailwind CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ μŠ€νƒ€μΌ κ΅¬ν˜„μ„ ν•˜μ—¬ λ””μžμ΄λ„ˆμ™€μ˜ ν˜‘μ˜ μ‹œμ— λΉ λ₯Έ μˆ˜μ •μ΄ κ°€λŠ₯ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
    • UIκ°€ ν™•μ •λœ ν›„μ—λŠ” styled-componentsλ₯Ό μ—°κ³„μ‹œμΌœ 반볡된 μ»΄ν¬λ„ŒνŠΈλ“€μ„ μ •λ¦¬ν•˜μ—¬ 전체 μ½”λ“œμ˜ 가독성을 ν–₯상 μ‹œμΌ°μŠ΅λ‹ˆλ‹€.

About

πŸŽ¬λ‚˜λ§Œμ˜ 유투브 ν”Œλ ˆμ΄λ¦¬μŠ€νŠΈπŸŽ¬

Topics

Resources

Stars

Watchers

Forks

Contributors