본문 바로가기
FrontEnd

[번역] 빅테크 프론트엔드 기술 인터뷰 : Html편

DevInvestor 2023. 2. 1. 22:15
반응형

Front End Interview Handbook의 HTML 파트를 번역 및 정리한 글입니다

2023.02.01 - [기업면접도전] - [번역] 빅테크 프론트엔드 기술 인터뷰 : CSS편

Faang

Meta, Amazon., Google과 같은 미국 빅테크 프론트엔드 면접의 기출 문제라 합니다.

2019년 기준으로 작성된 것들이 꽤 있어서, 몇가지 경험 기반 답변들은 스스로 생각해 보시는 것도 좋은 듯 합니다.

해당 링크에서 원문을 확인하실 수 있습니다.

반응형

 

1. DOCTYPE이 뭔가요? 왜 중요한가요?

DOCTYPE은 Document Type의 약자입니다.
DOCTYPE은 항상 DTD(Document Type Definition)와 연결됩니다.

 

DTD는 특정 타입의 문서가 어떻게 구성되어야 하는지를 정의하는 반면(즉, 버튼은 범위를 포함할 수 있지만 div는 포함할 수 없음) DOCTYPE은 문서가 존중해야 하는 DTD를 선언합니다. (즉, 이 문서는 HTML DTD를 존중함).
웹 페이지의 경우 DOCTYPE 선언이 필요합니다.
문서가 준수하는 HTML 사양의 버전을 사용자 에이전트에 알리는 데 사용됩니다.
사용자 에이전트가 올바른 DOCTYPE을 인식하면 문서를 읽기 위해 이 DOCTYPE과 일치하는 no-quirks mode를 트리거합니다.
사용자 에이전트가 올바른 DOCTYPE을 인식하지 못하면 quirks mode를 트리거합니다.
 
올바른 DOCTYPE을 인식하지 못해 ,quirks mode가 사용된다는 것은
html 표준을 준수하지 않는 동작이 가능하다는 것이기에 주의해야 합니다.
(쿼크 모드에서 레이아웃은 Navigator 4 및 Internet Explorer 5의 동작을 에뮬레이트합니다.)
 
References

2. HTML을 이용해 다국어 페이지를 지원하는 방법을 알려주세요.

콘텐츠를 여러 언어로로 제공 할 수 있으나,
한 페이지 내의 모든 콘텐츠는 일관된 하나의 언어로만 표시되어야 합니다.

서버에 HTTP 요청을 보낼 때,
사용자 에이전트는 일반적으로 Accept-Language 헤더와 같은 언어 기본 설정에 대한 정보를 보냅니다.
그런 다음 서버는 이 정보를 사용하여 그러한 대안이 사용 가능한 경우 적절한 언어로 된 문서 버전을 반환할 수 있습니다.
반환된 HTML 문서는 <html lang="en">...</html>과 같이
<html> 태그의 lang 속성도 선언해야 합니다.
 
이는 동일한 콘텐츠가 다른 언어로 제공된다는 것을 검색 엔진에 알리는 데 쓸모가 없으므로
head 내에서 hreflang 속성도 사용해야 합니다.
<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />
 
백엔드의 HTML 마크업은 특정 언어에 대해 YML 또는 JSON 형식으로 저장된  i18n placeholder와 콘텐츠를 포함합니다.
서버는 일반적으로 백엔드 프레임워크의 도움을 받아 특정 언어로 된 콘텐츠가 포함된 HTML 페이지를 동적으로 생성합니다.

References​

