📌 프론트엔드 면접 문제은행
⬆ 링크를 참조해서 답변을 준비해봤습니다!
작성한 답변들은 정답이 아닐 수 있으니 틀린 부분있다면 피드백 주시면 너무 감사하겠습니다!
같이 프론트엔드 취업 열심히 준비해봅시다! 🍯
1. doctype이 무엇을 하는 것인가요?
doctype 은 문서 형식 선언(Document Type Declaration)의 약자입니다. SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의를 따름을 지정하는 것입니다. HTML5 이전 즉, HTML4.01 버전이나 XHTML에서는 다음과 같은 방식으로 정의하였습니다.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">HTML5는 구조상 DTD로 충분히 정의될 수 없으나 표준 문서를 명시할 필요성이 있으므로 아래와 같이 간단하게 선언을 합니다.(SGML을 따르지 않기 때문 📌)
1.1 SGML이란?
표준 마크업 언어 규약(국제 표준으로 정한 마크업 언어)입니다. 컴퓨터용 전자 문서의 작성에 관한 국제 표준 규약입니다. 컴퓨터에서 쓰이는 문서를 작성함에 있어 이 전자문서가 어떠한 시스템 환경에서도 정보의 손실 없이 전송, 저장, 자동처리가 가능하도록 ISO(국제표준화기구)에서 정한 것이 SGML 입니다.
XHTML, XML 모두 SGML에 근거하여 만들어졌습니다..
2. 표준모드(standards mode)와 쿼크모드(quirks mode)는 무엇입니까?
웹 페이지는 HTML과 CSS로 구성됩니다. 하지만 오래된 웹페이지들은 매우 오래되어서 웹표준(W3C)에 부합하지 않습니다. 그러다 보니 의도한대로 렌더링되지 않는 문제가 생겼습니다. 이를 해결하기 위해 두가지 렌더링 모드를 갖게 되었습니다.
HTML 문서 최상단에 선언된 DOCTYPE에 따라 렌더링 모드를 선택하게 되는데 이 과정을 Doctype Sniffing 또는 Doctype Switching 이라고 합니다.
텍스트HTML5 부터는 <!DOCTYPE html>이라고만 적어도 완전 표준 모드로 렌더링해줍니다. 하지만 만약 다른 DOCTYPE을 사용하면 almost standards mode 또는 quirks mode로 렌더링 될 위험이 있기 때문에 조심하여야 합니다.
2.1 표준모드(standards mode)
W3C 표준에 따라 렌더링되는 모드입니다.
2.2 쿼크모드(quirks mode)
오래된 브라우저의 행동을 모방하여 렌더링해주는 모드입니다. 결론은 오래된 웹페이지들이 최신 버전의 브라우저에서 깨지지 않게 하려는 것에 목적이 있습니다.
- DOCTYPE 선언이 존재하지 않거나 잘못 적혀있을 경우, 웹 브라우저는 문서를 쿼크 모드로 해석합니다.
- DOCTYPE 선언 내의 URL이 생략된 경우, 웹 브라우저는 문서를 쿼크모드로 해석합니다.
3. XML과 XHTML이란?
3.1 XML
XML은 W3C에서 개발된 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. 다른 많은 종류의 데이터를 기술하는데 사용할 수 있습니다. XML을 설계할 때는 주로 문서를 표현하는데 집중했지만, 지금은 임의의 자료구조를 나타내는데 주로 사용됩니다.
최근에는 사용하기 쉽고 적은 메모리 공간을 사용하는 JSON을 더욱 많이 사용한다.
3.2 XHTML
XHTML은 HTML과 동등한 표현 능력을 지닌 XML 마크업 언어로 HTML보다 엄격한 문법을 가지고 있습니다. XHTML문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML라이브러리를 이용한 처리가 가능합니다.
웹 콘텐츠가 기존의 전통적인 컴퓨터에서 벗어나 모바일, 여러기기에서 이용되기 시작하면서 부정확한 HTML에 대한 엄격한 기준을 적용하기 위해서 나타났습니다.
4. 다국어가 포함된 페이지는 어떤 방식으로 제공하는가?
먼저 웹 접근성을 위해 HTML의 속성 중 하나인 lang에 해당하는 언어에 맞는 값을 집어넣어야합니다. 예를 들면 한국어는 ko와 같은 값을 넣어야 하고 영어는 en과 같은 값을 넣어야 합니다.
이러한 설정은 스크린리더가 올바르게 동작할 수 있도록 도와줍니다!
또는 언어 버전별로 다른 URL을 사용합니다. 크롤러는 요청 헤더에 Accept-Language를 설정하지 않고 요청을 전송하기 때문이다. 이를테면 example.com/kr, example.com/en처럼 지정하는 것인데, 가장 최상의 방법은 example.kr과 같이 국가별 도메인을 지원하는 것입니다.
한 페이지에 여러 언어를 동시에 사용하는 것도 자제해야합니다. 크롤러는 lang속성과 URL로 언어를 알아보기 보다는 콘텐츠 내용이 어떤 언어로 표시됐는지에 집중합니다.
5. data-속성은 무엇을 하는 것인가?
HTML5 이전 즉 HTML4.01 버전에서는 input[type='hidden']과 같은 꼼수(❓)를 사용하여 HTML에 데이터를 저장했었습니다. 하지만 HTML5가 도입되면서 HTML에도 데이터를 저장할 수 있게 되었고 자바스크립트로 간단하게 가져올 수 있게 되었습니다.
5.1 사용법
<input type="text" data-value="001" id="username">속성명은 data-value이지만 HTML 표준인 value와는 상관이 없습니당.
5.2 주의점 🧨
화면상에 렌더링되는, 접근 가능한 중요한 내용은 데이터 속성에 저장하지 않는 것이 좋습니다. 또한 HTML에 데이터를 넣으면 사용자 모두가 확인할 수 있고, 자바스크립트로 조작이 가능하기 때문에 민감한 데이터는 저장하지 않는 것이 좋습니다.
또한 JS 저장소에 저장하는 것과 비교하여 데이터 속성 읽기의 성능이 좋지 않습니다.
6. 쿠키와 세션저장소 로컬저장소의 차이점은?
6.1 쿠키(cookie)
쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다. document.cookie하면 현재 쿠키 정보가 나옵니다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지됩니다.
HTTP는 stateless의 특징을 가지고 있기 때문에 요청 자체만으로는 그 요청이 누구에게서 오는지 알 수 없습니다. 쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 통신 때마다 서버로 전송이 되어집니다.
매번 전송되는 불편함을 해소하고자 HTML5에서는 웹스토리지 개념이 도입되었습니다. 그 두가지는 로컬 스토리지와 세션 스토리지 입니다.
이 웹스토리지는 쿠키에 비해 큰 용량을 저장할 수 있고 서버에 불필요하게 데이터를 보내지 않는다는 장점을 가지고 있습니다.
6.2 로컬 스토리지
로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장합니다. 즉, 애플리케이션을 종료해도 계속적으로 정보가 남아있고 로컬스토리지는 도메인 단위로 저장하기 때문에 서로 다른 도메인에서 로컬스토리지에 접속할 수 없습니다.
예를 들면 자동 로그인 같은 것이 있습니다.
6.3 세션 스토리지
세션스토리지는 애플리케이션이 종료(브라우저 닫기)될 경우 클라이언트에 대한 정보가 삭제됩니다. 입력 폼 정보 저장같은 경우에 많이 사용됩니다.
7. script 태그 async defer의 차이
브라우저는 html문서를 위에서 부터 순차적으로 파싱하다가 script 태그를 만나게 되면 제어권을 자바스크립트 엔진에게 넘기고 자바스크립트 엔진이 파싱을 시작하는데 html 파싱이 중단되는 현상이 일어납니다. 이를 해결하기 위해 async나 defer같은 속성을 사용합니다.
두 속성 모두 html이 파싱이되는 도중에 병렬적으로 js파일 로드가 시작된다는 공통점이 있지만 약간의 차이점도 가지고 있습니다.
async는 js파일의 로드가 완료되었을 때 순서에 관계없이 실행이 됩니다. 따라서 순서를 보장할 수 없다는 단점이 존재하고 defer는 html이 모두 파싱되어 DOM생성이 완료되었을때 실행이됩니다.
8. Progressive rendering이란?
CSR과 SSR을 혼합시킨 렌더링 방식이라고 생각할 수 있습니다. 서버에서 중요한 컨텐츠를 렌더링한 후, 중요하지 않은 컨텐츠를 기다리지 않고 클라이언트로 스트리밍하는 기술입니다. 그 다음 서버에서 렌더링되면 나중에 중요하지 않은 콘텐츠를 스트리밍 합니다.
8.1 장점
- 서버에서 중요한 컨텐츠를 먼저 클라이언트로 스트리밍 하기 때문에 렌더링 시작 속도가 더 빠릅니다.
- JavaScript bundle을 로드하는데 걸리는 시간에 컨텐츠를 차단하지 않습니다.
8.2 단점
-
컨텐츠가 빠르게 렌더링되더라도 결국 중요하지 않은 컨텐츠 또한 렌더링이 끝나야 상호작용이 활성화되기 때문에 결국은 기다려야합니다.
-
PR이 확립된 프레임워크가 없고 웹 애플리케이션의 한계에 대한 의존도가 높습니다.
9. 이미지 태그 srcset
srcset 속성은 이미지 소스의 세트라는 의미를 담고 있습니다.
같은 비율의 다양한 크기를 가지는 동일 이미지들을 최소 2개이상 명시하는 속성입니다.
srcset 속성은 브라우저에 이미지 선택권을 위임하는 속성으로 개발자는 어느 환경에서 어떤 크기의 이미지가 선택될 것인지 알 필요가 없습니다.
또한 다른 비율의 다양한 크기의 다른 이미지들을 사용하고 싶다면, IMG 요소의 srcset 속성이 아닌 CSS의 @media 사용을 권장하고 있습니다.
도움되는 글이에요 감사합니다^^