๐Ÿ“ Postscript

๊ตฌ๋ฆ„ํ†ค ์ฑŒ๋ฆฐ์ง€ ๊ฐœ๋ฐœ ํšŒ๊ณ 

Lennon 2023. 8. 5. 12:30
728x90
๋ฐ˜์‘ํ˜•

์•ˆ๋…•ํ•˜์„ธ์š” :)
์ €๋Š” ๊ตฌ๋ฆ„์— 1๋…„ ์ •๋„ ์žฌ์ง ์ค‘์ธ Kenny์ž…๋‹ˆ๋‹ค.

๊ทผ ํ•œ ๋‹ฌ ์ •๋„ ์‚ฌ๋‚ด์—์„œ ๊ตฌ๋ฆ„ํ†ค ์ฑŒ๋ฆฐ์ง€ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๊ฐœ๋ฐœ์„ ํ˜ผ์ž ์ง„ํ–‰ํ–ˆ๋Š”๋ฐ, ๊ด€๋ จํ•ด์„œ ํšŒ๊ณ ๋ฅผ ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

๋จผ์ € ๊ตฌ๋ฆ„ํ†ค ์ฑŒ๋ฆฐ์ง€๋Š” ์•„๋ž˜ ๋žœ๋”ฉ ํŽ˜์ด์ง€ ๋งํฌ์— ๋“ค์–ด๊ฐ€์‹œ๋ฉด ์–ด๋–ค ์„œ๋น„์Šค์ธ์ง€ ์‰ฝ๊ฒŒ ์•„์‹ค ๊ฒƒ ๊ฐ™์•„์š”.

๊ตฌ๋ฆ„ํ†ค ์ฑŒ๋ฆฐ์ง€ ๋žœ๋”ฉ ํŽ˜์ด์ง€ ๋งํฌ
(14์ผ ๋‚  ์ •์‹ ์˜คํ”ˆ์ด๊ณ , ์ €๋Š” ์—ด์‹ฌํžˆ ์‚ฌ์šฉ์ž๋“ค์„ ์œ„ํ•ด ๋‚จ์€ Ui ๊ฐœ๋ฐœ ๋ฐ ๊ฒ€์ˆ˜๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.)

 

๐Ÿ“š ํšŒ๊ณ  ์‹œ์ž‘

ํ˜ผ์ž ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค๋Š” ๊ฒƒ

์ €๋Š” ํ’€์Šคํƒ ์—”์ง€๋‹ˆ์–ด๋กœ ์ž…์‚ฌํ–ˆ์ง€๋งŒ ๋‹ค๋“ค ๋ฐฑ์—”๋“œ ์„ฑํ–ฅ์ด ๊ฐ•ํ•ด ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ์ฃผ๋กœ ์ž‘์—…ํ–ˆ์—ˆ๋Š”๋ฐ์š”,
์ด๋ฒˆ์—” ์ƒˆ๋กœ์šด ์‚ฌ์—…๋“ค์ด ์ƒ๊ฒจ๋‚˜๊ณ  ๊ฐ™์€ ํŒ€ ์‚ฌ๋žŒ๋“ค์ด tf๋กœ ๋น ์ง€๋ฉด์„œ ์ธ์›์ด ๋ถ€์กฑํ•œ ์ƒํƒœ๋ผ ๋ฐฑ์—”๋“œ๊นŒ์ง€ ํ˜ผ์ž ์ง„ํ–‰ํ•˜๊ฒŒ ๋์Šต๋‹ˆ๋‹ค.

 

ํ˜ผ์ž ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค๋Š” ๊ฑด ์ƒ๋‹นํžˆ ์™ธ๋กญ๋‹ค๋Š” ๊ฑธ ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.
์‹ค์ œ๋กœ ๋ฐฉ๋Œ€ํ•œ ์–‘์˜ ๊ธฐํš์— ๋Œ€ํ•ด ๊ฐœ๋ฐœ์„ ๋ฏธ์นœ ๋“ฏ์ด ์ง„ํ–‰ํ•˜๋ฉฐ ๋ฒˆ์•„์›ƒ๋„ ์˜ฌ ๋ป”ํ–ˆ์–ด์š” ๐Ÿฅฒ

