๐Ÿ“š Study/JS, JQuery

#1 React JS๋ฅผ ๋ฐฐ์›Œ์•ผํ•˜๋Š” ์ด์œ  [React JS ์˜ํ™”์›น์‚ฌ์ดํŠธ]

kkh1902 2022. 1. 24. 18:09
728x90
๋ฐ˜์‘ํ˜•

ํŽ˜์ด์Šค๋ถ์€ ์—ฌ์ „ํžˆ React JS๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.

์ธ์Šคํƒ€๊ทธ๋žจ, ํ•€ํ„ฐํ…Œ์ŠคํŠธ, ์šฐ๋ฒ„, ๋„ทํ”Œ๋ฆญ์Šค ์ด๋Ÿฐ ์‚ฌ์ดํŠธ๋“ค๋„ React JS๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

1.1 Why React

ํŽ˜์ด์Šค ๋ถ์ด React JS๋ฅผ ๋งŒ๋“ค์—ˆ๊ณ , ์ด๊ฑธ๋กœ ํŽ˜์ด์Šค๋ถ ์›น์‚ฌ์ดํŠธ ์ „๋ถ€๋ฅผ ๋‹ค์‹œ ๋งŒ๋“ค์—ˆ๋‹ค.

React JS๋Š” ์ •๋ง ํฐ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

React JS๋Š” Javascript์™€ ์•„์ฃผ ๊ฐ€๊น๊ธฐ ๋•Œ๋ฌธ์—, React JS๋กœ ์ž‘์—…ํ•  ๋•Œ ๋Œ€๋ถ€๋ถ„์˜ ์ž‘์—…์€ ๊ทธ๋ƒฅ ์ผ๋ฐ˜ Javascript์— ๋Œ€ํ•œ ์ž‘์—…์ด๋‹ค.

 

React JS๋Š” Javascript์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ฑฐ์˜ ๋‹ค ๋นŒ๋ ค์™”๋‹ค.

์ด ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ๊ฑฐ๋Œ€ํ•˜๋‹ค.

React JS๋ฅผ ๋ฐฐ์šฐ๊ณ  ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์€ ์—ฌ๋Ÿฌ๋ถ„์„ ๋” ์•„๋Šฅ Javascript ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋„๋ก ํ•˜๊ธฐ ๋•Œ๋ฌธ์— 

 

React JS๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ œ์ž‘๋œ framework๋“ค์ด ์žˆ๋‹ค 

ํŽ˜์ด์Šค๋ถ ํŒ€์€ React native๋ผ๋Š” ๋„๊ตฌ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. 

์ด๊ฑด ์šฐ๋ฆฌ๊ฐ€ iOS๋‚˜ ์•ˆ๋“œ๋กœ์ด๋“œ ์–ดํ”Œ์„ React Js์ฝ”๋“œ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

 Requirement

Html, CSS, Javascript (  vanilla javascript)

๋‚˜์ค‘์— Node JS๋กœ ๋ฌด์–ธ๊ฐ€๋ฅผ ํ•  ๊ฒƒ์ด๋‹ค.

https://developer.mozilla.org/ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript

 

JavaScript ์žฌ์ž…๋ฌธํ•˜๊ธฐ (JS โ€‹ํŠœํ† ๋ฆฌ์–ผ) - JavaScript | MDN

์–ด์งธ์„œ ์žฌ์ž…๋ฌธ์ผ๊นŒ์š”? ์™œ๋ƒํ•˜๋ฉด, JavaScript๋Š” ์„ธ๊ณ„์—์„œ ๊ฐ€์žฅ ์˜คํ•ด๋ฐ›๊ณ  ์žˆ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ ์•…๋ช…์ด ๋†’๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ข…์ข… ์žฅ๋‚œ๊ฐ๊ฐ™๋‹ค๊ณ  ์กฐ๋กฑ๋‹นํ•˜๊ธฐ๋„ํ–ˆ์ง€๋งŒ, ์ด ๊ฑฐ์ง“๋ง๊ฐ™์€ ๋‹จ์ˆœํ•จ ์•„๋ž˜์—

developer.mozilla.org

 

๊ฐ€์žฅ ๋‹จ์ˆœํ•œ React ์˜ˆ์‹œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

์œ„ ์ฝ”๋“œ๋Š” ํŽ˜์ด์ง€์— “Hello, world!”๋ผ๋Š” ์ œ๋ชฉ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•