1일차 배운내용
- 웹의 역사
- HTML
웹의 역사
와이드 웹은 CERN(유럽입자물리연구소)의 연구원이던 팀 버너스 리(Tim Berners-Lee)에 의해 개발됐다. 그는 1989년 자신이 구상했던 월드 와이드 웹 개념을 도입해 최초로 웹페이지를 작성했다.
1997년 - ECMAScript 1 (ES1)
ECMA-262 표준의 첫 번째 버전.
자바스크립트의 기본 문법과 기능이 정의됨.
1998년 - ECMAScript 2 (ES2)
언어 사양의 버그 수정 및 편집상의 변화.
ISO/IEC 16262 국제 표준과의 호환성 유지.
1999년 - ECMAScript 3 (ES3)
많은 기능이 추가됨.
정규 표현식, 더 나은 문자열 처리, try/catch 예외 처리, 새로운 제어문 등.
2000년대 초반 - ECMAScript 4 (ES4)
ES4는 대대적인 업데이트를 목표로 했으나, 복잡성과 브라우저 간의 호환성 문제로 인해 표준화되지 못함.
ES4의 여러 아이디어는 후에 ES6로 통합됨.
2009년 - ECMAScript 5 (ES5)
엄격 모드(Strict Mode), JSON 지원, Array 메서드(forEach, map, filter 등), Object 메서드(defineProperty, create 등), 표준화된 예외 처리.
개발자들이 더 안전하고 명확한 코드를 작성할 수 있도록 개선됨.
2011년 - ECMAScript 5.1 (ES5.1)
ES5의 수정판으로, 국제 표준 ISO/IEC 16262:2011로 출판됨.
사소한 수정과 편집상의 변화 포함.
2015년 - ECMAScript 2015 (ES6 / ES2015)
자바스크립트 역사상 가장 큰 업데이트.
let, const 키워드, 화살표 함수, 클래스, 모듈, 템플릿 리터럴, 디스트럭처링, 프라미스, 제너레이터, 맵과 셋, 심볼, 새 Array 메서드, Spread 문법 등.
자바스크립트의 현대적 기능 대부분이 이 시기에 도입됨.
2016년 - ECMAScript 2016 (ES7 / ES2016)
Array.prototype.includes, 지수 연산자(**) 추가.
상대적으로 작은 업데이트.
2017년 - ECMAScript 2017 (ES8 / ES2017)
async/await, Object.values, Object.entries, String padding(padStart, padEnd), Object.getOwnPropertyDescriptors 추가.
비동기 프로그래밍을 더 쉽게 만들어 줌.
2018년 - ECMAScript 2018 (ES9 / ES2018)
Asynchronous Iteration, Promise.prototype.finally, Rest/Spread Properties, 새로운 정규표현식 기능(lookbehind assertions, named capture groups 등).
비동기 프로그래밍과 객체 조작을 개선.
2019년 - ECMAScript 2019 (ES10 / ES2019)
Array.prototype.flat, Array.prototype.flatMap, Object.fromEntries, String.prototype.trimStart/trimEnd, Optional catch binding, Symbol.prototype.description 추가.
배열과 객체 조작을 더 간편하게 만듦.
2020년 - ECMAScript 2020 (ES11 / ES2020)
Dynamic import, BigInt, Promise.allSettled, Nullish Coalescing Operator(??), Optional Chaining Operator(?.), String.prototype.matchAll 추가.
대규모 숫자와 더 나은 비동기 처리를 위한 기능 추가.
2021년 - ECMAScript 2021 (ES12 / ES2021)
Logical Assignment Operators (&&=, ||=, ??=), Numeric Separators, WeakRefs, FinalizationRegistry 추가.
메모리 관리와 코드 가독성을 개선.
2022년 - ECMAScript 2022 (ES13 / ES2022)
Top-level await, Class Fields, Private Methods 추가.
모듈과 클래스의 기능을 강화.
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>
<!-- CSS 파일 로드 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 페이지의 내용 -->
<h1>안녕하세요!</h1>
<p>이 페이지는 CSS와 JavaScript를 로드하는 방법을 보여줍니다.</p>
<!-- JavaScript 파일을 async 속성으로 로드 -->
<script src="script-async.js" async></script>
<!-- JavaScript 파일을 defer 속성으로 로드 -->
<script src="script-defer.js" defer></script>
<!-- JavaScript 파일을 body의 끝에서 로드 -->
<script src="script.js"></script>
</body>
</html>질문
스크립트를 body 태그 끝에 쓰는 것 , head 태그 안 스크립트 실행시 속성 async , defer 사용의 차이점을 설명하라
body 태그 끝에 쓰는 방법 defer 과 비슷한 효과를 내며
html 파싱이 끝난후 script를 실행
async 는 비동기적으로 스크립트를 불러옴 스크립트의 실행되는 시점을 예측 하기 힘듬
defer 는 html 문서이 파싱이 완료된 후 후 스크립트를 실행