๊ทธ๋™์•ˆ ์ตœ์†Œ 1๋ช…์˜ ๊ฐœ๋ฐœ์ž ๋™๋ฃŒ์™€ ํ•จ๊ป˜ ํ˜‘์—…ํ–ˆ๋Š”๋ฐ, ํ˜ผ์ž ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋‹ˆ ๋ช‡ ๊ฐ€์ง€ ๋‹จ์ ์ด ๋ณด์˜€์Šต๋‹ˆ๋‹ค.

- ์ฃผ๋‹ˆ์–ด์ž„์—๋„ ํ˜ผ์ž ์ฑ…์ž„์ง€๊ณ  ๊ฐœ๋ฐœ ์ผ์ •์„ ์‚ฐ์ •ํ•˜๊ณ  ์‹คํ–‰ํ•ด์•ผ ํ•จ
- ์‚ฌ์—…์— ๋Œ€ํ•œ ์ฝ”๋“œ ๋ฆฌ๋ทฐ์–ด๋ฅผ ๋ˆ„๊ตฌ๋ฅผ ๊ฑธ์–ด์•ผ ํ• ์ง€ ๊ณ ๋ฏผ...
- ํ˜ผ์ž ํ•˜๋ฏ€๋กœ ๋ฒ„๊ทธ๊ฐ€ ๋‚˜๋ฉด ์˜จํ†ต ๋‚ด ์ฑ…์ž„์ด๋ผ๋Š” ์••๋ฐ•๊ฐ => ์ฃผ๋ง ๊ทผ๋ฌด๊นŒ์ง€ ํ•˜๋ฉด์„œ QA๋ฅผ ์™„๋ฒฝํ•˜๊ฒŒ ์ง„ํ–‰ํ•˜๊ณ  ์‹ถ์–ด์ง..

๊ทธ๋ž˜๋„ ๊ธฐํš, ๋””์ž์ธ, ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๊ฐ€ ์›ํ™œํ•˜๊ฒŒ ๋Œ์•„๊ฐ€ ์‹œ๊ฐ„์ ์œผ๋กœ ์—ฌ์œ ๊ฐ€ ์กฐ๊ธˆ ์žˆ์—ˆ๋‹ค๋Š” ๊ฒƒ์€ ์ •๋ง ๋‹คํ–‰์ด์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฐฑ์—”๋“œ, ํ”„๋ก ํŠธ์—”๋“œ ํ• ๊ฑฐ ์—†์ด DB ์„ค๊ณ„, api ๊ฐœ๋ฐœ, ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ, Ui ๊ฐœ๋ฐœ ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด๊ฐ€๋ฉฐ ์ •๋ง ๋ฐ”์œ ํ•œ ๋‹ฌ์„ ๋ณด๋‚ธ ๊ฒƒ ๊ฐ™์•„์š”.

 

 

์•„์ง ๊ฐœ๋ฐœ์ด ๋๋‚˜์ง„ ์•Š์•˜์ง€๋งŒ,
์‚ฌ์ „ ์•Œ๋ฆผ ์˜คํ”ˆ๋‚  ์ดํ›„ ๋งŽ์€ ์‚ฌ์šฉ์ž๋“ค์ด(๋ฌด๋ ค 500๋ช… ์ด์ƒ) ๊ตฌ๋ฆ„ํ†ค ์ฑŒ๋ฆฐ์ง€ ์‚ฌ์ „ ์‹ ์ฒญ์„ ํ•ด์ฃผ์…”์„œ ๋ฟŒ๋“ฏํ•œ ๊ฒƒ ๊ฐ™์•„์š”.

์™ธ๋กœ์šด ์ฝ”๋“œ ๋ฆฌ๋ทฐ

