-
Notifications
You must be signed in to change notification settings - Fork 7
๐ WEEK 06 ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ
choiseona edited this page Dec 4, 2024
·
1 revision
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ์์ : ์ฐ๋ ๋จน๊ณ ์์ด์
- ๋ฏธ๋ผ: ์ด์ ๋ง๋ผ์น๊ถ ๋จน๊ณ ๋ฐฐ๊ฐ ์ํ์
- ์ ์: ์์ด์!!
- ๋ค์: ์ง๋ถ ๋ ๋ น์์ ๋๋ ํ๋ฌ์
- ํ์ฐ: ๋ฐฐ๊ฐ ๋๋ฌด๋๋ฌด ์ํ์ ์ง์ง ์ด๊ฑฐ ์ธ์ ๊น์ง ๊ฐ๊น์? ์ ๋ง ํ๋ค์ด์
- ์์ : core ํจํค์ง prettier ์ ์ฉ, CRDT ์ค๋ณต ์ขํ ์ ๊ฑฐ, useDrawingSocket ํ ๋ฆฌํฉํ ๋งํ์ด์
-
๋ฏธ๋ผ: ๋๋ค ๋๋ค์, ๋๋ค ํ๋กํ, ๋๋ค์ ์์ ํ์ด์
- ๋๋ค ๋๋ค์ ๋ค๊ฐ์ด ์ฌ๋ฏธ์๋ ๊ฑธ๋ก ์ ํด๋ด์
-
์ ์: ๋ก๋นํ์ด์ง ๋จ์ถํค ๊ตฌํํ์ด์(๊ทธ๋ฐ๋ฐ Chat Input์ Enter๋ก ํฌ์ปค์ฑ๋ ์ ์๋๋ก ํ๋๋ฐ ๋๋กญ๋ค์ด ๋ฉ๋ด ์ ํ ํ ์ํฐ ๋๋ฅด๋ฉด ๋ฐ๋ก chat Input์ด ํฌ์ปค์ฑ๋๋ ๋ฌธ์ ๋ฐ์)
- ์ด๊ฑฐ ๋๋กญ๋ค์ด ๋์ค๋ฉด ๊ทธ ์ ํ์ฐฝ์ ๋์ค๋๋ก ํฌ์ปค์ฑํ ์ ์์ ๋ฏํด์, ๋ชจ๋ฌ๋ ์ ๊ฐ ๊ทธ๋ ๊ฒ ๊ธฐ๋ฅ ์ถ๊ฐํ๊ฑฐ๋ ์
- ๋ค์: ์์ ํ์ด์ง ์ปค์คํ ์ปค์ throttle ์ ์ฉ ๋ฐ ํจํด์ด๋ฏธ์ง css๋ก ๋ณ๊ฒฝ + ๊ฒ์ ๋ ์ด์์ ํจํด ์ด๋ฏธ์ง ์ ์ฉ(css)ํ์ด์
- ํ์ฐ: HTML ๋ฉํ ๋ฐ์ดํฐ ๋ฐ JSON ์์ฑ, ๋ฌธ์ํ ๋์ค ๋ฐฐ์ํ ์ด์๋ก ์ค๋จํ์ด์
- ์์ : ์ ์ด์์
- ๋ฏธ๋ผ: ์ ์ด์์
- ์ ์: ์ ์ด์์
- ๋ค์: ๋ฐฐ๊ณ ํ๊ณ ๋ชฉ๋ง๋ผ์
- ํ์ฐ: ๋ฐฐ์ํ์
- ์์ : OffscreenCanvas + Web worker๋ก ๋ณ๋ ฌ ์คํ๋๋๋ก ํด๋ณผ๊ฒ์
-
๋ฏธ๋ผ:
- assets ํ์ผ CDN์ผ๋ก ๊ด๋ฆฌํ ๊ฒ์
- ํ๋ช ์ด๋ผ๋ ๋๊ฐ๋ฉด ๊ฒ์ ์ข ๋ฃ ๋๋๋ก ํ ๊ฒ์
- ๋ฌธ์ํ ํ ๊ฒ์
-
์ ์:
- ๋ค๊ฐ์ด ๋ฌธ์ํ(์ํค, ๋ฆฌ๋๋ฏธ) ๋จผ์ ๋๋ด๊ณ ๊ฐ์ ํ ๊ฑฐ ํด์ผํ์ง ์์๊น ์ถ์ด์
- ๊ฒ์ ๋จ์ถํค ๋ง๋ฌด๋ฆฌํ ๊ฒ์
- ๊ฒ์ ๊ฒฐ๊ณผ ํ์ด์ง ๋ง๋ค๊ฒ์
-
๋ค์:
- ํจํด์ด๋ฏธ์ง ์์ ์์ pr ์ ์กํ ๊ฒ์
- ์ฑ์ฐ๊ธฐ ํด ๋ก์ง ๋ณ๊ฒฝํ ๊ฒ์
-
ํ์ฐ:
- ๋ฌธ์ํํ ๊ฒ์
- ๋ฆฌ๋ ๋๋ง ๋ฆฌํฉํ ๋งํ ๊ฒ์
- ์ง๊ณ ์ด๊ฒผ์๋ ์๋ฆฌ ๋์ค๋๋ก ํ ๊ฒ์
- ํ์ด๋จธ๋ฅผ ๋ฃ์ด์ผ ๋๊ทผ๋๊ทผ ํ ๊ฒ ๊ฐ์์
- ๋ฆฌ๋๋ฏธ ์ ๋ฐ์ดํธํ ๊ฒ์
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ๋ฏธ๋ผ: ๋ฐฐ๊ณ ํ์
- ์ ์: ๋ฐฐ๊ณ ํ์
- ์์ : ๋ฐฐ๊ณ ํ์
- ํ์ฐ: ์ข ๋ฐฅ ์ข ๋จน์ด์ ์ข
- ๋ค์: ์๋ ์ ์ธ๋ ธ๋๋ฐ ๊ฐ๊น์ค๋ก ์ผ์ด๋ฌ์ด์
- ๋ฏธ๋ผ: ์ ์ ์์๋๋ก ์ ๋ ฌ, ๊ฒ์ ์ค์ ํ๋ ์ด์ด ๋๊ฐ๋ฉด ๊ฒ์ ์ข ๋ฃ ๊ตฌํํ์ด์
- ์ ์: ๊ฒฐ๊ณผ ํ์ด์ง UI/๋ฐ์ดํฐ ์ฐ๊ฒฐ ์๋ฃ, 20์ด ํ ๋ก๋น๋ก ๋ฆฌ๋ค์ด๋ ํธ ๊ตฌํํ์ด์
- ์์ : ์ด์ ์ฝ๋์์ ์คํธ๋กํฌ ๋จ์ ์ถฉ๋ ์ผ์ด๋๋ ๊ฒฝ์ฐ ๋ฐ๊ฒฌ โ ์คํธ๋กํฌ ๋จ์ ์ถฉ๋ ๋ณํฉ ๋ก์ง ๊ตฌํํ์ด์
-
ํ์ฐ: ๋ฆฌ๋ ๋๋ง ๋ฆฌํฉํ ๋งํ์ด์
- ๊ทผ๋ฐ ์ง์ง ํ๋ค์ด์.. ์น์์ผ ์ด๋ฐ ์์ผ๋ก ํ๋ฉด ์ ๋ ๊ฒ ๊ฐ์์ ์ง์ง ๊ฐ ์ก๊ณ ์ผ์ฃผ์ผ ๋์ ๋ฆฌํฉํ ๋ง ํด์ผํ ๊ฒ ๊ฐ์์,,
- ๋ค์: ์ฑ์ฐ๊ธฐ ๋ก์ง ๋ณ๊ฒฝํ์ด์
- ๋ฏธ๋ผ: ์ ์ด์์
- ์ ์: ์ ์ด์์
- ์์ : ์ ์ด์์
- ํ์ฐ: ์ข ์ ์ข ์์ ์ข
- ๋ค์: ํผ๊ณคํด์
- ๋ฏธ๋ผ: ๋ฌธ์ํ ํ ๊ฒ์
-
์ ์:
- ๊ฒ์๊ฒฐ๊ณผํ์ด์ง PR ์ฌ๋ฆด๊ฒ์
- ๊ฒ์ ๋ฒ๊ทธ ์์ผ๋ฉด ์ก์๊ฒ์
- canvas redo/undo, tool change ๋จ์ถํค ๊ตฌํํ ๊ฒ์
-
์์ :
- CRDT ๋ณํฉ ๋ง๋ฌด๋ฆฌํ ๊ฒ์
- redraw ์ต์ ํํ ๊ฒ์
- undo/redo ์๋ก ์ฌ๋ผ์ค๋๊ฑฐ ์์ ํ ๊ฒ์
- ๊ฐ๋ฅํ๋ฉด ํ ์คํธ ์ฝ๋๋ ๋ฐ์ํ ๊ฒ์
-
ํ์ฐ:
- ๋ฆฌ๋ ๋๋ง ๋ง๋ฌด๋ฆฌํ ๊ฒ์
- ์ง๊ณ ์ด๊ฒผ์๋ ์๋ฆฌ ๋์ค๋๋ก ํ ๊ฒ์
- ํ์ด๋จธ ํจ๊ณผ์์ ๋ฃ์ด์ผ ๋๊ทผ๋๊ทผ ํ ๊ฒ ๊ฐ์์
- ์ด๋ฏธ์ง import๊ฐ ์๋ CDN์ผ๋ก ์ ์ฉํ ๊ฒ์
-
๋ค์:
- ๋๋๊ทธ ๋ฐฉ์งํ ๊ฒ์
- ๋์๋ง ํ์ด์ง ์ ์ํ ๊ฒ์
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ๋ฏธ๋ผ: ์ด์ ๋ด์ค ๋ณด๋ค ๋ฆ๊ฒ ์ค์ด์
- ๋ค์: ํผ๊ณคํด์
-
์ ์: 35๋ถ์ ๋์ฐฉํด์ ๋ฐ๋ก ์ cu์์ ์ผ๊น ๋จน๊ณ ์์ด์
- ๋ง์ด ์์์ด์
- ํ์ฐ: ์ด์ ๋ฐฐ๊ฐ ์๋ฏผํด์ ธ์ ์ฐธ์ ์๊ฐ ์์ด์
-
์์ : ๋ฐฐ๊ณ ํ๊ณ , ์ปคํผ ์ฌ์ฃผ์ธ์
- ํฌ์ ๋จน๊ณ ์ปคํผ ๊ฐ์
- ๋ฏธ๋ผ: ์ธํ๋ผ ๊ธ ๋ง๋ฌด๋ฆฌ, ๋ ๋์ค ๊ธ ์์ฑ, ์น์์ผ ๊ธ ์งํ์ค์ด์์
- ๋ค์: ๋์๋ง ํ์ด์ง ๊ตฌํํ์ด์
- ์ ์: ๊ฒฐ๊ณผ ํ์ด์ง ์๋ฃ, ์ํค ์คํ๋ฆฐํธ ์ ๋ฆฌํ์ด์
- ํ์ฐ: ๋ฆฌ๋ ๋๋ง ์ค์ด๊ณ , ์นํจ ์ฌ์ด๋ ๋ฃ์์ด์. ์ด์ 5์ด ๋จ์์ ๋ ํ์ด๋จธ ํฐํคํก ์๋ฆฌ ๋ฃ๊ณ ๋ฐ๋ก PR ๋ ๋ฆด ์์ ์ด์์
- ์์ : undo/redo ๋ง๋ฌด๋ฆฌ pr ์ฌ๋ฆฌ๊ณ , ์์งค ์ฐ๋ค๊ฐ ์ ๋ค์์ด์
- ๋ฏธ๋ผ: ์ ์ด์์
- ๋ค์: ๋ฆ์ ๊ณผ ์ง๊ฐ์ด์
- ์ ์: ์กธ๋ ค์
- ํ์ฐ: ๋ฐฐ๊ฐ ์ํ์
- ์์ : ์ ์์, ์ปคํผ ๋ง์๊ณ ์ถ์ด์
-
๋ฏธ๋ผ:
- ๊ธฐ์ ๋ก๊ทธ ๋ง๋ฌด๋ฆฌ, ํ ์คํธ ์ฝ๋ ์์ฑํ ๊ฒ์
- ํ์ฐ๋ ๋งํฌ ์ ๋ฆฌํ ๊ฒ์
- ์ํค ํ ์ ๋ฆฌํ ๊ฒ์
-
๋ค์:
- ๋์๋ง ํ์ด์ง & ๋๋๊ทธ ๋ฐฉ์ง ๋ง๋ฌด๋ฆฌํ์ฌ pr ์ ์กํ ๊ฒ์
- ๋ฌธ์ ์ ๋ฆฌํ ๊ฒ์
-
์ ์:
- ์ํค ์คํ๋ฆฐํธ && ํ์๋ก ์ ๋ฆฌํ ๊ฒ์
- ๊ฐ๋ ์ ์์ด ์๋ฐ ๋๊ฐ ์๋๋ฐ ์ด์ ํ์ ํ ๊ฒ์
- ๊ตฌ๊ฒฝ๊พผ ํ์ด๋จธ ์์ ๋ฌธ๊ตฌ ๋์ธ๊ฒ์
- ํ๊ฐ๋ค์ด ์ค๋ ฅ์ ๋ฝ๋ด๋ ์ค...
- ๊ทธ๋ฆผ๊พผ, ๋ฐฉํด๊พผ ๋ง์ถ๋ ๋ฌธ๊ตฌ ๋์ธ๊ฒ์
- ์ ์์ด(๋ง์ถ๋์ค...)
- ๊ฒ์ ๊ธฐ๋ฅ ๋จ์ถํค(redo, undo, tool change) ๊ตฌํํ ๊ฒ์
-
ํ์ฐ:
- ๋ฆฌ๋ ๋๋ง ๋ง๋ฌด๋ฆฌํ ๊ฒ์
- ๊ฒ์ ์์ ์ ๋ฒํผ ๋ก๋ฉ ์ถ๊ฐํ ๊ฒ์
- ์ง ์ฌ๋ ์ฐ๋ ํ์ โ ๋ค๋ฅธ lottie ํ์ผ ์ถ๊ฐํ ๊ฒ์
- CDN ๋ถ์ผ๊ฒ์
- ๋ผ์ดํธํ์ฐ์ค INP ์งํ ํ์ธํ ๊ฒ์
- ์ฌ์ด๋, ์๋ก๊ณ ์นจ ๋ฐฉ์ง ๋ก์ง, ์ถ์ฌ ์์ฑํ ๊ฒ์
-
์์ :
- CRDT ๋ก์ง ๋ณ๊ฒฝ๋๊ฑฐ ๋ฌธ์ํํ ๊ฒ์
- ์ผ์น์จ ์ธก์ ์ ์ํด์ ํ ์คํธ ์ฝ๋ ์์ฑ ๋ฐ ๋ฌธ์ํํ ๊ฒ์
- ์ฑ๋ฅ ์ธก์ ํ ๊ฒ์
- 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 ์ฃผ๊ฐ ํ๊ณ