[TIL] Day38 #React-CRUD-client

Beanxxยท2022๋…„ 6์›” 20์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
38/120
post-thumbnail

2022.06.19(Sun)

[TIL] Day38

โœ… ์ด๋ฒˆ ์ฃผ๋ง์—๋Š” React๋กœ CRUD(create, read, update, delete) ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•ด์„œ ๊ฐ„๋‹จํ•œ ์ผ๊ธฐ์žฅ ํ˜•ํƒœ์˜ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ–ˆ๋‹ค.

ํ•˜ํ•„ ์ด์‚ฟ๋‚ ์—, ์•Œ๋ฐ”์— ์ •์‹ ์—†๋Š” ์ด๋ฒˆ ์ฃผ๋ง์ด์—ˆ์ง€๋งŒ ํ‹ˆํ‹ˆ์ด ๊ตฌํ˜„ํ•ด์„œ ์–ด์ฐŒ์–ด์ฐŒ update ๊ธฐ๋Šฅ์„ ์ œ์™ธํ•œ create, read, delete ๊ธฐ๋Šฅ๊นŒ์ง€๋Š” ๊ตฌํ˜„ํ–ˆ๋‹ค.
๊ตฌ์น˜๋งŒ,, ๋๋๋‚ด update ๊ธฐ๋Šฅ์€ ๊ตฌํ˜„์ด ์•ˆ ๋๋‹ค,,
1๏ธโƒฃ 1์ฐจ ๊ณ ๋น„๋Š” ๋ชฉ๋ก์— ์žˆ๋Š” ์ œ๋ชฉ ํด๋ฆญ์‹œ ์˜† editor์— ๋‚ด์šฉ์„ ๋„์›Œ์•ผ ํ•˜๋Š”๋ฐ filter๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐ™์€ id ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋ ค๋Š”๋ฐ ๊ณ„์† undefined๊ฐ€ ์ฐํ˜”๋‹ค..๐Ÿฅฒ
2๏ธโƒฃ 2์ฐจ ๊ณ ๋น„๋Š” ํ”„๋กœ์ ํŠธ ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ๋ฅผ ์ด์ƒํ•˜๊ฒŒ ํ•ด์„œ App.js์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋“ค์—๊ฒŒ props๋กœ ๊ฐ’์„ ๋„˜๊ฒจ์ฃผ๋Š” ๋ถ€๋ถ„์—์„œ ๋„ˆ๋ฌด ๋งŽ์€ ๊ฒƒ๋“ค์„ ๋„˜๊ฒจ์ค˜์•ผ ํ•ด์„œ ์ฝ”๋“œ๊ฐ€ ์ ์  ๊ผฌ์—ฌ๊ฐ€๋Š” ๋Š๋‚Œ์„ ๋ฐ›์•˜๋‹ค ๐Ÿซ 
3๏ธโƒฃ 3์ฐจ ๊ณ ๋น„๋Š” ์ˆ˜์ • ๋ฒ„ํŠผ์ด ์žˆ๋Š” editor.js์™€ ์ˆ˜์ •ํ•ด์•ผ ํ•˜๋Š” ๊ฐ’๋“ค์€ ๋‹ค๋ฅธ ํ˜•์ œ ์ปดํฌ๋„ŒํŠธ์˜ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ๋‘์–ด์„œ ๊ฐ’๋“ค์„ ์ฃผ๊ณ  ๋ฐ›๋Š”๋ฐ์—์„œ ๋‹จ๋‹จํžˆ ๊ผฌ์—ฌ๋ฒ„๋ ธ๋‹ค๋Š” ์ .. ๊ทธ๋ž˜์„œ update ๊ธฐ๋Šฅ์ด ์ œ๋Œ€๋กœ ์ž‘๋™์ด ์•ˆ ๋๋‹ค ๐Ÿ˜ฑ
4๏ธโƒฃ ๋งˆ์ง€๋ง‰์œผ๋กœ ์ด์‚ฌํ•˜๋Š” ์ง‘์— ๊ณต์œ ๊ธฐ๋งŒ ์ƒˆ๋กœ ์„ค์น˜ํ•˜๋ฉด ์™€์ดํŒŒ์ด๋œ๋‹ค๊ณ  ํ–ˆ๋‹ค๋Š”๋ฐ ์›๋ž˜ ์“ฐ๋˜ ๊ณต์œ ๊ธฐ๋Š” sk์ด๊ณ , ์ง€๊ธˆ ์ง‘์€ hello TV ๊บผ๋ผ ํ˜ธํ™˜์ด ์•ˆ๋œ๋‹ค๊ณ  ํ–ˆ๋Œ€์„œ ์ง‘์— ์žˆ๋Š” ๋™์•ˆ ์ผ๋‹จ ํ•ซ์ŠคํŒŸ ๋ฐ์ดํ„ฐ๋กœ ๊ธฐ๋Šฅ ๊ตฌํ˜„,,
์ผ์šœ๋‚  iptime ๊ณต์œ ๊ธฐ ์ƒˆ๋กœ ์‚ฌ์„œ ์—ฐ๊ฒฐํ–ˆ๋Š”๋ฐ๋„ ๊ณ„์† '์ธํ„ฐ๋„ท ์—ฐ๊ฒฐ ์—†์Œ'์ด ๋– ๊ฐ€์ง€๊ณ , ๋ฆฌํ•„ํ•œ ๋ฐ์ดํ„ฐ๊นŒ์ง€ ๋‹ค ์“ฐ๊ณ , ์•„๋น ๊ฐ€ ์„ ๋ฌผํ•œ ๋ฐ์ดํ„ฐ๋กœ ๋‹ค์‹œ ๋ฆฌํ•„ํ–ˆ๋‹ค.๐Ÿฅฒ
์›”์šœ ์•„์นจ์—๋Š” ์‹ฌ์ง€์–ด ํ•ซ์ŠคํŒŸ ์—ฐ๊ฒฐ๋„ ์•ˆ๋˜๊ฐ€์ง€๊ตฌ ์˜ค์ „์— hello TV ์ „ํ™”ํ•ด์„œ ๊ฒฐ๊ตญ ํ•ด๊ฒฐ์“ฐ.. ๋‹ค์‚ฌ๋‹ค๋‚œํ–ˆ๋˜ ์ฃผ๋ง์“ฐ๐Ÿ˜ญ

