CODING ๐Ÿ’ป/REACT ๐Ÿ’ซ 2

#02 ๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ์“ด, REACT ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•˜์—ฌ~! ๐Ÿ˜Ž

๊ณต๋ถ€๋“  ๋ญ˜ํ•˜๋˜์ง€ ๊ฐ„์—... ๋ˆˆ์œผ๋กœ ๋ณด๋Š” ๊ฒƒ ๋ง๊ณ  ์ง์ ‘ ์จ๋ณด๋Š”๊ฒƒ๋„ ์ค‘์š”ํ•  ๊ฒƒ ๊ฐ™์•„์„œ ๊ฐ•์˜(์•„๋ž˜์˜ ๋งํฌ)๋ฅผ ๋“ค์œผ๋ฉฐ ์—ด์‹ฌํžˆ ๋”ฐ๋ผ์“ฐ๊ณ , ์ดํ•ดํ•˜๊ณ , ์•”๊ธฐํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ๋ฌผ๋ก ~! REACT๋Š” ๋‚˜์—๊ฒŒ ๋„ˆ๋ฌด ๋‚ฏ์„ค์ง€๋งŒ..๐Ÿ˜‚ ๊ทธ๋ž˜๋„ ์ฐจ๊ทผ์ฐจ๊ทผ ์‹œ์ž‘ํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.. ์‹œ์ž‘~!!!!! ๐Ÿ˜ โš™ ํƒœ๊ทธ ์ปดํฌ๋„ŒํŠธํ™” โš™ ์ฐธ! ์ฐธ๊ณ ๋กœ import React, { Component } ๊ผญ ์จ์ค˜์•ผ ํ•œ๋‹ค :) โš™ props๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์ž โš™ ๊ทธ๋ ‡๋‹ค๋ฉด, ์–ด๋–ป๊ฒŒ ์ถœ๋ ฅ๋˜๋Š”์ง€ ๋ณผ๊นŒ๋‚˜~๐ŸŽˆ ์œผ์•… ์ด๊ฒŒ ๋ญ์•ผ ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ ์•„๋งˆ props ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™๋‹ค... ๋‚œ ์žฅ๋‚œ๊ฟ€ํ—ˆ๊ธฐ,,~^^ . ๊ทธ๋ ‡๊ฒŒ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๊ตฌ ๊ตฌ๊ธ€๋ง์„ ์—ด์‹ฌํžˆ ํ•ด๋ณด๋‹ค๊ฐ€.... ์ด๊ฑฐ ์•ˆ์ผ์—ˆ์Œ (๋‚œ ๋ฐ”๋ณด์ธ๊ฐ€๋ด„;;) ๋ญ ๊ดœ์ฐฎ๋‹ค! ์‹ค์ˆ˜๋Š” ํ•  ์ˆ˜ ์žˆ์œผ๋‹ˆ๊นŒ ํ•˜ํ•˜ํ•˜ํ•˜~! wow~!@~!~ ์†”์ง..

#01 REACT ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ•, ์‚ฌ์šฉ๋ฒ• (๋‚ด๊ฐ€๋ณด๋ ค๊ณ  ์“ฐ๋Š”๊ธ€)

1. node-js ์ตœ์‹ ๋ฒ„์ „ ์„ค์น˜ 2. ๋ช…๋ น ํ”„๋กฌํ”„ํŠธ ์‹คํ–‰ ํ›„ node -v ์ž…๋ ฅํ•ด ๋ฒ„์ „ ํ™•์ธ 3. ๋ฒ„์ „์ด๋‚˜์˜ค๋ฉด npm -v ์ž…๋ ฅํ•ด ๋ฒ„์ „ ํ™•์ธ 4. npm install npx -g ์ž…๋ ฅ 5. npx -v ์ž…๋ ฅํ•ด์„œ ๋ฒ„์ „ ํ™•์ธ 6. pwd๋ฅผ ์ž…๋ ฅ (ํ˜„์žฌ ์œ„์น˜๋ฅผ ์•Œ๋ ค์คŒ) 7. ํ”„๋กœ์ ํŠธ ๋ช… ์ž…๋ ฅ (ex: zoozoo) 8. npx create-react-app zooozoo(ํ”„๋กœ์ ํŠธ๋ช…) ์ž…๋ ฅ 9. ์„ค์น˜๊ฐ€ ๋๋‚ฌ์œผ๋ฉด dir ์ž…๋ ฅํ•ด์„œ zoozoo๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธํ•ด์ฃผ๊ธฐ 10. cd zoozoo ์ž…๋ ฅ (๋””๋ ‰ํ† ๋ฆฌ ์ด๋™ ๋ช…๋ น๋ฌธ) 11. ๋‹ค์‹œ dir ์ž…๋ ฅํ•˜๋ฉด zoozoo ํด๋” ์•ˆ์— ์žˆ๋Š” ํด๋”, ํŒŒ์ผ ๋ชฉ๋ก๋“ค์ด ๋‚˜ํƒ€๋‚จ 12. ์ž˜ ๋‚˜ํƒ€๋‚˜๋ฉด ์ด์ œ VSCode(๋น„์ฃผ์–ผ ์ŠคํŠœ๋””์˜ค ์ฝ”๋“œ)์— ๋“ค์–ด๊ฐ€ ํ„ฐ๋ฏธ๋„์— npm start ์น˜๊ธฐ โ€ป ํ”„๋กœ์ ..