JavaScript 기본 및 설정

Roxylife 2021. 8. 24. 15:51

JavaScript를 왜 사용할까?

프론트엔드에서만 가능
액티브한, 반응형 웹페이지를 구현 ex. game, three.js

JavaScript 설정

HTML 환경 특성상 코드가 적혀있는 순서대로 쭉 읽어서 내려 오기 때문에,
그 특성을 고려하지 않고 코드를 작성하고 나면
내가 원하는 대로 페이지에 나오지 않을 수 있는 상황이 생길 수 있다.
그래서 JavaScript 파일을 불러올 때는 defer 를 활용해 불러오는 것이
가장 좋은 방법이라고 한다.

<head> <script defer src="script.js"></script> </head>

실제 기본적인 Setting

<!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="variable.js"></script>
  </head>
  <body></body>
</html>

JS 파일에는 변수를 설정하는 코드를 사용하는 경우가 많은데,
이때, 가장 상단에 'use strict'! 를 선언해 주는 것이 좋다고 한다.
이걸 설정해 주면 내가 지정하지 않은 변수를 사용하게 되면
오류가 발생하기 때문에 비상식적인 출력을 막아주는 역할을 한다고 한다.
물론 html 내에서 type 을 통한 선언을 할 시에는 선언할 필요가 없지만 말이다.

// Whole-script strict mode syntax
// JavaScript is very flexible
// flexible === dangerous
// added ECMAScript 5
"use strict";

console.log("Hello World!");

let a;
a = 6;

이유

1. <script>를 <head> 안에 넣을 경우

js 다운, 적용 후 html요소가 만들어지기 때문에 사용자가 웹페이지를 보는 속도가 느림

2. <script>를 <body> 안에 넣을 경우

html 요소가 만들어지고 난 후 js를 다운 적용 하기 때문에 웹페이지를 빠르게 보이지만 페이지가 js에 의존적이면 유저가 빠르게 정상적인 페이지를 보기는 어려울 수 있음

3. <script async>

html 요소가 만들어질때 병렬적으로 다운받을 수 있다는 장점이 있지만, html 요소가 모두 만들어지기 전에 js가 적용되기 때문에 오작동 가능성 있음

4. <script defer>

html 요소가 만들어질때 병렬적으로 다운받을 수 있고, 적용은 html이 모두 만들어 진 후 하므로 최적의 방법

'use strict' ㄴ오류를 내어 비상식적인 프로그래밍을 막아줌