์•„๋ฌด๋ž˜๋„ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ณธ์ธ์ด ํ•ด๋‹น๋˜์ง€ ์•Š๋Š” ํ”„๋กœ์ ํŠธ์˜ ๋ชจ๋“  ๊ธฐํš์„ ์ดํ•ดํ•˜๊ณ  ์™„๋ฒฝํ•œ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ํ•˜๊ธฐ์—” ๋ฌด๋ฆฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
์œ„์™€ ๊ฐ™์€ ๋ฆฌ๋ทฐ ๋ฐฉ์‹์€ ์‹œ๊ฐ„ ์ง€์ฒด๋กœ ์ด์–ด์ง€๋ฉฐ, ์„œ๋กœ์—๊ฒŒ ํ”ผ๊ณคํ•œ ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ์–ด ์กฐ๊ธˆ ์กฐ์‹ฌ์Šค๋Ÿฌ์› ์Šต๋‹ˆ๋‹ค.
๋‹คํ–‰ํžˆ ์˜†์ž๋ฆฌ์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋™๋ฃŒ๋ถ„์ด ๊ณ„์…”์„œ ๊พธ์ค€ํžˆ ์ฑŒ๋ฆฐ์ง€ ์ด์•ผ๊ธฐ๋ฅผ ์„œ๋กœ ํ•˜๋ฉฐ ๋ฆฌ๋ทฐ๋„ ๊ทธ๋‚˜๋งˆ ์ˆ˜์›”ํ•˜๊ฒŒ ์ง„ํ–‰๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์•„์ง ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋ฆฌ๋ทฐํ•  PR์ด 7๊ฐœ๊ฐ€ ์Œ“์—ฌ์žˆ์ง€๋งŒ ์•„๋งˆ ๋™๋ฃŒ๋ถ„๋“ค์ด ์ฝ”๋“œ ๋ ˆ๋ฒจ์ ์ธ ๋ถ€๋ถ„์— ๋Œ€ํ•ด ๋ฆฌ๋ทฐ๋ฅผ ์ž˜ํ•ด์ฃผ์‹ค ๊ฑฐ๋ผ ๋ฏฟ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜Ž

์ค‘์š”ํ•œ ๊ฑด QA

์•„๋ฌด๋ž˜๋„ ์œ ์ €๋‚˜ ๊ธฐ์—…์—๊ฒŒ ์ค‘์š”ํ•œ ๊ฑด ์ฝ”๋“œ ๋ ˆ๋ฒจ๋ณด๋‹ค QA์ž…๋‹ˆ๋‹ค.
์ฝ”๋“œ์˜ ํ’ˆ์งˆ์ด ์™„๋ฒฝํ•ด๋„ ๊ธฐ๋Šฅ์ด ์ •์ƒ ๋™์ž‘ํ•˜์ง€ ์•Š์œผ๋ฉด ์ •๋ง ๋ฌด์˜๋ฏธํ•œ ์ฝ”๋“œ๊ฐ€ ๋˜์–ด๋ฒ„๋ฆฌ๋‹ˆ๊นŒ์š”.

 

์ด๋ฒˆ์—” ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋”๋”์šฑ QA๋ฅผ ๋งŽ์ด ์ง„ํ–‰ํ•œ ๊ฒƒ ๊ฐ™์•„์š”.

๋‹ค์–‘ํ•œ ๋ชจ๋‹ฌ์„ ๊ฐœ๋ฐœํ•˜๋ฉฐ ๊ณ„์† DB ์‚ญ์ œ ์‚ฝ์ž… ์‚ญ์ œ ์‚ฝ์ž… ์‚ญ์ œ ์‚ฝ์ž… .........
๊ณ„์† ๋ฐ˜๋ณตํ•˜๋ฉฐ ์ผ์–ด๋‚  ์ˆ˜ ์žˆ๋Š” ์ผ€์ด์Šค๋“ค์— ๋Œ€ํ•ด ์‹ฌ๋„ ์žˆ๊ฒŒ ์ž์ฒด์ ์œผ๋กœ QA ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์š”.

โ›”๏ธ ์•„๋ž˜๋Š” ๋‹ค์–‘ํ•œ QA ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค.........

api์˜ ๊ฒฝ๋กœ ๊ฐ’์„ ๋ฐ”๊ฟ”๊ฐ€๋ฉฐ ์—๋Ÿฌ๊ฐ€ ๋‚ฌ์„ ๋•Œ ์–ด๋–ป๊ฒŒ ๋Œ€์‘๋˜๋Š”์ง€,

 

