🔎 자바스크립트 코드 작성 방법 및 실행 방법
1. 내부 스크립트
<script>태그를 이용해 자바스크립트를 작성하는 것
2. 외부 스크립트
- 별도의 파일에 자바스크립트 코드를 작성하는 것
<script>태그의 src 속성을 이용해 외부 스크립트를 불러오는 것
궁금증
- 하나의
<script>태그에 내부 스크립트와 외부 스크립트를 동시에 작성하면 어떻게 될까?- 외부 스크립트와 내부 스크립트를 하나의
<script>태그 내에 작성하면 내부 스크립트가 제외된다.
- 외부 스크립트와 내부 스크립트를 하나의
- 하나의 html에는 내부 스크립트와 외부 스크립트 중 하나만 선택할 수 있는건가?
- 각각의 다른
<script>태그로 작성하면 된다. - 여러 개의 자바스크립트를 불러올 수 있다.
- 각각의 다른
3. 웹브라우저는 HTML과 JavaScript를 어떻게 가져올까?
- 웹브라우저는 위에서부터 순차적으로 html를 읽어나가며, html 다운로드를 시작한다.
- html 다운로드를 진행하다가 script를 만나면 script 다운로드와 실행을 진행한다.
- 이어서 계속 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 다운로드가 끝날 때까지 기다리니까?
- 자바스크립트의 주석에는 다 확인할 수 있기 때문에 민감한 것은 저장하지 마라.
📌 출처
프론트엔드를 공부하고 있는 학생입니다🐌