- ⭐ HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요? (50번)
: 웹 브라우저의 HTML 파서는 웹 페이지를 순차적으로 해석합니다. 이때, JavaScript 코드를 만나게 되면, 해당 코드에 DOM 혹은 CSSOM을 수정하는 내용이 있을 수 있기 때문에, 안정적인 렌더링을 위해 파싱을 잠시 중단합니다. JavaScript 실행이 끝나면 파싱을 계속 진행합니다.
이러한 동작은 JavaScript가 DOM의 특정 요소에 접근하려 할 때, 그 요소가 아직 파싱되지 않은 경우 오류를 방지하기 위함입니다. 그래서 많은 웹 개발자들이 JavaScript 코드를 <body> 태그의 끝 부분에 위치시키는 추천하는 이유 중 하나입니다. 이렇게 하면 대부분의 DOM 요소가 이미 파싱된 상태에서 JavaScript가 실행되므로 위와 같은 중단이 적게 발생하게 됩니다.
- Box model에 대해 설명해주세요. (51번)
: 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.
1. Content (내용): 텍스트나 이미지가 들어있는 박스의 실질적인 내용을 포함하는 영역입니다.
2. Padding (패딩): 내용과 테두리 사이의 간격입니다. 패딩은 박스 내부의 여백으로 생각할 수 있으며, 콘텐츠 영역을 둘러싸는 빈 공간을 생성합니다.
3. Border (테두리): 내용와 패딩 주변을 감싸는 테두리로, 박스의 외곽선입니다. 테두리는 다양한 스타일, 너비, 색상으로 설정할 수 있습니다.
4. Margin (마진): 박스의 가장 바깥쪽 영역으로, 다른 요소와의 간격을 조절하는 데 사용됩니다. 마진은 외부 여백으로 생각할 수 있으며, 이것은 투명하므로 배경색이나 이미지를 가질 수 없습니다.
- ⭐ Attribute와 Property의 차이에 대해 설명해주세요. (52번)
: HTML 요소의 초기 값을 설정하는 것이 Attribute입니다. 반면 Property는 요소의 현재 상태를 나타내는, DOM 객체의 속성입니다.
예를 들어, HTML에서 <input type="text" value="Hello">와 같이 설정한 경우, value attribute는 "Hello"로 초기 설정되었지만, 사용자가 입력 필드의 내용을 변경하면 property의 값이 바뀝니다. 이때 attribute 값은 여전히 "Hello"로 유지되지만, property 값은 사용자가 입력한 내용으로 변경됩니다.
- ⭐ display 속성에 어떤 것들이 있는지 설명해 주세요. (54번)
display 속성은 HTML 요소의 표시 유형을 결정합니다.
1. none: 요소를 렌더링하지 않습니다.
2. block: 요소를 블록 수준 요소로 표시합니다. 블록 수준 요소는 새로운 줄에서 시작하며, 가능한 한 전체 너비를 차지합니다.
3. inline: 요소를 인라인 수준 요소로 표시합니다. 인라인 수준 요소는 새로운 줄을 시작하지 않고, 필요한 만큼의 너비만을 차지합니다.
4. inline-block: 인라인 수준으로 표시되지만, 블록 수준의 스타일링 속성(예: 너비와 높이)을 적용받을 수 있습니다.
5. flex: 요소를 유연한 박스 모델로 표시합니다. 이를 통해 복잡한 레이아웃과 정렬 기능을 쉽게 구현할 수 있습니다.
6. grid: 요소를 그리드 레이아웃 컨테이너로 표시합니다. 그리드 레이아웃은 2차원(행과 열)의 레이아웃 시스템을 제공합니다.
7. table과 관련된 값들: table, table-row, table-cell 등의 값들로, 요소를 표와 관련된 다양한 부분으로 표시합니다.
- ⭐ 시맨틱 마크업에 대해 설명해주세요. (57번)
: 시맨틱 마크업은 정보의 의미나 구조를 명확히 표현하기 위해 사용하는 HTML 태그를 의미합니다.
시맨틱 마크업의 예시로는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <time> 등이 있습니다.
시맨틱 마크업을 사용하면 웹 콘텐츠의 구조와 의미가 더욱 명확해지며, 검색 엔진 최적화(SEO), 접근성 향상, 웹 사이트 유지 및 관리의 용이성 등 여러 이점이 있습니다.
1. 의미 전달: 시맨틱 태그는 콘텐츠의 의미나 목적을 명확히 전달합니다. 예를 들어, <article> 태그는 독립적으로 구성된 내용을 나타내며, <nav> 태그는 탐색 링크의 그룹을 나타냅니다.
2. 검색 엔진 최적화: 시맨틱 마크업은 검색 엔진이 웹 페이지의 구조와 콘텐츠를 더 잘 이해할 수 있게 도와줍니다. 이로 인해 검색 결과의 정확성이 향상될 수 있습니다.
3. 접근성 향상: 시맨틱 태그는 스크린 리더와 같은 보조 기술이 웹 페이지의 구조와 콘텐츠를 더 잘 이해하도록 도와줍니다. 이를 통해 장애를 가진 사용자가 웹 콘텐츠에 더 쉽게 접근할 수 있게 됩니다.
4. 스타일링과 스크립팅의 용이성: 의미론적인 태그를 사용하면 CSS나 JavaScript를 이용하여 특정 부분을 스타일링하거나 조작하기가 더 쉬워집니다.
- HTML5의 태그에 대해 설명해주세요. (58번)
: 웹의 다양성과 기능성을 더욱 풍부하게 만들어 줍니다.
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <time>, <figure>, <details> 등이 있고, 이 외에도 HTML5에는 오디오 및 비디오를 위한 <audio>와 <video>, 그래픽을 위한 <canvas>와 같은 여러 다른 태그와 기능들이 추가되었습니다.
- ⭐ script 태그에서 Async와 Defer의 차이에 대해 설명해주세요. (59번)
: <script> 태그에는 자바스크립트 파일을 불러올 때 사용되는 async와 defer라는 두 가지 속성이 있습니다.
스크립트가 문서의 파싱과 렌더링에 방해를 주지 않게 하려면 async 또는 defer 속성을 사용해야 하는데,
이 두 속성은 자바스크립트 파일을 로드하고 실행하는 방식에 영향을 미치며, 웹 페이지의 로딩 속도와 성능에 차이가 있습니다.
1. (async나 defer 없이) 기본적인 <script> 태그
브라우저가 <script> 태그를 만나면, HTML 파싱을 중단하고 스크립트를 다운로드, 파싱, 실행합니다. 스크립트가 완전히 로드 및 실행되면 HTML 파싱을 재개합니다.
이로 인해 웹 페이지의 렌더링이 지연될 수 있습니다.
2. async 속성
<script> 태그에 async 속성이 추가되면, 스크립트는 병렬로 다운로드되며, 다운로드가 완료되는 즉시 실행됩니다.
HTML 파싱과 스크립트 다운로드가 동시에 이루어지므로 페이지 렌더링 속도가 개선될 수 있습니다.
그러나 스크립트가 다운로드 완료된 순서대로 실행되지 않을 수 있기 때문에, 스크립트 간의 종속성이 있을 경우 문제가 발생할 수 있습니다.
3. defer 속성
<script> 태그에 defer 속성이 추가되면, 스크립트는 병렬로 다운로드되지만, HTML 파싱이 완전히 끝난 후에 순서대로 실행됩니다.
HTML 파싱에 방해를 주지 않으므로 페이지 렌더링 속도에 큰 영향을 주지 않습니다.
스크립트 간의 종속성이 있을 경우 defer 속성을 사용하는 것이 좋습니다. defer로 로드된 스크립트는 문서의 순서대로 실행되기 때문입니다.
- html에서 Doctype 선언하는데 선언하는 목적은 무엇인가요?
: DOCTYPE은 웹 문서에서 사용되며, 문서의 유형 및 HTML 버전을 나타냅니다.
브라우저에게 어떤 버전의 HTML을 사용하여 웹 페이지가 작성되었는지 알려주어서, 브라우저가 페이지를 올바르게 렌더링할 수 있습니다. 이를 통해 문서를 표준 모드 또는 호환 모드로 렌더링할지 결정합니다.
또한, 웹 페이지의 HTML이 해당 DOCTYPE 버전에 대해 유효한지 체크하는 유효성 검사 도구를 사용할 수 있습니다.
- ⭐ HTML에서 폼(form)태그를 사용하여 데이터를 서버에 전송하는 방법의 과정에 대해 설명해주세요.
: 데이터를 수집하고 서버에 전송하기 위해 HTML에서 <form> 태그를 사용합니다.
action속성은 서버의 URL을 지정하여 폼 데이터가 전송될 위치를 나타내고, method속성은 데이터를 전송하는 방법(GET, POST 등)을 지정합니다.
<input>, <textarea>같은 태그로 사용자에게 데이터 입력을 허용하는 다양한 입력 요소를 폼 안에 포함시킬 수 있습니다.
<input type="submit"> 또는 <button type="submit">을 사용하여 사용자가 폼을 제출할 수 있도록 제출 버튼을 추가 가능합니다.
사용자가 제출 버튼을 클릭하면, 폼의 데이터는 action 속성에 지정된 URL로 method 속성에 지정된 방법으로 전송됩니다.
- ⭐쿠키와 세션스토리지와 로컬스토리지의 차이점을 설명해주세요
: 쿠키와 로컬 스토리지, 세션 스토리지는 모두 브라우저에서 데이터 저장하는 역할을 하나 용도가 다르다.
쿠키는 작은 용량의 데이터를 저장하고, 서버와 클라이언트 간 데이터 교환에 사용된다.
웹 스토리지는 서버에 클라이언트 데이터를 저장하지 않고, 여기에는 로컬 스토리지와 세션 스토리지가 있다.
로컬 스토리지와 세션 스토리지는 브라우저 내에서 대용량 데이터를 저장하고 클라이언트 측에서만 사용된다.
로컬 스토리지는 데이터가 브라우저를 닫아도 지속되고, 세션 스토리지는 세션이 종료되면 데이터가 사라진다는 차이가 있다.
( * 쿠키
주로 세션 관리, 사용자 추적, 데이터 인증 등에 사용
4KB로 제한되어 작은 데이터만 저장 가능
설정된 만료 날짜까지 지속될 수 있으며, 브라우저를 닫아도 지속
모든 HTTP 요청에 자동으로 포함되며, 서버 및 클라이언트 간 데이터 교환에 사용
보안 상 취약
* 로컬 스토리지
클라이언트 측 데이터 저장에 사용
대부분의 브라우저에서 5~10MB 정도의 큰 저장 용량을 제공
브라우저를 닫더라도 지속됩니다. 수동으로 삭제
동일 출처 정책(Same-Origin Policy)에 따라 보안이 유지
* 세션 스토리지
클라이언트 측 데이터 저장에 사용
대부분의 브라우저에서 5~10MB 정도의 큰 저장 용량을 제공
브라우저 세션이 종료되면(브라우저가 닫히면) 데이터가 사라짐
동일 출처 정책(Same-Origin Policy)에 따라 보안이 유지 )
- ⭐ 검색엔진 최적화(SEO) 방법
: SEO(Search Engine Optimization)는 웹사이트의 가시성을 높이기 위해 검색엔진이 사이트의 콘텐츠를 쉽게 이해하고 인덱싱 할 수 있도록 최적화하는 과정입니다.
시맨틱 태그를 사용하면 검색엔진이 웹 페이지의 구조와 콘텐츠의 의미를 더 잘 이해할 수 있기 때문에 SEO에 도움이 됩니다.
또한, 메타 태그 최적화로 <meta> 태그에 제목, 설명, 키워드 등을 적절하게 포함하는 방법도 있습니다.
- ⭐ 브라우저 렌더링 원리
: HTML 파일을 서버로부터 내려받은 후 파싱하여 DOM 트리를 구축합니다.
이후 CSS 파일을 파싱 하여 CSSOM 트리를 구축합니다.
이때 HTML중간에 자바스크립트가 있다면 HTML파싱을 중단하고 자바스크립트를 실행합니다.
이후 DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 구축합니다.
뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산하며 이를 Layout 단계라 합니다.
계산한 위치/크기를 기반으로 화면에 그리며 이를 Paint 단계라 합니다.
JavaScript가 HTML 파싱을 중단시키는 이유는 JavaScript가 DOM을 수정할 수 있기 때문입니다. 그렇기에 브라우저는 스크립트의 실행 결과가 DOM 트리 구축에 영향을 미칠 수 있을 것이라고 판단하고 파싱을 중단합니다.
최근의 브라우저는 렌더 성능 최적화를 위해 여러가지 테크닉을 사용하는데, 예를 들면, GPU 가속화를 활용한 그리기와 비동기 파싱 등을 사용합니다.
'스터디 > 프론트 cs 스터디(23.08-23.11)' 카테고리의 다른 글
| # React 관련 지식 - 3 (0) | 2023.09.12 |
|---|---|
| # React 예상 질문 - 2 (0) | 2023.09.01 |
| # React 예상 질문 - 1 (0) | 2023.08.28 |
| # CSS 예상 질문 - 2 (0) | 2023.08.28 |
| # CSS 예상 질문 - 1 (0) | 2023.08.23 |