๊ฐœ๋ฐœ๊ตฌ๋ฆฌ๐Ÿธ

๋ฆฌ์•กํŠธ ๋ง›๋ณด๊ธฐ 4์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ ๋ฆฌ์•กํŠธ ๋ง›๋ณด๊ธฐ 4์ผ์ฐจ ์ž…๋‹ˆ๋‹ค! 01. map() ๋ฆฌ์•กํŠธ์˜ ๊ฐ€์žฅ ํฐ ์žฅ์  ์ค‘ ํ•˜๋‚˜๋Š” ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž˜ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. map() ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐฐ์—ด ๊ฐ์ฒด์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์„œ๋“œ ์ž…๋‹ˆ๋‹ค. map() ์€ ๋ฐฐ์—ด์˜ ๋ชจ๋“  ๊ฐ์ฒด์— ๋Œ€ํ•ด ์ฃผ์–ด์ง„ ํ•จ์ˆ˜๋ฅผ ์ฒ˜๋ฆฌํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์€ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ...

์ œ๋„ค๋ฆญ ๊ณต์‹๋ฌธ์„œ ํŒŒํ•ด์น˜๊ธฐ (1)

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ ํ˜„์žฌ ํŒŒ๊ฒฌ ๋‚˜์˜จ ์„œ๋น„์Šค์˜ ์ฝ”๋“œ๋ฅผ ๋ถ„์„ํ•˜๋ฉด์„œ ์ œ๋„ค๋ฆญ์ด๋ผ๋Š” ๊ฐœ๋…์— ๋Œ€ํ•ด ๊ถ๊ธˆํ•ด์กŒ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์•„์ฃผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” List, Map ๋“ฑ์—์„œ ๊พธ์ค€ํžˆ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์ง€๋งŒ ์ •ํ™•ํžˆ ๋ฌด์—‡์ธ์ง€๋Š” ๋ชฐ๋ž๋˜ ๊ทธ ์ œ๋„ค๋ฆญ ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด๋ณด๊ณ  ์ •๋ฆฌํ•ด๋ด…๋‹ˆ๋‹ค. ์ €๋Š” ์ž๋ฐ” 8๋ฒ„์ „์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•œ ์ž๋ฐ” ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค! 01. ์ œ๋„ค๋ฆญ์˜ ๊ฐœ๋ฐœ ๋ฐฐ๊ฒฝ? ์ œ๋„ค๋ฆญ์ด ๋ฌด์—‡...

์˜ต์‹œ๋””์–ธ์œผ๋กœ ๊นƒํ—ˆ๋ธŒ ๋ธ”๋กœ๊ทธ ๊ด€๋ฆฌํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿธ ์˜ต์‹œ๋””์–ธ๊ณผ ๊นƒํ—ˆ๋ธŒ๋ฅผ ์—ฐ๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์˜ ๊ธ€์„ ์ฐธ์กฐํ•ด์ฃผ์„ธ์š” ์˜ต์‹œ๋””์–ธ ๊นƒํ—ˆ๋ธŒ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ์—ฐ๊ฒฐํ•˜๊ธฐ ๊นƒํ—ˆ๋ธŒ ๋ธ”๋กœ๊ทธ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•˜๋Š” vaults์˜ ์˜ต์…˜์„ ์†Œ๊ฐœ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. 01. ์‚ญ์ œ๋œ ํŒŒ์ผ ํด๋” ๋ณ€๊ฒฝํ•˜๊ธฐ ํ•˜๋‚˜์˜ PC์—์„œ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค ๋ณด๋‹ˆ ์–ธ์ œ ์–ด๋–ค ํŒŒ์ผ์ด ํ•„์š”ํ• ์ง€ ๋ชจ๋ฅด๋‹ˆ 1์ฐจ์ ์œผ๋กœ๋Š” ์•ˆ์ „ํ•˜๊ฒŒ .tash ํด๋”์—...

๋ฆฌ์•กํŠธ ๋ง›๋ณด๊ธฐ 3์ผ์ฐจ

์•ˆ๋…•ํ•˜์„ธ์š” ๋ฆฌ์•กํŠธ ๋ง›๋ณด๊ธฐ 3์ผ์ฐจ ์ž…๋‹ˆ๋‹ค! 01. useEffect() ์ง€๋‚œ ์‹œ๊ฐ„์—๋Š” useEffect() ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ์ตœ์ดˆ ์‹œ์ ์— 1ํšŒ๋งŒ ๋™์ž‘ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. ๋ง๋ถ™์—ฌ ์„ค๋ช…ํ•˜์ž๋ฉด useEffect() ์ปดํฌ๋„ŒํŠธ์˜ ๋ผ์ดํ”„์‚ฌ์ดํด์„ ์ถ”์ ํ•˜์—ฌ ์ด์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๊ณ  ํ•จ์ˆ˜๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์•„๋ž˜์˜ ์˜ˆ์ œ์—์„œ...

๋…ธ์…˜์—์„œ ์˜ต์‹œ๋””์–ธ์œผ๋กœ ์˜ฎ๊ธฐ๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”! ์ €๋Š” ๋…ธ์…˜์—์„œ ์˜ต์‹œ๋””์–ธ์œผ๋กœ ์˜ฎ๊ธด์ง€ ๋‘ ๋‹ฌ์ด ๋˜์—ˆ๋„ค์š” ๋…ธ์…˜์—์„œ ๋ฉ”๋ชจํ•ด๋’€๋˜ ์ž๋ฃŒ๋“ค์„ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ธฐ ๊ท€์ฐฎ์•„์„œ ๋ฏธ๋ฃจ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ตœ๊ทผ ์˜ต์‹œ๋””์–ธ์—์„œ ์ƒˆ valuts๋ฅผ ์—ด์—ˆ๋‹ค๊ฐ€ ์˜ต์‹œ๋””์–ธ์—์„œ ๋‹ค๋ฅธ ํ”Œ๋žซํผ์˜ ๋ฉ”๋ชจ๋ฅผ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ง€์›ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์–ด์š”! ์ฒ˜์Œ valuts๋ฅผ ์ƒ์„ฑํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฌธ๊ตฌ๊ฐ€ ์ ํžŒ Welcome ํŒŒ์ผ...

