-
Notifications
You must be signed in to change notification settings - Fork 7
๐ WEEK 02 ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ
Sujong Kwak edited this page Nov 8, 2024
·
1 revision
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ๋ฏธ๋ผ: ์กธ๋ ค์โฆ
- ์์ : ์ด์ ๋ฐํฐ์์ผ์ค ๊ฐ๋ ค ํ๋๋ฐ ๋ฌผ๊ณ ๊ธฐ ๋ชป ๋์๋ ๋ถ ๊ณ์ ์ ๋ชป ๊ฐ์ด์. ๋ค์์ ์ฐ๋ฆฌ ํ์ด๋ ๊ฐ์ผ ํด์.
- ๋ค์: ๋งค์ฐ ์กธ๋ ค์. ๊ฐ๊ธฐ ๊ธฐ์ด ์ด์ง ์์ด์.
- ์ ์: ์โฆ ์ง๊ฐํ ์ค ์์๋๋ฐ ์ฌ์ ๋ก์ ์ด์.
- ํ์ฐ: ๋ฐฐ ์ ์ํ์.
- ๋ฏธ๋ผ: CRDT ์ด๋ก ํ์ตํ๊ณ ์ ๋ฆฌํ์ด์.
- ์ ์: webSocket๊ณผ webRTC ํ์ต, ์๊ทธ๋๋ง ๊ณผ์ ์ถ๊ฐ ํ์ต์ด ํ์ํด์.
- ๋ค์: canvas API ์คํฐ๋ํ์ด์.
-
์์ : ํจํค์ง ๋งค๋์ ๋ ๋ชจ๋
ธ๋ ํฌ ๊ณต๋ถํ๋ค๊ฐ ์๋๋นํ์ด์.
- ์ ๋ น ์์กด์ฑ ๋ฑ๋ฑ ์ ์๊ฒผ๋์ง ๋๋ฌด ๊ถ๊ธํ์ด์.
- ์๋ ์๋ฆฌ๋!
-
ํ์ฐ: ์ค์๊ฐ ํต์ ์ด ์ ๋์๋์ง์ ๋ํ ๋ฐฐ๊ฒฝ ์ง์ ํ์ตํ์ด์.
- HTTP ~ WebRTC๊น์ง์ ์ญ์ฌ์ ๋ฐฐ๊ฒฝ์ ์กฐ๊ธ ์๊ฒ ๋์ด์.
- ๋ฏธ๋ผ: ์ ์ด์.
- ์ ์: ์ ์ด์.
- ์์ : ์ค๋์ ๋ฐฐ๊ณ ํ์ด์์.
- ํ์ฐ: https://naver.me/xE1AyUTm
- ๋ง์คํฐ ํด๋์ค ํ ๋๋๊ธฐ ๊ณ ๋ฏผ
- ์ฃผ๊ฐ ๊ณํ ์ธ์ฐ๊ธฐ
- ๋์์ธ ๋ง๋ฌด๋ฆฌ
- ํ๋ก์ ํธ ์ธํ ๋ง๋ฌด๋ฆฌ
- ํ๋ก๋ํธ ๋ฐฑ๋ก๊ทธ ์์ฑ
- ์ํค ์ ๋ฆฌ
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ์ ์: ์ด์ญํ ์คํธ ๋จน์์ด์. ๋ฐฐ๋ถ๋ฅด๋ค์.
- ์์ : ์ด์ ๋ก๋ณถ์ด ๋งค์์ ๋ฐฐ ์ํ ์ด์.
- ํ์ฐ: ๋ ธ๋ธ๋๋ ๋ฒ๊ฑฐ ๋จน์์ด์.
- ๋ฏธ๋ผ: ์ ์ ๋ง์ด ์ค์ด์.
-
๋ค์: 11์๊ฐ 11์ ๊ฐ์ง๊ฐ ์์์.
- ๊ทธ๋ฌ๋ฉด ๋ญ ๊ฐ์ผ์ธ์?
- 10์์..
- ๊ทธ๋ฌ๋ฉด ๋ญ ๊ฐ์ผ์ธ์?
- ์ ์: ๋์์ธ ์์ , ์ค๋ฉด์ shadcn ์ํฐํด ์ฝ๊ธฐ(๊ทผ๋ฐ ํด๋ด์ผ ์ ๊ฒ ๊ฐ์์), ํ์ฐ๋ ๊ธฐ์ ๋ก๊ทธ ์ฝ๊ธฐ, ๋ฏธ๋ผ๋ CRDT ๊ธฐ์ ๋ก๊ทธ ์ฝ๊ธฐ ์๋
- ์์ : 1์ฃผ์ฐจ ํ์๋ก ์ ๋ฆฌ, TypeDoc ๋ฐฐํฌ & ์์ ์ถ๊ฐ
- ํ์ฐ: ๋์์ธ ์์ , ์์ฃผ ํ ์
- ๋ฏธ๋ผ: ๋์์ธ ๋ง๋ฌด๋ฆฌํ์ด์.
- ๋ค์: ๋์์ธ ์ฐธ์ฌ, only ์บ๋ฒ์ค ํ๋กํ ํ์ ์ ์
- ์ ์: ์์ด์.
- ์์ : ๋ชจ๋ํฐ๊ฐ ์์ด์ ์์ฌ์์.
- ํ์ฐ: ์ ๋ถ์ฆ์ด์.
-
๋ฏธ๋ผ: ๋ฆ์ ์์ ๋ฐฅ์ ๋ชป ๋จน์์ด์.
- ๋ฐฅ ์ ๋จน์ผ๋ฉด ํค ์ ์ปค์.
- ๋ค ์ปธ์ด์.
- ๋ฐฅ ์ ๋จน์ผ๋ฉด ํค ์ ์ปค์.
- ๋ค์: ์ฝ๊ฐ ์กธ๋ฆฐ ๊ฒ ๊ฐ์์.
- ํ๋ก๋ํธ ๋ฐฑ๋ก๊ทธ ๋ง๋ฌด๋ฆฌ: 2์๊น์ง ๋ชฉํ
- ์ฃผ๋ง HW ์ง์์๋ต: ๋ณธ์ธ์ด ๊ฐ์ฅ ์ค์ํ๋ค๊ณ ์๊ฐํ ๊ฑฐ ๋ฌผ์ด๋ณด๊ธฐ, ๋๋ต ์ ํ๋ฉด ์์ฒญ
- ์ปดํฌ๋ํธ UI ๋ง๋ค๊ธฐ (tailwind ์ถ๊ฐ ์ค์น ์ ํ ํ์ - ํ์ฐ & ์ ์)
- Headless UI ์ธํ ํ์
- Storybook ์ธํ ํ์
- alias ์ค์ โ
@/components
๋ก ์ค์
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
-
์์ : ์ค๋ ์ฒดํฌ์ธ ์ง๊ฐํ์ด์!
- ์ ํฌ ๋ ํฌ ์คํ 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 ํ์ต
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ๋ฏธ๋ผ: ๋ฐฐ ์ํ์.
- ์์ : ์ ๋ฒ๋ฆฌ๊ณ ์์ ๋ชฉ ์ํ์.
- ์ ์: ๋ค์๋์ด๋ ๋ฒ์ค ์์๋ฆฌ ํ๊ณ ์จ ๊ฒ ๊ฐ์์.
-
ํ์ฐ: ๋นก์น ์ํ โค๏ธโค๏ธโค๏ธ
- ํํธ ๋นผ์ธ์ =..=
- ๋ค์: ์ด์ ฏ๋ฐค์ ์ฝ๋กํคํธ ์์ค๋ก ๋ก๋ณถ์ด ํด๋จน์์ด์.
- ๋ฏธ๋ผ: ๋ฉํ ๋ง ์ค๋นํ์ด์.
- ์์ : CRDT ์ ์ฉํ๋ค๊ฐ ์บ๋ฒ์ค ํฐ์น ๋๋ก์ ์ ์ฉ ์ ๋ผ์ ๋๋์ง ๋ชจ๋ฅด๊ฒ ์ด์.
- ํ์ฐ: UI ํผ๋ธ๋ฆฌ์ฑ ์ข ๋ ํ์ด์.
- ์ ์: Input/ChatBubble ๊ณตํต ์ปดํฌ๋ํธ ์ ์ํ์ด์.
- ๋ค์: ๋ฉํ ๋ง ์ค๋น ์์ฑํ์ด์.
- ์์ : ๋ชฉ ์ํ์.
- ์ ์: ์์ด์.
- ๋ฏธ๋ผ: ์์ด์.
- ๋ค์: ๋ค์๋ถํฐ๋ ์ถ๊ทผํ ๋ ์ฌ๋ฐฉ์ ๋ ์ดํด์ผ๊ฒ ์ด์.
- ํ์ฐ: ๋งฅ์ฃผ
- ๋ฉํ ๋๊ป ๊ฐ๋ณ ๋ฉํ ๋ง ์ผ์ง ์ ๋ฌ, ๋ฉํ ๋ง ์์ ์ ํ๊ธฐ
- ๋ฐ๋ชจ(๋ฐํ) ์ค๋นํ๊ธฐ
- โ WebRTC & ์๊ทธ๋๋ง ์๋ฒ & (๊ฐ๋ฅํ๋ฉด CRDT LWW Map ๋ฐฉ์์ผ๋ก ๊ฐ์ ํ ๋ด์ฉ๊น์ง)
- ๋ฐ๋ชจ์ฉ ๋ฐฐํฌ ์ค๋น
- ์ฌ๋ ๊ธฐ์ ๊ณต์ ์ฃผ์ ์ ํ๊ธฐ
- Github Wiki ์ ๋ฆฌ
- ํ๋ ์ฌ์ง
- ๋ฉํ ๋ง ์นดํ ๊ฒฐ์
- 1. ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ ๋ฐ ํ๋ก์ ํธ ๋ฌธ์ํ
- 2. ์ค์๊ฐ ํต์
- 3. ์ธํ๋ผ ๋ฐ CI/CD
- 4. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด Canvas ๊ตฌํํ๊ธฐ
- 5. ์บ๋ฒ์ค ๋๊ธฐํ๋ฅผ ์ํ ์์ CRDT ๊ตฌํ๊ธฐ
-
6. ์ปดํฌ๋ํธ ํจํด๋ถํฐ ์น์์ผ๊น์ง, ํจ์จ์ ์ธ FE ์ค๊ณ
- ์ข์ ์ปดํฌ๋ํธ๋ ๋ฌด์์ธ๊ฐ? + Headless Pattern
- ํจ์จ์ ์ธ UI ์ปดํฌ๋ํธ ์คํ์ผ๋ง: Tailwind CSS + cn.ts
- Tailwind CSS๋ก ๋์์ธ ์์คํ ๋ฐ UI ์ปดํฌ๋ํธ ์ธํ
- ์น์์ผ ํด๋ผ์ด์ธํธ ๊ตฌํ๊ธฐ: React ํ๊ฒฝ์์ ํจ์จ์ ์ธ ์น์์ผ ์ํคํ ์ฒ
- ์น์์ผ ํด๋ผ์ด์ธํธ ์ฝ๋ ๋ถ์ ๋ฐ ๊ณต์
- 7. ํธ๋ฌ๋ธ ์ํ ๋ฐ ์ฑ๋ฅ/UX ๊ฐ์
- 1์ฃผ์ฐจ ๊ธฐ์ ๊ณต์
- 2์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 3์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 4์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 5์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- WEEK 06 ์ฃผ๊ฐ ๊ณํ
- WEEK 06 ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ
- WEEK 06 ์ฃผ๊ฐ ํ๊ณ