이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.
JavaScript란?
JavaScript(자바스크립트)는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.
HTML과 CSS가 웹 페이지의 구조(HTML)와 디자인(CSS)을 담당한다면,
JavaScript는 사용자와의 상호작용(Interaction)을 담당합니다.
✅ JavaScript의 주요 특징
- 인터프리터 언어
- 코드를 한 줄씩 해석하며 실행 (컴파일 과정이 없음).
- 동적 타입 (Dynamic Typing)
- 변수 선언 시 데이터 타입을 지정할 필요 없음 (var, let, const 사용).
- 이벤트 기반 프로그래밍
- 사용자의 행동(클릭, 입력 등)에 따라 코드 실행 가능.
- 비동기 처리 지원 (Asynchronous Processing)
- setTimeout, Promise, async/await 등을 사용해 비동기 작업 처리.
- 객체 지향 프로그래밍 (OOP) 가능
- 객체를 활용한 코드 구조화 가능 (class, prototype).
JavaScript 콘솔 출력하기
JavaScript에서 결과를 확인하려면 console.log()를 사용합니다.
console.log("Hello, JavaScript!"); // 콘솔에 출력✅ 개발자 도구 콘솔 확인 방법
- Chrome 브라우저에서 F12 또는 Ctrl + Shift + I
- Console(콘솔) 탭 클릭
- console.log()로 출력된 값 확인
script 태그와 async, defer의 차이
웹 페이지에서 JavaScript를 로드하는 방법에는 세 가지가 있습니다.
1. 기본 script 태그
<script src="main.js"></script>- 브라우저가 HTML을 위에서 아래로 읽다가 script 태그를 만나면 실행을 멈추고, 해당 JavaScript 파일을 다운로드 후 실행.
- JavaScript 파일이 크면 웹 페이지 로딩 속도가 느려질 수 있음.
- 따라서 <head>에 넣는 것은 비효율적.
2. async 속성
<script src="main.js" async></script>- HTML 파싱과 동시에 JavaScript를 다운로드하고 즉시 실행.
- 여러 개의 async 스크립트가 있으면 다운로드가 완료된 순서대로 실행(순서 보장 X).
- 사용 예: 독립적인 기능의 JavaScript 파일(ex. 광고 스크립트).
3. defer 속성
<script src="main.js" defer></script>- HTML 파싱과 동시에 JavaScript 다운로드.
- HTML 파싱이 끝난 후 실행됨 (DOM이 완전히 로드된 후 실행).
- 여러 개의 defer 스크립트는 HTML 문서의 순서대로 실행됨.
- 사용 예: DOM 조작이 필요한 JavaScript.
✅ async vs defer 비교
| 속성 | HTML 파싱 | 스크립트 다운로드 | 실행 시점 | 실행 순서 보장 |
| 기본 script | 중단됨 | 즉시 | 즉시 | O |
| async | 병렬 진행 | 즉시 | 다운로드 완료 후 | X |
| defer | 병렬 진행 | HTML 파싱 완료 후 | DOM 완성 후 실행 | O |
결론:
✅ DOM 조작이 필요한 경우 defer 사용 권장
✅ 독립적인 코드(광고, 분석 스크립트)는 async 사용 가능
API란?
API(Application Programming Interface)란?
→ 프로그램 간 데이터를 주고받을 수 있도록 정의된 인터페이스입니다.
✅ API의 역할
- 특정 기능을 쉽게 사용할 수 있도록 미리 정의된 명령어 또는 함수의 집합.
- 브라우저에서 제공하는 API: fetch(), localStorage 등.
- 서버와 통신할 때 REST API, GraphQL 등을 활용.
// API 요청 예제 (fetch 사용)
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data)); // API에서 받아온 데이터 출력<!DOCTYPE html> 태그 역할
HTML 문서의 첫 번째 줄에 위치하며, 브라우저가 문서를 표준 모드(Standards Mode)로 해석하도록 설정합니다.
<!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 src="main.js"></script>
</head>
<body>
</body>
</html>✅ meta charset="UTF-8": 한글 및 다양한 언어 지원
✅ meta name="viewport": 모바일 반응형 디자인 지원
바닐라 자바스크립트란?
바닐라 자바스크립트(Vanilla JavaScript)란?
→ 순수한 JavaScript(라이브러리, 프레임워크 없이 사용되는 JavaScript).
✅ 바닐라 JS 특징
- 가장 기본적인 형태의 JavaScript.
- jQuery, React 등의 외부 라이브러리 없이 사용.
- 가벼운 실행 속도 & 빠른 로딩.
document.getElementById('myElement').innerText = "Hello, Vanilla JS!";use strict;란? (엄격 모드)
"Strict Mode"는 JavaScript 코드 실행 시 실수 방지 및 성능 최적화를 돕는 기능.
'use strict';
x = 3.14; // 오류 발생 (변수를 선언하지 않음)✅ strict mode 장점
- 선언되지 않은 변수 사용 금지
- 보안 강화 (예: eval 사용 제한)
- 오류 발견이 쉬워짐 (디버깅 편리)
모던 JavaScript에서는 기본적으로 strict mode 사용 권장!
✅ JavaScript는 웹을 동적으로 만들기 위한 언어
✅ console.log()를 활용해 콘솔 출력 가능
✅ script 태그에서 async vs defer 차이 이해 필수
✅ API는 프로그램 간 데이터 통신을 돕는 인터페이스
✅ Vanilla JavaScript는 순수 JavaScript 사용을 의미
✅ 'use strict';는 JavaScript 코드를 더 안전하게 실행하도록 도와줌