프론트엔드 면접 질문

웹 보안

---

SOP (Same Origin Policy)

: 출처가 다를 경우 리소스 상호작용을 하지 못하도록 막는 보안 방식

• 같은 출처는 리소스 상호작용이 자유롭다. 이때 프로토콜, 호스트, 포트가 같아야 같은 출처라고 할 수 있다.
• 태그로 embedding 하는 것은 외부 리소스(출처가 다른 경우)를 가져와도 상호작용이 가능하다.
• 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 때문에 사용한다.

CORS (Cross-Origin Resource Sharing)

: 현재 출처에서 다른 출처의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

• SOP 정책을 우회해서 사용할 수 있는 방식이다.
• cross-origin HTTP로 리소스를 요청한다면 SOP 정책에 의해 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단된다.
  이 때 Access-Control-Allow-Origin 을 통해 cross-origin HTTP 요청을 허가하는 헤더를 추가해주면 된다.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인
    res.header("Access-Control-Allow-Origin", "https://example.com"); // 특정 도메인
});

웹 브라우저

---

브라우저가 웹 페이지를 랜더링하는 과정

사용자가 페이지에 접속하면 HTML을 서버에서 내려받게 되고 브라우저 렌더링 엔진에서 파싱(처리)하며 DOM 트리를 만든다.
link 태그를 통해 CSS 파싱을 해서 CSSOM 트리를 만든다.
DOM 트리와 CSSOM 트리를 결합한 것이 렌더 트리가 되고, 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산해서 화면에 뿌려준다. 이 과정을 진행하다가 자바스크립트 런타임 환경에 수행 권한을 넘겨 결과 값을 받으면 DOM 파싱은 중단된다.(때문에 대부분의 script 태그는 body 하단에 존재)
모든 노드 수치를 재계산해서 렌더 트리를 재생성하는 과정을 reflow라 하고, 이후 재생성된 렌더 트리를 다시 그리는 것을 repaint라 한다. 리페인트는 레이아웃 수치에 영향을 끼칠 때만 진행된다.

CSS

---

CSS Sprite

: css에서 이미지를 사용할 때 여러 개의 이미지를 하나로 합쳐서 각 이미지를 background-position 속성을 통해 잘라서 사용하는 기법

• 페이지의 첫 로딩속도를 줄여 서버로의 요청 횟수를 최소화하는 최적화기법중 하나이다.
• 요청 한번으로 사용할 이미지를 한번에 불러 올 수 있기때문에 로딩이 줄어든다. 즉 성능 최적화가 된다는 장점이 있다.
• 이미지를 합쳐서 사용하기 때문에 이미지가 많아지면 오히려 파일의 용량이 커져 로딩이 오래 걸리는 단점이 있다.
• 수정이 많은 이미지에는 사용하기가 어렵다는 단점이 있다.