1. 웹페이지에서 JavaScript가 하는 일
1) 브라우저 보안
각각의 브라우저 탭이 독립적으로 실행된다.
서로에게 분리되어 한 탭의 코드가 다른 탭의 코드에 직접적인 영향을 줄 수 없음을 뜻한다.
2) JavaScript 실행 순서
일반적으로 코드가 위에서 아래로 실행되기 때문에 코드 배치 순서에 주의해야 한다.
para.textContent = `Player 1: ${player_name}`;
const para = document.querySelector('p');이와 같이 코드를 배치하면 선언 전에 para 변수를 사용하므로 문제가 된다.
3) 인터프리터와 컴파일러
-
인터프리터 :
코드를 위에서 아래로 실행하고 코드 구동 결과가 즉시 반환되며 코드를 실행하기 전에 다른 형태로 변환할 필요가 없다. -
컴파일러:
컴퓨터가 코드를 실행하기 전에 다른 형태로 변환(컴파일) 해야한다.
ex) c/c++ 코드 -> 기계언어
JavaScript는 인터프리터를 사용하는 언어.
4) 서버 사이드와 클라이언트 사이드 코드
-
서버 사이드 코드 : 서버에서 동작하는 코드
ex) php, jacascript, python... -
클라이언트 사이드 코드 :
사용자의 컴퓨터에서 동작하는 코드.
웹페이지에 방문하면 브라우저가 페이지 내의 클라이언트 사이드 코드를 다운로드하고 실행해서 화면에 띄운다.
5) 동적 코드와 정적 코드
-
정적인 페이지 : 항상 같은 콘텐츠만 보여준다.
-
동적인 페이지: 서로 다른 상황에 서로 다른 화면을 보여준다.
2. 웹페이지에 JavaScript를 넣는 방법
1) 내부 JavaScript
<head>태그 안에 <script>태그를 삽입
<script>
// JavaScript goes here
</script>2) 외부 JavaScript
내부 JavaScript 방식에서는 <script>태그 안에 썼던 코드를 script.js 파일에 저장하고 <script>요소를 아래 코드로 대체한다.
<script src="script.js" defer></script>3) 인라인 JavaScript
html 코드 내부에 포함된 JavaScript
<button onclick="createParagraph()">Click me!</button>
👉 해당 button을 클릭하면 createParagraph 메소드를 호출하는 코드
👉 html <button>태그 안에 onclick="createParagraph()" javascript 코드를 포함하고있다.
👉 모든 버튼마다 일일히 onclick="createParagraph()" 를 추가해야한다.
*비효율적인 방법이므로 되도록 사용하지 말자
4) onclick 대신 addEventListner 사용하기
const buttons = document.querySelectorAll('button');
// 모든 버튼을 선택
for (const button of buttons) {
button.addEventListener('click', createParagraph);
}페이지 내에 버튼이 몇 개가 있더라도 모든 버튼에 대해 동작한다.
3. 스크립트 로딩 전략
페이지의 모든 html은 순서 그대로 불러오기 때문에 스크립트를 적절한 시점에 불러오지 않으면 해당 요소를 포함한 html 코드보다 javascript를 먼저 불러와버려서 코드가 올바르게 동작하지 못한다.
1) 고전적인 방법
스크립트 요소를 본문 맨 마지막에 배치하는 방법
👉 html dom을 모두 불러오기 전에는 스크립트의 로딩과 분석이 완전히 중단되어 성능이 저하될 수 있다.
렌더링: 웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차
2) async
스크립트를 가져오는 동안 페이지 로딩을 중단하지 않지만
스크립트 다운로드가 끝나면 스크립트를 바로 실행하고 로딩을 중단한다.
<script async src="script.js"></script>3) defer
페이지 콘텐츠를 모두 불러오기 전까지(</html>태그를 만나기 전까지) 스크립트를 실행하지 않는다.
<script defer src="script.js"></script>4) async, defer 공통점, 차이점
-
공통점: 브라우저가 페이지의 다른 내용을 불러오는 동안 스크립트를 불러와도 페이지 로딩이 중단되지 않는다.
-
차이점:
async 특성을 지정하면 스크립트 다운로드가 끝나는 즉시 스크립트를 실행하고 스크립트 실행 도중에는 페이지 로딩을 중단한다. 실행 순서는 보장되지 않는다.
defer 특성을 지정한 스크립트는 순서를 유지한 채 가져오며 모든 콘텐츠를 다 불러온 뒤 실행한다.
