FE Questions

브라우저의 작동 원리

• JS런타임 V8엔진, WEB API, Renderer
• 1,주소로 요청 후 응답받은 HTML을 파싱하여 랜더트리를 만듦. 레이아웃과 페인팅 과정을 거쳐 화면에 그림
• 2,html의 js script가 실행 되는데 이는 v8 엔진에서 구동
• 3,network 요청과 같은 처리는 별도의 스레드에서 처리된 후 콜백으로 넘겨 받는다.

Document Object Model

• 문서 객체 모델, 웹페이지의 문서를 트리형태의 자료구조로 표현한 것. js언어로 접근 가능하며, 트리의 순회, 수정 등 문서의 조작이 가능하다.

Event Bubbling and Capturing

• 웹페이지에서 클릭 등 이벤트 발생이 되면 Node Tree를 따라서 이벤트가 루트에서 이벤트 발생지까지 오고, 다시 루트로 올라간다.
• 루트에서 발생지까지 오는것을 캡처링. 발생지에서 루트로 가는것을 버블링,

Event delegation

• 이벤트 위임은 캡처링 단계에서 이벤트를 처리한다.
• 구조상 부모 노드에서 자식노드의 이벤트 처리를 대신하게 되는 것.

CORS

• cross origin resource strict 서로 다른 도메인간에는 원칙적으로 네트워크 요청이 브라우저에서 차단한다.
• 이를 허용하려면 같은 도메인을 맞추거나 서버에서 cros 정책에 대해서 허용해야 함.

크로스 브라우징

• 브라우저 마다 동일하게 동작하게끔 작업하는 것.
• 구형 브라우저에서 지원하지 않는 기능은 폴리필 등 코어 동작 코드를 추가로 삽입.

웹 성능과 관련된 Issues

• ??

서버 사이드 렌더링 vs 클라이언트 사이드 렌더링

• 서버 사이드 렌더링은 html문서 조립을 서버에서 진행, 클라이언트 사이드 렌더링은 화면의 완성을 브라우저에서 진행.
• 템플릿 엔진 , pug, ejs 등 데이터에 맞게 html template을 사용해서 완성된 마크업 문서를 내려준다.
• next.js도 마찬가지로 html preview를 리액트 컴포넌트로부터 생성한다. 템플릿 엔진과 다른점은 RCS Payload를 추가로 내려주어 후속 리액트 클라이언트 렌더링이 가능함.

CSS Methodology

• ? BEM

normalize.css vs reset.css

• reset.css는 모든 스타일을 초기화
• normalize.css는 브라우저 마다 다른 스타일을 통일하고, 기본 스타일은 유지.

그 외 프론트엔드 개발 환경 관련

• ?