Projects

๊ฐœ์ธํ”„๋กœ์ ํŠธ [๋จผ์ž‘๊ท€ ํŽธ์ง€ํ•จ] ํšŒ๊ณ 

Seo Ji Won 2024. 2. 6. 20:26

 

๐Ÿ”ฝGithub

 

GitHub - seopport/TinyCuteLetterbox: React๋ฅผ ์ด์šฉํ•œ ํŒฌ๋ ˆํ„ฐ ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ

React๋ฅผ ์ด์šฉํ•œ ํŒฌ๋ ˆํ„ฐ ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ. Contribute to seopport/TinyCuteLetterbox development by creating an account on GitHub.

github.com

 

์˜ค๋Š˜๋กœ ํŒฌ๋ ˆํ„ฐ ์‚ฌ์ดํŠธ ๊ณผ์ œ๋ฅผ ๋งˆ๋ฌด๋ฆฌํ–ˆ๋‹ค.

์ด๋ฒˆ ๊ณผ์ œ๋Š” ๊ธฐ๊ฐ„๋„ ๊ธธ์—ˆ์ง€๋งŒ ๊ทธ๋งŒํผ ์–ด๋ ค์› ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ใ… ใ… 

์ˆ˜์ •์ด ์ œ์ผ ์–ด๋ ค์› ๋˜ ๊ฒƒ ๊ฐ™๊ณ , ์Šคํƒ€์ผ๊ณผ ์ปดํฌ๋„ŒํŠธ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง๋„ ์–ด๋ ค์› ์ง€๋งŒ ์–ด๋Š์ •๋„ ๊ฐ์€ ์žก์€ ๊ฒƒ ๊ฐ™๋‹ค.

context๋ž‘ redux ๋ฆฌํŒฉํ† ๋ง ํ•  ๋•Œ๋Š” ์˜ค๋ฅ˜ ์žก๋Š๋ผ ๋จธ๋ฆฌ ๋งŽ์ด ๋น ์ง„ ๊ฒƒ ๊ฐ™๋‹ค.

์ €๋ฒˆ์—๋Š” ์ผ๋‹จ ๋งŒ๋“ค๊ณ  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์€๋ฐ,

์ด๋ฒˆ์—๋Š” ์™€์ด์–ดํ”„๋ ˆ์ž„์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฏธ๋ฆฌ ๊ตฌ์ƒํ•ด๋†“๊ณ  ์ฝ”๋“œ๋ฅผ ์งœ๋‹ˆ๊นŒ ๊ดœ์ฐฎ์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

๋””์ž์ธ๋„ ๋ง˜์— ๋“ค๊ฒŒ ๋ฝ‘ํ˜€์„œ ๋„ˆ๋ฌด ๊ท€์—ฝ๋‹ค. ์ด๋ฒˆ์—๋Š” ๋””์ž์ธ ํฌ๊ฒŒ ์‹ ๊ฒฝ์•ˆ์“ฐ๊ณ  ๊ธฐ๋Šฅ์— ์ง‘์ค‘ํ•˜๋ คํ–ˆ๋Š”๋ฐ ํ•œ๋ฒˆ ๊ฑด๋“œ๋ฆฌ๋‹ˆ๊นŒ ์š•์‹ฌ์ด ๋‚˜์„œ ์ด๋ ‡๊ฒŒ ๋๋‹ค.

JSX์—์„œ JavaScript ์˜์—ญ๊ณผ return ๊ตฌ๋ฌธ ๋ฌธ๋ฒ•๋„ ์ฒ˜์Œ์—๋Š” ํ—ท๊ฐˆ๋ ธ์ง€๋งŒ, ๊ณ„์† ์‚ฌ์šฉํ•˜๊ณ  ์—ฐ์Šตํ•˜๋‹ˆ๊นŒ ์ข€ ์•Œ ๊ฒƒ ๊ฐ™๋‹ค.

CRUD๋„ ์ฒ˜์Œ์œผ๋กœ ํ˜ผ์ž์„œ ๋‹ค ๊ตฌํ˜„ํ•ด๋ณธ ํ”„๋กœ์ ํŠธ๋ผ ๋ฟŒ๋“ฏํ•˜๋‹ค.

์˜ˆ์ƒ๋Œ€๋กœ ์ˆ˜์ •์ด ์ œ์ผ ์–ด๋ ค์› ๊ณ  ๋‚˜๋จธ์ง€๋Š” ๊ทธ๋ž˜๋„ ํ•ด๋ดค๋˜ ์ ์ด ์žˆ์–ด์„œ ๊ดœ์ฐฎ์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋กœ ์‹ค๋ ฅ์ด ๋งŽ์ด ๋Š˜์€ ๊ฒƒ ๊ฐ™๋‹ค. ์ด์ œ ์–ด๋””๊ฐ€์„œ react ์•„๋ƒ๊ณ  ํ•˜๋ฉด ๊ทธ๋ ‡๋‹ค๊ณ  ๋Œ€๋‹ตํ•  ์ˆ˜ ์žˆ์„ ์ •๋„.,,?

๊ทธ์น˜๋งŒ ์ด๋ฒˆ๊ณผ์ œ์—์„œ๋„ ์„ ํƒ ๊ตฌํ˜„์‚ฌํ•ญ์€ ๊ฑฐ์˜ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•ด์„œ ์•„์‰ฝ๋‹ค.

๋˜ ํ•˜๋‚˜์˜ ์‚ฐ๋งฅ์ธ ๋ชจ๋‹ฌ์ฐฝ๋„ ์–ธ์  ๊ฐ€๋Š” ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๊ธฐ๋ฅผ..

 


๐Ÿช…KPT ํšŒ๊ณ 

Keep (์œ ์ง€ํ•œ ์ ):

  • ์ปดํฌ๋„ŒํŠธ๋ฅผ ์™€์ด์–ดํ”„๋ ˆ์ž„์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฏธ๋ฆฌ ๊ตฌ์ƒํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ดˆ๊ธฐ ํ”„๋กœ์ ํŠธ ์„ค๊ณ„๊ฐ€ ์ˆ˜์›”ํ–ˆ์Œ.
  • JSX์—์„œ JavaScript ์˜์—ญ๊ณผ return ๊ตฌ๋ฌธ์„ ํ˜ผ์šฉํ•˜๋Š” ๋ถ€๋ถ„์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ๋†’์•„์กŒ๋‹ค.
  • CRUD ๊ธฐ๋Šฅ์„ ํ˜ผ์ž์„œ ๋ชจ๋‘ ๊ตฌํ˜„ํ•ด๋ณด์•˜๋‹ค.

Problem (๋ฌธ์ œ์ ):

  • ์„ ํƒ ๊ตฌํ˜„ ์‚ฌํ•ญ, ๋ชจ๋‹ฌ ์ฐฝ ๊ตฌํ˜„์„ ํ•ด๋ณด์ง€ ๋ชปํ•œ ๊ฒƒ

Try (์‹œ๋„ํ•  ์ ):

  • ๋””์ž์ธ๋ณด๋‹จ ๊ธฐ๋Šฅ ๊ตฌํ˜„์— ์ง‘์ค‘ํ•˜์—ฌ ์„ ํƒ ๊ตฌํ˜„ ์‚ฌํ•ญ ๋„์ „์œผ๋กœ ํ”„๋กœ์ ํŠธ ์™„์„ฑ๋„ ๋†’์ด๊ธฐ
  • ๊ฐ์ฒด ๋ฐฐ์—ด ๋‹ค๋ฃจ๋Š” ๊ฒƒ ์—ฐ์Šตํ•˜๊ธฐ