[데브코스/TIL] DAY8 - JavaScript(1)

Minha Ahn·2024년 10월 21일
0

데브코스

목록 보기
6/22
post-thumbnail

🔎 자바스크립트 코드 작성 방법 및 실행 방법

1. 내부 스크립트

  • <script> 태그를 이용해 자바스크립트를 작성하는 것

2. 외부 스크립트

  • 별도의 파일에 자바스크립트 코드를 작성하는 것
  • <script> 태그의 src 속성을 이용해 외부 스크립트를 불러오는 것

궁금증

  • 하나의 <script> 태그에 내부 스크립트와 외부 스크립트를 동시에 작성하면 어떻게 될까?
    • 외부 스크립트와 내부 스크립트를 하나의 <script> 태그 내에 작성하면 내부 스크립트가 제외된다.
  • 하나의 html에는 내부 스크립트와 외부 스크립트 중 하나만 선택할 수 있는건가?
    • 각각의 다른 <script> 태그로 작성하면 된다.
    • 여러 개의 자바스크립트를 불러올 수 있다.

3. 웹브라우저는 HTML과 JavaScript를 어떻게 가져올까?

  1. 웹브라우저는 위에서부터 순차적으로 html를 읽어나가며, html 다운로드를 시작한다.
  2. html 다운로드를 진행하다가 script를 만나면 script 다운로드와 실행을 진행한다.
  3. 이어서 계속 html를 다운로드 한다.

4. 스크립트 작성 위치

  • <html> 태그에는 <head><body>만 직속 자식으로 존재해야 한다. 즉, 다른 태그들이 <html> 태그의 직속 자식으로 존재할 수 없다.
    • 정상적으로 실행이 되던데 => 웹 브라우저가 엉망으로 만든 코드를 자동으로 처리해주기 때문이다.

궁금해서 테스트해봤다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      console.log("Hello World");
    </script>
  </head>
  <script>
    console.log("Hello World");
  </script>
  <body>
    <h1>hello</h1>
  </body>
</html>

와우....!!!!!! <head><body> 사이에 넣었는데 알아서 <head> 태그에 넣어주었다.


<head> 태그 안에 작성

  • html를 다운로드 하다가 <script> 태그를 만나면 html 다운로드를 일시 중단한다.
  • 자바스크립트 다운로드를 진행한다.
  • 자바스크립트의 다운로드가 완료되면 실행을 한다.
  • 자바스크립트의 실행이 완료되면 html 다운로드를 다시 진행한다.
  • 만약 자바스크립트에서 html 요소를 다루려고 한다면, 필요한 html 요소(body 태그 내부)를 다운로드 하지 못한 상태이기 때문에 에러가 발생한다.

<body> 태그 앞단에 작성

  • <head> 태그에 작성한 것과 동일하다.

<body> 태그 중간에 작성

  • 만약 html 요소를 다루는 자바스크립트 파일이라면 실행을 장담할 수 없다. 다뤄야 하는 html 요소가 아직 다운로드 되지 않았을 수도 있기 때문이다.

<body> 태그 마지막에 작성

  • html 다운로드가 끝나고 자바스크립트 파일을 다운로드 및 실행한다.
  • html 다운로드에 영향을 주지 않는다.
  • 전통적인 웹 개발의 스크립트 개발 방식이다.

5. async & defer

  • 해당 옵션들을 <script> 태그에 작성 가능하다.
  • 외부 스크립트 방법에서만 사용이 가능하다.
  • 두 가지를 동시에 사용할 수 없다.

async

  • html를 다운로드 하는 동시에, <script> 태그를 만나면 html과 자바스크립트 파일이 병렬(함께)로 다운로드 된다. (자바스크립트 개수가 몇개든 동시에 다운로드 된다.)
  • 자바스크립트 파일의 다운로드가 완료되면 html 다운로드는 잠시 중단하고 자바스크립트를 실행한다.
  • 자바스크립트의 실행이 완료되면 다시 html 다운로드를 진행한다.
  • 단점이 존재한다.
    • 자바스크립트 파일이 여러개 존재하며, 실행 순서를 정해야할 때 원하는 순서대로 실행이 되지 않는다.
    • 먼저 다운로드가 완료된 자바스크립트 파일부터 실행을 시작한다. (순서 보장 X)
  • 질문) 자바스크립트가 여러개가 존재하여 하나가 실행되는 동안 다른 자바스크립트의 다운로드나 실행도 병렬적으로 진행되는가?
    • 다운로드는 병렬적으로 진행되나, 실행은 병렬적이지 않다.
  • html 태그를 조작하지 않는다는 것이 보장되어 있다면 async가 엄청 도움된다.

defer

  • html를 다운로드 하는 동시에, 자바스크립트도 병렬로 다운로드 된다.
  • 자바스크립트의 다운로드가 완료되면 바로 실행시키는 것이 아니라, html 다운로드가 완료될 때까지 대기한다.
  • html 다운로드가 완료되면 자바스크립트를 순차적으로 실행한다.
  • 이 방식은 <head> 태그에 작성해야 장점을 적극 활용하는 것이다. (다운로드를 빨리 시작해야지!)

✨ JavaScript

1. 변수

변수와 상수

  • 변수 : 변할 수 있는 수
  • 상수 : 변하지 않는 수 (재할당 불가능)
  • 키워드를 사용하여 선언

키워드

  • var : 중복 가능 / 재할당 가능
  • let : 중복 불가능 / 재할당 가능
  • const : 중복 불가능 / 재할당 불가능

관용적 규칙

  • 식별자는 영문으로만 작성 (한글X)
  • 식별자는 의미있게 작명
  • 식별자 표기법 => 카멜케이스(mySchool) or 파스칼케이스(MySchool)
    • 모두 카멜케이스로
    • 클래스와 생성자 함수 식별자는 파스칼 케이스
    • 상수는 언더스코어 스네이크

2. 자료형

일반 자료형

  • 숫자, 문자열, 논리형, undefined, null, 심볼
    • 숫자 : 2진수(0b숫자), 8진수(0o숫자), 16진수(0x숫자) 모두 10진수로 읽음

참조 자료형

  • 객체, 배열, 함수



✏️ 메모

  • lodash.js (용량이 큰 JS 코드 있음)
  • 스크립트 태그 다운로드한 시간 체크 : 개발자도구 DOMContentLoaded 시간 보면 됨
    • async: 극단적으로 시간이 줄어듦
    • defer: 많이 느려요. html 다운로드가 끝날 때까지 기다리니까?
  • 자바스크립트의 주석에는 다 확인할 수 있기 때문에 민감한 것은 저장하지 마라.
profile
프론트엔드를 공부하고 있는 학생입니다🐌

0개의 댓글