์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์ด ์˜ฌ๋ฐ”๋ฅธ์ง€,

 

์„œ๋ฒ„ ๊ธฐ์ค€ ๋‚ ์งœ์— ๋งž๊ฒŒ ๋ผ์šด๋“œ๊ฐ€ ์ˆœ์„œ๋Œ€๋กœ ์ž˜ ์—ด๋ฆฌ๋Š”์ง€,

 

์ฃผ๋ง์„ ์ œ์™ธํ•˜๊ณ  ๋ผ์šด๋“œ๊ฐ€ ์ž˜ ๋Œ€์‘๋˜๋Š”์ง€,

 

์ฃผ๋ง์ผ ๋•Œ ๊ธˆ์š”์ผ ๋ทฐ๋กœ ์ž˜ ๋ณด์ด๋Š”์ง€,

 

์‚ฌ์šฉ์ž๊ฐ€ ๋กœ์ปฌ ์‹œ๊ฐ„์„ ๋ฐ”๊ฟ”๋„ ๊ธฐ๋Šฅ์ƒ์œผ๋ก  ์„œ๋ฒ„ ์‹œ๊ฐ„ ๊ธฐ์ค€์œผ๋กœ ์ž˜ ๋™์ž‘ํ•˜๋Š”์ง€,

 

์„œ๋ฒ„ ๋กœ์ง์ด ๋ถ€ํ•˜๋ฅผ ์ผ์œผํ‚ค์ง„ ์•Š๋Š”์ง€,

 

์ฑŒ๋ฆฐ์ง€ ๋ฌธ์ œ ๊ณต๊ฐœ ๋‚  ๊ธฐ์ค€ 48์‹œ๊ฐ„ ์•ˆ์— ํ’€์—ˆ์„ ๋•Œ ์Šคํƒฌํ”„๊ฐ€ ์ •์ƒ ๋ฐœ๊ธ‰๋˜๋Š”์ง€,

 

47์‹œ๊ฐ„ 59๋ถ„ 59์ดˆ์— ์ œ์ถœํ–ˆ์„ ๋•Œ ๋ฐœ๊ธ‰์ด ๋˜๋Š”์ง€,

 

48์‹œ๊ฐ„ ์ดํ›„ ์ œ์ถœํ–ˆ์„ ๋•Œ ๋ฐœ๊ธ‰์ด ๋˜์ง€ ์•Š๋Š”์ง€,

 

์ œ์ถœ ๊ด€๋ จ ์ด๋ฒคํŠธ ๋ชจ๋‹ฌ๋“ค์ด ์—ฌ๋Ÿฌ ๋ฒˆ ๋œจ์ง„ ์•Š๋Š”์ง€,

 

์Šค์ผˆ๋ ˆํ†ค Ui๊ฐ€ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ์ง€, ๋ชจ๋“  ๋ฐ˜์‘ํ˜•์— ๋Œ€ํ•ด ์ž˜ ๋Œ€์‘๋˜๋Š”์ง€,

 

๋ชจ๋“  ๋ฐ˜์‘ํ˜•์— ๋Œ€ํ•ด Ui๊ฐ€ ์ž˜ ๋Œ€์‘๋˜๋Š”์ง€,

 

์Šคํƒฌํ”„์— ๋”ฐ๋ผ ์ •ํ™•ํ•˜๊ฒŒ ๋ ˆ๊ณ ๋“ค์ด ์ž˜ ๋ณด์ด๋Š”์ง€,

 

ํ•ด์„ค ๊ฐ•์ขŒ ์˜คํ”ˆ Alert๊ฐ€ ์˜ค์ „ 10์‹œ ๊ธฐ์ค€, ์ฑŒ๋ฆฐ์ง€ ๋งˆ๋ฌด๋ฆฌ ๊ธฐ์ค€์œผ๋กœ ์ž˜ ๋œจ๋Š”์ง€,

 

๋“ฑ๋“ฑ ๋“ฑ๋“ฑ ๋“ฑ๋“ฑ.........

 

