패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 프론트엔드 Back to the Basics : 지속 가능한 코드작성과 성능 향상법 by 김태곤"
HTML
"Originally, HTML was primarily designed as a language for semantically describing scientific documents."
→ 원래 HTML은 과학적인 문서를 의미를 담아 기술하는 언어로서 만들어졌다.
-HTML Living Standard-
Semantic HTML
"Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics)"
→ HTML 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되었다.
HTML의 변화
- 버전이 없는 Living Standart로 변화
- HTML5는 버즈워드(buzzword)일 뿐 존재하지 않는 버전의 명세
- 시대에 발 맞추어 계속 변화함
- 의미를 가진 태그 대거 추가
<section>,<header>,<footer>,<main>,<article>,<nav>등
- 의미를 기술하기 위한 Microdata도 포함
- 구글은 지메일에서 마이크로 데이터를 지원함
- 이를 통해 더 나은 검색 결과를 제공하는 것은 물론 특별한 액션을 추가할 수도 있음
*Microdata란?
생성된 HTML로 페이지를 교체 (아래 예시 이미지 참고)
- 비주얼 요소를 의미하는 태그나 속성은 사라지거나 의미가 변함
- 사라진 태그:
<big>,<basefont>,<font>,<center>,<strike>,background,align - 의미가 변경된 태그:
<b>,<i>,<s>,<small>,<u><b>: 시각적으로 주의를 끌기 위한 용도<i>: 격언과 같은 관용구에 사용<s>: 정확하지 않거나 적절하지 않은 정보<small>: 부가적인 코멘트(문서에서 작게 표시되는 부분.. 영수증에서 'VAT 포함'과 같은 텍스트)<u>: (unarticulated)말이나 글로 설명하지 않은 표기를 말할 때 사용
- 멀티미디어, 네트워크 등 풍부하고 다양한 기능과 API 추가
<canvas>,<video>,<figure>,srcset- Websocket, WebWorker, StorageAPI, History
→ 프론트엔드 개발의 대부분은 자바스크립트를 사용해서 이러한 API를 호출하고 사용하는 걸로 이루어짐
→ HTML에 추가된 기능이 많으므로 HTML만 잘 알고 있어도 할 수 있는 게 많음
→ HTML, CSS를 잘 사용하면 JS 코드를 줄일 수 있고 이는 성능 면에서도 더 좋음
점진적 향상 VS 우아한 성능 저하
점진적 향상
성능이 부족한 환경을 기준으로 작성한 다음, 최신 기능을 지원하는 환경에서만 해당 기능을 제공하는 것
예를 들어, 블로그 게시물을 프린트하는 버튼이 있는데 프린트가 되지 않는 환경에서 해당 버튼이 보인다면 사용자에게 혼란을 줄 수 있다. 이러한 경우, 버튼을 보이지 않게 개발 후 프린트 기능이 지원되는지 JS로 확인한 다음 버튼을 보여주는 방식으로 개발하는 것
우아한 성능 저하
기능을 제공하되 지원하지 않는 환경에 대해 대비책 혹은 폴백을 만들어두는 것
예를 들어, video 태그를 사용하는데 이 태그를 지원하지 않는 브라우저가 있다면?
1.video 태그 내 img 태그를 추가하여 video 태그가 지원되지 않는 브라우저에서는 img가 노출되도록 하기
2.동영상 파일의 링크를 추가하여 클릭해서 보도록 하기
