๋‚ด์ผ๋ฐฐ์›€์บ ํ”„

[ํŒ€ํ”„๋กœ์ ํŠธ2/HotPlaceInSeoul] KPT ํšŒ๊ณ 

Dana10 2025. 3. 5. 21:41

๐Ÿ™‹‍โ™€๏ธ ๋‚˜์˜ ๋‹ด๋‹น ๋ถ€๋ถ„ : ์ƒ์„ธ ๋ชจ๋‹ฌ / ์œ ํŠœ๋ธŒ ๋ชจ๋‹ฌ / 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๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋” ๋งŽ์ด ๋ฐฐ์šฐ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

 

๋งค๋ฒˆ ํŒ€ ํ”„๋กœ์ ํŠธ๋Š” ์ •๋ง ์–ด๋ ต๊ณ  ํž˜๋“  ๊ฒฝํ—˜์ด์ง€๋งŒ, ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚  ๋•Œ๋งˆ๋‹ค ํŒ€์›๋“ค์—๊ฒŒ ๊ณ ๋งˆ์šด ๋งˆ์Œ๊ณผ ๋ฏธ์•ˆํ•œ ๋งˆ์Œ์ด ๊ณต์กดํ•˜๋Š” ๋ณต์žก๋ฏธ๋ฌ˜ํ•œ ๊ฐ์ •์„ ๋А๋ผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋•Œ๋กœ๋Š” ํ˜‘์—…์˜ ์–ด๋ ค์›€์„ ์‹ค๊ฐํ•˜๊ณ , ๋•Œ๋กœ๋Š” ์„œ๋กœ์˜ ์˜๊ฒฌ์„ ์กฐ์œจํ•˜๋Š” ๊ณผ์ •์—์„œ ์–ด๋ ค์›€์„ ๊ฒช๊ธฐ๋„ ํ–ˆ์ง€๋งŒ, ๊ทธ ๊ณผ์ •์—์„œ ์„ฑ์žฅํ•˜๋Š” ๋А๋‚Œ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ ๋ณต์žกํ•œ ๊ฐ์ •๋“ค์ด ์˜คํžˆ๋ ค ํŒ€ ํ”„๋กœ์ ํŠธ์˜ ๋งค๋ ฅ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ•จ๊ป˜ ๊ณ ๋ฏผํ•˜๊ณ  ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ€๋Š” ๊ณผ์ •์—์„œ ์–ป์€ ์„ฑ์ทจ๊ฐ์€ ๋ง๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ์–ด๋ ค์šธ ์ •๋„๋กœ ๋ฟŒ๋“ฏํ•˜๊ณ , ๊ทธ ๊ฒฝํ—˜๋“ค์ด ๋‚˜๋ฅผ ํ•œ ๋‹จ๊ณ„ ๋” ์„ฑ์žฅ์‹œ์ผœ์ฃผ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

HotPlaceSeoul