TIL 014 | JavaScript Basics

JU CHEOLJIN·2021년 7월 5일

JavaScript

목록 보기

1/13

이번에는 본격적으로 JavaScript를 공부하기 전에 기본적인 내용들에 대해서 간략하게 정리해보고자 한다. 사용자와 소통할 수 있는 멋진 웹을 위해 열심히 공부해보고 싶다.

JavaScript

JavaScript는 동적인 웹사이트를 제작하기 위해서 탄생한 Script 언어이다. Script 언어란 기존에 존재하는 어플리케이션을 제어하기 위한 언어로 JavaScript는 웹 브라우저에서 DOM 요소를 제어하는 등의 역할로 사용되고 있다. 결론적으로, 동적이고 멋진 웹을 만들기 위해서는 JavaScript는 필수적인 요소라고 생각하면 된다.

1. 적용법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>example</title>
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>

위의 기본 방식으로 <head> 안에 <script>를 넣게 되면 HTML을 해석하다가 멈추고 main.js를 다운로드 하게 된다. 그 이후 main.js를 실행하고 나머지 HTML을 해석한다. 당연히도 위와 같은 방식에는 사용자가 웹페이지를 보는데 있어 js 파일의 용량이 클수록, 인터넷 속도가 느릴 수록 많은 시간이 걸린다는 단점이 있다. 그렇기 때문에 그렇게 권장되는 방법은 아니다. 그렇다면 어떤 방법을 사용하면 좋을까?

body 마지막에 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>example</title>
  </head>
  <body>
    <p>content</p>
    <script src="main.js"></script>
  </body>
</html>

이 방식은 사용자가 바로 정보적인 요소를 접할 수 있다는 장점은 있지만 JavaScript의 의존성이 높은 페이지의 경우에는 의미있는 페이지를 보기 위해서 시간이 오래걸릴 수 있다는 단점이 있다. 더 나은 방법은 없을까?

head 안에 async와 함께

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>example</title>
    <script asyn src="main.js"></script>
  </head>
  <body>
  </body>
</html>

<head> 안에 asyn 속성과 함께 넣는 경우이다. 이 방법은 HTML을 parsing 함과 동시에 main.js를 다운로드 하기 때문에 시간을 절약할 수 있다는 장점이 있다. 하지만, 언제든지 main.js를 실행하기 위해 parsing을 멈출 수 있어서 여전히 시간이 소요되는 부분이 있고 JavaScript과 DOM 요소 등을 조작할 때 해당 HTML이 parsing이 끝나지 않았을 위험이 있다.

head 안에 defer와 함께

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>example</title>
    <script defer src="main.js"></script>
  </head>
  <body>
  </body>
</html>

이번에는 <head> 안에 defer 속성과 함께 넣는 방법이다. 이 방법은 HTML을 parsing 하는 동안에 main.js를 다운로드 해서 준비했다가 parsing이 끝나는 순간에 main.js를 실행한다. 다운로드에 소요되는 시간도 없앴으며 페이지 parsing이 끝나는 순간에 JavaScript과 실행되기 때문에 이전의 단점들도 없앤 방법이다. 가장 권장하고 싶은 방법이다.

'async' vs 'defer'

위의 예시들을 통해서 async 와 defer 의 큰 차이점이 실행시점이라는 것을 알 수 있다. 만약 js 파일이 한개가 아니라 여러개라면 어떻게 될까? async를 사용한 경우에는 다운로드가 끝나는 순서대로 실행되게 된다. 즉, script를 정의한 순서와는 별개로 파일의 용량 등이 영향을 주게 된다.

defer를 사용한다면 이런 점을 고칠 수 있다. defer의 경우에는 parsing이 끝난 후에 실행하기 때문에 우리가 script를 정의한 순서대로 js를 실행할 수 있다.

2. Use strict

JavaScript 는 매우 유연하게 동작하는 언어이다. 유연하다는 것은 좋은 의미르 느껴질 수도 있지만 때로는 매우 위험한 뜻일 수도 있다. 선언하지 않은 변수에 값을 할당한다거나 선언 위치와 상관 없이 호출을 할 수 있는 등, 상식적이지 못한 일들도 가능해지기 때문이다. 그렇기에 ES5 이후부터는 이런 위험성을 제거하기 위해 여러 요소들이 추가됐는데 유연성을 줄이고 상식적으로 코딩을 하는데 도움이 되는 것이 바로 use strict이다. 이를 시작부분에 선언해주면 선언 없이 변수에 할당하는 것 같은 행동들에 오류메세지를 보여주게 된다.