๋ฐ˜์‘ํ˜•
kkh1902
Steadily
kkh1902
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (151)
    • ๐Ÿ“š Study (1)
      • Spring (9)
      • Java (2)
      • Html, css (10)
      • JS, JQuery (29)
      • DB (5)
      • DevOps (13)
      • roadmap (2)
      • Architecture (1)
      • Flutter (2)
    • ๐Ÿ’ป Computer Science (28)
      • Datastructure (0)
      • Algorithm (2)
      • Design pattern (0)
      • Network (1)
      • DB (13)
      • Operating System (0)
      • Software Engineering (4)
      • CS interview (5)
      • topcit (3)
    • โš’๏ธ Etc (4)
      • Error (3)
      • Trouble_Shooting (1)
    • ๐Ÿ“ฐ News (0)
      • daily (7)
      • think (17)
    • ๐Ÿ“˜ Hobby (13)
      • English (13)
    • ๐Ÿค– AI (7)
      • ML (7)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ๐Ÿ“‹ ์ด๋ ฅ์„œ
  • โšก๏ธ ๊นƒํ—ˆ๋ธŒ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • git stash
  • ์†Œํ”„ํŠธ์›จ์–ด ๊ณตํ•™ #project๋งŒ๋“ค๋•Œ ์ค‘์š”
  • junit5
  • Wonder # word
  • gitaction
  • Linear Regression
  • ์†Œํ”„ํŠธ์›จ์–ด ๊ณตํ•™ # chapter1
  • React๋ฅผ ๋ฐฐ์›Œ์•ผํ•˜๋Š” ์ด์œ 
  • React JS # 2 The Basic of React
  • React # JSX
  • React JS # ์ž์Šต์„œ # Component์™€ Props
  • Flutter
  • Qr_payment project # CSS ํ•ด์„ # Basic ๋งจ์œ„ ํ•ด์„
  • React JS #์ž์Šต์„œ
  • SpringBootTest
  • think #bootstrap์„ ์จ์•ผํ•˜๋Š” ์ด์œ 
  • testcode
  • sourcetreee
  • db
  • git

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

250x250
hELLO ยท Designed By ์ •์ƒ์šฐ.
๊ธ€์“ฐ๊ธฐ / ๊ด€๋ฆฌ์ž
kkh1902

Steadily

#1  React JS๋ฅผ ๋ฐฐ์›Œ์•ผํ•˜๋Š” ์ด์œ  [React JS ์˜ํ™”์›น์‚ฌ์ดํŠธ]
๐Ÿ“š Study/JS, JQuery

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

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
๋ฐ˜์‘ํ˜•

'๐Ÿ“š Study > JS, JQuery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[React JS][๋‹ˆ์ฝ” ์ฝ”๋”ฉ] STATE  (0) 2022.02.17
[React JS][๋‹ˆ์ฝ” ์ฝ”๋”ฉ] THE BASICS OF REACT  (0) 2022.01.29
[React JS]Components์™€ Props  (0) 2022.01.29
[REACT JS] ์—˜๋ฆฌ๋จผํŠธ ๋ Œ๋”๋ง  (0) 2022.01.29
JSX๋ž€? (์ •์˜, ์žฅ์ , ๋ฌธ๋ฒ•)  (0) 2022.01.24
    '๐Ÿ“š Study/JS, JQuery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [React JS][๋‹ˆ์ฝ” ์ฝ”๋”ฉ] THE BASICS OF REACT
    • [React JS]Components์™€ Props
    • [REACT JS] ์—˜๋ฆฌ๋จผํŠธ ๋ Œ๋”๋ง
    • JSX๋ž€? (์ •์˜, ์žฅ์ , ๋ฌธ๋ฒ•)
    kkh1902
    kkh1902
    1Day 1 Commit ๋ชฉํ‘œ ๊ณต๋ถ€ํ•œ๊ฒƒ๋“ค ๋งค์ผ ๊ธฐ๋กํ•˜๊ธฐ

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