๊ฐ„๋žตํ•œ ํด๋” ๊ตฌ์กฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • App.js
    • ContentList.js
      • ContentItem.js
    • Editor.js

โžฐ ContentList ์ปดํฌ๋„ŒํŠธ๋Š” ์™ผ์ชฝ์— ๋ณด์ด๋Š” ๊ธ€ ๋ชฉ๋ก ํ™”๋ฉด
โžฐ Editor ์ปดํฌ๋„ŒํŠธ๋Š” ์˜ค๋ฅธ์ชฝ์— ๋ณด์ด๋Š” ์ƒ์„ธ ๊ธ€ ๋‚ด์šฉ ๋ฐ ๊ธ€์“ฐ๊ธฐ/์ˆ˜์ •/์‚ญ์ œ ํ™”๋ฉด
โžฐ ContentItem ์ปดํฌ๋„ŒํŠธ๋Š” ๊ธ€ ๋ชฉ๋ก์— ๋ณด์ด๋Š” ๊ฐ๊ฐ์˜ ๊ธ€ ์•„์ดํ…œ

๐Ÿ“Ž ์•”ํŠผ ์ฃผ๋ง๋™์•ˆ ๊ตฌํ˜„ํ•œ ํ™”๋ฉด&๊ธฐ๋Šฅ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  1. ์ œ์ผ ์ฒ˜์Œ์— ๋‚˜ํƒ€๋‚˜๋Š” ํ™”๋ฉด์œผ๋กœ, ์ œ์ผ ์ตœ์‹  ๊ธ€ ๋‚ด์šฉ์ด ์˜ค๋ฅธ์ชฝ์— ๋ณด์ž„
แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-20 แ„‹แ…ฉแ„’แ…ฎ 11 17 05
  1. [CREATE] ์™ผ์ชฝ ๊ธ€์“ฐ๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์˜ค๋ฅธ์ชฝ Editor ์ปดํฌ๋„ŒํŠธ์—์„œ ๊ธ€ ์ œ๋ชฉ, ๋‚ด์šฉ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
    แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-20 แ„‹แ…ฉแ„’แ…ฎ 11 17 36

  2. [READ] ๋‚ด์šฉ์„ ์ž‘์„ฑํ•˜๊ณ , ์ €์žฅ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์™ผ์ชฝ ๊ธ€ ๋ชฉ๋ก์— ์ƒˆ๋กœ ์ž‘์„ฑํ•œ ๊ธ€์ด ์ถ”๊ฐ€๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. + ๋ชฉ๋ก์— ์žˆ๋Š” ์ œ๋ชฉ์„ ๋ˆ„๋ฅด๋ฉด ์˜ค๋ฅธ์ชฝ์— ํ•ด๋‹นํ•˜๋Š” ๊ธ€ ์ƒ์„ธ ๋‚ด์šฉ์ด ๋‚˜์˜จ๋‹ค.
    แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-20 แ„‹แ…ฉแ„’แ…ฎ 11 17 43

  3. [DELETE] ๋ฒˆํ˜ธ 2์ธ ๊ธ€ ์ œ๋ชฉ์„ ๋ˆŒ๋Ÿฌ์„œ ์˜ค๋ฅธ์ชฝ ํ™”๋ฉด ํ•˜๋‹จ์— ๋‚˜ํƒ€๋‚˜๋Š” ์‚ญ์ œ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋ฒˆํ˜ธ 2์ธ ๊ธ€์ด ๋ชฉ๋ก์—์„œ ์‚ญ์ œ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
    แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-20 แ„‹แ…ฉแ„’แ…ฎ 11 17 56

โž• [UPDATE] ์ˆ˜์ • ๊ธฐ๋Šฅ์€ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋‹ค์‹œ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์ฝ”๋“œ ๊ณผ์ • ๋ธ”๋กœ๊น… ๋‹ค์‹œ ํ•˜๊ธฐ!

CRUD๊ฐ€ ์ œ์ผ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ ๊ตฌํ˜„์ผํ…๋ฐ ์ด๊ฒƒ ๋งˆ์ €๋„ ๋ชปํ•˜๋Š” ๋‚˜์˜ ์‹ค๋ ฅ์— ๋‹ค๋ฅธ ์˜๋ฏธ๋กœ ๋†€๋ž๋‹ค ์ •๋ง ๐Ÿฅฒ ๊ทธ๋ž˜๋„ ์ด๋ฒˆ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๊ฐ’ ์ฃผ๊ณ  ๋ฐ›๋Š” ๋ถ€๋ถ„์„ ์กฐ๊ธˆ์ด๋‚˜๋งˆ ๊ฐ ์žก์„ ์ˆ˜ ์žˆ์—ˆ๋˜ TIME.

profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€