Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
ECMAScrit 최신버전 코드 작성 후
모든 브라우저에서 동일하게 배포해주기 위해 코드를 변환해주는것
Babel은 JSX를 실습할 수 있는 환경을 제공합니다. 왼쪽 텍스트 필드에 JSX 코드를 입력하면, 오른쪽 텍스트 필드에 Virtual DOM을 구성하는 JavaScript 코드가 출력되는 것을 확인할 수 있습니다.
SPA(Single Page Application)
어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.
SPA 프레임워크 ( React Javascript NGULAR Vue 사용)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script asyn src="ex.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="ex.js"></script>
</head>
<body>
</body>
</html>
html에서 js 첨부 시 head 태그에 defer태그로 첨부하는 것이
데이터 불러오는데 속도가 빠르다.
[ js에서 ]
'use strict';
consol.log('hellow world')
'use strict';
순수 바닐라 자바스크립트 사용 시 사용하면 좋음
자바스크립트에서 선언하지 않은 변수의 값을 할당 시 오류를 막아줌
비상식적인 코드 작성을 예방해줌
'Frontend > Javascript' 카테고리의 다른 글
| [JavaScript #2] data types, let const, hoisting, ES6 (0) | 2022.09.12 |
|---|
