Skip to content

๐Ÿ” WEEK 02 ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ

Sujong Kwak edited this page Nov 8, 2024 · 1 revision

11์›” 4์ผ ์›”์š”์ผ

์„ธ๋ถ€ ๋‚ด์šฉ ๋ณด๊ธฐ

๐ŸŽ ์˜ค๋Š˜์˜ TMI

  • ๋ฏธ๋ผ: ์กธ๋ ค์š”โ€ฆ
  • ์ˆ˜์ •: ์–ด์ œ ๋ฐ˜ํ‹ฐ์—”์•ผ์˜ค ๊ฐ€๋ ค ํ–ˆ๋Š”๋ฐ ๋ฌผ๊ณ ๊ธฐ ๋ชป ๋“œ์‹œ๋Š” ๋ถ„ ๊ณ„์…”์„œ ๋ชป ๊ฐ”์–ด์š”. ๋‹ค์Œ์—” ์šฐ๋ฆฌ ํŒ€์ด๋ž‘ ๊ฐ€์•ผ ํ•ด์š”.
  • ๋‹ค์†”: ๋งค์šฐ ์กธ๋ ค์š”. ๊ฐ๊ธฐ ๊ธฐ์šด ์‚ด์ง ์žˆ์–ด์š”.
  • ์„ ์•„: ์Œโ€ฆ ์ง€๊ฐํ•  ์ค„ ์•Œ์•˜๋Š”๋ฐ ์—ฌ์œ ๋กœ์› ์–ด์š”.
  • ํƒœ์—ฐ: ๋ฐฐ ์•ˆ ์•„ํŒŒ์š”.

๐Ÿง ์–ด์ œ ํ•œ ์ผ

  • ๋ฏธ๋ผ: CRDT ์ด๋ก  ํ•™์Šตํ•˜๊ณ  ์ •๋ฆฌํ–ˆ์–ด์š”.
  • ์„ ์•„: webSocket๊ณผ webRTC ํ•™์Šต, ์‹œ๊ทธ๋„๋ง ๊ณผ์ • ์ถ”๊ฐ€ ํ•™์Šต์ด ํ•„์š”ํ•ด์š”.
  • ๋‹ค์†”: canvas API ์Šคํ„ฐ๋””ํ–ˆ์–ด์š”.
  • ์ˆ˜์ •: ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ž‘ ๋ชจ๋…ธ๋ ˆํฌ ๊ณต๋ถ€ํ•˜๋‹ค๊ฐ€ ์••๋„๋‹นํ–ˆ์–ด์š”.
    • ์œ ๋ น ์˜์กด์„ฑ ๋“ฑ๋“ฑ ์™œ ์ƒ๊ฒผ๋Š”์ง€ ๋„ˆ๋ฌด ๊ถ๊ธˆํ–ˆ์–ด์š”.
    • ์ž‘๋™ ์›๋ฆฌ๋„!
  • ํƒœ์—ฐ: ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ์ด ์™œ ๋‚˜์™”๋Š”์ง€์— ๋Œ€ํ•œ ๋ฐฐ๊ฒฝ ์ง€์‹ ํ•™์Šตํ–ˆ์–ด์š”.
    • HTTP ~ WebRTC๊นŒ์ง€์˜ ์—ญ์‚ฌ์™€ ๋ฐฐ๊ฒฝ์„ ์กฐ๊ธˆ ์•Œ๊ฒŒ ๋์–ด์š”.

๐Ÿงฑ ๋ฐฉํ•ด ์š”์†Œ

  • ๋ฏธ๋ผ: ์ž ์ด์š”.
  • ์„ ์•„: ์ž ์ด์š”.
  • ์ˆ˜์ •: ์˜ค๋Š˜์€ ๋ฐฐ๊ณ ํ””์ด์—์š”.
  • ํƒœ์—ฐ: https://naver.me/xE1AyUTm

