HTML5 개발자가 저지르는 5가지 가장 일반적인 실수: 초보자 가이드

Tim Berners-Lee와 Robert Cailliau가 인터넷을 구축하는 데 사용되는 표준 마크업 언어가 된 HTML을 지정한 지 20년이 넘었습니다. 그 이후로 HTML 개발 커뮤니티는 이 언어에 대한 개선을 간청했지만 이 외침은 대부분 동료의 HTML 문제를 완화시키려는 웹 브라우저 개발자들에 의해 들렸습니다. 불행히도 이로 인해 많은 브라우저 간 호환성 문제와 개발 작업의 중복을 일으키는 더 많은 문제가 발생했습니다. 이 20년 동안 HTML은 4번 업그레이드되었으며 대부분의 브라우저는 두 자리 수의 주요 업데이트와 수많은 작은 패치를 받았습니다.

HTML5는 마침내 우리의 문제를 해결하고 모든 문제(브라우저)를 지배하는 하나의 표준이 되어야 했습니다 . 이것은 아마도 World Wide Web의 생성 이후 가장 기대되는 기술 중 하나였을 것입니다. 그런 일이 있었나요? 마침내 브라우저 간 완전히 호환되고 모든 데스크톱 및 모바일 플랫폼에서 작동하여 우리가 요구했던 모든 기능을 제공하는 하나의 마크업 언어를 얻었습니까? 모르겠어요! 불과 며칠 전(2014년 9월 16일) W3C에서 한 번 더 검토 요청을 받았으므로 HTML5 사양이 아직 불완전합니다.

사양이 확정되는 날이 되면 브라우저는 이미 쓸모없는 코드를 많이 갖고 있지 않을 것이며 웹 작업자 , 다중 동기화 오디오 및 비디오 요소 , 우리가 필요로 하는 기타 HTML5 구성 요소와 같은 훌륭한 기능을 쉽고 적절하게 구현할 것입니다. 장기.

그러나 HTML5를 기반으로 비즈니스를 수행하고 훌륭하게 수행하고 있는 수천 개의 회사가 있습니다. 또한 수백만 명의 사람들이 사용하는 훌륭한 HTML5 기반 응용 프로그램과 게임이 많이 있으므로 성공은 분명히 가능하며 HTML5는 사양 상태에 관계없이 사용되며 앞으로도 계속 사용됩니다.

그러나 내가 언급한 레시피는 우리의 얼굴에 쉽게 날아갈 수 있으므로 피할 수 있는 가장 기본적인 HTML5 실수 중 일부를 강조했습니다. 아래 나열된 대부분의 실수는 다른 브라우저에서 특정 HTML5 요소의 불완전하거나 누락된 구현의 결과이며 가까운 장래에 이러한 오류가 사용되지 않기를 바랍니다. 이런 일이 발생할 때까지 HTML5 초보자이든 숙련된 수의사이든 다음 HTML5 애플리케이션을 빌드할 때 목록을 읽고 염두에 두는 것이 좋습니다.

일반적인 실수 #1: 로컬 스토리지 신뢰

케이크 먹으라고 해! 이 접근 방식은 오랫동안 개발자에게 부담이었습니다. 보안 침해 및 컴퓨터 보호에 대한 합리적으로 합리적인 두려움으로 인해 많은 사람들이 인터넷을 두려워했던 "암흑기"에 웹 애플리케이션은 컴퓨터에 불합리하게 적은 양의 데이터를 남길 수 있었습니다. 사실, "Microsoft(r)의 훌륭한 브라우저 마스터"가 제공한 사용자 데이터나 Flash의 로컬 공유 개체와 같은 것이 있었지만 이것은 완벽하지 않았습니다.

