JavaScript, ECMAScript (ES5, ES6, ES2024) | 웹 표준

 

 

---

개요

• 웹 표준이 도입된 이후, 프로그래밍 언어와 라이브러리 개발 시 대부분 웹 표준을 따르게 되어 한 번 작업으로도 많은 시간과 노동력을 절약할 수 있게 되었습니다.
• 따라서 HTML, CSS, JavaScript와 같은 웹 표준을 준수하며 개발하는 습관을 가지는 것이 중요합니다.

 

웹 표준이란 ?

• **웹 표준(Web Standards)**은 W3C(World Wide Web Consortium) 표준화 단체에서 권고하는 기술과 규칙을 의미합니다.
• 다양한 운영체제(OS), 브라우저, 디바이스에서도 웹페이지가 동일한 모양과 기능으로 작동하도록 보장합니다.
• 신체적, 환경적 제약이 있는 사용자도 웹에 접근성을 가지고 원활히 이용할 수 있도록 설계된 원칙입니다
• https://www.w3.org/

W3C

 

웹 표준 기술 6가지

- 웹 표준을 준수하기 위해 W3C와 같은 표준화 단체에서 정의 하는 사용 기술

• HTML5
  • 웹 표준의 최신 버전으로, 멀티미디어 콘텐츠(비디오, 오디오 등)를 네이티브로 지원합니다.
  • 접근성을 개선하고, 시맨틱 태그(<article>, <section>, <nav> 등)를 통해 문서 구조를 명확히 합니다.
• CSS3
  • 스타일의 최신 표준으로, 애니메이션, 트랜지션, 그리드 레이아웃 등을 지원합니다.
  • 반응형 웹 디자인을 구현하기 위해 미디어 쿼리(@media)를 제공합니다.
• ECMAScript (JavaScript 표준)
  • JavaScript의 표준 사양으로, 최신 버전인 ES2024까지 포함됩니다.
  • 모듈화, 비동기 처리(Promise, Async/Await), 화살표 함수 등 다양한 최신 기능을 제공합니다.
• DOM (Document Object Model)
  • HTML, XML 문서를 객체로 표현하여 JavaScript를 통해 조작할 수 있도록 합니다.
• SVG (Scalable Vector Graphics)
  • 벡터 그래픽을 웹에서 렌더링하기 위한 기술로, 선명한 이미지를 제공합니다.
• ARIA (Accessible Rich Internet Applications)
  • 장애인을 위한 웹 접근성 표준으로, 화면 읽기 소프트웨어와 같은 접근성 도구와 호환됩니다.

 

웹 표준 2가지 원칙

• 호환성 보장
  • 어떤 운영체제(OS)나 브라우저를 사용하더라도 웹페이지가 동일하게 보여야 하며, 정상적으로 작동해야 합니다.
• 접근성 향상
  • 모든 사용자가 신체적(장애, 고령 등) 또는 환경적(다양한 디바이스, 브라우저) 제약 없이 웹에 접근하고 이용할 수 있도록 보장합니다.

 

웹 표준 준수의 중요성 및 장점

1. 효율적인 유지보수

• CSS와 HTML의 분리로 유지보수에 드는 시간이 단축됩니다.
• 논리적이고 효율적으로 작성된 코드는 불필요한 마크업을 줄여 코드량을 최소화합니다.

2. 속도 향상 및 서버 부담 감소

• 코드가 간결해지면서 파일 크기가 작아지고, 결과적으로 페이지 로딩 속도가 빨라집니다.
• 서버 부담이 감소해 대규모 트래픽 처리에도 유리합니다.

3. 사용자층 확대

• 다양한 환경(휴대폰, 태블릿, PDA, 장애인 지원 프로그램 등)에서 웹페이지 이용이 가능해 사용자층이 자연스럽게 확대됩니다.
• 접근성이 향상되어 일반 사용자뿐만 아니라 장애인, 고령자 등도 손쉽게 사용할 수 있습니다.

4. 검색엔진 최적화(SEO)

• 검색엔진 봇이 구조화된 문서를 빠르게 인식해 검색 순위를 높이는 데 유리합니다.

5. 레거시 지원

• 오래된 브라우저에서도 콘텐츠가 적절히 표시되어 다양한 사용자 환경을 지원합니다.

 

 

웹 표준을 준수한 개발 사례들

1. 다양한 브라우저 테스트: 크롬, 파이어폭스, 엣지, 사파리 등에서의 동일한 사용자 경험 제공
2. 반응형 웹디자인 적용: 모바일부터 데스크톱까지 디바이스에 최적화된 화면 제공
3. 접근성 높은 UI 설계: 장애인, 고령자도 쉽게 사용할 수 있는 웹 애플리케이션 개발

 

 

ECMAScript 이란?

• ECMAScript는 JavaScript 사양을 정의한 것
• 다양한 브라우저에서의 호환 목표로 JavaScript를 표준화하기 위해 개발된 언어 문서(사양)
  • JavaScript, JScript, ActionScript 등에 대한 표준으로서, 웹 클라이언트 스크립트 혹은 Node JS 등에 사용
• (JavaScriptTM)의 표준화. 여기에는 언어 구문, 의미론 및 라이브러리 및 언어를 지원하는 보완 기술이 포함

 

ECMAScript 역사

• 배경
  • Netscape가 JavaScript 개발 → Microsoft가 JScript 개발 → Netscape가 자바스크립트를 표준화하기 위해 국제 표준 개발 단체인 에크마 인터내셔널에 의뢰 → Ecma에 의해 표준화된 자바스크립트는 'ECMAScript'탄생
