[JavaScript] 웹표준 자바스크립트 ECMAScript(es5, es6)

 

 

---

웹 표준 정의

• W3C표준화 단체가 권고한 웹에서 표준적으로 사용되느 기술과 규칙 (HTML, CSS, JavaScript 등의 규정)
• https://www.w3.org/

W3C

 

 

웹 표준 원칙

1. 어떤 운영체제, 브라우저를 사용하더라도 웹페이지가 동일하게 보이고, 정상적으로 동작 해야 함
2. 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장 되어야 함

장점

1. 소스의 통일화로 수정 및 운영관리가 좋다.
2. 접근성이 좋아 사용자층이 확대할 수 있다.
   1. 어떠한 사용자(일반인, 장애인, 고령자 등)가 어떠한 환경(다양한 브라우저, 운영체제, 디바이스의 환경이나 사양:휴대폰 PDA, 장애인 지원용 프로그램 등)에서도 이용할 수 있게
3. 속도 향상/서버 부담 감소
   1. 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버부담의 감소로 이어질 수 있다. 
   2. CSS와 HTML이 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩속도가 향상된다.
4. 오래된 브라우저에서도 적절한 컨텐츠 표시가 가능하다.
5. 검색봇을 통한 검색엔진 최적화에 좋다.

 

웹 접근성 특징은?

• 인지성
  • 모든 정보와 UI요소는 사용자가 인지 할수 있도록 표시되어야 한다.
  • 텍스트가 아닌 콘텐츠에 인쇄, 점자, 음성, 기호 등 형태로 제공해야한다.
• 운용성
  • 키보드도 모든 기능을 사용 할 수 있어야 한다.
  • 읽기 및 콘텐츠는 사용자에게 충분한 시간을 제공해야 한다.
  • 사용자가 탐색하고 어디에 위치하는지 알수잇도록 도와주는 방법을 제공해야 한다.
• 이해성
  • 사용자가 콘텐츠를 읽고이해할수 있어야한다.
  • 탑재기능을 예측할 수 있게 개발해야 한다.
  • 사용자의 실수를 방지하고 수정할수 있게 해야한다.
• 내구성
  • 보조기술들을 포함하여 호환성을 극대화해야한다.
    • 웹 접근성 보조기기
      • 자막
      • 스크린리더
      • 자동완성
      • 마우스스틱
      • 색상 대비 디자인

• 사생활보호
• 보안
• 국제화

 

웹 표준 기술

• 1) XHTML ( eXtensible Hypertext Markup Language ) 
• 2) CSS (Cascading Style Sheets) 
• 3) XML (eXtensible Markup Language) 
• 4) DOM(Document Object Model) 
• 5) ECMAScript

 

 

 

"ECMAScript"는 언어 표준을 나타내는 용어지만
"ECMAScript"와 "JavaScript"는 같은 의미로 사용할 수 있습니다.

 

ECMAScript

• 자바스크립트를 표준화하기 위해 만들어진 스크립트
• ECMAScript 판들은 매년 ECMA 총회에서 표준으로 승인되고 게시됩니다.
• Ecma TC39 GitHub 조직에 공개
• ES6 이후에는 명세의 이름이 게시 연도인 ES2017, ES2018 등으로 지정

 

ECMAScript 6

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

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

 

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()

https://en.wikipedia.org/wiki/ECMAScript_version_history 

 

 

마무리

• 웹 표준이 생긴 후 언어, 라이브러리 개발 시 다들 웹 표준을 따르기 때문에 한번 작업 시 많은 노동력과 시간을 아낄수 있게 되었다.
  그러니까 개발할때 웹 표준을 지키는것이 중요하다 !