๊ธฐํš์ž์—๊ฒŒ ๊ณ„์† ์ฐพ์•„๊ฐ€ ๋ฌผ์–ด๊ฐ€ ๋ณด๋ฉฐ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ–ˆ๊ณ ,
์ดํ›„ ์˜๋„ํ•œ ๋Œ€๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ์ •๋ง ํ˜ผ์ž์„œ ๋ชจ๋“  ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ๋” ๋งŽ์ด QA๋ฅผ ์ง„ํ–‰ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์•„๋งˆ ํ˜ผ์ž ๊ฐœ๋ฐœํ•จ์— ๋”ฐ๋ฅธ ๋ถˆ์•ˆํ•จ์ด ์ปธ๋˜ ๊ฒƒ ๊ฐ™์•„์š”.

์ฝ”๋“œ ์„ค๊ณ„

์ด๋ฒˆ ์ฑŒ๋ฆฐ์ง€๋Š” ํŠนํžˆ ๋ชจ๋‹ฌ์ด ๋งŽ์€๋ฐ์š”,

 

  1. ์‚ฌ์ „ ์•Œ๋ฆผ ๋ชจ๋‹ฌ
  2. ์ฑŒ๋ฆฐ์ง€ ์‹œ์ž‘ ํ›„ ๋ฐ›๋Š” ์ •๋ณด ์ˆ˜์ง‘ ๋ชจ๋‹ฌ
  3. ํ•™์Šต ์ผ๊ธฐ ๋ชจ๋‹ฌ
  4. ์ค‘๊ฐ„ ๋ฐ ์ตœ์ข… ์„ค๋ฌธ์„ ๋ฐ›๋Š” ๋ชจ๋‹ฌ (์˜ˆ์ •?)
  5. ์ฑŒ๋ฆฐ์ง€ ๋ฌธ์ œ๋ฅผ ์ œ์ถœํ–ˆ์„ ๋•Œ ์ผ์–ด๋‚˜๋Š” ๋‹ค์–‘ํ•œ ์ผ€์ด์Šค๋“ค์— ๋Œ€ํ•œ ๋ชจ๋‹ฌ

๋“ฑ๋“ฑ...

๋ชจ๋‹ฌ ๊ฐœ๋ฐœ์ž๋ผ ๋ถˆ๋ฆด ์ •๋„๋กœ ๋ชจ๋‹ฌ์— ๋Œ€ํ•œ ์ผ€์ด์Šค๊ฐ€ ์•„์ฃผ์•„์ฃผ ๋งŽ๊ณ  ๊ธฐ๋Šฅ ๋˜ํ•œ ๋ชจ๋‘ ๋‹ฌ๋ผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐ ๊ณ ๋ฏผ์„ ๋งŽ์ด ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์š”.

์ผ๋‹จ ๋‹น์—ฐํ•˜๊ฒŒ๋„ ๊ด€์‹ฌ์‚ฌ๋ณ„๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•ด์„œ ์ •์˜ํ•˜๊ณ , ๊ณตํ†ต์ ์œผ๋กœ ๋บ„ ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์€ ๋ชจ๋‘ ๋บ€ ๊ฒƒ ๊ฐ™์•„์š”.

 

์œ„ ์‚ฌ์ง„์€ ์ด๋ฒˆ์— ๊ฐœ๋ฐœํ•œ ์‚ฌ์ „ ์•Œ๋ฆผ ๋ชจ๋‹ฌ์ธ๋ฐ์š”.

์œ„ ๋ชจ๋‹ฌ์˜ ํŠน์ง•์€ Footer์— Step์ด ์žˆ๊ณ , ๋‹ค์Œ ๋ฒ„ํŠผ disabled ๊ฒ€์ฆํ•˜๋Š” ๋ถ€๋ถ„์ด Step๋งˆ๋‹ค ์žˆ๊ณ ,
๋ชจ๋ฐ”์ผ์ผ ๋• ์ „์ฒด์ ์ธ ๋ทฐ ๋ฐ ๋””์ž์ธ ์ž์ฒด๊ฐ€ ๋ฐ”๋€Œ๋„๋ก ์„ค๊ณ„๊ฐ€ ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

