Quiz - Page loading optimization, 웹 표준, FOUC, ARIA & Screen reader, CSS & JS Animation, CORS
0
Interview Questions
목록 보기
64/67
1. 브라우저가 한 번에 1개의 도메인에서 내려받는 자원은 몇 개인가요?
- 대부분의 브라우저는 한 도메인에서 내려 받을 수 있는 최대 자원 개수는 6개입니다.
1.1 예외에는 어떤 것들이 있나요?
- 한 도메인에서 내려 받을 수 있는 최대 자원 개수를 브라우저 설정에서 변경할 수 있습니다.
- 또한 한 도메인을 여러 개의 서브도메인으로 쪼개는 domain sharding을 사용하여 한 도메인에서 내려 받을 수 있는 최대 자원 개수를 초과시킬 수 있습니다.
2. 페이지 로드 시간을 줄이는 세 가지 방법에 관해서 이야기 해 보세요.
- 페이지 로드에 필요한 font 파일은 preconnect, image 파일을 preload합니다.
- CDN(Content Delivery Network)을 통해 반문자와 가까운 서버에 웹 페이지의 콘텐츠를 로드함으로써 네트워크 대기 시간을 줄이고 TTFB를 낮춥니다.
- 브라우저 캐시를 사용하여 웹 페이지를 캐싱함으로써 TTFB를 낮춥니다.
- JavaScript, CSS, HTML 파일을 압축하여 사용합니다.
- image를 압축하고 최적화합니다.
- image의 크기가 큰 경우 손실 및 무손실 압축을 합니다.
- 현재 페이지에서 불필요한 image를 지연 로드합니다.
3. 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Space를 사용했습니다. 어떻게 하실 건가요?
- 코드의 일관성을 위해 space 대신 tab을 사용하겠습니다.
- 그리고 IDE마다 tab의 설정값이 다르므로 tab 설정값을 논의하여 같게 맞추겠습니다.
4. 간단한 Slideshow 페이지를 만드는 방법에 관해서 이야기해 보세요.
- 슬라이드 모든 컨텐츠를 담을 하나의 컨테이너를 만들고, overflow속성을 hidden으로 설정하여 넘치는 부분을 숨깁니다.
- 특정 버튼을 눌렀을 때, transform 속성에 translateX 값을 줘서 이동시킬 거리만큼 당겨줍니다.
- 특정 버튼을 눌렀을 때, 컨텐츠의 margin-left에 음수 값을 더해줘서 이동시킬 거리만큼 당겨줍니다.
- trainsition 속성을 줘서 부드럽게 움직이게 합니다.
5. 웹표준의 중요성에 관해 설명해주세요.
- 웹 표준은 브라우저 종류와 버전에 따른 기능 차이에 대해 호환이 가능하도록 제시된 표준을 말합니다.
- 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹 사이트를 볼 수 있도록 웹 표준 기술 작업이 필요합니다.
- 웹 표준 준수의 장점
- 콘텐츠의 올바른 구조화로 인해 수정, 운영 관리에 편리함
- 구조화된 웹페이지로 인해 검색엔진 최적화(SEO)가 잘 됨
- 효율적인 소스 작성으로 인해 파일 크기와 서버 공간을 절약
- 다양한 브라우저 환경에 대응 가능하므로 접근성이 향상
6. Flash of Unstyled Content에 관해 설명해주세요. 또 FOUC를 피하기 위해선 어떻게 해야 하나요?
- FOUC는 브라우저로 웹 페이지에 접근했을 때 CSS 스타일이 모두 적용되지 않은 상태에서 화면이 표시되어 발생하는 화면 깜박임, 스타일 적용 전과 후가 그대로 화면에 노출된 상태로 변경되는 현상 등을 말합니다.
- FOUC가 발생하는 주요 원인은 브라우저의 동작 방식과 연관이 있습니다.
- 브라우저는 HTML을 파싱해서 DOM 트리를 생성하고, 화념에 표시된 내용을 선언한 마크업 순서에 따라 스타일을 적용하고 스크립트를 실행합니다.
- 최근 웹 페이지는 여러 개의 CSS 파일을 참조하고, DOM 구조를 변경하므로 FOUC가 빈번히 발생하고 있습니다.
- FOUC를 최소화하기 위해서는 header 태그 안에 CSS를 link하고,
@import사용을 자제해야 합니다.
7. ARIA와 screenreader에 대해 설명해주세요. 또 접근성을 지원하는 웹사이트를 어떻게 만드는지에 대해도 설명해주세요.
-
ARIA는 Accessible Rich Internet Applications의 약어로 장애를 가진 사용자가 웹 콘텐츠와 웹 애플리케이션에 더 쉽게 접근할 수 있는 방법을 정의한 여러 특성을 말합니다.
- ARIA는 HTML을 보충해 일반적으로 보조 기술이 알 수 없는 상호 작용 및 흔히 사용되는 애플리케이션 위젯에 필요한 정보를 제공합니다.
-
screenreader는 화면 디스플레이에 표시되는 내용을 일반적으로 텍스트 음성 변환, 점자, 소리 아이콘과 같이 비시각적인 방법으로 전달하는 소프트웨어 애플리케이션입니다.
-
접근성을 지원하는 웹사이트를 만들기 위해서 여러 가지를 고려해야 합니다.
- 콘텐츠를 위한 대체 텍스트를 넣어주어야 합니다.
- heading, list, table, input과 같은 콘텐츠 구조들이 적절하게 마크업되어 있어야 합니다.
- 색 대비가 뚜렷하고, 텍스트 크기 조절시 정보 유실이 없어야 합니다.
- 마우스로 사용 가능한 기능은 키보드로도 사용 가능해야 합니다.
- 텍스트를 음성으로 읽어주는 경우를 고려하여, 많은 사람들이 텍스트콘텐츠를 읽고 이해하기 쉽도록 해야 합니다.
8. CSS 애니메이션과 JavaScript 애니메이션의 차이점에 관해 설명해주세요.
-
CSS 애니메이션은 비교적 간단한 애니메이션을 구현하는데 주로 사용됩니다.
- 예를 들어 특정 영역에 마우스를 올리거나 특정 영역의 크기를 바꾸는 것들이 해당됩니다.
- CSS 애니메이션은 반응형으로 애니메이션을 구현하기 좋고, 요소에 직접 애니메이션을 지정하므로 애니메이션이 어디서 일어나는지 알아보기 쉽습니다.
- 또한 메인 스레드가 아닌 별도의 Compositor 스레드에서 그려지기 때문에 메인 스레드에서 작업하는 JavaScript보다 효율적입니다.
-
JavaScript 애니메이션은 CSS로 처리하기에 복잡하고 무거운 애니메이션을 구현하는데 주로 사용됩니다.
- JavaScript로 구현할 경우 요소의 위치를 계속해서 재계산하기 때문에 비효율적이고 사용자의 눈에 가장 부드러운 60fps가 유지되지 않았지만, RequestAnimationFrame이 등장하면서 동일한 구현 방식으로 60fps를 달성시킬 수 있었습니다.
- 요소의 스타일 변하는 순간마다 제어할 수 있기 때문에 세밀게 구현할 수 있습니다
- GPU를 통한 하드웨어 가속을 제어할 수 있습니다.
- 브라우저 호환성 측면에서 CSS보다 뛰어납니다.
9. CORS는 무엇의 약자이고 어떤 문제에 대해서 언급하는 것인가요?
- CORS는 Cross-Origin Resource Sharing의 약어로 웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙을 말합니다.
-
보안상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다.
- 예를 들어, XMLHttpRequest와 Fetch API는 SOP(Same Origin Policy)를 따릅니다.
- 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 자원만 불러올 수 있으며, 자신의 출처와 다른 자원을 요청하려면 CORS를 사용하여 교차 출처 HTTP 요청에 대한 위험을 완화합니다.
-