3. 다국어(multilingual) 사이트를 디자인하거나 개발할 때 어떤 점을 주의해야 하나요?

  • HTML 내에서 lang 속성을 사용합니다.
  • 사용자를 모국어로 안내합니다 - 사용자가 번거로움 없이 쉽게 국가/언어를 변경할 수 있습니다.
  • 래스터 기반 이미지(예: png, gif, jpg 등)의 텍스트는 확장 가능한 접근 방식이 아닙니다.
    • 이미지에 텍스트를 배치하는 것은 모든 컴퓨터에서 보기 좋은 비시스템 글꼴을 표시하는 데 여전히 널리 사용되는 방법입니다.
    • 그러나 이미지 텍스트를 번역하려면 각 텍스트 문자열에 각 언어에 대해 별도의 이미지가 생성되어야 합니다.
    • 금방 유지보수하기 어렵게 될 수 있습니다.
  • 단어/문장 길이 제한
    • 일부 콘텐츠는 다른 언어로 작성될 때 더 길어질 수 있습니다. 디자인의 레이아웃 또는 오버플로 문제에 주의하십시오.
    • 텍스트의 양이 디자인의 일부가 되거나, 디자인을 망칠 수 있는 디자인을 만들지 마세요.
    • 글자 수는 headlines, labels, button과 같은 것들과 함께 동작합니다.
      • 본문 텍스트나 댓글과 같이 자유롭게 흐르는 텍스트에는 문제가 적습니다.
  • 색상이 인식되는 방식에 유의하세요.
    • 색상은 언어와 문화에 따라 다르게 인식됩니다.
    • 디자인은 색상을 적절하게 사용해야 합니다.
  • 날짜 및 통화 서식(format) 지정
    • 달력 날짜는 때때로 다른 방식으로 표시됩니다.
      • 예. 미국의 "2012년 5월 31일"과 유럽 일부 지역의 "2012년 5월 31일".
  •  번역된 문자열을 연결하지 마세요
    • "오늘 날짜는 " + 날짜입니다. 같은 표현은 어순이 다른 언어에 대해선 깨집니다.
    • 대신 번역된 단어를 매개변수로 사용하는 템플릿 문자열을 사용하십시오.
      • 예를 들어, 각각 영어와 중국어로 된 다음 두 문장을 보세요.
        • I will travel on {% date %}
        • {% date %} 我会出发.
      • 변수의 위치는 언어의 문법 규칙으로 인해 다릅니다.
  • 언어 읽기 방향을 주의하세요
    • 영어는 왼쪽에서 오른쪽으로, 위에서 아래로 읽지만, 일본의 전통 텍스트는 위에서 아래로, 오른쪽에서 왼쪽으로 읽습니다.
  • 경로에 로케일을 포함하면 유용합니다
    • 예: en_US, zh_CN

4. data- 속성은 뭐가 좋나요?

JavaScript 프레임워크가 대중화되기 전,
프론트엔드 개발자는 비표준 속성과 같은 다른 꼼수 없이 DOM 내에 추가 데이터를 저장하기 위해
data 속성을 사용했습니다.
적절한 특성이나 요소가 없는 페이지나 애플리캐이션을 위해 데이터를 저장하기 위한 방법입니다.
 
data- 속성을 사용하는 것은 일반적으로 권장되지 않습니다.
사용자가 브라우저에서 요소 검사를 사용하여 데이터 속성을 쉽게 수정할 수 있기 때문입니다.
데이터 모델은 JavaScript 자체에 더 잘 저장되며
라이브러리 또는 프레임워크를 통한 데이터 바인딩을 통해 DOM의 업데이트된 상태를 유지합니다.
 
가장 일반적인 사용법은, 무의미한 클래스 또는 ID 속성을 만들지 않고,
Selenium 및 Capybara와 같은 엔드 투 엔드 테스트 프레임워크를 위한 셀렉터를 추가하는 것입니다.
(ex : data-testId)
 
 

5.  HTML5를 개방형 웹 플랫폼으로 만드는 요소들을 설명해 주세요

  • Semantics - 콘텐츠가 무엇인지 보다 정확하게 설명할 수 있습니다.
  • Connectivity - 새롭고 혁신적인 방식으로 서버와 통신할 수 있습니다.
  • Offline and storage - 웹 페이지가 클라이언트 측에 로컬 데이터를 저장하고, 이를 이용해 오프라인에서 보다 효율적으로 작동할 수 있습니다
  • Multimedia - 개방형 웹에서 비디오 및 오디오를 일급 시민으로 만듭니다.
  • 2D/3D graphics and effects - 훨씬 더 다양한 프레젠테이션 옵션을 허용합니다.
  • Performance and integration - 컴퓨터 하드웨어의 더 나은 속도 최적화 및 더 나은 사용을 제공합니다.
  • Device access - 다양한 입출력 장치를 사용할 수 있습니다.
  • Styling - 작성자가 보다 정교한 테마를 작성할 수 있습니다. 
References​

6. cookie, localStorage, sessionStorage의 차이점에 대해 설명해 주세요

cookie, localStorage, sessonStorage는 모두 클라이언트 측의 키-값 저장 메커니즘입니다.
값을 문자열로만 저장할 수 있습니다.

  cookie localStorage sessionStorage
초기화
클라이언트 또는 서버. 서버는 Set-Cookie 헤더를 사용할 수 있습니다.
 클라이언트 클라이언트
만료 수동 설정 영원함 탭이 닫힐 때
브라우저 세션 간 유지
 expiration에 따라 다름 Yes No
