git ๋ช…๋ น์–ด ๋ชจ์Œ
ยท
ํ”„๋ก ํŠธ์—”๋“œ ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป
์ œ๋ฐœ ์™ธ์šฐ์ž git ๋ช…๋ น์–ด ... ใ… ใ… ใ… ใ…  โญ์ฑ•ํ„ฐ ์›! git ๊ธฐ๋ณธ ๋ช…๋ น์–ด โœ… ํ˜„์žฌ ์ƒํƒœ ํ™•์ธ git status โœ… ์ „์ฒด ๋กœ๊ทธ ํ™•์ธ git log โœ… ๊นƒ ์ €์žฅ์†Œ ์ƒ์„ฑํ•˜๊ธฐ git init โœ… ์ €์žฅ์†Œ ๋ณต์ œ git clone ๋ ˆํฌ์ฃผ์†Œ โœ… GITHUB ์ฃผ์†Œ ์—ฐ๊ฒฐ git remote add origin [github ์ฃผ์†Œ] โœ… ์ €์žฅ์†Œ ์ฝ”๋“œ ์ถ”๊ฐ€ git add - ์ปค๋ฐ‹ ๋ณ€๊ฒฝ์‚ฌํ•ญ ๋ชจ๋‘ ํฌํ•จ git add -A โœ… ์ปค๋ฐ‹ ์ƒ์„ฑ git commit -m 'message' โœ… git ๋ณ€๊ฒฝ ์‚ฌํ•ญ ์›๊ฒฉ ์„œ๋ฒ„ ์—…๋กœ๋“œ git push origin master โœ… ์ €์žฅ์†Œ ๋ณ€๊ฒฝ ๋‚ด์šฉ ๊ฐ€์ ธ์˜ค๊ธฐ git pull โœ… ๋ณ€๊ฒฝ ๋‚ด์šฉ์„ ๋จธ์ง€ํ•˜๊ธฐ ์ „์— ๋ฐ”๋€ ๋‚ด์šฉ ๋น„๊ต git diff [๋ธŒ๋žœ์น˜ ์ด๋ฆ„] [๋‹ค๋ฅธ ๋ธŒ๋žœ์น˜ ์ด๋ฆ„] โญ ์ฑ•ํ„ฐ ํˆฌ! git br..
HTTP ์™„๋ฒฝ ๊ฐ€์ด๋“œ(๋‹ค๋žŒ์ฅ ์ฑ…)
ยท
ํ”„๋ก ํŠธ์—”๋“œ ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป
์ฐธ๊ณ ์ž๋ฃŒ: HTTP ์™„๋ฒฝ ๊ฐ€์ด๋“œ(์ €์ž: ๋ฐ์ด๋น— ๊ณ ์„๋ฆฌ) ์›น์ด ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€.. ๊ถ๊ธˆํ•œ ๊ฒƒ์ด ๋„ˆ๋ฌด ๋งŽ์•„, ๋‹ค๋žŒ์ฅ ์ฑ…์„ ํŽผ์ณค๋‹ค.. ํ—ท๊ฐˆ๋ฆฌ๋Š” ๊ฒƒ, ๊ธฐ์–ตํ•˜๊ณ  ์‹ถ์€ ๋ถ€๋ถ„์„ ๊ธฐ๋กํ–ˆ๋‹ค.. ๋ญ‰๋šฑ๊ทธ๋ ค ํผ์ง€๋ง‰ํ•œ ์šฉ์–ด ์ •๋ฆฌ๋ถ€ํ„ฐ ๋” ๊ถ๊ธˆํ•œ ํŒŒํŠธ๊นŒ์ง€.. ์•Œ์ฐจ๊ฒŒ ์ ์–ด๋ณด์•˜๋‹ค. ํ•˜์ง€๋งŒ, ์ด ์ฑ…์„ ๋œจ๋ฌธ๋œจ๋ฌธ ์ฝ์€ ์ฃ„๋กœ ๋‹ค๋žŒ์ฅ๋กœ ๋ณ€ํ•ด๋ฒ„๋ ธ๋‹ด... ๐Ÿฟ ํ‘œํ˜„ํ•œ ์ด๋ชจ์ง€ โญ๏ธ : ํฐ ํ‚ค์›Œ๋“œ โœจ: ์„ธ๋ถ€ ์šฉ์–ด ์ •๋ฆฌ ๐Ÿ“š : ํŒŒํŠธ, ์†Œ์ œ๋ชฉ โœ… : ์†Œ์ œ๋ชฉ ์•ˆ์˜ ํ‚ค์›Œ๋“œ ๋ฐ ์„ค๋ช… ๐Ÿ’ก : ์˜ˆ์‹œ ์„ค๋ช… โญ๏ธ URI - ์ •๋ณด ๋ฆฌ์†Œ์Šค๋ฅผ ๊ณ ์œ ํ•˜๊ฒŒ ์‹๋ณ„ํ•˜๊ณ  ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜๋Š” ์—ญํ• . - ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•œ ๊ณ ์œ ํ•œ ์‹๋ณ„์ž ๐Ÿ“š ์ข…๋ฅ˜ โœจ 1. URL - ํŠน์ • ์„œ๋ฒ„์˜ ํ•œ ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•œ ๊ตฌ์ฒด์ ์ธ ์œ„์น˜ - URL์˜ ์ฒซ ๋ฒˆ์žฌ ๋ถ€๋ถ„์„ ์Šคํ‚ด(scheme), ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ํ”„..
Next.js ๊ณต์‹๋ฌธ์„œ ์ •๋ฆฌ โœจ
ยท
Next.js ์ตํžˆ๊ธฐ ๐Ÿ”ต
๊ธ€์“ด์ด๊ฐ€ ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ถ€๋ถ„, ์ค‘์š”ํ•œ ๋ถ€๋ถ„์„ ๋‹ด์€ ๋ธ”๋กœ๊น…์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ„ ๊ฒƒ์ด ์•„๋‹Œ ๋”ฑ ์š”์ ๋งŒ! ๊ธฐ์–ตํ•ด์•ผ ํ•˜๋Š” ๋ถ€๋ถ„๋งŒ! ์ •๋ฆฌํ•ด์„œ ์—…๋กœ๋“œํ•œ ๊ฒƒ์ด๋‹ˆ ์ฐธ๊ณ  ๋ฐ”๋ผ๋ฉฐ, ์ถœ์ฒ˜๋Š” ์ด ๊ณณ์— ๋‚จ๊ธฐ๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜Ž Learn Next.js | Next.js by Vercel - The React Framework Next.js by Vercel is the full-stack React framework for the web. nextjs.org * ์‚ฌ์šฉํ•œ ์ด๋ชจ์ง€๋“ค์˜ ์˜๋ฏธ ๐Ÿ˜Ž โœจ : ๋‹จ์–ด ์˜๋ฏธ ๐Ÿ“š : ์†Œ์ œ๋ชฉ โœ… : ์†Œ์ œ๋ชฉ ์•ˆ์˜ ํ‚ค์›Œ๋“œ ๋ฐ ์„ค๋ช… โ“ : '๋งŒ์•ฝ'์ด๋ผ๋Š” ์˜๋ฏธ โ€ผ๏ธ: ์ค‘์š” ! 1. 1์žฅ ์„ธํŒ… (๊ฑด๋„ˆ๋›ฐ๊ธฐ) 2. 2์žฅ css ์Šคํƒ€์ผ๋ง ๐Ÿ“š clsx ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ status ์ƒํƒœ๊ฐ€ pending์ด๊ฑฐ๋‚˜ paid์ผ ๊ฒฝ..
[ํ”„๋ก ํŠธ์—”๋“œ] ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ
ยท
ํ”„๋ก ํŠธ์—”๋“œ ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป
1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์™€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์™€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜(์ค‘๊ธ‰) ์ค‘๊ธ‰ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์™€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ์ดํ•ดํ•˜๊ธฐ. ์ฝœ๋ฐฑ ์ง€์˜ฅ๊ณผ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ๋“ฑjoshua1988.github.io ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด,๋‹ค์Œ ๋‹จ๊ณ„์— ๋˜ ์ฝœ๋ฐฑ, ๋˜ ์ฝœ๋ฐฑ ์ด๋ ‡๊ฒŒ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๊ณ„์† ๋ฌผ๊ฒŒ ๋œ๋‹ค. ์ด๊ฒƒ์„ ํ•ด๊ฒฐํ•œ๊ฒŒ promise ํ•จ์ˆ˜ 2. ๋‘๋ฒˆ์งธ - promise ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Promise ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ธฐ(์ค‘๊ธ‰) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•œ Promise ์„ค๋ช…. ์‰ฝ๊ฒŒ ์•Œ์•„๋ณด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Promise ๊ฐœ๋…, ์‚ฌ์šฉ๋ฒ•, ์˜ˆ์ œ ์ฝ”๋“œ. ์˜ˆ์ œ๋กœ ์•Œ์•„๋ณด๋Š” then(), catch() ํ™œ์šฉ๋ฒ•joshua1988.github.io ..
[๋ฆฌ์•กํŠธ] component์™€ props ์ •๋ฆฌ โœจ
ยท
React์˜ ๊ณ ์ˆ˜ ๐ŸŸข
์ฐธ๊ณ ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ-๋ฆฌ์•กํŠธ๊ฐ•์˜ [๋ฌด๋ฃŒ] ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React) - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค., ๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จ‍๐Ÿซ ๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซwww.inflearn.com component- ๋ ˆ๊ณ  ๋ธ”๋ก์„ ์กฐ๋ฆฝํ•˜๋“ฏ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ชจ์•„์„œ ๊ฐœ๋ฐœ ๋งˆ์น˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•จ์ˆ˜์™€๋„ ๋น„์Šทํ•ด! ํ•˜์ง€๋งŒ, ๋‹ค๋ฅธ ์ ์€ ์†์„ฑ(props) ์„ ๋„ฃ์œผ๋ฉด, ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚  ์—˜๋ฆฌ๋จผํŠธ๋“ค์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ ๋งˆ์น˜ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ถ•์–ด๋นต ํ‹€๊ณผ๋„ ๊ฐ™๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ผ๋Š” ํ‹€๋กœ ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ๋‹ค ๋˜‘๊ฐ™์€ ๋ชจ์–‘์œผ๋กœ ๋งŒ๋“ค์–ด์ง€๋Š” ๊ฒƒ 1-1. component ๋งŒ๋“ค๊ธฐ ์ปดํฌ๋„ŒํŠธ๋Š” ์ด๋ ‡๊ฒŒ ๋‘˜๋กœ ๋‚˜๋‰œ๋‹ค. 1) ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ..
[๋ฆฌ์•กํŠธ] element ์ •๋ฆฌ
ยท
React์˜ ๊ณ ์ˆ˜ ๐ŸŸข
์ฐธ๊ณ ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ-๋ฆฌ์•กํŠธ๊ฐ•์˜ [๋ฌด๋ฃŒ] ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React) - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค., ๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จ‍๐Ÿซ ๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซwww.inflearn.com element:๋ฆฌ์•กํŠธ ์•ฑ์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐ€์žฅ ์ž‘์€ ๋ธ”๋ก๋“ค DOM element๋ผ๋Š” ๊ฒƒ๋„ ์žˆ๋‹ค!๊ทธ๊ฑฐ๋Š” ํ”ํžˆ ๋ณด๋Š” , ํƒœ๊ทธ ๊ฐ™์€ html์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋“ค ๋ฆฌ์•กํŠธ element๋Š” dom element์˜ ๊ฐ€์ƒ ํ‘œํ˜„ ๊ฐ™์€ ๋А๋‚Œ ๋ฆฌ์•กํŠธ element ๋‹ค์Œ DOM element๋กœ ์ด์–ด์ง(๋ Œ๋”๋ง) => ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋А๋‚Œ! element๋Š” ์‹ค์ œ ํ™”๋ฉด์— ๋ณด์ด๋Š” ๊ฒƒ๋“ค์„ ๊ธฐ์ˆ ํ•œ ๊ฒƒ ์ด ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ๊ฐ€ ๋ฐ”๋กœ ์—˜๋ฆฌ๋จผํŠธ!..
[๋ฆฌ์•กํŠธ] JSX ๋ฌธ๋ฒ•
ยท
React์˜ ๊ณ ์ˆ˜ ๐ŸŸข
์ฐธ๊ณ ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ-๋ฆฌ์•กํŠธ๊ฐ•์˜ [๋ฌด๋ฃŒ] ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React) - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค., ๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จ‍๐Ÿซ ๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซwww.inflearn.com 1.JSX- ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฌธ๋ฒ•์„ ํ™•์žฅ์‹œํ‚จ ๊ฒƒ-javascript + xml/html 1)jsx ์—ญํ•  - ๋‚ด๋ถ€์ ์œผ๋กœ html ์ฝ”๋“œ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์นจ ๊ทธ๋ž˜์„œ, ์ตœ์ข…์ ์œผ๋กœ jsx ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์ฝ”๋“œ๊ฐ€ ์ž‘์„ฑ๋˜๋Š” ๊ฒƒ ๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์„œ,jsx์ฝ”๋“œ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ๊ฒƒ์ด 'React.creatElement'๋ผ๋Š” ํ•จ์ˆ˜์ด๋‹ค. ์ด ์ฝ”๋“œ์˜ ํ•ด์„์€์ฒซ๋ฒˆ์งธ ์ฝ”๋“œ..
[๋ฆฌ์•กํŠธ] forms ์ •๋ฆฌ โœจ
ยท
React์˜ ๊ณ ์ˆ˜ ๐ŸŸข
์ฐธ๊ณ ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ-๋ฆฌ์•กํŠธ๊ฐ•์˜ [๋ฌด๋ฃŒ] ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React) - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค., ๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จ‍๐Ÿซ ๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซwww.inflearn.com form์ด๋ž€?์–‘์‹, ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์ž…๋ ฅ์„ ๋ฐ›๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ ์—ฌ๊ธฐ์‚ฌ html์˜ ํผ๊ณผ ๋ฆฌ์•กํŠธ์˜ ํผ์€ ์ข€ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค. html ํผ์€ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ์ œ์–ดํ•  ์ˆ˜ ์—†์Œ 1. form ์ด ์˜ˆ์‹œ ์ฝ”๋“œ๋งŒ ๋ด๋„, ๋‹จ์ˆœํžˆ type, name๋งŒ ์ ์šฉ๋˜์ง€ ์ด๊ฒƒ์ด ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ๊ฐ’์„ ์ œ์–ดํ•  ์ˆ˜๋Š” ์—†๋‹ค ํ•˜์ง€๋งŒ, ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค. -> controlled component ์ฆ‰, compo..
[๋ฆฌ์•กํŠธ] List and Keys
ยท
React์˜ ๊ณ ์ˆ˜ ๐ŸŸข
์ฐธ๊ณ  ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ ๊ฐ•์˜ -์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ [๋ฌด๋ฃŒ] ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React) - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค., ๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จ‍๐Ÿซ ๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซwww.inflearn.com List๋ž€?- array๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Œ - array๋ž€? js ํ•จ์ˆ˜๋กœ ๋ณ€์ˆ˜๋‚˜ ๊ฐ์ฒด๋“ค์„ ํ•˜๋‚˜์˜ ๋ณ€์ˆ˜๋กœ ๋ฌถ์–ด ๋†“์€ ๊ฒƒ- Key: ๊ฐ ๊ฐ์ฒด๋‚˜ ์•„์ดํ…œ์„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ ์œ ํ•œ ๊ฐ’. ์ฆ‰, ์•„์ดํ…œ์„ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•œ ๊ณ ์œ ํ•œ ๋ฌธ์ž์—ด 1. ์—ฌ๋Ÿฌ ๊ฐœ์˜ component๋ฅผ ๋ Œ๋”๋งํ•˜๊ธฐ ์ด๋•Œ map()์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, map ํ•จ์ˆ˜๋Š” ๋ฐฐ์—ด์— ์–ด๋–ค ์ฒ˜๋ฆฌ๋ฅผ ํ•œ ๋’ค ๊ทธ๊ฒƒ๋“ค์„ ๋งคํ•‘ํ•˜์—ฌ ๋ฆฌํ„ดํ•ด์ฃผ๋Š” ํ•จ์ˆ˜..
[๋ฆฌ์•กํŠธ] Conditional Rendering
ยท
React์˜ ๊ณ ์ˆ˜ ๐ŸŸข
์ฐธ๊ณ ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ-๋ฆฌ์•กํŠธ๊ฐ•์˜ [๋ฌด๋ฃŒ] ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React) - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค., ๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จ‍๐Ÿซ ๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซwww.inflearn.com Conditional Rendering: ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง true๋ฉด UserGreeting, false๋ฉด GuestGreeting -> ์ด๊ฒŒ ๋ฐ”๋กœ ์กฐ๊ฑด๋ถ€๋ Œ๋”๋ง ์ฐธ๊ณ ๋กœ,Truthy: true๋Š” ์•„๋‹ˆ์ง€๋งŒ true๋กœ ์—ฌ๊ฒจ์ง€๊ณ ,falsy: false๋Š” ์•„๋‹ˆ์ง€๋งŒ false๋กœ ์—ฌ๊ฒจ์ง -์—˜๋ฆฌ๋จผํŠธ ๋ณ€์ˆ˜์ปดํฌ๋„ŒํŠธ๋กœ ์ƒ์„ฑ๋œ ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ์ปดํฌ๋„ŒํŠธ๋กœ ์ƒ์„ฑ๋œ ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ๋‹ค. ์—˜๋ฆฌ๋จผํŠธ๋กœ ๋งŒ๋“ค์–ด ์กฐ๊ฑด๋ถ€๋ Œ๋”๋ง์— ์‚ฌ์šฉํ•  ์ˆ˜..
[๋ฆฌ์•กํŠธ] Hook์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€
ยท
React์˜ ๊ณ ์ˆ˜ ๐ŸŸข
์ฐธ๊ณ ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ-๋ฆฌ์•กํŠธ๊ฐ•์˜ [๋ฌด๋ฃŒ] ์ฒ˜์Œ ๋งŒ๋‚œ ๋ฆฌ์•กํŠธ(React) - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๊ณผ ํ•จ๊ป˜ ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค., ๊น”๋”ํ•œ ๊ฐ•์˜์ž๋ฃŒ, ๊ผผ๊ผผํ•œ ์„ค๋ช…์œผ๋กœ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๐Ÿ‘จ‍๐Ÿซ ๋ฆฌ์•กํŠธ์˜ ์„ธ๊ณ„๋กœ์ดˆ๋Œ€ํ•ฉ๋‹ˆ๋‹ค ๐Ÿ’ซwww.inflearn.com Hookcomponent๋Š” function component์™€ class component๋กœ ๋‚˜๋‰œ๋‹ค. class component๋Š” ์ƒ์„ฑ์ž์—์„œ state๋ฅผ ์ •์˜ํ•˜๊ณ , setState() ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด state๋ฅผ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, LifeCycle methods๋ฅผ ์ œ๊ณตํ•ด์ค€๋‹ค. ํ•˜์ง€๋งŒ! function component์—์„œ๋Š” ์ด๊ฒƒ๋“ค์ด ๋ถˆ๊ฐ€๋Šฅ! ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฑธ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜๊ฐ€ ๋ฐ”๋กœ Hook์ด๋‹ค...
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น
ยท
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ •์„ ๐ŸŸก
์ฐธ๊ณ ์ž๋ฃŒ: ์ธํ”„๋Ÿฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ดˆ๊ธ‰๊ฐ•์˜ Javascript ES6+ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๊ธฐ - ์ดˆ๊ธ‰ - ์ธํ”„๋Ÿฐ | ๊ฐ•์˜ES6+ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๊ธฐ ๊ฐ•์ขŒ๋Š” Javascirpt์˜ ES6 ๋ฐ ์ดํ›„์˜ ํ‘œ์ค€ ECMAScript ๋ช…์„ธ์— ๋Œ€ํ•˜์—ฌ ์ด๋ก ์„ ๋ฐ”ํƒ•์œผ๋กœ ES5์™€ ๋‹ฌ๋ผ์ง„ ์  ๋ฐ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ๊นŠ์ด ์žˆ๊ฒŒ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค., Javascript ES6+๋Š” ๋ญ๊ฐ€ ๋‹ค๋ฅผ๊นŒ?www.inflearn.com 1-1. ๋ฐฐ์—ด ํ• ๋‹น var colors = ['red', 'white', 'orange']var first = colors[0]var second = colors[1]var third = colors[2]console.log(first, second, third)//ํ•ด์ฒดํ• ๋‹นconst colors = ['red', 'white',..