inflearn logo
๊ฐ•์˜

๊ฐ•์˜

N
์ฑŒ๋ฆฐ์ง€

์ฑŒ๋ฆฐ์ง€

๋ฉ˜ํ† ๋ง

๋ฉ˜ํ† ๋ง

N
ํด๋ฆฝ

ํด๋ฆฝ

๋กœ๋“œ๋งต

๋กœ๋“œ๋งต

์ง€์‹๊ณต์œ 

๋”ฐ๋ผํ•˜๋ฉฐ ๋ฐฐ์šฐ๋Š” ๋…ธ๋“œ, ๋ฆฌ์•กํŠธ ์‹œ๋ฆฌ์ฆˆ - ์‡ผํ•‘๋ชฐ ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ[์ „์ฒด ๋ฆฌ๋‰ด์–ผ]

๐Ÿ˜ onChange์— ์—ฐ๊ฒฐ๋˜๋Š” ํ•จ์ˆ˜ + ๊ทธ์™ธ(2)

471

์žฅ์„ฑํ˜ธ

์ž‘์„ฑํ•œ ์งˆ๋ฌธ์ˆ˜ 2

2

์•ˆ๋…•ํ•˜์„ธ์š”. ๊ฐ•์‚ฌ๋‹˜!

์ˆ˜์—… ๋„ˆ๋ฌด ๋„ˆ๋ฌด ๋„ˆ๋ฌด ๐Ÿ‘  ์ž˜ ๋“ฃ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋™์˜์ƒ ๋ณด๋‹ค๊ฐ€ ๊ถ๊ธˆํ•œ ์  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‚จ๊ฒจ๋ด…๋‹ˆ๋‹ค.

1. onChange์— ์—ฐ๊ฒฐ๋˜๋Š” ํ•จ์ˆ˜

onChange={()=>handleToggle(value._id)} ์ด๋ถ€๋ถ„์—์„œ

onChange={handleToggle(value.id)}๋กœ ๋ฐ”๋กœ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๊ณ  ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ๊ฑฐ์ณ์„œ ํ˜ธ์ถœํ•˜๋‚˜์š”?

2. map ํ•จ์ˆ˜์—์„œ ์†Œ๊ด„ํ˜ธ , ์ค‘๊ด„ํ˜ธ ์‚ฌ์šฉ

list.map((v,i) => (---์ด๋ถ€๋ถ„----) )

์œ„์— ----์ด๋ถ€๋ถ„----์— ๋“ค์–ด๊ฐ€๋Š” ๋ถ€๋ถ„์„ ์†Œ๊ด„ํ˜ธ ๋˜๋Š” ์ค‘๊ด„ํ˜ธ๋กœ๊ฐ์‹ธ์•ผ ๋˜๋Š” ๊ทœ์น™์ด ์žˆ๋‚˜์š”?  

3.  props์™€ state vs ๋ฆฌ๋•์Šค store

๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๋ถ€๋ถ„์—์„œ๋Š” ๋ฆฌ๋•์Šค ์Šคํ† ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๊ณ  ๊ทธ ์ดํ›„ ์ž‘์—…์—์„œ๋Š” props์™€ state๋กœ ์ž‘์—…์„ ํ•˜์‹œ๋Š”๋ฐ,  ๊ฐ ์ €์žฅ๊ธฐ๋Šฅ์„ ์–ด๋–ค ์ƒํ™ฉ์œผ๋กœ  ๊ตฌ๋ณ„ํ•ด์„œ ์ ์šฉํ•ด์•ผ ํ•˜๋‚˜์š”?

๋ฆฌ๋•์Šค ์Šคํ† ์–ด๋กœ ๋‹ค ๊ฐ€๋Šฅํ•œ๋ฐ, ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์„ ๋ณ„ํ•ด์„œ props๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๋Š”๊ฑด์ง€, ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ๋ณ„์ด ์ž˜ ์„œ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๐Ÿฅฒ

onchange mongodb redux ์›น์•ฑ react nodejs

๋‹ต๋ณ€ 2

1

์žฅ์„ฑํ˜ธ

์•ˆ๋…•ํ•˜์„ธ์š”. ๊ฐ•์‚ฌ๋‹˜~

๋‹ต๋ณ€์ฃผ์…”์„œ ๋„ˆ๋ฌด๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

ํ•œ๊ฐ€์ง€ ๋” ๋ถ€ํƒ๋“œ๋ฆฌ๊ณ  ์‹ถ์€๊ฒƒ์ด ์žˆ๋Š”๋ฐ์š”.

์ œ๊ฐ€ ์›น์‚ฌ์ดํŠธ๋ฅผ ์™ธ์ฃผ๋ฅผ ๋ฐ›์•„์„œ ์ง„ํ–‰์„ ํ•ด๋ณด๋ ค๊ณ  ํ•˜๋Š”๋ฐ,

