profile
๐ŸŒฟ ์ฃผ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค! ๋ถ€์กฑํ•˜๊ฑฐ๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ๋‹ค๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”:)
post-thumbnail

[ Habit Treat Project ] React์—์„œ input์— ์ž…๋ ฅ๋œ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

React์—์„œ๋Š” input์— ์ž…๋ ฅ๋œ ๊ฐ’์„ ์–ด๋–ป๊ฒŒํ•˜๋ฉด ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์„๊นŒ? > inputํƒœ๊ทธ์— ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด state์— ์ƒˆ๋กœ์šด ๊ฐ์ฒด๊ฐ’์„ ํ•˜๋‚˜ ์ถ”๊ฐ€ํ•˜๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ inputํƒœ๊ทธ์˜ ๊ฐ’์„ ์–ป์–ด์™€์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ณ ๋ฏผ ์ค‘์ด์—ˆ๋‹ค. > > DOM์—์„œ๋Š” input์—

2021๋…„ 6์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[ Habit Treat Project ] Component error / key

state์— ๋ฐฐ์—ด์•ˆ์— ๊ฐ์ฒด๋“ค์„ ๋‹ด๊ณ  ์žˆ๋Š” ๊ฐ’์„ map์„ ์ด์šฉํ•ด์„œ ๊ฐ๊ฐ์˜ liํƒœ๊ทธ๋“ค๋กœ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์—์„œ ํ•œ ๊ฐ€์ง€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.์•„๋ž˜์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์˜€๋Š”๋ฐ ์—ฌ๊ธฐ์„œ ์—๋Ÿฌ ๋ฌธ๊ตฌ๋ฅผ ์ž˜ ์‚ดํŽด๋ณด๋ฉด, ๋ฆฌ์ŠคํŠธ์—์„œ๋Š” ๊ณ ์œ ํ•œ key๋ฅผ ์‚ฌ์šฉ ํ•ด์•ผ ๋œ๋‹ค! ๋ผ๋Š” ๋ฌธ๊ตฌ๊ฐ€ ๋‚˜

2021๋…„ 6์›” 4์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[ Habit Treat Project ]

๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋‚˜ ์ง„ํ–‰ํ•ด ๋ณผ ๊ฒƒ์ด๋‹ค.์ „์ฒด ์Šต๊ด€์˜ ๊ฐœ์ˆ˜๋ฅผ ์…€ ์ˆ˜ ์žˆ๋‹ค.์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ์ฐฝ์— ์ž…๋ ฅํ•œ ๋’ค ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ•˜๋‚˜์˜ ์Šต๊ด€์„ ๋ชฉ๋ก์— ์ถ”๊ฐ€ํ•œ๋‹ค.๊ฐ๊ฐ์˜ ๋ชฉ๋ก์„ ์ถ”๊ฐ€ํ•˜๊ณ , ๊ฐ์†Œ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.๊ฐ๊ฐ์˜ ๋ชฉ๋ก์„ ์‚ญ์ œ ํ•  ์ˆ˜ ์žˆ๋‹ค.Reset ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋ชจ๋“ 

2021๋…„ 6์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

๋ฆฌ์•กํŠธ ๊ฐœ๋… ์ •๋ฆฌ

๋ฆฌ์•กํŠธ๋Š” ๊ฐ๊ฐ์˜ ์ปดํฌ๋„ŒํŠธ๋“ค๋กœ ๋ฌถ์—ฌ์žˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์—๋Š” Class, Function์„ ์ด์šฉํ•ด์„œ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• 2๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. Class Component > ๋ฆฌ์•กํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค๋ฅผ ์ƒ์†๋ฐ›์•„์„œ ๋งŒ๋“ ๋‹ค. > Function Component >

2021๋…„ 6์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

JSX

ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์—์„œ ๊ฐ€์ง€๊ณ ์žˆ๋Š” date๋ฅผ ์˜๋ฏธํ•œ๋‹ค.๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ ๋œ properties(์†์„ฑ)์˜ ์•ฝ์ž์ธ props์ด๋‹ค.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ์œ„์—์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ HTML์ฒ˜๋Ÿผ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด ์ง„ ๊ฒƒ์ด JSX์ด๋‹ค.className์ด๋ผ๊ณ  class๋ฅผ ์ง€์ •ํ•ด์•ผ ๋œ๋‹ค.onClick

2021๋…„ 5์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

react project ์‹œ์ž‘ - yarn create react-app / class ์ปดํฌ๋„ŒํŠธ / function ์ปดํฌ๋„ŒํŠธ

๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.yarn์„ ์ด์šฉํ•ด์„œ ์„ค์น˜๋ฅผ ์ง„ํ–‰ํ•ด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹คyarn create react-app ๋ช…๋ น์–ด๋ฅผ ์ด์šฉํ•ด์„œ ์„ค์น˜๋ฅผ ๋๋‚ธ ๋’ค ํ•ด๋‹น ํด๋”๋กœ ๋“ค์–ด๊ฐ€๋ณด๋ฉด ๋งŽ์€ ๊ฒƒ๋“ค์ด ์ƒ๊ธด๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.yarn ๋ช…

2021๋…„ 5์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Vanilla Redux - To Do List ๊ตฌํ˜„ํ•˜๊ธฐ

Vanilla Redux - To Do List >

2021๋…„ 5์›” 19์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React

What is React >

2021๋…„ 5์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท