๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Frontend Dev/๐Ÿฅ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE ๋ถ€ํŠธ์บ ํ”„

Section3 ํšŒ๊ณ , ์ผ์ฃผ์ผ ๊ฐ™์•˜๋˜ ํ•œ ๋‹ฌ

๋ฐ˜์‘ํ˜•


Section3 ํšŒ๊ณ , ์ผ์ฃผ์ผ ๊ฐ™์•˜๋˜ ํ•œ ๋‹ฌ

 

 ์ •๋ง ์ผ์ฃผ์ผ ๊ฐ™์•˜๋‹ค. ๊ทธ ๊ธด ํ•œ ๋‹ฌ ๋™์•ˆ ๋‚œ ๋ฌด์—‡์„ ํ–ˆ๋Š”๊ฐ€.

 ์•ž์œผ๋กœ๋„ ํ•  ๊ฒƒ์ด ๋„ˆ๋ฌด ๋งŽ๋‹ค๋Š” ๊ฒƒ์— ๊ฑฑ์ •๊ณผ ํ•œ์ˆจ๊ณผ ํ”ผ๋กœ๊ฐ€ ๋ชฐ๋ ค์˜ค์ง€๋งŒ ํ•œํŽธ์œผ๋กœ๋Š” ์•ˆ๋„๊ฐ์ด ๋“ ๋‹ค. ์—ฌ์ „ํžˆ ๋‹ฌ๋ฆฌ๊ณ  ์‹ถ์Œ์—, ์•„์ง ์ง€์น˜์ง€ ์•Š์•˜์Œ์—, ๊ทธ๋ž˜๋„ ์žฌ๋ฏธ๊ฐ€ ์žˆ๊ณ , ์„ฑ์ทจ๊ฐ์„ ๋Š๋‚€๋‹ค๋Š” ๊ฒƒ์— ๊ฐ์‚ฌํ•œ๋‹ค.

 

๐Ÿ“Œ ๋ชฉํ‘œ: ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป 2023๋…„ ์•ˆ์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ปค๋ฆฌ์–ด ์‹œ์ž‘ํ•˜๊ธฐ 

 

โœจ Keep

_๋งŒ์กฑ์Šค๋Ÿฌ์šด ๋ถ€๋ถ„, ๊ณ„์† ์ด์–ด๊ฐ€๋ฉด ์ข‹์„ ๋ถ€๋ถ„

• ๋งค์ผ ๊พธ์ค€ํžˆ ํ•™์Šตํ•˜๊ณ , ๊ณต๋ถ€ํ–ˆ๋˜ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๊ณ  ๊ธฐ๋กํ•˜๋Š” ์Šต๊ด€

  → ์–ธ์ œ๋“  ํ‚ค์›Œ๋“œ๋กœ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์šฉํ•จ๊ณผ ํŽธ๋ฆฌํ•จ!

  → ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ๋ถ€๋ถ„๋„ ์ผ๋‹จ ๋ณต๋ถ™ ํ•˜๋ฉด ๋‚˜์ค‘์—๋ผ๋„ ๋‹ค์‹œ ๋ณด๊ฒŒ ๋จ ๐Ÿ˜‚

• ํ•˜๋ฃจ๋ฅผ ๋Œ์•„๋ณด๋Š” ์•„์ฃผ ๊ฐ„๋žตํ•œ ํšŒ๊ณ  ์ž‘์„ฑ

• ์ œ์‹œ๊ฐ„์— ์ถœ์„

• ๋งค์ผ ์ŠคํŠธ๋ ˆ์นญ์œผ๋กœ ๋ชธ ํ’€์–ด์ฃผ๊ธฐ

 

โœจ Problem

_๋ชฉํ‘œ๋ฅผ ์ด๋ฃจ๋Š”๋ฐ ์žฅ์• ๋ฌผ์ด ๋˜์—ˆ๊ฑฐ๋‚˜, ๊ฐœ์„ ์ด ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋Š” ๋ถ€๋ถ„

• ํ”ผ๋กœ๊ฐ€ ์Œ“์ด๋Š” ์ค‘… ๐Ÿซ 

• ๐ŸŒž ๋”์›Œ์ง€๋Š” ๋‚ ์”จ.. ์ง‘๋„ ๋ฐ–๋„ ๋„ˆ๋ฌด ๋”์šด๋ฐ, ์—์–ด์ปจ ๋ฐ”๋žŒ์€ ๋„ˆ๋ฌด ์‹ซ๋‹ค…

• ๊ณต๋ถ€ํ•  ๋‚ด์šฉ์ด ๋„ˆ~~~๋ฌด ๋งŽ๋‹ค. ํ•ด์•ผ ํ•  ๋‚ด์šฉ์„ ์ ์–ด๋†“์œผ๋ฉด ๊ณ„์† ๋‹ค์Œ์ฃผ, ๊ทธ ๋‹ค์Œ์ฃผ๋กœ ๋ฏธ๋ค„์ง ๐Ÿฅฒ