๐Ÿ“‹ ์˜ค๋Š˜ ํ•  ์ผ

  • ๋งˆ์Šคํ„ฐ ํด๋ž˜์Šค ํŒ€ ๋‚˜๋ˆ„๊ธฐ ๊ณ ๋ฏผ
  • ์ฃผ๊ฐ„ ๊ณ„ํš ์„ธ์šฐ๊ธฐ
  • ๋””์ž์ธ ๋งˆ๋ฌด๋ฆฌ
  • ํ”„๋กœ์ ํŠธ ์„ธํŒ… ๋งˆ๋ฌด๋ฆฌ
  • ํ”„๋กœ๋•ํŠธ ๋ฐฑ๋กœ๊ทธ ์ž‘์„ฑ
  • ์œ„ํ‚ค ์ •๋ฆฌ

11์›” 5์ผ ํ™”์š”์ผ

์„ธ๋ถ€ ๋‚ด์šฉ ๋ณด๊ธฐ

๐ŸŽ ์˜ค๋Š˜์˜ TMI

  • ์„ ์•„: ์ด์‚ญํ† ์ŠคํŠธ ๋จน์—ˆ์–ด์š”. ๋ฐฐ๋ถ€๋ฅด๋„ค์š”.
  • ์ˆ˜์ •: ์–ด์ œ ๋–ก๋ณถ์ด ๋งค์›Œ์„œ ๋ฐฐ ์•„ํŒ ์–ด์š”.
  • ํƒœ์—ฐ: ๋…ธ๋ธŒ๋žœ๋“œ ๋ฒ„๊ฑฐ ๋จน์—ˆ์–ด์š”.
  • ๋ฏธ๋ผ: ์ž ์„ ๋งŽ์ด ์žค์–ด์š”.
  • ๋‹ค์†”: 11์‹œ๊ฐ€ 11์‹œ ๊ฐ™์ง€๊ฐ€ ์•Š์•„์š”.
    • ๊ทธ๋Ÿฌ๋ฉด ๋ญ ๊ฐ™์œผ์„ธ์š”?
      • 10์‹œ์š”..

๐Ÿง ์–ด์ œ ํ•œ ์ผ

  • ์„ ์•„: ๋””์ž์ธ ์ž‘์—…, ์˜ค๋ฉด์„œ shadcn ์•„ํ‹ฐํด ์ฝ๊ธฐ(๊ทผ๋ฐ ํ•ด๋ด์•ผ ์•Œ ๊ฒƒ ๊ฐ™์•„์š”), ํƒœ์—ฐ๋‹˜ ๊ธฐ์ˆ  ๋กœ๊ทธ ์ฝ๊ธฐ, ๋ฏธ๋ผ๋‹˜ CRDT ๊ธฐ์ˆ  ๋กœ๊ทธ ์ฝ๊ธฐ ์‹œ๋„
  • ์ˆ˜์ •: 1์ฃผ์ฐจ ํšŒ์˜๋ก ์ •๋ฆฌ, TypeDoc ๋ฐฐํฌ & ์˜ˆ์‹œ ์ถ”๊ฐ€
  • ํƒœ์—ฐ: ๋””์ž์ธ ์ž‘์—…, ์†Œ์ฃผ ํ•œ ์ž”
  • ๋ฏธ๋ผ: ๋””์ž์ธ ๋งˆ๋ฌด๋ฆฌํ–ˆ์–ด์š”.
  • ๋‹ค์†”: ๋””์ž์ธ ์ฐธ์—ฌ, only ์บ”๋ฒ„์Šค ํ”„๋กœํ† ํƒ€์ž… ์ œ์ž‘

๐Ÿงฑ ๋ฐฉํ•ด ์š”์†Œ

  • ์„ ์•„: ์—†์–ด์š”.
  • ์ˆ˜์ •: ๋ชจ๋‹ˆํ„ฐ๊ฐ€ ์—†์–ด์„œ ์•„์‰ฌ์›Œ์š”.
  • ํƒœ์—ฐ: ์‹ ๋ถ„์ฆ์ด์š”.
  • ๋ฏธ๋ผ: ๋Šฆ์ž  ์ž์„œ ๋ฐฅ์„ ๋ชป ๋จน์—ˆ์–ด์š”.
    • ๋ฐฅ ์•ˆ ๋จน์œผ๋ฉด ํ‚ค ์•ˆ ์ปค์š”.
      • ๋‹ค ์ปธ์–ด์š”.
  • ๋‹ค์†”: ์•ฝ๊ฐ„ ์กธ๋ฆฐ ๊ฒƒ ๊ฐ™์•„์š”.

