-
Notifications
You must be signed in to change notification settings - Fork 7
๐ WEEK 05 ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ
choiseona edited this page Dec 3, 2024
·
1 revision
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ์์ : Defying gravity ๋ค์ด์ฃผ์ธ์
- ๋ฏธ๋ผ: ๋๋์ด ์ด์ญํ ์คํธ ๋จน๊ณ ์์ด์
- ํ์ฐ: ์๊ธ๋ฆฌ์ฌ ๋ธ๋ ํ์คํธ ๋จน๊ณ ์์ด์
- ๋ค์: ์์นจ์ ๋ฆ์ ์๋ป ํ์ด์
- ์ ์: 9์์ ์ผ์ด๋ฌ์ด์(๋ฆ์ ), ์์์ ์ด์ฝ๋ฐ ๋จน์ด๋ ๋ ๊น์?
- ์์ : ๋ฆฌ๋ ๋๋ง ์์ ์ถ์ , ํ์ฐ๋ ํ ์ฝ๋ ์ฝ์ด๋ดค์ด์
- ๋ฏธ๋ผ: ํ์ด๋จธ ๊ธฐ๋ฅ ๊ตฌํํ์ด์(approve ํด์ฃผ์ธ์โฆ)
- ํ์ฐ: ํ์ฌ ์น์์ผ ํด๋ผ์ด์ธํธ ๋ฌธ์ํ, ํ ์คํธ UI ์ค๊ณํ์ด์
- ์ ์: ์ญํ player์ ๋์ฐ๊ธฐ, ์ญํ ๋ชจ๋ฌ ๋์ ์ด์
- ๋ค์: ๋ณด๊ฐ๋ฒ ๋ฆฌ๋ ๋๋ง ์์ ๊ธฐ ๊ณ ๋ฏผ, ์ปค์ ๋ณด์ ๋ฐฉ๋ฒ ํ์ธํ์ด์
- ์์ : ์๋ก๊ณ ์นจ์ด์์
- ๋ฏธ๋ผ: ์ ์ด์์
- ํ์ฐ: ์์ด์
- ์ ์: ์์ด์, ์๋ก๊ณ ์นจ
- ๋ค์: ์กธ๋ ค์
-
๋ฏธ๋ผ:
- ์ ๋ต ๋ก์ง ๊ตฌํํ ๊ฒ์
- ๋๋ค ๋๋ค์ ๋ง๋ค๊ฒ์
-
์ ์:
- ๊ฒ์ ์๋์์, ์ญํ ๋์ฐ๊ธฐ ์ ๋ฆฌ ํ PR ์ฌ๋ฆด๊ฒ์
- ์น์์ผ ํ์ด๋จธ ์ฐ๋ ๊ตฌํํ ๊ฒ์
-
์์ :
- useDrawing ํ ๋ถ๋ฆฌ, ์ค๋ฅ ํด๊ฒฐํ ๊ฒ์
-
๋ค์:
- useDrawing ๋ฆฌ๋ทฐ ๋ฐ ์ต์ ํ ์ฝ๋ ๋ณํฉํ ๊ฒ์
-
ํ์ฐ: ์ต์ ์์์ผ๊น์ง, ์ต๋ ํ์์ผ ์คํ 3์
- ํ ์คํธ UI ํผ๋ธ๋ฆฌ์ฑ, ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ๋ฅผ ๋ค๋ฅด๊ฒ ์ฌ์ฉํ ์ ์๋ ์ปค์คํ ํ + ์ปจํ ์ด๋ ์ปดํฌ๋ํธ ๊ตฌํํ ๊ฒ์
- ๋ฐฉ URL ๋ณต์ฌ ๋ฐ ๋ฐ์ ํธ๋ค๋ฌ ๊ตฌํํ ๊ฒ์
- ์๋ฌ ํธ๋ค๋งํ ๊ฒ์
- HTTP ์๋ฌ
- ์น์์ผ ํต์ ์๋ฌ
- ์ปดํฌ๋ํธ ์๋ฌ
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ๋ฏธ๋ผ: ๋ค๋ค ์ธ์ ์ค์๋์
- ์์ : ํฌ๋ฆผ์์ฐ ๋จน์ด์ผ ํด์
- ์ ์: ๋ฐฐ๊ณ ํ์, ํ ๋ฌ๋ณถ ๋จน๊ณ ์ถ์ด์
-
ํ์ฐ: ์ฒซ๊ฐ์ ํ๋๋ฐ ์ ๋ํด๋ก ๋ฐ์ง ์๋๋ฐ ๋๋ฌด ์ด๋ป์
- ๊ทธ๋ฆฌ๊ณ ์์ ์์ฝํด์ผ ํด์
- ๋ค์: ํผ๊ณคํ ํ์์ผ์ด์์
- ๋ฏธ๋ผ: ์ ๋ต ์ฒ๋ฆฌ ๋ก์ง ์ผ๋ถ ๊ตฌํํ์ด์
- ์์ : useDrawing ํ ๋ถ๋ฆฌํ์ด์
- ์ ์: timer ์ฐ๊ฒฐํ์ด์
- ํ์ฐ: ์ด๋ ๋ฐ์ ํธ๋ค๋ฌ ๊ตฌํํ์ด์!
- ๋ค์: ์ต์ ํ ์ฝ๋ ์ ๋ฆฌ & undo/redo ์ฝ๋ ๋ฆฌ๋ทฐ ์๋ฃํ์ด์
- ๋ฏธ๋ผ: ์ ๋ต ์ฒ๋ฆฌ ๋ก์ง ์๊ฐ๋ณด๋ค ์ด๋ ค์์...
- ์์ : ์์ด์
- ์ ์: ๋ฐฐ๊ณ ํ์
- ํ์ฐ: ํคํค ์ ๋ํด๋ก ์ด๋ป์
- ๋ค์: ์์ด์
- ๋ฏธ๋ผ: ์ ๋ต ์ฒ๋ฆฌ ๋ก์ง ๊ตฌํ ์๋ฃ, ์ฑํ ์ ์ฅํ ๊ฒ์
- ์์ : ๊ตฌ๊ฒฝ๊พผ ๊ทธ๋ฆผ ๋ฐ์ดํฐ ๋ณด๋ด๊ธฐ + redraw ๊ตฌํํ ๊ฒ์
- ์ ์: timer ์ฐ๋ ๋ก์ง ์์ ํ PR, PlayerRole/RoomStatus ๋ณ UI ํธ๋ค๋งํ ๊ฒ์
-
ํ์ฐ:
- ๊ฒฐ๊ณผ ํ๋ฉด ๋์์ธ/๊ตฌํํ ๊ฒ์
- ๋ณธ์ธ ๋๊ตฐ์ง ์์๋ณผ ์ ์๊ฒ UI ๋ณ๊ฒฝํ ๊ฒ์
- UI ๊นจ์ง๋๊ฑฐ ๋ณด์(+ ์คํฌ๋กค ๋์์ธ or ์์ ๊ธฐ)
- ์๋ก๊ณ ์นจ ๋ฐ ์ด๋ ์ ์๋ฌํธ ๋์ค๊ฒ ํ ๊ฒ์
- ๋ก๋ฉ UI ๋ฐ๊ฟ๊ฒ์
- ๋๊ตฌ ์ ์ฅํ๋ฉด ์๋ฆฌ ๋์ค๊ฒ ์ค์ , ๊ฒ์ ๋ธ๊ธ ๋ฐ๋ณต ์ฌ์ํ ๊ฒ์
- ๋ค์: ์์ ๋ useDrawing ๋ถ๋ฆฌ ์๋ฃํ๋ฉด ์ต์ ํ ์ฝ๋ ๋ณํฉ & ๋ฐฐ๊ฒฝ ํจํด ์ด๋ฏธ์ง ์ ์ฉํ ๊ฒ์
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ์ ์: ํ๋์์ ๋์ด ๋ด๋ ค์์
- ๋ฏธ๋ผ: ๋์ด ์์ โ๏ธโ๏ธ๐จ๏ธ
- ์์ : ๊ทค์ฌ์์ด์
- ๋ค์: ์ฐ๋ ๊ธฐ์ฐจ๊ฐ ๋๋ฌธ ์ ์ฐ๋ ๊ธฐ ์๊ฐ์ ธ๊ฐ์ด์
-
ํ์ฐ: ๋์ด ์ฌ๊น์~ ์๋ ๋์์~~
- ์์ด์ธํฐ-๋
- ์ ์: ํ์ด๋จธ ์ฐ๋, RoundEnd ๋ชจ๋ฌ ๋์ฐ๊ธฐ (๋ผ์ด๋ ๋ค ๋์๊ฐ๊ธด ํด์) ํ์ด์
- ๋ฏธ๋ผ: ์ต์ข ๊ทธ๋ฆผ ๋ธ๋ก๋์บ์คํธ ๊ณ ๋ฏผํ์ด์
- ์์ : ํ ๋ถ๋ฆฌ, ๋ฐฑํฐ ํด๋ก CRDT ํ์ตํ์ด์
- ๋ค์: ์ต์ ํ ์ฝ๋ ๋ณํฉํ์ด์ (๊ธ์ผ ๋ชจ์๋ฆฌ ๋ณด๊ฐ๋ง ์ข ๋ ๋ณด๊ณ pr ์์ )
-
ํ์ฐ:
- usePageLeaveConfirm ํ ๊ตฌํ: ์๋์น ์์ ํ์ด์ง ์๋ก๊ณ ์นจ๊ณผ ๋ค๋น๊ฒ์ด์ ๋ฐฉ์งํ์ด์
- GameLayout์ ํ์ด์ง ์ดํ ๋ฐฉ์ง ๊ธฐ๋ฅ ์ ์ฉ: ๊ฒ์ ์ํ์ ๋ฐ๋ฅธ ๊ฒฝ๊ณ ๋ฉ์์ง ํ์ํ์ด์
- ๋ผ์ด๋ ์์ ์ฒ๋ฆฌ ๊ฐ์ : ๋๊ธฐ์ค์์ ๊ฒ์์ผ๋ก ์ ํ ์ ํ์คํ ๋ฆฌ ์คํ ๊ด๋ฆฌ ์ต์ ํํ์ด์
- ๋ก๊ณ ๋ฅผ ํตํ ๋ฉ์ธ ํ์ด์ง ๋ค๋น๊ฒ์ด์ ์ถ๊ฐํ์ด์
- ์ ์: ๋ฆ์ ์ด์
- ๋ฏธ๋ผ: ์ ์ด์
- ๋ค์: ์กธ๋ ค์. ๋์ผ ๋ชจ๋ํฐ ๊ฐ์ ธ์ฌ๊ฑธโฆ ใ ใ ใ ใ ใ
- ์์ : ์กธ๋ ค์
- ํ์ฐ: ํ๋ค์ด์
-
์ ์:
- PR์ฌ๋ฆฌ๊ธฐ (๋์ ์ ์๋ก ์์ ํ ํ)
- playerRole/roomStatus๋ณ UI ํธ๋ค๋งํ ๊ฒ์
- ๋ผ์ด๋ ๋ฐ๋ ๋ ์ํ ์ด๊ธฐํ(PR์ )
- ๊ฒ์ ๋๋ฌ์ ๋ ์ํ ์ด๊ธฐํ/๋ฆฌ๋ค์ด๋ ํธ ๊ตฌํํ ๊ฒ์
- ๋ฏธ๋ผ: ์ต์ข ๊ทธ๋ฆผ ๋ธ๋ก๋์บ์คํธ ๊ตฌํ, https ์ ์ฉํ ๊ฒ์
- ๋ค์: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๋ง๋ฌด๋ฆฌํ ๊ฒ์
- ์์ : ๊ตฌ๊ฒฝ๊พผ ๋ง์ถ๊ธฐ ์ฉ๋ ๋๋ก์ ์ฐ๋, ๋ฆฌ๋ ๋๋ง ๋ฌธ์ ํด๊ฒฐํ ๊ฒ์
-
ํ์ฐ:
- ์๋ก๊ณ ์นจ์ด๋ ํ์คํ ๋ฆฌ ์กฐ์๋ง ํด๋ navigate('/', { replace: true }) ๋๋๋ก ์ค์ ํ ๊ฒ์
- ์คํฌ๋กค ๋์์ธํ ๊ฒ์
- ๊ฒฐ๊ณผ ํ๋ฉด ๋์์ธ/๊ตฌํํ ๊ฒ์
์ธ๋ถ ๋ด์ฉ ๋ณด๊ธฐ
- ์์ : ๋ ์ ๋ง ์ฌํด์ ์์ฐ์ฌํด์์
- ๋ฏธ๋ผ: ๋ ๋๋ฌธ์ ์งํ์ฒ ์ ์ฌ๋์ด ๋ง์์
- ํ์ฐ: ๋จธ๋ฆฌ๊ฐ ๋๋ฌด ์ํ์
- ๋ค์: ์ด์ ๋ ์น์ด๋งํผ ๋ค์ ์์์ด์ใ
-
์ ์: ํ์ฐ๋ ์ ๋์, ์์ ๋ ์ ๊ทธ๋ฅ ํ์ด์ดํญ์ค๋ ์จ์ผ ๊น์์ด์ ใ
ใ
ใ
ใ
ใ
- ใ ใ ใ ใ ใ ๋ธ๋ผ์ฐ์ ๋ถ์๋์ จ๋ค์!
- ์์ : ์ต์ข ๋๋ก์ ๋ธ๋ก๋์บ์คํธ ๋ง๋ฌด๋ฆฌํ์ด์
- ๋ฏธ๋ผ: https๋ก ๋ฐฐํฌํ์ด์ (๊ทผ๋ฐ ํด๋ผ์ด์ธํธ ์ฝ๋์ ํ๊ฒฝ๋ณ์๊ฐ ์ ์ฉ์ด ์ ๋ผ์ ์์ ์ค์ด์์)
- ํ์ฐ: ๋ฐฐ๊ฒฝ์์ ์ฝ์ ํ์ด์
- ๋ค์: ํด์ํ์ด์
- ์ ์: ์๋ฒ ๋ก์ปฌ์์ ๋๋ ค์ ๋ผ์ด๋๋๋ฌ์ ๋ ์ด๊ธฐํ๋๋ ๊ฒ ํ์ธํ๊ณ ์ ๋ค์์ด์
- ์์ : ๋์ด ๋ง์ด ์์ ํ๋ค์ด์
- ๋ฏธ๋ผ: ๋โ๏ธโ๏ธ
-
ํ์ฐ: ๋จธ๋ฆฌ ์ํ ๊ฑฐ์์
- ์ ์ด์ ๋ถํฐ ๋จธ๋ฆฌ ์ํ์ธ์ใ ใ
- ๋ชฐ๋ผ์ ํ์ด๋ ๋ ์ฃผ์ธ์
- ํ ์ง์ ์๋๋ฐ ๊ฐ์ ธ์ฌ๊ฑธ์
- ๊ทธ๋ฅ ๋ฐฅ๋จน์ผ๋ก ๋๊ฐ์ ๋ ์ฌ์ผ๊ฒ ์ด์
- ๋ค์: ๋์ด ๋ง์ด ์์ ํ๋ค์ด์
- ์ ์: ๋ชธ์ด ์ฒ๊ทผ๋ง๊ทผ์ด์์
- ์์ : ๋๋ก์ PR ๋ ๋ฆฌ๊ธฐ(๋ค์๋ ์ฝ๋ ๋ณํฉ), ์์ ๋ฐฐ์น ๋ก์ง ๋ฐ ์ํ ๊ด๋ฆฌ ๊ตฌํ, ๋ฆฌ๋ ๋๋ง ๋ฐฉ์งํ ๊ฒ์
- ๋ฏธ๋ผ: ๋ฏธ์ ์ด์์
- ํ์ฐ: ์ ์ฅ ์ ํจ๊ณผ์ ๋์ค๊ฒ ํ๊ณ , ๊ฒฐ๊ณผํ๋ฉด ๋์์ธํ ๊ฒ์
- ์ ์: ์์ ๋ PR ๋จธ์ง๋๋ฉด UI ํธ๋ค๋ง ์์ ํ ๊ฒ์
- ๋ค์: ๋ฐฐ๊ฒฝ ์์ ๋ง๋ฌด๋ฆฌ & ๋๋๋ฉด ๋จ๋ ์ผ ์ค ํ ๋น๋ฐ์๊ฒ์
- 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 ์ฃผ๊ฐ ํ๊ณ