• ๊ณต๋ถ€ํ•  ๊ฒƒ๋„ ๋งŽ์€๋ฐ ์‹ฌ์ง€์–ด ์–ด๋ ค์›Œ…….

 

โœจ Try

_์ฆ‰์‹œ ์‹ค์ฒœํ•  Action Item

• ์ปจ๋””์…˜ ๊ด€๋ฆฌ: ํœด์‹์ด ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋“ค ์ •๋„๋ฉด ๊ทธ๋ƒฅ ์‰ฌ์–ด์•ผ๊ฒ ๋‹ค.

• ๋‹ค๋ฅธ ์‚ฌ๋žŒ๊ณผ ๋น„๊ตํ•˜์ง€ ์•Š๊ณ , ๐Ÿ”ฅ ๋‚˜์˜ ๋ชฉํ‘œ์— ๋งž๊ฒŒ ๋…ธ๋ ฅํ•˜์ž

• ์ƒ๊ฐ์€ ์ตœ๋Œ€ํ•œ ๊ฐ„๋‹จํ•˜๊ฒŒ, ๊ฒฐ์ •์€ ๋น ๋ฅด๊ฒŒ. ์ƒ๊ฐํ–ˆ๋‹ค๋ฉด ์ผ๋‹จ ์‹ค์ฒœํ•˜์ž.

 


๐ŸŒ™  ์˜ค๋Š˜์˜ ํšŒ๊ณ 

 ๋ฒŒ์จ ํ•œ ๋‹ฌ์ด ํ˜๋ €๋‹ค. Section1, 2์— ๋น„ํ•ด ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๋นจ๋ฆฌ๊ฐ€๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ์ •๋ง ๊นœ์ง ๋†€๋ž„ ์ •๋„์˜€๋‹ค. 6์›” ์ดˆ์— ์‹œ์ž‘ํ–ˆ๋˜ ์„ธ๋ฒˆ์งธ ์„น์…˜์„ ๋ฒŒ์จ ๋งˆ๋ฌด๋ฆฌํ•  ์‹œ๊ฐ„์ด๋ผ๋‹ˆ. ์ž ๊น ๋ญ ์กฐ๊ธˆ ๋„์ ๊ฑฐ๋ฆฐ๊ฒŒ ๋‹ค์ธ๊ฒƒ ๊ฐ™์€๋ฐ, 7๊ฐœ์˜ Unit์„ ํ•™์Šตํ–ˆ๊ณ , ๋˜ ์ •๋ง ๋ฐฉ๋Œ€ํ•œ ์–‘์˜ ์ง€์‹์„ ์Šต๋“ํ–ˆ๋‹ค. ์Šต๋“์ธ์ง€, ๊ตฌ๊ฒจ ๋„ฃ์€๊ฑด์ง€, ์–ด์ฉŒ๋ฉด ๋จธ๋ฆฟ์†์— ๋“ค์–ด๊ฐ€์ง€๋„ ์•Š์€ ๊ฒƒ ๊ฐ™์ง€๋งŒ ์—ฌํŠผ ๋ญ”๊ฐ€๋ฅผ ๋ฐฐ์šด๊ฒƒ ํ™•์‹คํ•˜๋‹ค. ์•„๋‹ˆ, ๋ญ”๊ฐ€๋ฅผ ๋ฐฐ์šด๊ฒŒ ํ™•์‹คํ•ด์•ผ๋งŒ ํ•˜๋‹ค. ๋ฒŒ์จ ๋ถ€ํŠธ์บ ํ”„๋ฅผ ์‹œ์ž‘ํ•˜๊ณ , 3๊ฐœ์›”์ด ์ง€๋‚ฌ์œผ๋‹ˆ๊นŒ.

 

 ์ด๋ฒˆ ์„น์…˜์—์„œ๋Š” ์žฌ๊ท€ํ•จ์ˆ˜๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด UI/UX, CDD๋ฅผ ์œ„ํ•œ ์Šคํ† ๋ฆฌ๋ถ๊ณผ styled-components, ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ Redux๋ฅผ ํ•™์Šตํ•˜๊ณ , ์›นํ‘œ์ค€๊ณผ ์ ‘๊ทผ์„ฑ, ๋„คํŠธ์›Œํฌ ์‹ฌํ™”, ์ธ์ฆ/๋ณด์•ˆ์— ๋Œ€ํ•œ ํ•™์Šต์„ ํ–ˆ๋‹ค. ์–ด๋ ค์› ๋˜ ์ฑ•ํ„ฐ์™€ ๋น„๊ต์  ๊ฐ„๋‹จํ–ˆ๋˜ ์ฑ•ํ„ฐ๊ฐ€ ๋ฐ˜๋ณต๋˜์—ˆ์ง€๋งŒ ์ „์ฒด์ ์œผ๋กœ ๋‚œ์ด๋„๊ฐ€ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™๊ณ , ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ์ง์ ‘์ ์œผ๋กœ ์—ฐ๊ด€๋œ ๊ณผ์ • ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ „๋ฐ˜์ ์ธ ๋ถ€๋ถ„์„ ํ•™์Šตํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