๐Ÿ“‹ ์˜ค๋Š˜ ํ•  ์ผ

  • ํ”„๋กœ๋•ํŠธ ๋ฐฑ๋กœ๊ทธ ๋งˆ๋ฌด๋ฆฌ: 2์‹œ๊นŒ์ง€ ๋ชฉํ‘œ
  • ์ฃผ๋ง HW ์งˆ์˜์‘๋‹ต: ๋ณธ์ธ์ด ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ ๊ฑฐ ๋ฌผ์–ด๋ณด๊ธฐ, ๋Œ€๋‹ต ์•ˆ ํ•˜๋ฉด ์ˆ™์ฒญ
  • ์ปดํฌ๋„ŒํŠธ UI ๋งŒ๋“ค๊ธฐ (tailwind ์ถ”๊ฐ€ ์„ค์น˜ ์„ ํ–‰ ํ•„์š” - ํƒœ์—ฐ & ์„ ์•„)
    • Headless UI ์„ธํŒ… ํ•„์š”
    • Storybook ์„ธํŒ… ํ•„์š”
  • alias ์„ค์ • โ†’ @/components๋กœ ์„ค์ •

11์›” 6์ผ ์ˆ˜์š”์ผ

์„ธ๋ถ€ ๋‚ด์šฉ ๋ณด๊ธฐ

๐ŸŽ ์˜ค๋Š˜์˜ TMI

  • ์ˆ˜์ •: ์˜ค๋Š˜ ์ฒดํฌ์ธ ์ง€๊ฐํ–ˆ์–ด์š”!
    • ์ €ํฌ ๋ ˆํฌ ์Šคํƒ€ 7๊ฐœ ๋์–ด์š” (๋‚ด ์นœ๊ตฌ 2๋ช…) ใ…‹ใ…‹
    • ๋ฉ”๋กฑ
  • ์„ ์•„: ์–ด์ œ ์ฒดํฌ์•„์›ƒ ์ง€๊ฐํ–ˆ์–ด์š”!
  • ๋ฏธ๋ผ: ์ด์‚ญ ํ† ์ŠคํŠธ ๋ง›์žˆ์–ด์š”.
  • ํƒœ์—ฐ: ์ด์‚ญ 3๋…„ ๋งŒ์ด์—ˆ๋Š”๋ฐ ๊ดœ์ฐฎ์•˜์–ด์š”. ๋ธŒ๋žœ๋”ฉ ์ž˜ ๋๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์–ด์š”.
  • ๋‹ค์†”: ์•„์นจ๋ฐฅ ๊ณ„๋ž€์ฐœ (๋ง›์žˆ์—ˆ์Œ), ๋Šฆ์ž  ์žค์–ด์š”.

๐Ÿง ์–ด์ œ ํ•œ ์ผ

  • ์ˆ˜์ •: Github project convert to issue โ†’ ํ…œํ”Œ๋ฆฟ ์ž๋™ํ™”ํ–ˆ์–ด์š” ํ”„๋กœ์ ํŠธ ์„ธํŒ… TIP
    • ํŒŒ์ผ ์ฝ์–ด์™€์„œ ์ ์šฉํ•˜๋Š” ๊ฑฐ๋ผ convertํ•˜๊ณ  10์ดˆ ๊ธฐ๋‹ค๋ฆฌ๋ฉด ํ…œํ”Œ๋ฆฟ์ด ์ž๋™์œผ๋กœ ๋‚˜์™€์š”.
  • ์„ ์•„: UI/UX ํผ๋ธ”๋ฆฌ์‹ฑ convert to issue, tailwind ์„ธํŒ… (ํƒœ์—ฐ๋‹˜๊ณผ ํ•จ๊ป˜)
  • ๋ฏธ๋ผ: WebRTC ๊ณต๋ถ€ (๊ทผ๋ฐ ๋˜ ๋ฏธ๊ถ ์†์œผ๋กœ ๋น ์ง€๋Š” ์ค‘์ด์—์š”โ€ฆโ€ฆ.)
  • ํƒœ์—ฐ: UI/UX ํผ๋ธ”๋ฆฌ์‹ฑ convert to issue, tailwind ์„ธํŒ… (์„ ์•„๋‹˜๊ณผ ํ•จ๊ป˜)
  • ๋‹ค์†”: zustand, tailwind ์Šคํ„ฐ๋””ํ–ˆ์–ด์š”.