์•„๋งˆ ์œ„ ๋ชจ๋‹ฌ์€ ์ž์ฃผ ์“ฐ์ผ ๊ฒƒ ๊ฐ™์•„ ๋”ฐ๋กœ StepModal์ด๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฐ Step ๋ณ„ view, data, validation ์กฐ๊ฑด ๋“ฑ์— ๋Œ€ํ•ด Props๋กœ ์ „๋‹ฌ๋ฐ›๊ณ  ์ œ์ถœ(Post) ๋˜๋Š” Step ์ˆ˜,
๋งˆ์ง€๋ง‰ ํŽ˜์ด์ง€์— ์ด์ „ ๋ฒ„ํŠผ์„ ๋„ฃ์„ ๊ฑด์ง€ ๋“ฑ๋“ฑ ์ตœ๋Œ€ํ•œ ์œ ์—ฐํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ํ•œ ๊ฒƒ ๊ฐ™์•„์š”.

 

์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ๋Š” Step๋ณ„๋กœ ๋ฐ์ดํ„ฐ ์„ค๊ณ„๋ฅผ ์•Œ๋งž๊ฒŒ ํ•ด์•ผ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ,
์•„๋งˆ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜์‹œ๋Š” ๋ถ„๋“ค๋„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ• ์ง€ ์ž˜ ์•Œ๋„๋ก ๊ด€๋ จํ•ด ์ฃผ์„์œผ๋กœ ์ž˜ ์ž‘์„ฑํ•ด ๋†”์„œ ๋ฌด๋ฆฌ๋Š” ์—†์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

๊ตฌ๋ฆ„ํ†ค ์ฑŒ๋ฆฐ์ง€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฌธ์ œ์—์„œ ๋‹ต์•ˆ์„ ์ œ์ถœํ–ˆ์„ ๋•Œ ๋ชจ๋‹ฌ์€ ๋‹ค์–‘ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜(BX) ์š”์†Œ๊ฐ€ ๋งŽ์€๋ฐ์š”.
๊ด€๋ จํ•ด์„œ๋„ ํƒ€์ž…์— ๋Œ€ํ•ด ๋ชจ๋‹ฌ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์„ค๊ณ„ํ•˜๋Š” ๊ฒƒ๋„ ์žฌ๋ฐŒ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ

์‚ฌ์‹ค ๋‘ ๋ฒˆ์งธ ์ฑŒ๋ฆฐ์ง€๊นŒ์ง€๊ฐ€ ๋งˆ์ง€๋ง‰์ด๋ผ๊ณ  ๋ชจ๋‘๊ฐ€ ์˜ˆ์ƒํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๊ธฐ๊ฐ„์ด ์žˆ๋Š” ์ผํšŒ์„ฑ ํ”„๋กœ์ ํŠธ์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์— ๋Œ€ํ•œ ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ๋ฅผ ํฌ๊ฒŒ ๊ณ ๋ คํ•˜์ง„ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์ฑŒ๋ฆฐ์ง€๋งˆ๋‹ค ์Šคํƒฌํ”„ ์ด๊ฐœ์ˆ˜๋‚˜ ์Šคํƒ€์ผ์ด ๋‹ฌ๋ž๊ณ , ์ด๋ฅผ ๊ณตํ†ตํ™”์‹œํ‚ค๊ธฐ์—” ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„์ด ๋„ˆ๋ฌด ์งง์•˜์—ˆ๊ฑฐ๋“ ์š”.

https://level.goorm.io/l/challenge/algorithm-monday-highscool-1

์‹ค์ œ๋กœ ํ•˜์ด์Šค์ฟจ ์ฑŒ๋ฆฐ์ง€๋Š” ๊ฑฐ์˜ 7์ผ ๋งŒ์— ๋งŒ๋“ค์–ด์ง„ ์ฑŒ๋ฆฐ์ง€์ž…๋‹ˆ๋‹ค.๐Ÿ˜‡

 

