/2019-21

πŸ™‹β€β™€οΈ πŸ™‹β€β™‚οΈ λ°”κΈ€λ°”κΈ€ (Sli.do clone project): μ‹€μ‹œκ°„ μ§ˆμ˜μ‘λ‹΅ 및 νˆ¬ν‘œ 곡유 μ„œλΉ„μŠ€

Primary LanguageJavaScript

λ°”κΈ€λ°”κΈ€

sli.doμ—μ„œ 아이디어λ₯Ό 영감 받은 μ‹€μ‹œκ°„ μ§ˆμ˜μ‘λ‹΅ 및 νˆ¬ν‘œ 곡유 μ›Ή μ„œλΉ„μŠ€

Version Version
Node.js GraphQ: Docker React

배포 링크

데λͺ¨ μ˜μƒ

μ£Όμš” κΈ°λŠ₯

  • 2가지 μ‚¬μš©μž λͺ¨λ“œ 제곡 (Host: 이벀트λ₯Ό μ£Όκ΄€ν•˜λŠ” μ‚¬μš©μž, Guest: μ΄λ²€νŠΈμ— μ°Έκ°€ν•˜μ—¬ μ§ˆλ¬Έν•˜λŠ” μ‚¬μš©μž)
  • μ‹€μ‹œκ°„ μ§ˆμ˜μ‘λ‹΅(Guest λͺ¨λ“œ)
    • μ‹€μ‹œκ°„ μ§ˆλ¬Έν•  수 있음
    • μ§ˆλ¬Έμ— μ’‹μ•„μš”λ₯Ό λˆ„λ₯Ό 수 있음 (μ’‹μ•„μš”κ°€ 많으면 인기질문 Tab 상단μͺ½μ— λ…ΈμΆœλ¨)
    • μ§ˆλ¬Έμ— 이λͺ¨μ§€λ₯Ό μΆ”κ°€ν•  수 있음
    • μ§ˆλ¬Έμ— λŒ“κΈ€μ„ 달 수 있음
  • μ‹€μ‹œκ°„ μ§ˆμ˜μ‘λ‹΅ (Host λͺ¨λ“œ)
    • μ‹€μ‹œκ°„ μ§ˆλ¬Έμ„ κ²€μ—΄ν•˜μ—¬ νŠΉμ • μ§ˆλ¬Έμ€ μ‚­μ œν•  수 있음
    • νŠΉμ • μ§ˆλ¬Έμ„ 상단에 κ³ μ •μ‹œν‚¬ 수 있음
    • λ‹΅λ³€ν•œ μ§ˆλ¬Έμ€ μ‹€μ‹œκ°„μ§ˆλ¬Έ Tabμ—μ„œ μ§ˆλ¬Έμ €μž₯μ†Œλ‘œ μ΄λ™μ‹œν‚¬ 수 있음
  • μ‹€μ‹œκ°„ νˆ¬ν‘œ
    • νˆ¬ν‘œ μ’…λ₯˜: N지선닀(λ³΅μˆ˜μ„ νƒ 지원), 별점주기
    • HostλŠ” νˆ¬ν‘œλ₯Ό μƒμ„±ν•˜μ—¬ Guestλ“€μ—κ²Œ μ‹€μ‹œκ°„ νˆ¬ν‘œ μ°Έμ—¬λ₯Ό μš”μ²­ν•  수 있음
    • Guest듀은 νˆ¬ν‘œλ₯Ό ν•  수 있고, νˆ¬ν‘œ 상황은 μ‹€μ‹œκ°„ 곡유됨

μœ„ν‚€ 링크

wiki

νŒ€μ›

기술 μŠ€νƒ

  • Front-end: React, Apollo
  • Back-end: Nginx, nodejs, MySQL2, Sequelize, GraphQL(Yoga), socket.io, Oauth, Docker
  • Env & etc: Eslint, babel, webpack, prettier, yarn, github, slack

DataFlow

vaagleDataFlow

