자바스크립트를 활성화 해주세요

d035 Html 인터뷰 질문

 ·  ☕ 6 min read

What does a doctype do?

  • <!doctype html> 얘기하는 거죠?
  • Document type Declaration 을 나타내는데요,
  • 브라우저에게 이 문서를 구성하는 HTML 타입과 버전을 알려줍니다.
  • 브라우저가 이 문서를 어떻게 다루고 처리해야 하는 지 알려줍니다.
  • html5의 선언이 제일 짧고 심플합니다. <!doctype html>
  • html5는 SGML기반이 아니기 때문에 DTD를 필요로 하지 않습니다.
  • html4도 dtd가 필요하고, xhtml 1.0 strict, xhtml 1.1 도 dtd가 필요합니다.
  • 만약 이거 빼면, 어떻게 체크해야 할 지 모르기 때문에 HTML validators가 제대로 작동하지 않습니다. 또 없으면 브라우저가 쿼크스 모드(quirks mode)로 작동합니다.
  • W3C가 만들어지기 전이던 시기는 생략합시다.

How do you serve a page with content in multiple languages?

  • 여기서의 언어는, 영어, 일본어, 한국어 와 같은 언어 입니다. 프로그래밍 언어가 아닙니다.
  • 요청할 때는 Request Header에 Accept-Language를 넣어주면 됩니다.
  • Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5 이렇게요.
  • 서버는 Content-Language라는 헤더로 정보를 돌려줍니다.
  • Content-Language: en, hi, pa
  • 브라우저는 우선 Content-Type header에 charset이 있는 지 확인부터 합니다. 없으면 문서에서 힌트를 찾아야죠.
  • 우선 html 선언에서 laug가 있는 지 봅니다. 없으면 Latin-1 이나 Windows-1252 로 해석하는데, 둘 다 싱글 바이트 인코딩이고 256 문자만 지원합니다.
  • <html lang=ko dir=ltr> 이렇게요
  • 그 다음으로는 html문서 안에서 <meta charset="utf-8"/> 과 같은 정보를 찾습니다.
  • 만약 멀티 언어를 사용한다면요 hreflang 이라는 필드를 사용해서 알려줘야 합니다.
  • <link rel="alternate" hreflang='en-gb'> 이렇게요.
  • 모든 태그 안에서 lang이라는 어트리뷰트를 쓸 사용할 수 있습니다. 예를 들면 div나 span, p
  • 브라우저에게 다른 레퍼런스를 알려주는 방법도 있습니다.
1
2
3
4

<link rel="canonical" href="https://www.example.com/index.html" />
<link rel="alternate" href="https://www.example.com/index.html" hreflang="en" />
<link rel="alternate" href="https://www.example.com/index-es.html" hreflang="es" />
<link rel="alternate" href="https://www.example.com/index-fr.html" hreflang="fr" />

What kind of things must you be wary of when designing or developing for multilingual sites?

  • 언어는 브라우저만 해석하는 것이 아닙니다. 예를 들면 장애인이 스크린 리더를 사용하는 경우 어떤 언어를 디폴트로 해야할 지 주의해야 합니다.
  • 스크립트로 렌더링하는 경우도 주의해야 합니다. 그래서 템플릿에서 텍스트를 완전히 분리하는 디자인을 사용하기도 합니다.
  • 날짜 포맷도 다르기 때문에 이것도 주의해야 합니다.
  • 그런 경우에는 javascript로 된 i18n 프레임웍을 사용해야 할 겁니다. 예를 들면 I18next, jquery.i18n, Globalize, Polyglot.js 와 같은 것이 있죠. jquery.i18n은 경험이 있지만, I18next도 설계해 보고 싶습니다. 평가가 더 좋아요.
  • 모든 일이 제대로 하기에는 쉽지 않습니다.

What are data- attributes good for?

  • 엘리먼트에 추가 정보를 제공할 때 사용합니다. 데이터를 저장하기에 딱 좋은 필드죠
  • 어떻게 사용할 지는 페이지와 웹 앱에 달려있죠.
  • 정말 아무거나 넣어도 되요. 예를 들면
1
2
3
4
5

<ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>
  • 이미지의 lazy loading에도 많이 쓰이죠.

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

  • 질문은 html5를 구성하는 것들이 무엇니냐는 겁니다. 어떤어떤 기능들이 있느냐는 거죠.
  • 마크업이 좀 더 의미있게구성되었습니다.
  • 새로운 폼 엘리먼트가 있구요
  • 비디오와 오디오 태그도 있습니다.
  • 새로운 Javascript API도 있구요
  • canvas나 SVG 기능도 제공합니다.
  • 새로운 커뮤니케이션 API
  • 지리적(geolocation) API
  • 디바이스 접근을 허용하거나 안하거나 할 수 있습니다.
  • 웹 워커 API
  • 새로운 데이타 스토리지
  • 클라이언트사이드에 데이타를 저장하는 기술로는
    • cookies 이것도 key-value 타입인데 도메인 베이스죠.
      • 클라이언트에서 생성할 수도 있고 서버사이드에서도 할 수 있습니다. 서버사이드에서는 Set-Cookie 헤더를 사용합니다.
      • 저장할 수 있는 사이즈는 4k가 한계입니다.
      • 매번 http request에 서버에 보내야 합니다. 그래야 세션이 유지가 됩니다.
    • html5 web storage
      • html5 local storage : expiry가 없어요. 두가지 방식이 있는데 key-value타입의 default와 Web SQL
      • html5 session storage : 하나의 세션에만 저장합니다. 여기서 세션은 현재 윈도우입니다. 닫히면 다시 없어져요. 초기화는 클라이언트에서만 합니다.
      • html5 web storage : 더 안전하고 빠르다고 하는데, 늘 사용할 수 있는 것은 아니고 요청받을 때만 사용할 수 있다는 군요. 초기화는 클라이언트에서만 합니다.

Describe the difference between <script>, <script async> and <script defer>.

  • <script> 클라인트 스크립트를 정의할 때 씁니다. 다운받고 즉시 실행하지요. defer옵션이 없던 시절에는 body의 onload핸들러를 사용하곤 했습니다.
  • <script async> async가 있으면 페이지를 파싱하면서 스크립트를 실행합니다. 페이지의 element를 참조하는 jQuery 사용 코드는 사용하면 안되겠네요.
    • 다운로드는 파싱과 동시에 합니다.
    • Google Analytics 도 사용합니다.
  • <script defer>이건 페이지 파싱이 끝나면 실행하라는 얘기죠.
    • 다운로드는 파싱과 동시에 합니다.
  • 최신 브라우저는 defer 옵션을 지원하거나 그렇게 동작하므로 <head></head>안에 스크립트를 넣어도 됩니다. 하지만, 옛날 브라우저는 그렇지 않죠. 그래서 </body>앞에 스크립트를 넣어주는 페이지는 그 이유가 이겁니다.

Why is it generally a good idea to position CSS s between <head></head> and JS <script>s just before? Do you know any exceptions?

  • 그거야 css는 DOM에 무관한 데이타 선언이니까 앞에 두어도 되는 반면에, js는 그 스크립트가 선언된 자리에서 바로 실행되기 때문이죠.
  • 또 만일 css선언이 뒤에 있다면, 렌더링 퍼포먼스에 좋지 않습니다.
  • DOM이 완전히 파싱되지 않은 상태에서 엘리먼트를 다루는 js는 에러가 발생할 수 있어요. 그래서 다 파싱된 뒤에 실행되도록 </body>앞에 둡니다.
  • 예외는 jquery와 onload핸들러를 사용하면 꼭 제일 뒤에 두지 않아도 괜찮아요
  • 또는 defer옵션을 사용하는 경우에도 뒤에 두지 않아도 됩니다.

What is progressive rendering?

  • 전체 이미지를 렌더링할 때, 저화질 이미지로 부터 고화질 이미지로 차례로 렌더링하는 방식입니다.
  • 목적은 렌더링 퍼포먼스죠. 또 다른 이유로는 이미지 데이터를 먼저 보내는 것보다 다른 중요한 데이터를 먼저 보내고 싶기 때문이기도 합니다. performance and priority.
  • 이미 널리 알려진 방식입니다. 최근의 모바일 데이타 전송방식의 개발방식이 유행하면서, 여전히 유용한 렌더링 방식입니다.
  • 구현하는 방법으로 두가지 테크닉이 있는데
    • lazy loading
    • prioritizing visible content 이 있습니다. DomContentLoaded 이벤트를 사용합니다.
      1
2
3

      window.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOM fully loaded and parsed');
});

Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.

  • 이미지 태그에 srcset 어트리뷰트를 왜 쓰냐구요? 디바이스 디스플레이에 따라 다른 이미지를 보여주기 위한 것입니다.
  • <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> 이런 식으로 씁니다. 뒤에 나오는 1000w는 디바이스의 width입니다.

Have you used different HTML templating languages before?

What is the difference between canvas and svg?

  • svg 태그는 SVG 그래픽을 위한 컨테이너입니다. 백터그래픽이에요. canvas보다 확장성이 좋아요. 많은 서피스나 적은 객체에 퍼포먼스가 좋아요
  • canvas는 raster 기반이고 픽셀그래픽입니다. 그래서 스캐일이 안좋아요 고해상도에 안좋아요. 많은 서피스나 적은 객체에 퍼포먼스가 좋습니다.
  • svg는 스크립트와 css로 변경이 가능합니다. canvas는 스크립트로만 가능해요

이정도면 될까요. 이상으로 html의 기본 인터뷰 질문들의 답변을 찾아 살펴보았습니다.

ref

공유하기
tkim
글쓴이
tkim
Software Engineer

관련글