์ด๋ฒˆ์—” 3๋ฒˆ์งธ ๊ฐœ์ต€๊ณ , ์ดํ›„์—๋„ ๊ณ„์† ์ฑŒ๋ฆฐ์ง€๋ฅผ ์ง„ํ–‰ํ•  ๊ฒƒ ๊ฐ™์•„ ๊ณตํ†ต๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์€ ๋ชจ๋‘ ๊ณตํ†ตํ™”๋ฅผ ๋ชฉํ‘œ๋กœ ์ž‘์—…ํ–ˆ์Šต๋‹ˆ๋‹ค.

์œ„ ์Šคํƒฌํ”„ ๊ด€๋ จ ์บ๋Ÿฌ์…€์€ ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜•์ผ ๋• ์บ๋Ÿฌ์…€, PC ๋ฐ˜์‘ํ˜•์ผ ๋• ์ผ๋ฐ˜ ๋ทฐ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

PC ๋ทฐ => ์Šคํฌ๋กค => ์บ๋Ÿฌ์…€ ํ˜•์‹์œผ๋กœ ๊ตฌํ˜„๋˜์–ด ์žˆ์–ด์š”.

 

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

 

์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์—์„œ๋Š” ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ ์šฐ๋ฆฌ๊ฐ€ ์ •ํ•ด๋†“์€ ์Šคํƒฌํ”„ ์ปจ๋ฒค์…˜์„ ์Šคํƒฌํ”„๋งŒ ๋„˜๊ฒจ์ฃผ๋ฉด ์ž๋™์œผ๋กœ ๋˜๊ฒŒ ์‚ฌ์šฉ์„ฑ์„ ํฌ๊ฒŒ ๋Š˜๋ ธ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ฐ˜์‘ํ˜•์— ๋”ฐ๋ผ PC ๋ทฐ => ์Šคํฌ๋กค => ์บ๋Ÿฌ์…€๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.


1. ์Šคํƒฌํ”„(๋ธ”๋ก) ๊ฐœ์ˆ˜๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ๋‹ฌ์„ฑํ•˜๋ฉด ๋ฑƒ์ง€ ๋ทฐ๊ฐ€ ๋ฐ”๋€Œ๋Š” ํ˜•์‹

2. ๊ธฐ๋ณธ์ ์œผ๋กœ ์ฒซ ๋ฒˆ์งธ ์‚ฌ์ง„์ •๋„๋งŒ ์ œ๊ณตํ•  ๊ฑฐ๋ƒ 

 

๋‘ ๊ฐœ๋Š” ๋ญ”๊ฐ€ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ์ธ ๊ฒƒ ๊ฐ™์€๋ฐ, ์œ„ ๋‘ ๊ฐœ์˜ ์—ญํ• ์ด ๋‚˜๋ˆ ์ ธ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„ ๊ณ ๋ฏผ์ด ๋งŽ์•˜๋Š”๋ฐ์š”.

๊ทธ๋ž˜๋„ ๋„ˆ๋ฌด๋‚˜ ๊ฐ™์€ view๊ณ  props๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ธ ๊ฒƒ ๊ฐ™์•„์„œ ๊ณตํ†ตํ™”๋ฅผ ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค.

๋กœ๋”ฉ ์„ค๊ณ„

์Šค์ผˆ๋ ˆํ†ค Ui ์ฒ˜๋ฆฌ์— ๋Œ€ํ•ด์„œ๋„ ํŒ€์›์—๊ฒŒ ๊ณต์œ ๋ฐ›์€ ๋‚ด์šฉ์ด์ง€๋งŒ ์ข‹์€ ๋‚ด์šฉ์ด๋ผ ๊ณต์œ ํ•˜๊ณ  ์‹ถ๋„ค์š”!

์‚ฌ์šฉ๋‹จ์—์„œ Suspense, Loading์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š” ๊ฒŒ ์•„๋‹Œ ์ปดํฌ๋„ŒํŠธ ์ž์ฒด์—์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

- index.tsx
- MissionContainer.tsx
- MissionContainer.scss
- MissionContainer.loading.tsx

MissionContainer.loading.tsx์—๋Š” ๋‹น์—ฐํ•˜๊ฒŒ๋„ ์Šค์ผˆ๋ ˆํ†ค Ui๊ฐ€ ์ •์˜๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
MissionContainer.tsx์—๋Š” ๋ฉ”์ธ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋Šฅ๋“ค์ด ์ •์˜๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

