[ํํ๋ก์ ํธ2/HotPlaceInSeoul] KPT ํ๊ณ
๐โ๏ธ ๋์ ๋ด๋น ๋ถ๋ถ : ์์ธ ๋ชจ๋ฌ / ์ ํ๋ธ ๋ชจ๋ฌ / Header
๐Keep (์ํ๋ ์ / ์ ์งํ๊ณ ์ถ์ ๊ฒ)
- ์ด์ ์๋ Bitbucket๊ณผ Jira๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ์ง๋ง, ์ด๋ฒ ํ๋ก์ ํธ์์๋ GitHub์ ์ฌ์ฉํ๋ฉด์ ์ฝ๋ ๋ฆฌ๋ทฐ, ์ด์ ๋ฐํ ๋ฑ GitHub์ ๋ค์ํ ๊ธฐ๋ฅ์ ์ตํ ์ ์์์ต๋๋ค. ์ด๋ฅผ ํตํด GitHub์ ๋ํ ์ดํด๋๊ฐ ํฌ๊ฒ ํฅ์๋์์ต๋๋ค.
- Tanstack Query๋ฅผ ์ฒ์ ์ฌ์ฉํ๋ฉด์ ์ด๋ฐ์๋ ์ด๋ ค์์ ๊ฒช์์ง๋ง, ์ ์ฐจ ์ต์ํด์ก๊ณ ์ด์ ๋ ์ ๊ทน์ ์ผ๋ก ํ์ฉํ ์ ์๊ฒ ๋์์ต๋๋ค.
- ๋น์ฆ๋์ค ๋ก์ง๊ณผ UI ๋ก์ง์ ๋ถ๋ฆฌํ์ฌ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ ์ต์ํด์ก๊ณ , ์ด๋ฌํ ๋ถ๋ฆฌ ๋๋ถ์ ์ฝ๋์ ์ ์ง๋ณด์์ฑ์ด ๋์์ก๋ค๊ณ ๋๋๋๋ค.
- ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ๊ณผ Open API ํ์ฉ์ ํตํด ๋ค์ํ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋ค๋ ์ ์ ์๊ฒ ๋์ด, ์ถํ ๊ฐ์ธ ํ๋ก์ ํธ์๋ ์ด๋ฌํ ๊ธฐ์ ๋ค์ ์ ๊ทน ํ์ฉํ๊ณ ์ถ์ต๋๋ค.
๐Problem (๊ฐ์ ์ด ํ์ํ๊ฑฐ๋ ์์ฌ์ ๋ ์ )
- UI/UX ์์ ๋ถ์กฑ
์๊ฐ์ ์ซ๊ฒจ์ ๊ธฐ๋ฅ ๊ตฌํ์ ์ง์คํ๋ค ๋ณด๋ UI์ UX ์ธก๋ฉด์์ ๋ง์ ๋ถ๋ถ์ ์ ๊ฒฝ ์ฐ์ง ๋ชปํ ์ ์ด ์์ฝ์ต๋๋ค. ๊ธฐ๋ณธ ๊ธฐ๋ฅ ๊ตฌํ์ด ์กฐ๊ธ ๋ ๋นจ๋ฆฌ ๋ง๋ฌด๋ฆฌ๋์๋ค๋ฉด ๋ ๋ค์ํ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ์ ์์์ ๊ฒ ๊ฐ์ ์์ฌ์์ด ๋จ์ต๋๋ค. - ErrorBoundary์ Suspense ๋ฏธ์ฌ์ฉ
ํ๋ก์ ํธ ์ด๋ฐ์ ErrorBoundary์ Suspense๋ฅผ ์ ์ฉํด์ผ๊ฒ ๋ค๊ณ ์๊ฐํ์ง๋ง ๊ฒฐ๊ตญ ๊ตฌํํ์ง ๋ชปํ ์ ์ด ์์ฝ์ต๋๋ค. ์ด๋ฅผ ์ ์ฉํ๋ค๋ฉด ๊ฐ ์ปดํฌ๋ํธ ๋ด์์ pending, error ์ํ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ๋ณต์ ์ธ ์ฝ๋๊ฐ ์ค์ด๋ค๊ณ , ์ฝ๋๊ฐ ๋ ๊น๋ํด์ก์ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
โจ์์ผ๋ก ์๋ํด๋ณด๊ณ ์ถ์ ๊ฒ
- ๋ฐ์ดํฐ๊ฐ ๋ ๋ง์๋ค๋ฉด ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํด๋ณด๊ณ ์ถ์์ต๋๋ค. ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ๊ฐ์ ํ ์ ์๋ ๊ธฐ๋ฅ์ด์์ ๊ฒ์ ๋๋ค.
- ์น์ ์ฒซ์ธ์์ ๊ฒฐ์ ์ง๋ ๋ฉ์ธ ํ์ด์ง UI๊ฐ ๋ค์ ์ฝํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ํด๋น ๋ถ๋ถ์ ๊ฐ์ ํ๊ณ , ์ฌ์ฉ์๊ฐ ๋ ์ง๊ด์ ์ผ๋ก ์ด์ฉํ ์ ์๋๋ก ๊ฐ์ ํ๊ณ ์ถ์ต๋๋ค.
- ์์ ๋ก๊ทธ์ธ์ ํตํ ๋ก๊ทธ์ธ ๊ธฐ๋ฅ์ ๊ตฌํํด ๋ณด๋ฉด ์ฌ๋ฐ์ ๊ฒ ๊ฐ๊ณ , ์ด๋ฅผ ํตํด ์ฌ์ฉ์์ ํธ์์ฑ์ ๋์ด๊ณ ์ถ์ต๋๋ค.
๐ฏํ๊ณ
์ฒซ ๋ฒ์งธ ํ๋ก์ ํธ ์ดํ๋ก ํ๊ณ ๋ฅผ ๋ฏธ๋ฃจ๋ค ๊ฒฐ๊ตญ ์์ฑ์ ๋ชป(?)ํ๋๋ฐ,
์ด๋ฒ์๋ ํ๋ก์ ํธ ๋ฐํ๊ฐ ๋๋์๋ง์ ๋ฐ๋ก ํ๊ณ ๋ฅผ ์์ฑํ๊ณ ์์ต๋๋ค. ๐
์ผ์ฃผ์ผ์ด๋ผ๋ ์งง์ ์๊ฐ ๋์ ๊ธฐํ๋ถํฐ ๊ฐ๋ฐ๊น์ง ๋ชจ๋ ์งํํ๋ ๊ฒ์ ์ฝ์ง ์์์ต๋๋ค.
์ฌ์ค์ ํด์ผ์ ์ ์ธํ๋ฉด ์ค์ ๊ฐ๋ฐํ ์๊ฐ์ 4์ผ ์ ๋์๊ธฐ์ ๋งค์ฐ ๋นก๋นกํ์ด์.
๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ๊ธฐํ ๋จ๊ณ์์ ์ ๋ง ๋ง์ ๋ํ์ ๋ ผ์๋ฅผ ๊ฑฐ์ณ,
๊ธฐ๋ณธ์ ์ธ ๋ฃฐ๊ณผ ํด๋ ๊ตฌ์กฐ, Git Convention, ํ์ผ๋ช ๊ท์น, ์์ ๋ฑ์ ์ ํ ์ ์์์ต๋๋ค.
์ฒ์์๋ "์ฐ๋ฆฌ๊ฐ ์ด๋ป๊ฒ ํ๊ธฐ๋ก ํ๋๋ผ?"๊ณ ํท๊ฐ๋ฆฌ๊ธฐ๋ ํ์ง๋ง, ์๊ฐ์ด ์ง๋๋ฉด์ ๋ชจ๋ ํต์ผ๋ ์์ ๋ฐฉ์์ ์ ์งํ ์ ์์๊ณ , Git log๋ฅผ ํ์ธํ ๋๋ ๊น๋ํ๊ฒ ์ ๋ฆฌ๋ ์์ ์ ๋ณผ ์ ์์ด ๋งค์ฐ ๋ฟ๋ฏํ์ต๋๋ค.
ํท๊ฐ๋ฆด ๋ ๋ง๋ค ๋ฌธ์ํ๊ฐ ์ ๋ผ ์์ด ๋ฐ๋ก ๋ฌธ์๋ฅผ ์ฐพ์๋ณผ ์ ์์๋๋ฐ ์ด๋ฅผ ํตํด ๋ฌธ์ํ์ ์ค์์ฑ์ ๋ค์ ํ ๋ฒ ๋๊ผ์ต๋๋ค.
ํ๋ก์ ํธ๊ฐ ๋๋ ํ ํํฐ๋๊ป์ ์งํํด ์ฃผ์ ์ฝ๋ ๋ฆฌ๋ทฐ์์,
์ ๋ ๊ด๋ จ๋ mutate๋ฅผ ํ ๊ณณ์ ๋ชจ์๋์ด์ผ ํ๋ค๊ณ ์๊ฐํด์ useBookmarkMutation ํ ์ add, delete Mutation์ ๋ชจ๋ ๋ฃ์๋๋ฐ,
ํ์ฅ์ฑ์ด๋ ์ฌ์ฉ์ฑ์ ๊ณ ๋ คํ์ ๋ ๊ฐ๊ฐ์ ๋ถ๋ฆฌํ๋ ๊ฒ์ด ๋ ์ข๋ค๋ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ์์ต๋๋ค.
์ด๋ฅผ ๋ฐ์ํ์ฌ ๋ฆฌ๋ทฐ๊ฐ ๋๋์๋ง์ ๋ฆฌํฉํ ๋ง์ ์งํํ๊ณ ,
์์ฌ์์ด ๋จ์๋ ErrorBoundary์ Suspense๋ ์ถ๊ฐํ๋ฉด์
๊ฐ ์ปดํฌ๋ํธ์์ error๋ฅผ ์ฒ๋ฆฌํ๋ ๋ถ๋ถ์ ์ ๊ฑฐํ๋ ์ฝ๋๊ฐ ํจ์ฌ ๊น๋ํด์ก์ต๋๋ค.
(ํ๋ก์ ํธ๋ฅผ ์ต์ข ์ ์ถํ๊ธฐ๋ ํ์๊ณ ํ ํ๋ก์ ํธ์ด๊ธฐ ๋๋ฌธ์ ๋ฆฌํฉํ ๋งํ ๋ด์ฉ์ ๊ฐ์ธ ๋ก์ปฌ์๋ง ๋ฐ์ํ์ต๋๋ค.)
๋ํ ์ด๋ฒ ํ๋ก์ ํธ์์ YouTube API๋ฅผ ํ์ฉํด๋ณธ ๊ฒฝํ์ ๋งค์ฐ ์ ์ตํ์ต๋๋ค.
์ฌ์ค ์คํ API๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋ํด ๋ค์ ๋๋ ค์์ด ์์๋๋ฐ,
๋ง์ ์ฌ์ฉํด๋ณด๋ ์๊ฐ๋ณด๋ค ์ด๋ ต์ง ์์๊ณ ์์ผ๋ก ๊ฐ์ธ ํ๋ก์ ํธ์์ ์คํ API๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ ๋ง์ด ๋ฐฐ์ฐ๊ณ ์ถ์ต๋๋ค.
๋งค๋ฒ ํ ํ๋ก์ ํธ๋ ์ ๋ง ์ด๋ ต๊ณ ํ๋ ๊ฒฝํ์ด์ง๋ง, ํ๋ก์ ํธ๊ฐ ๋๋ ๋๋ง๋ค ํ์๋ค์๊ฒ ๊ณ ๋ง์ด ๋ง์๊ณผ ๋ฏธ์ํ ๋ง์์ด ๊ณต์กดํ๋ ๋ณต์ก๋ฏธ๋ฌํ ๊ฐ์ ์ ๋๋ผ๊ฒ ๋ฉ๋๋ค. ๋๋ก๋ ํ์ ์ ์ด๋ ค์์ ์ค๊ฐํ๊ณ , ๋๋ก๋ ์๋ก์ ์๊ฒฌ์ ์กฐ์จํ๋ ๊ณผ์ ์์ ์ด๋ ค์์ ๊ฒช๊ธฐ๋ ํ์ง๋ง, ๊ทธ ๊ณผ์ ์์ ์ฑ์ฅํ๋ ๋๋์ ๋ฐ์ ์ ์์์ต๋๋ค.
๊ทธ๋ฐ ๋ณต์กํ ๊ฐ์ ๋ค์ด ์คํ๋ ค ํ ํ๋ก์ ํธ์ ๋งค๋ ฅ์ธ ๊ฒ ๊ฐ์ต๋๋ค. ํจ๊ป ๊ณ ๋ฏผํ๊ณ ํด๊ฒฐํด ๋๊ฐ๋ ๊ณผ์ ์์ ์ป์ ์ฑ์ทจ๊ฐ์ ๋ง๋ก ํํํ๊ธฐ ์ด๋ ค์ธ ์ ๋๋ก ๋ฟ๋ฏํ๊ณ , ๊ทธ ๊ฒฝํ๋ค์ด ๋๋ฅผ ํ ๋จ๊ณ ๋ ์ฑ์ฅ์์ผ์ฃผ๋ ๊ฒ ๊ฐ์ต๋๋ค.