JS | HTML과 Javascript 연결하기

DongHee Kim·2021년 7월 7일
1

Javascript

목록 보기
1/9
post-thumbnail

HTML에 Javascript를 연결하는 방법

HTML에 Javascript를 연결하기 위해선 기본적으로 아래 코드를 해당 HTML에 입력한다.

<script src="파일명.js"> </script>

다만 이 때 코드의 위치옵션에 따라 각기 다른 특징을 가진다.
그렇다면 각 방법의 특징과, 어느 방법이 가장 최선일지도 함께 알아보자.
각 방법은 위치, 옵션에 따라 총 4가지로 나뉘어진다.



용어 정리

우선 각 방법의 실행 순서 이해를 위해 알아둘 용어들이 있어 정리해본다. ( * Parsing(파싱)과 fetching(패칭)은 영문과 국문을 번갈아 쓸 예정 😅 )

Parsing (파싱)

처음 들어본 개념인 Parsing(파싱)은 Parser(파서)에 대한 이해에서부터 시작된다.

Parser(파서)는 컴파일의 일부로서 [원시 프로그램의 명령문이나 온라인 명령문, HTML 문서 등에서 Markup Tag등] 을 '입력'으로 받아들인 뒤, [구문을 해석할 수 있는 단위와 여러 부분]으로 '분할'해주는 역할을 한다.
정리하자면, 원시프로그램 Markup Tag >> (입력) >> Parser >> (분할) >> 구문을 해석할 수 있는 단위

Parsing(파싱)은 이러한 파서(parser) 역할을 하는 컴퓨터가 구문 트리(parse tree)로 재구성하는 구문 분석 과정을 뜻한다 고 하는데.. 너무 사전적인 정의라고 느껴져 현 상황에선 정확히 와닿지 않았다.

쉬운 말로 다시 말하자면, Parsing(파싱)은 페이지(ex. html)에서 내가 원하는 데이터를 특정 패턴/순서로 추출해 정보로 가공하는 것! 이 과정에서 부호에 불과했던 일련의 문자열이 기계어로 번역되고, 결국 의미있는 단위가 된다.
광산에서 돌을 캐낸 뒤 그 중 원석(원하는 데이터)을 골라내어 보석(정보)으로 가공해내는 과정과 비슷하다고 생각하면 된다.

아래의 실행순서 란에서 parsing html이란 단어가 여러 번 나오는데, html 페이지가 완성된다는 의미로 참고하면 좋을 듯 하다.

fetching (패칭)

가져오는 것

executing

실행시키는 것

👉위의 두 개념은 상대적으로 익숙한 개념이였다.
데이터를 메모리에서 가져(fetch)와서, 실행(execute)시킨다.


1. <head>

<head>안에 코드 입력

<head>
    <script src="파일명.js"></script>
</head>

실행 순서

parsing HTML ▶ fetching JS ▶ executing JS ▶ parsing HTML (page ready)

단점

JS 패칭/실행까지 모두 완료되어야 HTML 파싱이 완료되므로, JS 파일이 무겁고 인터넷이 느리다면 웹사이트 로딩이 느려진다.


2. <body>

<body>의 끝 부분에 코드 입력

<body><script src="파일명.js"></script>
</body>

실행 순서

parsing HTML (page ready) ▶ fetching JS ▶ executing JS

단점

HTML파싱이 먼저 되므로 사용자가 기본적인 컨텐츠는 빨리볼 수 있지만, JS에 의존적인 페이지라면 정상적인 웹사이트를 보기 전까지 대기시간이 길어진다.


3. <head> + async

<head>안에 asyn 옵션(비동기 처리) 추가

<head>
    <script asyn src="파일명.js"></script>
</head>

실행 순서

parsing HTML & fetching JS ▶ executing JS ▶ parsing HTML (page ready)

장점

JS가 병렬적으로 패치/실행되므로 다운로드 시간이 절약된다.

단점

비동기 방식인지라 정의된 스크립트 순서와 상관없이 다운로드 되는 순서대로 실행된다.
ex. a.js ▶ b.js ▶ c.js 순서로 실행되어야하는 JS여도 다운로드 순서대로 실행되기 때문에 문제가 생길 수 있다.


4. <head> + defer

<head>안에 defer옵션 (페이지가 모두 로드된 후에 외부 스크립트 실행) 추가

<head>
   <script defer src="파일명.js"></script>
</head>

실행 순서

parsing HTML & fetching JS (page ready) ▶ executing JS
(HTML 파싱 동안 JS는 패칭만 해두고, HTML 다운완료시 JS 실행)

장점

HTML파싱과 JS패칭이 함께 이루어지고, 그 이후에야 JS가 실행되기 때문에 (async과 달리) JS가 원하는 순서대로 실행될 것임을 예상할 수 있다.


그렇게 최선의 방법을 알게되었다.
HTML과 JS를 연결할 땐 <head> + defer 옵션을 사용하자!


use strict 선언

이건 보너스 개념✨
(특히) 바닐라JS를 이용할 때, 가장 위에 ‘use strict’;를 선언하고 시작하자.

JS의 Flexible함은 때로는 독이 될 수 있다.
(ex. 변수선언을 하지 않더라도 a=10;b=10;을 입력하면 a+b=20;이 나온다던가 그런..다른 언어 개발자들이 본다면 뭐지?싶을듯한..! )

때문에 그런 것들을 차단하는! strict 모드로 개발하도록 선언하는 것이 필요하다.
좀더 상식적인 범위에서 JS를 이용하고, JS엔진도 더 효율적으로 돌아가도록 할 수 있다.


참고자료
드림코딩 자바스크립트
킹포도의 코딩 - 1.Parsing이란 무엇인가?
사이언스올

profile
일상의 성실이 자존감을 만드는 성취주의자

2개의 댓글

comment-user-thumbnail
2021년 7월 9일

parsing 에 대해서 해석이구나 하면서 가볍게 넘어갔는데 🥲
"광산에서 돌을 캐낸 뒤 그 중 원석(원하는 데이터)을 골라내어 보석(정보)으로 가공해내는 과정과 비슷하다고 생각하면 된다." 표현이 이해하는데 도움이 많이 됐습니다!! 👍

1개의 답글