์œ„์™€ ๊ฐ™์ด ์„ค๊ณ„ํ•˜๊ณ  ๋งŒ์•ฝ suspense๊ฐ€ ์•„๋‹Œ react-query๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด

// index.tsx
import React from 'react';

// ์˜ˆ์‹œ useQuery
import { useGetExams } from '@/query-hooks/....';

// components
import MissionContainerComponent from './MissionContainer';
import MissionContainerLoading from './MissionContainer.loading';

const MissionContainer = ({...props}) => {
  cosnt { isLoading } = useGetExams();

  return isLoading ? <MissionContainerLoading /> : <MissionContainerComponent {...props} />
}

์œ„์™€ ๊ฐ™์ด ์ •์˜ํ•ด์„œ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ์š”!

useGetExam์€ useQuery๋ฅผ return ํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

 

์ €ํฌ๋Š” sass๋ฅผ ์‚ฌ์šฉํ•ด์„œ loading์ด๋‚˜ ๊ธฐ๋Šฅ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ฐ™์ด className๋„ ๊ณต์œ ํ•ด
๊ธฐ๋ณธ์ ์ธ ๋ ˆ์ด์•„์›ƒ์„ ๋™์ผ์‹œ ๊ฐ€์ ธ๊ฐ€ ์Šค์ผˆ๋ ˆํ†ค Ui๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š”๋ฐ๋„ ํ›จ์”ฌ ์ˆ˜์›”ํ–ˆ์Šต๋‹ˆ๋‹ค.

suspense๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋„ ์œ„์ฒ˜๋Ÿผ index.tsx๋‚˜
MissionContainer.tsx ๋‚ด๋ถ€์—์„œ export default ๋ถ€๋ถ„์— ์ •์˜ํ•ด๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์š”.

์ •๋ฆฌ

์ฒ˜์Œ์ด์ž ๋งˆ์ง€๋ง‰์œผ๋กœ ํšŒ์‚ฌ์—์„œ ํ˜ผ์ž ๊ฐœ๋ฐœํ•˜๋Š” tf ์ผ ๊ฒƒ ๊ฐ™์•„์„œ ํšŒ๊ณ ํ•ฉ๋‹ˆ๋‹ค.
์ดํ›„ ํ”„๋ก ํŠธ์—”๋“œ๋กœ ์ปค๋ฆฌ์–ด๋ฅผ ์Œ“์•„๊ฐˆ ๊ฑฐ์ง€๋งŒ ํ˜ผ์ž ๋ฐฑ์—”๋“œ๊นŒ์ง€ ์ „๋ถ€ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๊ฒฝํ—˜์ด๋ผ ์ƒ๊ฐํ•ด ์žฌ๋ฐŒ๊ฒŒ ๊ฐœ๋ฐœํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ฐฉ๋Œ€ํ•œ ๊ฐœ๋ฐœ์„ ๋น ๋ฅด๊ฒŒ ์ณ๋‚ด์•ผ ๋˜๋Š” ์••๋ฐ•๊ฐ์ด ์žˆ์—ˆ์ง€๋งŒ ๊ฑฐ์˜ ๋‹ค ๋๋‚˜๊ณ  ๋ณด๋‹ˆ๊นŒ ์žฌ๋ฐŒ๊ฒŒ ๊ฐœ๋ฐœํ•œ ๊ฒƒ ๊ฐ™์•„์š”.

๊ฐœ๋ฐœํ•œ ๊ธฐ๋Šฅ๋“ค์ด ๋ชจ๋‘ ์ •์ƒ ๋™์ž‘ํ•˜๊ธธ ๋ฐ”๋ผ๋ฉฐ 14์ผ๊นŒ์ง€ QA๋ฅผ ๊ณ„์† ์ง„ํ–‰ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค๐Ÿ˜‡

์•„๋งˆ ์ฐธ์—ฌํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ์ฝ์„ ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™์€๋ฐ, ๊ธด ๊ธ€ ์ฝ์–ด์ฃผ์…”์…” ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•