์ฒซ ๋ฌธ์„ ์—ฐ ์žฌ๊ท€ํ•จ์ˆ˜๋ถ€ํ„ฐ ์‰ฝ์ง€ ์•Š์•˜๊ณ , ์Šคํ† ๋ฆฌ๋ถ์€ ์ง€๊ธˆ๋„ ์—ฌ์ „ํžˆ ์‚ฌ์šฉ๋ฒ•์„ ๋ชจ๋ฅด๊ฒ ๊ณ , styled-components๋Š” ๊ณ„์†ํ•ด์„œ ์‚ฌ์šฉํ•ด๋ณด๋ ค ๋…ธ๋ ฅ์ค‘์ด์ง€๋งŒ ๊ทธ ์ด์ ์„ ํŒŒ์•…ํ•˜๊ณ  ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ ๊นŒ์ง€๋Š” ์•„์ง ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด ๊ฒƒ ๊ฐ™๋‹ค. Redux ๋˜ํ•œ ๋” ๊ณต๋ถ€ํ•ด์•ผ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๊ณ , ๋ง๋ถ™์—ฌ toolkit๊นŒ์ง€ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์€๋ฐ ๋‹ค์Œ ์„น์…˜์œผ๋กœ ๋„˜์–ด๊ฐ€๋ฉด ๊ทธ๋Ÿด ์‹œ๊ฐ„์ด ๋ ๊นŒ? ์ด๋ฒˆ ์œ ๋‹›์—์„œ ๋ฐฐ์› ๋˜ ๋‚ด์šฉ์„ ํ† ๋Œ€๋กœ Todo app์„ ๊ธฐํšํ•˜๋Š” ๋งˆ์ง€๋ง‰ ํ•ด์ปคํ†ค ์‹œ๊ฐ„๋„ ์žˆ์—ˆ๋Š”๋ฐ, ๊ธฐํšํ•œ Todo app์„ ๋ฐ”ํƒ•์œผ๋กœ React ํ”„๋กœ์ ํŠธ๋ฅผ CRUD๊นŒ์ง€๋งŒ์ด๋ผ๋„ ๋งŒ๋“ค์–ด๋ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

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

 

 ์‹œ๊ฐ„์ด ์™œ ์ด๋ ‡๊ฒŒ ๋น ๋ฅด๊ฒŒ ์ง€๋‚˜๊ฐ”์„๊นŒ, ์ƒ๊ฐํ•ด๋ณด๋‹ˆ ์ •๋ง ๋งŽ์€ ๋‚ด์šฉ์„ ํ•™์Šตํ•˜๋‹ค๋ณด๋‹ˆ ๋งค์ผ์ด ๋˜‘๊ฐ™์€ ํ•˜๋ฃจ์˜ ๋ฐ˜๋ณต์ด์–ด์„œ ๊ทธ๋ ‡๊ฒŒ ๋Š๊ผˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ๋‚ ์ข‹์€ ๋ด„์— ์‹œ์ž‘ํ•ด์„œ ์–ด๋Š๋ง ๋ฌด๋”์šด ์—ฌ๋ฆ„์ด ๋˜์–ด์žˆ์—ˆ๊ณ , ์ˆ˜๋ฃŒํ•  ๋•Œ ์ฆˆ์Œ์—” ๊ฐ€์„์„ ๋งž์ดํ•˜๊ฒ ์ง€?

 ํ•จ๊ป˜ ๊ณต๋ถ€ํ•˜๋Š” ๋‹ค๋ฅธ ์ˆ˜๊ฐ•์ƒ๋“ค๋„ ์ •๋ง ์—ด์‹ฌํžˆ ๋ณธ์ธ์˜ ๊ธธ์„ ๊ฐ€๊ณ  ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๋ณด์ด๋Š” ๊ฒƒ๋„ ๊ทธ๋ ‡๊ณ , ๋ณด์ด์ง€ ์•Š๋Š” ๋ถ€๋ถ„์—์„œ๋„ ์•„๋งˆ ๊ทธ๋Ÿฌ์ง€ ์•Š์„๊นŒ. ํ‘œํ˜„ํ•˜์ง€๋Š” ์•Š์•˜์ง€๋งŒ ๋‹ค๋“ค ๋„ˆ๋ฌด ๋Œ€๋‹จํ•˜๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๋‚˜๋„ ๋” ๋ถ„๋ฐœํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

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

๋ฐ˜์‘ํ˜•