기술적 νŠΉμ§•

  • Express, socket.io, grpahQL, MySQL 총 4가지 μ„œλ²„κ°€ Docker μœ„μ—μ„œ μƒν˜Έμž‘μš©ν•˜λ©° λ™μž‘
  • 각각의 μ„œλ²„λŠ” μ„œλ‘œ 의쑴적으둜 μ—°κ²°λ˜μ–΄μžˆμ§€ μ•Šκ³  독립적인 성격을 띄기 λ•Œλ¬Έμ— μœ μ§€λ³΄μˆ˜ 및 μ—λŸ¬ 상황 λŒ€μ²˜μ— μœ μ—°
  • 각 μ„œλ²„λŠ” 각각의 인증 λ‘œμ§μ„ 가지고 있기 λ•Œλ¬Έμ— μ™ΈλΆ€λ‘œλΆ€ν„°μ˜ κ°œλ³„μ ‘κ·Όμ„ 차단
  • 호슀트 μ•±κ³Ό 게슀트 앱이 λ‚˜λ‰˜μ–΄μžˆμ§€λ§Œ μ„œλ‘œκ°€ μ‹€μ‹œκ°„μœΌλ‘œ 연동
  • μ‹€μ‹œκ°„ 처리λ₯Ό 보μž₯ν•˜λ©° μ±„νŒ…λΏ μ•„λ‹ˆλΌ μ±„νŒ…κ²€μ—΄ 및 상단 κ³ μ • 등이 μ¦‰κ°μ μœΌλ‘œ μ—¬λŸ¬ ν΄λΌμ΄μ–ΈνŠΈμ— 반영
  • μ‹€μ‹œκ°„ νˆ¬ν‘œλ₯Ό 톡해 μ—¬λŸ¬ ν΄λΌμ΄μ–ΈνŠΈμ— νˆ¬ν‘œ κ²°κ³Όλ₯Ό μ‹€μ‹œκ°„μœΌλ‘œ 반영
  • λͺ¨λ°”일 ν™˜κ²½μ„ κ³ λ €ν•œ λͺ¨λ°”일 First
  • React μ»΄ν¬λ„ŒνŠΈ μ΅œμ ν™”λ₯Ό ν†΅ν•œ ν΄λΌμ΄μ–ΈνŠΈ λ°˜μ‘μ„± μ΅œμ ν™”
  • Google OAuth 둜그인

μ‚¬μš©μž 집단

  • 컨퍼런슀/μ„Έλ―Έλ‚˜/μˆ˜μ—… μ°Έκ°€μž 및 운영자

기획 λ°°κ²½ 및 ν•„μš”μ„±

  • μˆ˜μ—…, κ°•μ—°, ν† λ‘  쀑 μ‹€μ‹œκ°„ μ§ˆμ˜μ‘λ‹΅ 및 νˆ¬ν‘œλ₯Ό ν†΅ν•œ μ²­μ€‘μ˜ λŠ₯동적 μ°Έμ—¬λ₯Ό μœ λ„ν•¨
  • μ™„λ²½ν•œ ν•œκΈ€ν™” 지원 β‡’ 이용자 μ—°λ ΉμΈ΅ ν™•λŒ€ (쀑μž₯λ…„/아동)
  • Front-end, back-endκ°€ μ μ ˆν•˜κ²Œ λ°°λΆ„, 4λͺ…이 λ„μ „μ μœΌλ‘œ κ°œλ°œν•  λ§Œν•œ λΆ„λŸ‰

도전적 κΈ°λŠ₯

  • μ§ˆλ¬Έμ— λŒ“κΈ€ κΈ°λŠ₯을 좔가함
  • Realtime & Robust: μ‹€μ‹œκ°„ 질문 곡유, μ‹€μ‹œκ°„ νˆ¬ν‘œ 및 μ•ˆμ •μ  μ„œλ²„/ν΄λΌμ΄μ–ΈνŠΈ λ™μž‘
  • Localization: ν•œκ΅­μΈμ—κ²Œ μΉœμˆ™ν•œ UI 개발 (μΉ΄ν†‘μ˜ νˆ¬ν‘œ UI, λ‹€μ–‘ν•œ ν•œκΈ€ν°νŠΈ μΆ”κ°€ λ“±)
  • Mobile first: Guest λͺ¨λ“œλŠ” μŠ€λ§ˆνŠΈν°μ— μ΅œμ ν™”λœ UI 개발, μ΅œμ ν™” μž‘μ—… 진행
  • Emoji 적용