๐Ÿงฑ ๋ฐฉํ•ด ์š”์†Œ

  • ์„ ์•„: ์—†์–ด์š”.
  • ์ˆ˜์ •: ์—†์–ด์š”.
  • ํƒœ์—ฐ: ๊ฒŒ์ž„ํ•˜๊ณ  ์‹ถ์–ด์š”.
  • ๋‹ค์†”: ์—†์–ด์š”.
  • ๋ฏธ๋ผ: ์—†์–ด์š”.

๐Ÿ“‹ ์˜ค๋Š˜ ํ•  ์ผ

  • ์˜ค๋Š˜ ํ™œ๋™ ์‚ฌ์ง„ ์ฐ๊ธฐ
  • 1์‹œ ๋งˆ์Šคํ„ฐ ํด๋ž˜์Šค ์žŠ์ง€ ์•Š๊ธฐ
  • ๋‚ด์ผ ๋ฉ˜ํ† ๋งํ•  ๋•Œ, ์นดํŽ˜ ์–ด๋”” ๊ฐˆ์ง€ ์•Œ์•„๋ณด๊ธฐ
  • ์–ด์ œ HW check ๐Ÿ˜Ž
    • ์ˆ˜์ •: issue ํ…œํ”Œ๋ฆฟ Github Action ์ž๋™ํ™”
    • ์ˆ˜์ •: WebRTC ์‹œ๊ทธ๋„๋ง ์„œ๋ฒ„ ์—†๋Š” ๋ฒ„์ „์œผ๋กœ 1:1 CRDT ๊ตฌํ˜„ (timestamp ๊ธฐ์ค€์œผ๋กœ)
    • ๋ฏธ๋ผ: WebRTC ํ•™์Šต ๋ฐ ๊ธฐ๋ก, ์—ฌ๊ฑด ๋œ๋‹ค๋ฉด WebRTC ์‹œ๊ทธ๋„๋ง ์„œ๋ฒ„ ์—†๋Š” ๋ฒ„์ „์œผ๋กœ ํ…Œ์ŠคํŠธ
    • ํƒœ์—ฐ, ์„ ์•„: ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ์ œ์ž‘, storybook ๋ฐฐํฌ
    • ๋‹ค์†”: zustand, tailwind ํ•™์Šต

11์›” 7์ผ ๋ชฉ์š”์ผ

์„ธ๋ถ€ ๋‚ด์šฉ ๋ณด๊ธฐ

๐ŸŽ ์˜ค๋Š˜์˜ TMI

  • ๋ฏธ๋ผ: ๋ฐฐ ์•„ํŒŒ์š”.
  • ์ˆ˜์ •: ์ž… ๋ฒŒ๋ฆฌ๊ณ  ์ž์„œ ๋ชฉ ์•„ํŒŒ์š”.
  • ์„ ์•„: ๋‹ค์†”๋‹˜์ด๋ž‘ ๋ฒ„์Šค ์˜†์ž๋ฆฌ ํƒ€๊ณ  ์˜จ ๊ฒƒ ๊ฐ™์•„์š”.
  • ํƒœ์—ฐ: ๋นก์นœ ์ƒํƒœ โค๏ธโค๏ธโค๏ธ
    • ํ•˜ํŠธ ๋นผ์„ธ์š” =..=
  • ๋‹ค์†”: ์–ด์ ฏ๋ฐค์— ์—ฝ๋–กํ‚คํŠธ ์†Œ์Šค๋กœ ๋–ก๋ณถ์ด ํ•ด๋จน์—ˆ์–ด์š”.

