23.10.24 항해 99 16기 기술면접 대비

1. CORS(Cross Origin Resource Sharing)에 대해 설명해주세요.

 1) CORS 란?

     교차 출처 리소스 공유라고 불리며 출처가 다른 자원들을 공유한다는 뜻으로 한출처에 있는 자원에서 다른 출처에

     있는 자원에 접근하도록 하는 개념

     출처란 프로토콜 + 호스트 + 포트 3가지가 같으면 동일 출처라고 부르고 이중 하나라도 다른 경우 CORS 정책에

     준수하여 요청해야만 정상적으로 응답을 받을 수 있다

 2) 필요이유

     모든 곳에서 데이터를 요청할 수 있게 된다면 다른사이트에서 원래 사이트를 흉내낼수도 있다 이런 공격을

     할 수 없도록 브라우저에서 보호하고 필요한 경우에만 서버와 협의하여 요청 할 수 있도록 하기 위해 필요하다 

 

2. 브라우저의 작동 방식에 대해서 설명해주세요.

 1) URL 입력 및 요청

     사용자가 URL 을 입력하면 브라우저는 해당 주소의 웹 서버에 HTTP 요청을 보냄

 2) 서버 응답 및 데이터 수신 

     서버는 요청을 처리하고 HTML, CSS, JavaScript 파일 등을 브라우저에게 응답으로 보냄

 3) HTML 파싱 및 DOM 생성

     브라우저는 HTML 을 파싱하여 Document Object Model (DOM) 트리를 만듭니다. 이 트리는 웹 페이지의 구조를

     나타낸다

 4) CSS 파싱 및 CSSOM 생성 

     CSS 파일도 파싱되어 CSS Object Model (CSSOM) 트리가 생성됩니다. 이것은 페이지의 스타일을 정의합니다.

 5) 렌더 트리 생성 

     DOM 과 CSSOM 을 결합하여 렌더 트리를 생성합니다. 이 트리는 페이지의 시각적 표현을 나타내며,

    각 요소의 크기와 위치를 포함한다

 6) 레이아웃

     렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산한다

 7) 페인팅

     계산된 스타일과 레이아웃 정보를 사용하여 화면에 페이지를 그린다. 여기에는 텍스트, 이미지, 다른 시각적

     요소들이 포함된다

 8) JavaScript 실행 

     필요한 경우 Java Script 가 실행되어 동적인 기능을 추가하거나 페이지를 변경한다

 9) 로드완료

     모든 요소와 스크립트가 로드되고 실행되면 페이지 로딩이 완료 되며 사용자는 페이지와 상호 작용할 수 있다

 

* DOM 과 CSSOM

  웹 사이트를 브러우저 상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해 파싱하는데

  이때 두가지 요소를 파싱 하는데 HTML 과 CSS 이다

  HTML 을 파싱하여 자료를 구조화한 것을 DOM 이라고 하고 CSS 내용을 파싱하여 자료를 구조화한 것을

  CSSOM 이라고 한다