ํ˜น์‹œ ์ „์ฒด ๊ตฌ์กฐ๋‚˜ ๋ฐฉํ–ฅ์— ๋Œ€ํ•ด์„œ ์ปจ์„คํŒ…์„ ํ•ด์ฃผ์‹ค ์ˆ˜์žˆ๋‚˜์š”? 

๋”ฐ๋กœ ์ž๋ฌธ๋ฃŒ๋ฅผ ๋“œ๋ฆฌ๊ณ  ๋ฌธ์˜๋“œ๋ฆฌ๊ณ  ์‹ถ์€๋ฐ์š”.  ๊ฐ€๋Šฅํ•œ์ง€ ๋ฉ”์ผ๋กœ ์—ฐ๋ฝ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. sunghojang.dev@gmail.com  ์œผ๋กœ ์—ฐ๋ฝ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.  

๋งค๋ฒˆ ์ˆ˜์—…์„ ๋“ค์„๋•Œ๋งˆ๋‹ค ํฐ ๊ฐ€๋ฅด์นจ์„ ์–ป๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜€

1

John Ahn

์•ˆ๋…•ํ•˜์„ธ์š” ์žฅ์„ฑํ˜ธ๋‹˜ !!! ๋Šฆ์€ ๋‹ต๋ณ€ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค ใ…  !! 

1๋ฒˆ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š”์š” 

https://stackoverflow.com/questions/62930655/whats-the-difference-between-onclick-function-and-onclick-functi

์—ฌ๊ธฐ์— ๋ณด๋‹ˆ๊น ์ž˜ ์„ค๋ช…๋˜์–ด์žˆ๋„ค์š” !  ํ•ด์„ํ•ด๋ณด๋ฉด 

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

์ฒซ ๋ฒˆ์งธ๋Š” ์ธ์ˆ˜์™€ ํ•จ๊ป˜ submitHandler๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ  ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ onClick์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

๋‘ ๋ฒˆ์งธ๋Š” ์ฆ‰์‹œ (์ฆ‰, ๋ Œ๋”๋ง ๋‹จ๊ณ„ ๋™์•ˆ) ์ธ์ˆ˜์™€ ํ•จ๊ป˜ submitHandler๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋ฐ˜ํ™˜ ๊ฐ’์„ onClick์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

2๋ฒˆ์€  ์†Œ๊ด„ํ˜ธ๋กœ ํ•ด์ฃผ์‹œ๋ฉด ๋ Œ๋”๋งํ•˜๋Š” ๋ถ€๋ถ„๋งŒ์„ ๋„ฃ์–ด์ฃผ์…”์•ผํ•ฉ๋‹ˆ๋‹ค ๊ทธ๋ฆฌ๊ณ  ์ค‘๊ด„ํ˜ธ๋ฅผ ํ•ด์ฃผ์‹œ๋ฉด ๋ Œ๋”๋งํ•˜๋Š” ๋ถ€๋ถ„ ๋ง๊ณ ๋„ ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜๋“ ์ง€ ๋‹ค๋ฅธ ๋ถ€๋ถ„๋„ ๋„ฃ์–ด์ค„์ˆ˜ ์žˆ์ง€๋งŒ ๋ Œ๋”๋งํ•˜๋Š” ๋ถ€๋ถ„์€ return ๊ฐ’์œผ๋กœ ๋„ฃ์–ด์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค ! 

3๋ฒˆ์€ ๊ฐœ์ธ์ ์œผ๋กœ๋Š” ๋ฆฌ๋•์Šค๋ฅผ ์ตœ๋Œ€ํ•œ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค ใ…Žใ…Žใ…Ž  ์•„๋ฌด๋ž˜๋„ ์†๋„์ธก๋ฉด์—์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฒŒ ๋” ๋น ๋ฅด๊ธฐ ๋–„๋ฌธ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ์— ์ฃผ๋กœ ๋ฆฌ๋•์Šค์— ๋„ฃ์–ด๋†“์Šต๋‹ˆ๋‹ค.    ์œ ์ € ์ •๋ณด๊ฐ™์€ ๊ฒฝ์šฐ๋„ ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฆฌ๋•์Šค์— ๋„ฃ์–ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค !!!        ์ œ ๊ฐœ์ธ์ ์œผ๋กœ๋Š” ํ•œ 3๊ฐœ์ด์ƒ์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๋ฆฌ๋•์Šค์— ๋„ฃ์–ด์„œ ์‚ฌ์šฉํ•˜๋ คํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค !!! 
์ˆ˜๊ณ ํ•˜์„ธ์š” ^^ 

๊ฐ•์˜ ๋‚ด์šฉ์€ ํ›Œ๋ฅญํ•˜๋‚˜, ํ™˜๊ฒฝ ์„ค์ • ์˜ค๋ฅ˜ ๋•Œ๋ฌธ์— ์ง„๋„๋ฅผ ๋‚˜๊ฐˆ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. 20๋…„ ๋ฒ„์ „ ๊ฐ•์˜.

0

60

1

๊ฐ•์˜์ž๋ฃŒ๋Š” ์–ด๋””์„œ ๋ณผ ์ˆ˜์žˆ๋‚˜์š”??