따라서 개발자가 채택한 최초의 기본 HTML5 기능 중 하나가 Web Storage였습니다. 그러나 웹 저장소는 안전하지 않습니다. 유선을 통해 전송되지 않지만 암호화되지 않기 때문에 쿠키를 사용하는 것보다 낫습니다. 절대 거기에 보안 토큰을 저장해서는 안 됩니다. 악의적인 사용자가 언제든지 자신의 localStorage 및 sessionStorage 값을 쉽게 수정할 수 있으므로 보안 정책은 Web Storage에 저장된 데이터에 의존해서는 안 됩니다.

Web Storage 및 사용 방법에 대한 더 많은 통찰력을 얻으려면 이 게시물을 읽는 것이 좋습니다.

일반적인 실수 #2: 브라우저 간 호환성 기대

HTML5는 단순한 마크업 언어 그 이상입니다. 동작을 레이아웃과 결합할 만큼 충분히 성숙했으며 HTML5를 고급 JavaScript가 맨 위에 있는 확장 HTML로 간주해야 합니다. HTML+CSS의 정적 조합을 모든 브라우저에서 동일하게 보이게 하기 위해 우리가 이전에 겪었던 모든 문제를 살펴본다면 더 복잡해진다는 것은 브라우저 간 호환성을 보장하기 위해 더 많은 노력을 기울일 뿐이라고 가정하는 것이 타당합니다.

다른 브라우저에서의 HTML5 해석은 JavaScript의 경우와 마찬가지로 동일하지 않습니다. 브라우저 전쟁의 모든 주요 플레이어는 HTML5 사양에 손을 빌려주었으므로 브라우저 간의 편차는 시간이 지남에 따라 줄어들어야 한다고 가정하는 것이 타당합니다. 그러나 지금도 일부 브라우저는 특정 HTML5 요소를 완전히 무시하기로 결정하여 기본 및 공통 기능 집합을 따르는 것이 매우 어렵습니다. 더 많은 인터넷 연결 장치와 플랫폼을 방정식에 추가하면 상황이 훨씬 더 복잡해져 HTML5에 문제가 발생합니다.

예를 들어 웹 애니메이션은 Chrome 및 Opera에서만 지원되는 훌륭한 기능인 반면, 웹 페이지 컨텍스트 외부에서 사용자에게 이메일 전달과 같은 상황이 발생했음을 알릴 수 있는 웹 알림 기능은 Internet Explorer에서 완전히 무시됩니다.

HTML5 기능 및 다양한 브라우저의 지원에 대해 자세히 알아보려면 www.caniuse.com에서 HTML5 가이드를 확인하십시오.

따라서 HTML5가 새롭고 잘 지정되더라도 브라우저 간 호환성 문제가 많이 발생할 것으로 예상하고 미리 대비해야 한다는 사실이 남아 있습니다. 브라우저가 채워야 할 격차가 너무 많고 플랫폼 간의 모든 차이점을 잘 극복하지 못할 것으로 예상하는 것이 타당합니다.

일반적인 실수 #3: 고성능 가정

HTML5가 여전히 진화하고 있다는 사실에도 불구하고 HTML5는 존재하기 전에 사용된 대체 플랫폼에 비해 많은 이점을 가진 매우 강력한 기술입니다. 그러나 큰 힘에는 특히 HTML5 초보자에게 큰 책임이 따릅니다. HTML5는 데스크톱 및 모바일 플랫폼의 모든 주요 브라우저에서 채택되었습니다. 이를 염두에 두고 많은 개발 팀이 HTML5를 선호하는 플랫폼으로 선택하고 애플리케이션이 모든 브라우저에서 동일하게 실행되기를 바랍니다. 그러나 HTML5 사양이 그렇다고 해서 데스크탑과 모바일 플랫폼 모두에서 합리적인 성능을 가정하는 것은 합리적이지 않습니다. 많은 회사(khm! Facebook khm!)가 모바일 플랫폼용 HTML5에 베팅했고 HTML5가 계획한 대로 작동하지 않아 고통을 겪었습니다.