gitignore ์ ์šฉ ์•ˆ๋  ๋•Œ

์•ˆ๋…•ํ•˜์„ธ์š” ๊ฐœ๋ฐœ๊ตฌ๋ฆฌ์ž…๋‹ˆ๋‹ค! ๐Ÿธ ์˜ต์‹œ๋””์–ธ๊ณผ ๊นƒํ—ˆ๋ธŒ๋ฅผ ์—ฐ๋™ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ  ์ดํ›„๋กœ ์ž˜ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ์š” ๋‘ ๊ฐœ ์ด์ƒ์˜ PC์—์„œ ๊ฐ™์€ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋กœ ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋ฉด ํŠน์ • ํด๋”์˜ ๋‚ด์šฉ์ด ๊ณ„์†ํ•˜์—ฌ conflict ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ .gitignore์˜ ์„ค์ •์„ ๋ฐ”๊ฟ”๋„ ๋ดค์ง€๋งŒ ์„ค์ •์ด ์ ์šฉ์ด ์•ˆ๋˜์—ˆ์–ด์š” ๐Ÿ˜ญ git์—์„œ๋Š” ํ•œ๋ฒˆ...

๋ฆฌ์•กํŠธ ๋ง›๋ณด๊ธฐ 2์ผ์ฐจ

๋ฆฌ์•กํŠธ ๋ง›๋ณด๊ธฐ 2์ผ์ฐจ! ์˜ค๋Š˜์˜ ๊ณต๋ถ€ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. 01. prop ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฐ’ ์ด prop์„ ํ†ตํ•ด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒํ™ฉ์— ๋งž๊ฒŒ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ex) const FirstBtn = (props) =>{ <button>{props.text}<...

์ดํด๋ฆฝ์Šค ๋ฉ”์„œ๋“œ ๋ ˆํผ๋Ÿฐ์Šค ์ฐพ๊ธฐ

์ดํด๋ฆฝ์Šค์—์„œ ์–ด๋–ค ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€๋ฅผ ์ฐพ๋Š” ๋ฐฉ๋ฒ•! ์ฐพ๊ณ ์ž ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋ช…์— ์ปค์„œ๋ฅผ ๋‘๊ณ  ์šฐํด๋ฆญ References ์—์„œ ์ฐพ์„ ๋ฒ”์œ„๋ฅผ ์„ ํƒํ•˜๋ฉด ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์ด ๋ชฉ๋ก์— ๋‚˜์˜ต๋‹ˆ๋‹ค! 1. ๋ฉ”์„œ๋“œ๋ช…์— ์ปค์„œ๋ฅผ ๋†“๊ณ  ์šฐํด๋ฆญํ•˜๊ธฐ 2. References ์—์„œ ๊ฒ€์ƒ‰ ๋ฒ”์œ„ ์„ ํƒํ•˜๊ธฐ

this web application instance has been stopped already

์—…๋ฌด ์ค‘์— ๋งž๋‹ฅ๋“ค์ธ ๊ฐ‘์ž‘์Šค๋Ÿฐ ์—๋Ÿฌ this web application instance has been stopped already ์ฐพ์•„๋ณด๋‹ˆ ์„œ๋ฒ„๊ฐ€ ๊ตฌ๋™ ์ค‘์ผ ๋•Œ์— ํŒŒ์ผ ๋ณ€๊ฒฝ์ด ๋ฐœ์ƒํ•˜์—ฌ ์„œ๋ฒ„๊ฐ€ ์žฌ์‹œ์ž‘๋˜๋ฉด์„œ ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ํ†ฐ์บฃ ์—๋Ÿฌ์ธ๊ฑฐ์ฃ . ์ฐพ์•„๋ณธ ๊ฒฐ๊ณผ ์ด ์—๋Ÿฌ์˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ ๋‘ ๊ฐ€์ง€๋ฅผ ๋ณด์ž๋ฉด ์ž‘์—…์œผ๋กœ ์ธํ•ด ํŒŒ์ผ์— ์ˆ˜์ • ์‚ฌํ•ญ์ด...

๋ฆฌ์•กํŠธ ๋ง›๋ณด๊ธฐ 1์ผ์ฐจ

๋ฆฌ์•กํŠธ ๊ณต๋ถ€ 1์ผ์ฐจ 01. JSX? Javascript์˜ ํ™•์žฅ ์–ธ์–ด ๋ฆฌ์•กํŠธ์—์„œ HTML ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ด ์–ธ์–ด๊ฐ€ JSX. ์šฐ๋ฆฌ๊ฐ€ JSX๋กœ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š” ๋ฐ”๋ฒจ์„ ํ†ตํ•ด ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ณ€ํ™˜๋˜์–ด ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. JSX์—์„œ <h1>์‘์•  ๋‚˜๋Š” ์•„๊ธฐ h1 ํƒœ๊ทธ</h1> ์ด๋Ÿฐ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ์œผ๋ฉด HTML๋กœ ๋ฐ”๋กœ ํ•ด๋‹น ์ฝ”...

์ธ๊ธฐ ํƒœ๊ทธ