22.05.04 Part10
React
DOM 다루기 Element 생성하기
Document Object Model - 문서를 논리 트리로 표현한다.
MDN-DOM
순수 자바스크립트 - 특정 라이브러리나 프레임워크를 사용하지 않은 그 자체의 자바스크립트
w3schools
CodeSandBox - 프론트엔드 코드를 작성하고 이것저것 시도해 볼 수 있는 모래상자(놀이도구), React 등 다양한 환경에 대한 기본 설정이 되어있음
codesandbox
CDN(Content Delivery Network) - 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템
react-cdn
index.html - js
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = document.createElement("h1");
element.textContent = "hello world";
rootElement.append(element);
</script>
</body>
</html>index.html - React
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", {children: "Hello world"});
ReactDOM.render(element, rootElement)
</script>
</body>
</html>정리
DOM 다루기 / Element 생성하기 정리
CodeSnadBox -> 리액트 맛보기 동안 사용할 도구
Vanilla js Dom -> W3chools / createElement
CDN -> unpkg
React / React-dom -> element 생성 / appendChild