그러나 HTML5에 크게 의존하는 훌륭한 회사가 있습니다. HTML5와 브라우저를 한계까지 밀어붙이면서 놀라운 일을 하고 있는 수많은 온라인 게임 개발 스튜디오를 보십시오. 분명히 성능 문제를 인식하고 이러한 문제를 해결하는 한 놀라운 응용 프로그램을 만드는 좋은 위치에 있을 수 있습니다.

일반적인 실수 #4: 제한된 접근성

웹은 우리 삶의 매우 중요한 부분이 되었습니다. 보조 기술에 의존하는 사람들이 응용 프로그램에 액세스할 수 있도록 하는 것은 소프트웨어 개발에서 종종 무시되는 중요한 주제입니다. HTML5는 일부 고급 접근성 기능을 구현하여 이를 극복하려고 합니다. 소수 이상의 개발자가 이를 충분하다고 받아들였으며 애플리케이션에서 추가 접근성 옵션을 구현하는 데 시간을 소비하지 않았습니다. 불행히도 이 단계에서 HTML5는 모든 사람이 응용 프로그램을 사용할 수 없도록 하는 문제가 있으며 더 넓은 범위의 사용자를 포함하려면 추가 시간을 투자해야 합니다.

HTML5의 접근성과 가장 일반적인 접근성 기능의 현재 상태에 대한 자세한 내용은 이 곳에서 확인할 수 있습니다.

일반적인 실수 #5: HTML5 향상 기능을 사용하지 않음

HTML5는 표준 HTML/XHTML 태그 집합을 크게 확장했습니다. 새로운 태그 외에도 몇 가지 새로운 규칙과 동작이 추가되었습니다. 너무 많은 개발자가 몇 가지 개선 사항만 선택하고 HTML5의 매우 멋진 새 기능 중 일부를 건너뛰었습니다.

HTML5에서 가장 멋진 것 중 하나는 클라이언트 측 유효성 검사입니다. 이 기능은 아마도 웹 브라우저가 선택한 HTML5의 초기 요소 중 하나였을 것입니다. 그러나 불행히도 기본적으로 양식에 novalidate 속성을 추가하는 개발자를 몇 명 이상 찾을 수 있습니다. 이렇게 하는 이유 는 합리적이며 우리가 이 문제에 대해 토론할 것이라고 확신합니다. 이전 버전과의 호환성으로 인해 많은 응용 프로그램에서 사용자 지정 JavaScript 유효성 검사기를 구현했으며 그 위에 브라우저에서 즉시 사용 가능한 유효성 검사를 수행하는 것이 불편합니다. 그러나 두 가지 유효성 검사 방법이 충돌하지 않을 것이라고 확신하는 것은 그리 어렵지 않으며, 사용자 유효성 검사를 표준화하면 앞에서 언급한 접근성 문제를 해결하는 데 도움이 되는 동시에 공통 경험을 보장할 수 있습니다.

또 다른 훌륭한 기능은 HTML5에서 사용자 입력이 처리되는 방식과 관련이 있습니다. HTML5가 등장하기 전에는 <form></form> 태그 안에 포함된 모든 양식 필드를 유지해야 했습니다. 새로운 양식 속성을 사용하면 다음과 같은 작업을 완벽하게 수행할 수 있습니다.

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

lname 이 폼 안에 없어도 fname 과 함께 게시됩니다.

새로운 양식 속성 및 개선 사항에 대한 자세한 내용은 Mozilla 개발자 네트워크에서 확인할 수 있습니다.

마무리

위의 많은 실수가 다른 브라우저에서 문제가 있는 HTML5 구현의 직접적인 결과이기 때문에 웹 개발자는 브라우저 전쟁에서 부수적인 피해를 입는다는 것을 이해합니다. 그러나 일반적인 HTML5 문제를 피하고 HTML5의 새로운 기능을 이해하는 데 시간을 할애하는 것이 여전히 중요합니다. 일단 우리가 모든 것을 제어하게 되면, 우리의 애플리케이션은 새롭고 향상된 기능을 활용하고 웹을 한 단계 끌어올릴 것입니다.