모든 HTTP 요청과 함께 서버로 전송
쿠키는 쿠키 헤더를 통해 자동으로 전송됩니다.
 No No
용량 (도메인당)
 4kb 5MB 5MB
접근 범위 모든 창 모든 창 같은 탭
참고: 사용자가 브라우저에서 제공하는 메커니즘을 통해 검색 데이터를 지우기로 결정하면
저장된 모든 cookie, localStorage, sessionStorage 데이터가 지워집니다.
 
로컬 영속성을 설계할 때,
특히 데이터베이스 또는 이와 유사한 서버 측 저장(물론 사용자 작업에도 불구하고 지속됨)과 같은 대안과 비교할 때
이 점을 염두에 두는 것이 중요합니다.

References​

7. <head></head> 사이에 CSS <link>를 배치하고 </body> 바로 앞에 JS <script>를 배치하는 것이 좋은 이유는 뭔가요? 반례는 뭔가요?

1. <head> 사이에 <link> 배치

<head>에 <link>를 넣는 것은 최적화된 웹사이트를 구축하기 위한 적절한 사양의 일부입니다.

페이지가 처음 로드되면 HTML과 CSS가 동시에 구문 분석됩니다.

  • HTML은 DOM(Document Object Model)을 생성하고 CSS는 CSSOM(CSS Object Model)을 생성합니다.
  • 두 가지 모두 웹 사이트에서 비주얼을 생성하는 데 필요하므로 "의미 있는 첫 번째 페인트(first meaningful paint)" 타이밍을 빠르게 하는데 필요합니다.

프로그레시브 렌더링은 웹 페이지의 성능을 개선(특히 인식되는 로딩 시간을 개선)하여,
가능한 한 빨리 표시할 콘텐츠를 렌더링하는 데 사용되는 기술에 부여된 이름입니다.
프로그레시브 렌더링은 최적화 점수로 측정하는 요소입니다.
문서 하단 근처에 스타일시트를 배치하는 것은 많은 브라우저에서 프로그레시브 렌더링을 방해합니다.

일부 브라우저는 스타일이 변경되는 경우 페이지의 요소를 다시 그리는 것을 방지하기 위해 렌더링을 차단합니다.
이 경우 사용자는 빈 흰색 페이지를 보게 됩니다.
 
혹은, 몇몇 브라우저에서는 스타일이 적용되지 않은 웹 페이지를 표시하는
스타일 없는 콘텐츠의 깜빡임(flashes of unstyled content;FOUC)이 있을 수 있습니다.

2. </body> 바로 앞에 <script>를 배치

<script> 태그는 다운로드 및 실행되는 동안 HTML 구문 분석을 차단하여 페이지 속도를 저하시킬 수 있습니다.
맨 아래에 스크립트를 배치하면 먼저 HTML을 구문 분석하여 사용자에게 표시할 수 있습니다.

document.write()를 포함하는 경우 <script>를 맨 아래에 배치하지 않습니다만,
최근에는 document.write()를 사용하는 것이 좋지 않습니다.
 
<script>를 맨 아래에 두는 것은 전체 문서가 구문 분석될 때까지 브라우저가 스크립트 다운로드를 시작할 수 없음을 의미합니다.
이렇게 하면 DOM 요소를 조작해야 하는 코드에서 오류가 발생하지 않고 전체 스크립트가 중단되지 않습니다.
 
<head>에 <script>를 넣어야 하는 경우 defer 속성을 사용하면,
HTML이 구문 분석된 후에만 스크립트를 실행하는 것과 동일한 효과를 얻으면서,
브라우저는 스크립트를 더 일찍 다운로드할 수 있습니다.

3. <head> 및 <body> 태그는 선택 사항입니다

HTML5 사양에 따라 <head> 및 <body>와 같은 특정 HTML 태그는 선택 사항입니다.
Google의 스타일 가이드는 바이트 절약을 위해 두 태그를 제거할 것을 권장합니다.
그러나 이 방식은 아직 널리 채택되지 않았고, 성능 향상이 미미할 가능성이 높으며
대부분의 사이트에서 문제가 되지 않을 가능성이 높습니다.

References​

8. 프로그레시브 렌더링(progressive rendering)이 뭔가요?

프로그레시브 렌더링은 웹 페이지의 성능을 개선(특히 인식되는 로딩 시간을 개선)하여
가능한 한 빨리 표시할 콘텐츠를 렌더링하는 데 사용되는 기술에 부여된 이름입니다.

 

광대역 인터넷 이전에 널리 사용되었으나,

