profile
front-end developer ๐Ÿฃ
post-thumbnail

[React] React์˜ ๋ผ์ดํ”„์‚ฌ์ดํด ์ดํ•ดํ•˜๊ธฐ (with useEffect)

state๊ฐ€ ์—…๋ฐ์ดํŠธ๋  ๋•Œ ๋งˆ๋‹ค ๋ Œ๋”๋ง์ด ์ƒˆ๋กญ๊ฒŒ ๋œ๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ ๋งŒ์•ฝ ์•„๋ž˜์™€ ๊ฐ™์ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งจ ์ฒ˜์Œ ๋ Œ๋”๋ง๋  ๋•Œ state๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ์ƒํ™ฉ์ด๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?

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

[React] React์˜ State, Props ์ดํ•ดํ•˜๊ธฐ

React์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ์ดํ„ฐ๋กœ ํฌ๊ฒŒ Props ์™€ State ๊ฐ€ ์žˆ๋‹ค. ์ด ๋‘˜์€ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋…์œผ๋กœ ๊ต‰์žฅํžˆ ์ค‘์š”ํ•˜๋ฏ€๋กœ ๊ผญ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.

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

[React] React ์ปดํฌ๋„ŒํŠธ ์ดํ•ดํ•˜๊ธฐ

React ํ”„๋กœ์ ํŠธ๋ฅผ ์ฒ˜์Œ ๋งŒ๋“ค์—ˆ์„ ๋•Œ ๋ณด์ด๋Š” index.html ํŒŒ์ผ. ํƒœ๊ทธ ์•ˆ์— ์•„๋ฌด ๊ฒƒ๋„ ์—†๋‹ค.

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

[React] React ํŠน์ง•

React์˜ ํ•ต์‹ฌ ๊ฐœ๋…์€ ๋ฐ”๋กœ Component(์ปดํฌ๋„ŒํŠธ)์ด๋‹ค. ์ปดํฌ๋„ŒํŠธ๋Š” UI๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ์š”์†Œ๋กœ React์—์„œ ์ •๋ง ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค. UI ์š”์†Œ๋“ค์„ ์ž˜๊ฐœ ์ชผ๊ฐœ์„œ ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค๊ณ  ํŽ˜์ด์ง€์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•ฉ์น˜๋Š” ๊ฐœ๋…์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.์ทจ๋ฏธ ๊ณต์œ  ํ”Œ๋žซํผ, ํด๋ž˜์Šค 101 ์›น๋„

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

[React] React ์‹œ์ž‘ํ•˜๊ธฐ

ํ”„๋กœ์ ํŠธ ํด๋”(grab-market-web)๋ฅผ ํ•˜๋‚˜ ๋งŒ๋“  ํ›„ VSCode์—์„œ ํ•ด๋‹น ํด๋”๋ฅผ ์—ด์–ด์ค€๋‹ค.react ํ”„๋กœ์ ํŠธ๋ฅผ ์†์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋„๊ตฌ create-react-app ์„ ์„ค์น˜ํ•ด์ค€๋‹ค. ์ด๋Š” npm์„ ํ†ตํ•ด์„œ ๊ด€๋ฆฌ๋˜๋Š” ํŒจํ‚ค์ง€๋‹ค. ํ„ฐ๋ฏธ๋„์„ ์—ฌ๋Š” ๋‹จ์ถ•ํ‚ค๋Š” ctrl + j

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

[React] Node & NPM ์ดํ•ดํ•˜๊ธฐ

์ฒ˜์Œ์— javascript๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ์‹คํ–‰๋˜๋Š” ์–ธ์–ด์˜€์Šต๋‹ˆ๋‹ค. javascript๋ฅผ ์ฝ๊ณ  ์‹คํ–‰์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋ธŒ๋Ÿฌ์šฐ์ €๋“ค์€ ์„œ๋กœ ๋‹ค๋ฅธ ์—”์ง„(์ฝ”๋“œ ์ธํ„ฐํ”„๋ฆฌํ„ฐ)์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ ์  javascript๊ฐ€ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋ฉด์„œ '์›น ๊ฐœ๋ฐœ ๋ง๊ณ  ๋‹ค๋ฅธ ๊ณณ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€ ์•Š

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

[React] React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