0

66

1

์ด ์‡ผํ•‘๋ชฐ ๋งŒ๋“ค๊ธฐ ๊ฐ•์˜๋Š” ๊ด€๋ฆฌ์žํŽ˜์ด์ง€ ๋งŒ๋“œ๋Š”๊ฑด ์—†๋‚˜์š”

0

113

2

์›น์—์„œ ์‹ค์‹œ๊ฐ„ ์ฝ”๋“œ๋ฐ˜์˜์ด ์•ˆ๋ผ์š”

0

120

1

app.use์งˆ๋ฌธ

0

64

1

๊ฐ•์‚ฌ๋‹˜๊ป˜ ์–ด๋–ป๊ฒŒ ์ง์ ‘์งˆ๋ฌธํ• ์ˆ˜์žˆ์–ด์š”??

0

74

1

constํ•จ์ˆ˜๊ฐ™์€๊ฑฐ ๊ธฐ์ดˆ๊ฐ•์˜๋Š” ์–ด๋””์žˆ๋‚˜์š”

0

80

2

๋ฆฌ๋•์Šค ์ฐธ์กฐ์ฑ•ํ„ฐ๊ฐ€ ์–ด๋”จ์–ด์š”? ๋ฏธ๋ฆฌ๋“ฃ๊ณ ์˜ค๋ผ๋Š”๋ฐ์š”

0

81

2

๊ฐ•์˜๊ฐ€์™„์ „ ์˜ค๋ž˜๋˜์„œ ๋‹ค ํ‹€๋ฆฌ๋„ค app.jsx๋„ tailwind css ๋‹คํ‹€๋ฆผ ๋ฌด์ฑ…์ž„ํ•จ

0

68

1

๊ฐœ๋ฐœ์ž๋„๊ตฌ์— redux๋ž€์ด ์—†์–ด์š”

0

87

1

npx tailwindcss init -p ์—์„œ ๊ณ„์† ์—๋Ÿฌ๋‚˜์š”

0

92

1

์‡ผํ•‘๋ชฐ๊ธฐ๋Šฅ์ค‘ ์ฐœํ•˜๊ธฐ ๊ธฐ๋Šฅ์€ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•˜๋‚˜์š”

0

138

2

๊ฐ•์˜ํ•˜๋‹ค ์คŒ์œผ๋กœ ์„ค๋ช…๊ฐ€๋Šฅํ•œ์ง€์ข€ ์ •ํ™•ํžˆ ์•Œ๋ ค์ฃผ์„ธ์š”. ์ด ์„ ์ƒ๋‹˜ ์ •์ฑ…์ด ์–ด๋–ป๊ฒŒ ๋˜๋Š”๋ฐ์š”. ์ง์ ‘ ์—ฐ๋ฝํ•  ๋ฉ”์ผ์ด๋ผ๋„ ์•Œ๋ ค์ฃผ์„ธ์š”

0

42

1

๋„ํ‘œ ๊ฐ•์˜ ์ž๋ฃŒ ์—ด๋žŒ ๋ถˆ๊ฐ€๋Šฅ

0

109

1

tailwindcss๋ฅผ vite์—์„œ ์ด์šฉํ•˜๋Š” ๋ฐฉ์‹์ด ๋ฐ”๋€๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

0

1128

2

eslint ์„ค์ • ํ›„ ์˜ค๋ฅ˜๊ฐ€ ๋‚ฉ๋‹ˆ๋‹ค.

0

220

1

์˜ค๋ฒ„๋กœ๋“œ ์˜ค๋ฅ˜

0

149

1

VSCode์—์„œ save๋ฅผ ํ•  ๋•Œ, landingpage์˜ useEffect๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋ฌธ์ œ์— ๋Œ€ํ•˜์—ฌ

0

169

1

dispatch(logoutUser()) ์‹คํ–‰์‹œ dispatch(authuser())๋„ ํ•จ๊ป˜ ์‹คํ–‰๋˜๋Š” ๋ฌธ์ œ

0

228

2

logoutํ•  ๋•Œ, server๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด์„œ authUser middleware๋ฅผ ํ†ต๊ณผํ•˜๋„๋ก ํ•˜๋Š” ์ด์œ ?

0

195

1

webkit-text-size-adjust ์˜ค๋ฅ˜

0

312

1

does not provide an export named 'userReducer'

0

213

2

๋นŒ๋“œ ๋ฐฐํฌ

0

138

1

์‚ญ์ œ ์˜ˆ์ • ๊ฐ•์˜๋Š” ์–ธ์ œ ์‚ญ์ œ ๋˜๋‚˜์š”? ์ €๊ฒƒ๋•Œ๋ฌธ์— ์ˆ˜๊ฐ•์™„๋ฃŒ๋ฅผ ๋ชปํ•˜๋ฉด ํšŒ์‚ฌ์—์„œ ๋น„์šฉ์„ ์ฒญ๊ตฌํ•œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค~

0

217

2