👩🏻‍🦰 프론트엔드 면접

브라우저 동작 원리

1. HTML 마크업을 처리하고 DOM (문서객체모델) 트리를 빌드한다.
2. CSS 마크업을 처리하고 CSSOM (CSS객체모델) 트리를 빌드한다.
3. DOM 및 CSSOM 을 결합해 렌더링 트리를 형성한다.
4. 렌더링 트리에서 레이아웃을 실행해 각 노드의 형태를 계산한다.
5. 개별 노드를 화면에 래스터화 한다.

Interview_Question_for_Beginner | Github

문서 파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
렌더링 엔진(브라우저 엔진) : 크롬의 블링크, 사파리의 웹킷 등 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소. 주된 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일

크로스 브라우징

웹 표준에 따라 개발을 하여 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다.
즉, 브라우저의 렌더링 엔진이 다른 경우에 인터넷이 이상없이 구현되도록 하는 기술이다.
웹 사이트를 서로 비슷하게 만들어 어떤 환경 에서도 이상없이 작동되게 하는데 그 목적이 있다.
즉, 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 방법을 말한다.

Interview_Question_for_Beginner | Github

쿠키 vs 세션저장소 vs 로컬저장소

쿠키 Cookies

( HTTP 쿠키, 웹 쿠키, 브라우저 쿠키 )
인터넷 사용자가 어떠한 웹사이트를 방문했을 때 사이트가 사용하고 있는 서버를 통해
사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다.
사용자의 쿠키 정보가 서버로 전달되어 사용자를 구별하는 데 쓰인다.

쿠키의 단점

• 4KB 내의 데이터만 보관할 수 있다.
• 매 HTTP 통신시 전송되어 비교적 통신속도가 느리다.
• 별도의 암호화 없이 포함돼 전달되어 사용자 정보의 보안 문제

웹스토리지 Web Storage

HTML5에서 쿠키의 단점을 보완해 만든 기술로
용량이 비교적 크고(5MB), HTTP 요청시 서버에 전달되지 않으며, 보안도 한층 강화

• 세션 저장소 (Session Storage) : 브라우저가 닫힐 경우(세션 종료) 삭제되어 간단한 입력 내용을 저장해 에러시 복구하는 기능으로 사용한다.
• 로컬 저장소 (Local Storage) : 삭제하지 않는 한 남아있어 지속적으로 필요한 자동로그인이나 설정값을 저장한다.

<script> async ? defer ?

웹 브라우저가 외부 자바스크립트를 불러오는 <script> 를 만나게 되면 해당 스크립트를 내려받아 해석하고 실행할 때까지 웹 문서의 HTML 코드 파싱을 잠시 미룬다.
✔ HTML 렌더링을 멈추고 Script 로드

용량이 큰 스크립트를 문서 해석 초기에 만나게 되면 페이지를 불러오는 속도를 지체시켜 전체적 성능을 떨어뜨리게 되는데, 이런 병목 현상을 막기 위한 <script> 태그의 속성이다.
async 혹은 defer 된 스크립트는 문서 파싱의 중단 없이 동시에 내려받게 된다.

<script async>
<script defer>

async 와 defer 는 HTML 렌더링과 Script 로드를 동시에 하며
✔ 둘의 차이는 Script 가 실행되는 시점이다.

async 는 window load 전에 Script 로드가 완료되면 즉시 실행되는데 반해
defer 는 HTML 문서의 파싱(렌더링)이 끝난 후 DOMContentLoaded 전에
문서에 삽입된 순서에 따라 실행된다.