[TIL] d+24

riverยท2022๋…„ 3์›” 30์ผ
0

Redux + FireStore ๐Ÿ“Œ

์ง€๋‚œ ์‹œ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ

MiddleWare

๋ฏธ๋“ค์›จ์–ด๋Š” ๊ธฐ์กด์˜ ์•ก์…˜ ๋””์ŠคํŒจ์น˜ -> ๋ฆฌ๋“€์„œ์—์„œ ์ฒ˜๋ฆฌ ๊ณผ์ • ์‚ฌ์ด์— ๋ผ์–ด ๋ฏธ๋ฆฌ ์‚ฌ์ „ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ค‘๊ฐ„๋‹ค๋ฆฌ ์—ญํ• ์„ ํ•ด์ค€๋‹ค. (์•ก์…˜ ๋””์ŠคํŒจ์น˜ -> ๋ฏธ๋“ค์›จ์–ด -> ๋ฆฌ๋“€์„œ์—์„œ ์ฒ˜๋ฆฌ

๋ฆฌ๋•์Šค ์ฒญํฌ ์„ค์น˜ yarn add redux-thunk

๊ธฐ์กด์˜ ์•ก์„  ์ƒ์„ฑ ํ•จ์ˆ˜๊ฐ€ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ–ˆ์—ˆ๋‹ค๋ฉด, thunk๋Š” ๊ฐ์ฒด ๋Œ€์‹  ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์•ก์…˜ ์ƒ์„ฑํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค
ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋ฉด ํŠน์ „ ์•ก์…˜์ด ๋ฐœ์ƒํ•˜๊ธฐ ์ „์— ๋˜ ๋‹ค๋ฅธ ํ–‰๋™์„ ์‚ฌ์ „์— ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค!

Store์— ๋ฏธ๋“ค์›จ์–ด ์ ์šฉํ•˜๊ธฐ

๐Ÿ“CRUD

LOAD

Middleware

Reducer

๋ฆฌ๋“€์„œ๊นŒ์ง€ ์ถ”๊ฐ€ํ•˜๊ณ  ๋‚˜๋ฉด ํŽ˜์ด์ง€์— ๋ฐ์ดํ„ฐ๊ฐ€ ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธ ๊ฐ€๋Šฅ! ๊ทธ๋Ÿฌ๋‚˜ ์ˆ˜์ •, ์‚ญ์ œ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฐ์ดํ„ฐ๋ณ„ id๊ฐ€ ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— id๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค.

๋ฐ์ดํ„ฐ์— ID ์ถ”๊ฐ€ํ•˜๊ธฐ


๋ฏธ๋“ค์›จ์–ด์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๊ณผ์ •์— id๋ฅผ ํ•จ๊ป˜ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค!

CREATE


์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ณด๋‚ด์ค€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ทธ๋Œ€๋กœ ๋ฐ›์•„์˜ค๋ฉด ๋œ๋‹ค.


๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฆฌ๋“€์„œ ์ „์— ๋ฏธ๋“ค์›จ์–ด๋ฅผ ๋จผ์ € ๊ฑฐ์น˜๋„๋ก ์ˆ˜์ •ํ•ด์ค€๋‹ค. ๋ฆฌ๋“€์„œ์—์„  ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ firestore์— ์ €์žฅํ•˜๊ธฐ ์œ„ํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ค€๋‹ค(docRef). ๊ทธ๋Ÿฌ๋‚˜ ๋ฐ์ดํ„ฐ์˜ ํ˜•ํƒœ๊ฐ€ ๋งŒ์กฑ์Šค๋Ÿฝ์ง€ ๋ชปํ•˜๋‹ค...๐Ÿ™„

โ“ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ํ˜•ํƒœ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด .data() , .id๋ฅผ ๋ถ™์—ฌ๋„ ์ œ๋Œ€๋กœ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š”๋‹ค. ์ด์œ ๋Š” docRef๊ฐ€ ๋ฐ์ดํ„ฐ๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ. docRef๋Š” ์ฐธ์กฐํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ’์ด๋‹ค!


์š”๋กœ์ผ€ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด ์ž˜ ๋ถˆ๋Ÿฌ์™€์ง„๋‹ค ๐Ÿคญ
์ด์ œ ๋ฆฌ๋•์Šค์— ๋‹ค์‹œ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค!
๋ฆฌ๋•์Šค์— ๋„ฃ๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ฒƒ : id, document์˜ ๋‚ด์šฉ, completed ์†์„ฑ


์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜์˜€์œผ๋‹ˆ ์ด์ œ ์•ก์…˜์„ ์‹คํ–‰์‹œํ‚ค๋ฉด ๋œ๋‹ค.

profile
๊ฐ€๋ณด์ž๊ณ 

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

comment-user-thumbnail
2022๋…„ 3์›” 31์ผ

๐Ÿ”ฅ

1๊ฐœ์˜ ๋‹ต๊ธ€