๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

react4

[React] React๋ž€? JSX ๋ฌธ๋ฒ• ์ •๋ฆฌํ•˜๊ธฐ React๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ์•„๋ณด๋ฉฐ์ œ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์•Œ์•„์•ผ ํ• JSX ๋ฌธ๋ฒ•์„ ๊ณต๋ถ€ํ•ด๋ณด์ž! 1. ๋ฆฌ์•กํŠธ(React)๋ž€?SPA๋ฅผ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋ฉฐ, 2013๋…„ ๋ฉ”ํƒ€(๊ตฌ ํŽ˜์ด์Šค๋ถ)์—์„œ ๊ณต๊ฐœํ–ˆ๋‹ค.๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ž€, ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์ฝ”๋“œ ๋ฌถ์Œ์„ ๋ชจ์•„๋†“์€ ๊ฒƒ์œผ๋กœ ์ƒˆ๋กœ์šด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ ๋„ ํŠน์ • ๊ธฐ๋Šฅ์„ ์‰ฝ๊ฒŒ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ๋„๊ตฌ์ด๋‹ค.SPA(Single Page Application, ๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜)๋Š” HTML, CSS, JavsScript๋ฅผ ์ตœ์ดˆ 1ํšŒ๋งŒ ๋กœ๋“œํ•˜๊ณ , ์ดํ›„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ํ†ตํ•ด DOM ๋˜๋Š” HTML ํŒŒ์ผ์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ์‹์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. (๋น ๋ฅด๋‹ค)๊ณผ๊ฑฐ์—๋Š” ํŽ˜์ด์ง€ ์ด๋™์„ ํ•˜๊ฒŒ ๋˜๋ฉด HTML, CSS, Javascript ํŒŒ์ผ์„ ์„œ๋ฒ„์™€ ์ฃผ๊ณ ๋ฐ›๋Š” ํ†ต์‹ ์„ ํ•ด์•ผ.. 2025. 10. 23.
[Spring, React] ๐Ÿ‘‘ VIP ์ดˆ๋Œ€์žฅ ๋งŒ๋“ค๊ธฐ ๐Ÿ’Œ ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค์ง€ ๊ตฌ์ƒํ•ด๋ณด๊ธฐ. ์—ฐ๋ง์„ ๋งž์ดํ•˜์—ฌVIP ๋“ฑ๊ธ‰ ์ด์ƒ ๊ณ ๊ฐ๋ถ„๋“ค๊ป˜์ดˆ๋Œ€์žฅ์„ ๋ณด๋‚ด๋ ค๊ณ  ํ•œ๋‹ค!์–ด๋–ป๊ฒŒ ๋งŒ๋“ค์ง€ ๊ตฌ์ƒํ•ด ๋ณด์ž. 1. ๊ตฌ์ƒํ™”๋ฉด - ๊ณ ๊ฐ๊ณ ๊ฐ๋‹˜์ด ์ ‘์†ํ•  ํ™”๋ฉด๊ณ ๊ฐ์€ ํ•ด๋‹น ํŽ˜์ด์ง€์—์„œ ๋ฏธ๋ฆฌ ๋ฐ›์€ ๋น„๋ฐ€๋ฒˆํ˜ธ 4์ž๋ฆฌ๋ฅผ ์ž…๋ ฅํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๊ณ ๊ฐ์˜ ๋“ฑ๊ธ‰์— ๋งž๋Š” ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค. ๋“ฑ๊ธ‰์€ ์ด 3๊ฐœ๋กœ ๋˜์–ด์žˆ๋‹ค. VIP, VVIP, DIAMOND ์ฝ”๋“œ ์„ฑ๊ณต ํ™”๋ฉด๊ณ ๊ฐ์ด ์ œ๋Œ€๋กœ ๋œ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•  ๊ฒฝ์šฐ, ๊ณ ๊ฐ์˜ ์ด๋ฆ„์ด ํ‘œ์‹œ๋˜๋ฉด์„œ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค. ์ฝ”๋“œ ์‹คํŒจ ํ™”๋ฉด์ฝ”๋“œ์— ์‹คํŒจํ•˜๊ฒŒ ๋˜๋ฉด ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ํ™•์ธํ•ด ๋‹ฌ๋ผ๋Š” ๋ฌธ๊ตฌ๊ฐ€ ํ•˜๋‹จ์— ๋ฐฐ์น˜๋œ๋‹ค. - ๊ด€๋ฆฌ์ž๋กœ๊ทธ์ธ ํ™”๋ฉดid์— ๋”ฐ๋ผ ๊ด€๋ฆฌ์ž์˜ ๊ถŒํ•œ์ด ๋‹ฌ๋ผ์ง„๋‹ค. VIP ๋ช…๋‹จ ๊ด€๋ฆฌ ์˜ˆ์‹œ ๋ช…๋‹จ์˜ ๊ฐœ์ˆ˜๋Š” 30๋ช…์œผ๋กœ ์žก์•˜์œผ๋ฉฐ VIP 10๋ช…, VVIP 10๋ช…, DIAMOND 10๋ช…์ด ๋œ๋‹ค. ๋ช…๋‹จ ์ถ”๊ฐ€add ๋ฒ„.. 2025. 10. 21.
[React] http://localhost:5173/ ์ดˆ๊ธฐ ํ™”๋ฉด์„ ๋ถ„์„ํ•ด๋ณด์ž. ์ฐธ๊ณ ๋กœ React์— ๋Œ€ํ•ด์„œ ์ž˜ ๋ชจ๋ฆ…๋‹ˆ๋‹ค.์•„๋ฌด๊ฑฐ๋‚˜ ๋ง‰ ํ•ด๋ณด๋Š” ์ค‘์ด๊ณ  ์˜ณ์€ ์ •๋ณด์ธ์ง€ ์ €๋„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค! ์ดˆ๊ธฐ ํ™”๋ฉด๊ณผ ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ๋ถ„์„ํ•ด๋ณด์ž! 1. ํ™”๋ฉด ํ™”๋ฉด์„ ์‚ดํŽด๋ณด๋ฉด, Vite์™€ React ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€๊ฐ€ ์žˆ๋‹ค. ์ด๋•Œ React ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€๋Š” ๋น™๊ธ€๋น™๊ธ€ ํšŒ์ „ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  count is 0 ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด 0์ด ์ ์  ์˜ฌ๋ผ๊ฐ€๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. 2. ํŒŒ์ผ์ „์ฒด ํŒŒ์ผ jsx์™€ css์˜ ์ฐจ์ด์ jsx๋Š” ํ™”๋ฉด ๊ตฌ์กฐ์™€ ๋กœ์ง์„ ๋‹ด๋‹นํ•œ๋‹ค. ์–ด๋–ป๊ฒŒ ๋ฐฐ์—ดํ• ๊ฑด์ง€ ๊ทธ๋ฆฌ๊ณ  ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ• ๊ฑด์ง€ ์„ค์ •ํ•˜๋Š” ๋ถ€๋ถ„์ธ jsx ํŒŒ์ผ์ด๋‹ค. css๋Š” ์™ธํ˜•์„ ๊พธ๋ฏธ๋Š” ์„ค์ •์„ ํ•œ๋‹ค. ์ƒ‰์ƒ, ์—ฌ๋ฐฑ, ํฐํŠธ ๋“ฑ์„ ๋‹ด๋‹นํ•œ๋‹ค.Vue๋ฅผ ๋จผ์ € ์‚ฌ์šฉํ•œ ์ž…์žฅ์—์„œ ์•Œ์•„๋ณด๋‹ˆ, script์™€ template๊ฐ€ jsx ํŒŒ์ผ์„ ๋‹ด๋‹นํ•˜๊ณ  style.. 2025. 10. 13.
[Vite+React] WebStorm์œผ๋กœ React ์„ค์ •ํ•˜๊ณ  hello React ๊ธ€์”จ๋ฅผ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๊ธฐ. ์ฐธ๊ณ ๋กœ React์— ๋Œ€ํ•ด์„œ ์ž˜ ๋ชจ๋ฆ…๋‹ˆ๋‹ค.์•„๋ฌด๊ฑฐ๋‚˜ ๋ง‰ ํ•ด๋ณด๋Š” ์ค‘์ด๊ณ  ์˜ณ์€ ์ •๋ณด์ธ์ง€ ์ €๋„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค! React๋กœ hello,React๋ฅผํ™”๋ฉด์— ๋„์›Œ๋ณด์ž. 1. ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ โ–ก Vite๋กœ ์„ค์ •ํ•˜๊ธฐ โ–ก helloreact ์ด๋ฆ„ ์ž‘์„ฑํ•˜๊ธฐ โ–ก Template์—์„œ react ์„ค์ •ํ•˜๊ธฐ. โ–ก rolldown-vite [ No ] ๋ผ๊ณ  ์„ ํƒํ•˜๊ธฐ · rolldown: Vite์˜ ๋กค์—…/ESBuild ์ž๋ฆฌ๋ฅผ ๋Œ€์ฒดํ•  ์˜ˆ์ •์ธ Rust ๋ฒˆ๋“ค๋Ÿฌ(Rolldown) ๊ธฐ๋ฐ˜์˜ ์‹คํ—˜ ํŒจํ‚ค์ง€์ด๋‹ค. · ์•ˆ์ •/ํ˜ธํ™˜์„ฑ์ด ๋” ์ค‘์š”ํ•˜๊ฑฐ๋‚˜ ์ฒ˜์Œ ํ•™์Šตํ•˜๋Š” ๊ฒฝ์šฐ→ No · ์ƒˆ๋กœ์šด ๊ฒƒ ํ…Œ์ŠคํŠธ·๋นŒ๋“œ์†๋„ ์ฒด๊ฐ์ด ๋ชฉํ‘œ → Yes โ–ก Install with npm and start now?์—์„œ [ No ]๋ฅผ ์„ ํƒํ•œ๋‹ค. · ์ž˜ ๋ชจ๋ฅด๊ฒ ๋Š”๋ฐ ์—ฌ๊ธฐ์„œ.. 2025. 10. 4.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”