• 버전
  • 1997년 ECMAScript Version 1 (줄여서 ES1)으로부터 매년 개정
  • 2015년부터는 ES6 와 같은 ECMAScript 버전 대신 ECMAScript 2015 혹은 ES2015와 같이 해당 연도를 버전에 사용
  • 최신 : ES2023
  • ESNext: 차기 버전으로 개발되고 있는 ECMAScript

https://slideplayer.com/slide/16534415/

 

ECMAScript 커뮤니티

• MDN Web Docs : https://developer.mozilla.org/ko/docs/Glossary/ECMAScript
• Ecma International > ECMAScript : https://ecma-international.org/technical-committees/tc39/

 

ECMAScript와 브라우저의 관계

• 브라우저 내부를 분해하면 렌더링 엔진이나 javascript 엔진이라는 것이 있다.
• JavaScript 엔진은 ECMAScript를 구현한 모듈을 말한다.

브라우저가 읽는 언어는 HTML, CSS, JavaScript인데 json가 해석되는 이유는?

• JSON데이터는 javascript에 내장되어있는 JSON 객체를 사용하여 브라우저에서 조회된다.
• 즉 자바스크립트 언어를 읽을 수 있으니까, JSON 파일도 브라우저에서 보여질 수 있는 것

JSON.parse('user.json');

 

 

 

ECMAScript 이란? 

• 자바스크립트를 표준화하기 위해 만들어진 스크립트이다.
• 자바스크립트 표준 사양인 ECMA-262를 말하며, 핵심 문법을 규정하는 언어이다.
• 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현하고 있다.

 

ECMAScript  탄생 배경

• 추후 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하게 되면서 크로스 브라우징 이슈가 발생하고 모든 브라우저에서 정상적으로 동작하는 JS의 필요성이 생기면서 시작
• 1997년 ECMA-262라 불리는 표준화된 JS 초판(ECMAScript 1) 사양이 완성되었고, ECMAScript로 명명
• 매년 업데이트되어 배포 된다.

 

ECMAScript  운영 및 배포

• ECMAScript 판들은 매년 ECMA 총회에서 표준으로 승인되고 게시됩니다.
• Ecma TC39 GitHub 조직에 공개
• ES6 이후에는 명세의 이름이 게시 연도인 ES2017, ES2018 등으로 지정

 

 

ECMAScript 버전별 특징

버전	연도	특징
ECMAScript 1 (ES1)	1997	처음의 ECMAScript 표준.
		기본 문법, 데이터 타입, 함수 정의 등이 정의됨.
ECMAScript 2 (ES2)	1998	몇 가지 버그 수정 및 명세의 정비.
ECMAScript 3 (ES3)	1999	Try/catch 예외 처리 추가.
		정규 표현식, 제한된 속성 정의, 함수 표현식 등의 추가.
		객체 리터럴 확장, 새로운 데이터 타입 추가.
ECMAScript 4 (ES4)	취소	원래의 계획이 취소되고 대신 작은 단계로 진행되기로 결정.
ECMAScript 5 (ES5)	2009	Strict 모드 추가.
		JSON 지원 추가.
		Object.create(), Object.defineProperty() 등의 새로운 메서드 추가.
ECMAScript 5.1 (ES5.1)	2011	ES5의 몇 가지 버그 수정.
ECMAScript 6 (ES6)	2015	let, const 키워드 도입.
		Arrow Functions 추가.
		클래스 및 모듈 지원 추가.
		템플릿 리터럴, 비구조화 할당, 화살표 함수 등 새로운 문법 추가.
ECMAScript 2016 (ES7)	2016	Array.prototype.includes() 추가.
ECMAScript 2017 (ES8)	2017	Async/Await 문법 추가.
		Object.entries(), Object.values() 등 객체 관련 메서드 추가.
ECMAScript 2018 (ES9)	2018	정규 표현식의 업데이트.
		async/await의 추가적인 지원.
		Object.entries(), Object.values() 등 객체 관련 메서드들의 추가.
ECMAScript 2019 (ES10)	2019	Array.prototype.flat(), Array.prototype.flatMap() 추가.
		Object.fromEntries() 메서드 추가.
		String trimming 메서드 추가.
ECMAScript 2020 (ES11)	2020	Nullish Coalescing 연산자 (??) 추가.
		Optional Chaining 연산자 (?.) 추가.
		Promise.allSettled() 메서드 추가.
ECMAScript 2021 (ES12)	2021	String.prototype.replaceAll() 추가.
		Logical Assignment Operators (||=, &&=, ??=) 추가.
		Numeric Separators 추가.
ECMAScript 2022 (ES13)	2022	Error.prototype.cause
		.at()
ECMAScript 2023 (ES14)	2023	Array.prototype.findLastIndex()

 

 

 

ES6,  ECMAScript 6, ES2015

• ECMA international 의 ECMA-262 기술 명세에 정의된 표준화된 스크립트로 ES6,  ECMAScript 6, ES2015는 동의어이다.
• ES6(ECMAScript 2015)이 2015년 여름에 발표되었다.
• ES6의 핵심 기능 중 하나는 ES5(ECMAScript 5) 버전을 기반으로 개발된 웹 페이지가 동작가능 하도록 하위 호환성을 지원하는 것하는 기능이 추가된것이다.

ES6에 추가된 기능 보기
https://www.w3schools.com/js/js_es6.asp