์›น์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„  HTML, CSS, JS๋ฅผ ์ด์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ณดํ†ต ์•„๋ž˜์™€ ๊ฐ™์ด ํŽ˜์ด์ง€ ๋ณ„๋กœ ์ฝ”๋“œ๋ฅผ ์งœ๊ฒŒ ๋˜์ฃ .๊ทธ๋Ÿฌ๋‚˜ ์ ์  ์›น์ด ๋ณต์žกํ•ด ์ง€๋ฉด์„œ ๋” ๋งŽ์€ html, Javascript๊ฐ€ ๋“ค์–ด๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ ์  ํ•˜๋‚˜์˜ html ํŒŒ์ผ์— ์ˆ˜๋งŽ์€ Javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

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

[JavaScript] ES6

๋ณ€์ˆ˜ ์„ ์–ธ : let, const๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ : PromiseES6 ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ์‹ค์ œ๋กœ ๋” ํŽธํ•˜๊ฒŒ ์ฝ”๋”ฉ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๋ฉ”์ด์ ธ ๋ธŒ๋ผ์šฐ์ €, Node.js ์„œ๋ฒ„ ๊ฐœ๋ฐœ ๋“ฑ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ES6 ๋ฌธ๋ฒ•์„ ์ฑ„ํƒํ•˜๊ณ  ์žˆ์–ด์š”. ์ผ๋ฐ˜์ ์œผ๋กœ string ์ž๋ฃŒํ˜•์„ ์กฐํ•ฉ

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

[JavaScript] Promise

Promis๋Š” ๋น„๋™๊ธฐ์ฒ˜๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ ๋ฐ›๊ณ resolve, reject ๋‘ ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค..then : ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ์„ฑ๊ณตํ–ˆ์„ ๋•Œ ํ˜ธ์ถœ.catch : ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ์‹คํŒจ ํ–ˆ์„๋•Œ ํ˜ธ์ถœ.finally : ์„ฑ๊ณต,์‹คํŒจ ์—ฌ๋ถ€ ์—†์ด ๋ฌด์กฐ๊ฑด ํ•œ ๋ฒˆ

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

[JavaSciprt] ์ฝœ๋ฐฑ ํ•จ์ˆ˜(Callback Function)

ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋Š” ํ•จ์ˆ˜์ฝœ๋ฐฑํ•จ์ˆ˜๋ž€ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌ๋ฐ›์•„, ํ•จ์ˆ˜์˜ ๋‚ด๋ถ€์—์„œ ์‹คํ–‰ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” ์ด๋ฏธ ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ ์†์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด, forEach ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ ํ•จ์ˆ˜ ์•ˆ์— ์ต๋ช…์˜ ํ•จ์ˆ˜๋ฅผ ๋„ฃ์–ด์„œ forEach ๋ฌธ์„ ๋™์ž‘์‹œํ‚จ๋‹ค.

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

[Markdown] ๋งˆํฌ๋‹ค์šด ์‚ฌ์šฉ๋ฐฉ๋ฒ•

์ผ๋ฐ˜ ํ…์ŠคํŠธ ๊ธฐ๋ฐ˜์˜ ๊ฒฝ๋Ÿ‰ ๋งˆํฌ์—… ์–ธ์–ด๋‹ค. ์ผ๋ฐ˜ ํ…์ŠคํŠธ๋กœ ์„œ์‹์ด ์žˆ๋Š” ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋ฉฐ, ์ผ๋ฐ˜ ๋งˆํฌ์—… ์–ธ์–ด์— ๋น„ํ•ด ๋ฌธ๋ฒ•์ด ์‰ฝ๊ณ  ๊ฐ„๋‹จํ•œ ๊ฒƒ์ด ํŠน์ง•์ด๋‹ค. HTML๊ณผ ๋ฆฌ์น˜ ํ…์ŠคํŠธ(RTF) ๋“ฑ ์„œ์‹ ๋ฌธ์„œ๋กœ ์‰ฝ๊ฒŒ ๋ณ€ํ™˜๋˜๊ธฐ ๋•Œ๋ฌธ์— ์‘์šฉ ์†Œํ”„ํŠธ์›จ์–ด์™€ ํ•จ๊ป˜ ๋ฐฐํฌ๋˜๋Š” READ

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