๐Ÿง ์–ด์ œ ํ•œ ์ผ

  • ๋ฏธ๋ผ: ๋ฉ˜ํ† ๋ง ์ค€๋น„ํ–ˆ์–ด์š”.
  • ์ˆ˜์ •: CRDT ์ ์šฉํ•˜๋‹ค๊ฐ€ ์บ”๋ฒ„์Šค ํ„ฐ์น˜ ๋“œ๋กœ์ž‰ ์ ์šฉ ์•ˆ ๋ผ์„œ ๋˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์–ด์š”.
  • ํƒœ์—ฐ: UI ํผ๋ธ”๋ฆฌ์‹ฑ ์ข€ ๋” ํ–ˆ์–ด์š”.
  • ์„ ์•„: Input/ChatBubble ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ์ œ์ž‘ํ–ˆ์–ด์š”.
  • ๋‹ค์†”: ๋ฉ˜ํ† ๋ง ์ค€๋น„ ์ž‘์„ฑํ–ˆ์–ด์š”.

๐Ÿงฑ ๋ฐฉํ•ด ์š”์†Œ

  • ์ˆ˜์ •: ๋ชฉ ์•„ํŒŒ์š”.
  • ์„ ์•„: ์—†์–ด์š”.
  • ๋ฏธ๋ผ: ์—†์–ด์š”.
  • ๋‹ค์†”: ๋‹ค์Œ๋ถ€ํ„ฐ๋Š” ์ถœ๊ทผํ•  ๋•Œ ์‚ฌ๋ฐฉ์„ ๋” ์‚ดํŽด์•ผ๊ฒ ์–ด์š”.
  • ํƒœ์—ฐ: ๋งฅ์ฃผ

๐Ÿ“‹ ์˜ค๋Š˜ ํ•  ์ผ

  • ๋ฉ˜ํ† ๋‹˜๊ป˜ ๊ฐœ๋ณ„ ๋ฉ˜ํ† ๋ง ์ผ์ง€ ์ „๋‹ฌ, ๋ฉ˜ํ† ๋ง ์ˆœ์„œ ์ •ํ•˜๊ธฐ
  • ๋ฐ๋ชจ(๋ฐœํ‘œ) ์ค€๋น„ํ•˜๊ธฐ
    • โ†’ WebRTC & ์‹œ๊ทธ๋„๋ง ์„œ๋ฒ„ & (๊ฐ€๋Šฅํ•˜๋ฉด CRDT LWW Map ๋ฐฉ์‹์œผ๋กœ ๊ฐœ์„ ํ•œ ๋‚ด์šฉ๊นŒ์ง€)
    • ๋ฐ๋ชจ์šฉ ๋ฐฐํฌ ์ค€๋น„
  • ์Šฌ๋ž™ ๊ธฐ์ˆ  ๊ณต์œ  ์ฃผ์ œ ์ •ํ•˜๊ธฐ
  • Github Wiki ์ •๋ฆฌ
  • ํ™œ๋™ ์‚ฌ์ง„
  • ๋ฉ˜ํ† ๋ง ์นดํŽ˜ ๊ฒฐ์ •

๐Ÿ˜Ž ์›จ๋ฒ ๋ฒ ๋ฒ ๋ฒฑ

๐Ÿ‘ฎ๐Ÿป ํŒ€ ๊ทœ์น™

๐Ÿ’ป ํ”„๋กœ์ ํŠธ

๐Ÿชต ์›จ๋ฒ ๋ฒฑ ๊ธฐ์ˆ ๋กœ๊ทธ

๐Ÿช„ ๋ฐ๋ชจ ๊ณต์œ 

๐Ÿ”„ ์Šคํ”„๋ฆฐํŠธ ๊ธฐ๋ก

๐Ÿ“— ํšŒ์˜๋ก

Clone this wiki locally