모바일 데이터 연결이 점점 대중화되고 신뢰할 수 없게 됨에 따라 현대에도 여전히 사용되고 있습니다!

 

이러한 기술의 예는 다음과 같습니다.
  • 이미지 지연 로드(Lazy loading of images)
    • 페이지의 이미지를 한 번에 모두 로드되지 않습니다.
    • JavaScript는 사용자가 이미지를 표시하는 페이지 부분으로 스크롤할 때 이미지를 로드하는 데 사용됩니다.
  • 보이는 콘텐츠 우선 순위 지정(or above-the-fold rendering) 
    • 지연된 스크립트를 사용하거나 DOMContentLoaded/load 이벤트를 수신하여 다른 리소스 및 콘텐츠에 로드할 수 있습니다.
    • 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링될 페이지 양에 필요한 최소한의 CSS/콘텐츠/스크립트만 포함합니다.
    • 비동기 HTML 조각(Async HTML fragments)
      • 백엔드에서 페이지가 구성될 때 HTML 부분을 브라우저로 플러시합니다.
      • 기술에 대한 자세한 내용은 here에서 확인할 수 있습니다.

References​

9. 이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 브라우저가 이 속성을 평가하는 프로세스를 설명해 주세요.

장치 디스플레이 너비에 따라 사용자에게 다른 이미지를 제공하려는 경우 srcset 속성을 사용합니다.
레티나 디스플레이가 있는 장치에 고품질 이미지를 제공하면 사용자 경험이 향상되는 반면
저사양 장치에는 저해상도 이미지를 제공하면 성능이 향상되고 데이터 낭비가 감소합니다.
저사양 장치에 고해상도 이미지를 제공하는 것은 데이터 낭비입니다(더 큰 이미지를 제공해도 눈에 띄는 차이가 없기 때문).
 
 
예를 들어 다음 마크업은 브라우저에 클라이언트 해상도에 따라 소형, 중형 또는 대형 .jpg 그래픽을 표시하도록 지시합니다. 
 <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">
 
각 값 목록은 ,로 연결되어 있으며, 값은 space로 분리되어 있습니다.
각 값의 첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비입니다.
 
디바이스 너비(w)가 320px인 경우 다음과 같은 계산을 합니다.
  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

그 후 아래와 같은 절차에 따라 해상도에 따라 이미지를 선택합니다.

  1. 클라이언트의 해상도가 1x라면 1.5625가 가장 가깝기 때문에, small.jpg에 해당하는 500w가 브라우저에서 선택됩니다.
    • 이는 최소값이 됩니다.
  2. 해상도가 레티나(2x)인 경우 브라우저는 최소값보다 크면서 결과 비율에 가장 가까운 해상도를 사용합니다.
    • 500w(1.5625)는 1보다 크지만, 이미지가 나빠 보일 수 있기 때문에 선택하지 않는다는 의미입니다.
    • 즉, 브라우저는 결과 비율이 2에 가까운 1000w(3.125) 이미지를 선택합니다.
srcsets는 좁은 화면 장치에 더 작은 이미지 파일을 제공하기 위한 기능입니다.
데스크탑 디스플레이처럼 큰 이미지가 필요하지 않으며, 데이터 낭비를 줄여 사용자 경험을 향상시키기 위함입니다.

References​

10. HTML 템플릿 언어를 사용해 본 적이 있으신가요?

예, Pug(구 Jade), ERB, Slim, Handlebars, Jinja, Liquid, EJS 을 사용해 보았습니다.
제 생각에는 그것들은 거의 동일하며
콘텐츠를 이스케이프 처리하는 유사한 기능과
표시할 데이터를 조작하기 위한 유용한 필터를 제공합니다.
대부분의 템플릿 엔진은 표시하기 전에 커스터마이징 된 처리가 필요한 경우 자체 필터를 삽입할 수도 있습니다.

위 질문들에 대한 다른 답변들은 아래 링크에서 확인하세요!​

반응형

'FrontEnd' 카테고리의 다른 글

[번역] CSS 레이아웃과 블록 서식 맥락 이해하기  (0) 2023.02.02
[번역] 타입스크립트를 활용한 타입 프로그래밍 입문  (0) 2023.02.01
[번역] 빅테크 프론트엔드 기술 인터뷰 : CSS편  (0) 2023.02.01
[번역] 집합론으로 이해하는 타입스크립트  (0) 2023.01.31
Javascript로 Python range 함수 구현하기  (0) 2023.01.31

'FrontEnd' Related Articles

티스토리툴바