React 맛보기

by

반응??

라이브러리는 개발을 용이하게 하는 도구 모음입니다(= 도구).
프레임 워크는 인프라 (= 공장)로 구축됩니다.

React를 배워야 하는 이유

  1. 생태계(구글)는 크다
    기술에 대한 관심/실제 사용 빈도/사용자 수
    관련 라이브러리(도구)가 많이 있지만,
    문제를 해결하는 방법을 쉽게 찾을 수 있습니다.

    저와 같은 고민을 하신 분들이 많은데,
    실전에서 사용할 가능성이 매우 높습니다.
  2. 새로운 기술을 배우기에 좋은 출발점
  3. 생태계가 성숙함에 따라 분명한 기술적 이점이 있습니다.

DOM(문서 개체 모델)

문서를 논리 트리로 나타냅니다.

https://developer.mozilla.org/en/docs/Web/API/Document_Object_Model

순수 자바스크립트

특정 라이브러리나 프레임워크를 사용하지 않는 Javascript 독립 실행형
https://www.w3schools.com/ > https://codesandbox.io/
프런트엔드 코드를 작성하고 놀기 위한 샌드박스
React와 같은 다양한 환경에 대한 기본 설정이 설정됩니다.

콘텐츠 전송 네트워크

'추천 관련글,

샌드박스에서 React 사용
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

JSX와 Babel, JSX 다루기

<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script>
    const rootElement = document.querySelector("#root");
    const element = React.createElement(
      "h1",
      {
        className: "title",
        children: ("Hello, world!
", "It's me!
"),
      },
      "Hello, world!
"
    );
    ReactDOM.render(element, rootElement);
  </script>
</body>

JSX

텍스트도 HTML도 아닌 JavaScript 확장 구문
React.createElement 표현식
const element = <h1>Hello, world!
</h1>;

바벨

자바스크립트 컴파일러
컴파일러: 언어를 해석할 때 한 언어를 다른 프로그래밍 언어로 번역하는 프로그램입니다.

https://babeljs.io/ > https://unpkg.com/@babel/standalone/babel.min.js.