개발일기/CS(면접)

브라우저의 작동방식과 쿠키와 세션이란?

w.llama 2024. 7. 23. 21:21

브라우저의 작동방식을 설명해라

  • 브라우저의 주요 구성요소
    • 사용자 인터페이스
      - 사용자 인터페이스와 렌더링 엔진사이의 동작을 제어한다
    • 렌더링 엔진
      - HTML과 CSS를 파싱하여 요청한 콘텐츠를 화면에 표시한다.
    • 통신
      - HTTP 요청과 같은 네트워크 호출을 처리한다
    • 자바크스립트 해석기
      - JavaScript 코드를 해석하고 실행
    • UI 백엔드
      - 콤보 박스와 같은 기본 UI 요소를 그린다.
  • 브라우저의 작동과정
    1. URL입력
      - 사용자가 주소 표시줄에 URL을 입력한다. 브라우저 엔진은 입력받은 주소값에 해당하는 데이터를 먼저 캐시에서 찾고, 없으면 서버에 요청한다
    2. HTTP 요청
      - 브라우저는 서버에 HTTP요청을 보낸다. 요청에 필요한 리소스(HTML, CSS, JavaScript,이미지 등)에 대한 정보가 포함된다.
    3. 응답 수신
      - 서버가 요청된 리소스를 응답으로 보낸다. 이 응답은 HTML 문서 형태로 브라우저에 전달된다
    4. 파싱 및 DOM트리 생성
      - 브라우저의 렌더링 엔진이 HTML 문서를 파싱하여 DOM(Document Object Model)트리를 생성합니다. 동시에 CSS파일을 파싱하여  CSSOM(CSS Object Model) 트리를 만든다.
    5. 렌더 트리 생성
      - DOM과 CSSOM 트리를 결합하여 렌더 트리를 생성합니다. 렌더 트리는 화면에 표시할 요소와 그 스타일 정보를 포함한다.
    6. 레이아웃
      - 렌더 트리의 각 노드의 위치와 크기를 계산하여 레이아웃을 결정합니다. 이과정은 뷰포트의 크기를 기중으로 이루어진다.
    7. 페인트
      - 최종적으로 각 노드를 화면에 그립니다. 이 과정에서 텍스트, 생상, 이미지 등 모든 시각적 요소가 화면에 표시됨
    8. JavaScript 실행
      - JavaScript 해석기가 스크립트를 실행하여 동적 콘텐츠를 처리, 이과정에서 DOM을 조작하거나 이벤트를 처리할수 있음
  • 위와 같은 단계를 걸쳐 사용자에게 빠르고 정확하게 요청사항을 표시한다.

쿠키,세션의 개념과 차이점

  • 쿠키
    - 클라이언트 측에 저장되는 작은 텍스트파일
    - 주로 사용자의 로그인 정보,선호도, 등등 저장
    - 만료일을 설정할 수 있으며, 만료일이 지나면 자동으로 삭제됨
    - 구성요소: 이름, 값, 만료일, 도메인등등
  • 세션
    - 서버 측에서 사용자 상태를 관리하기 위한 방법
    - 각 사용자에 대한 고유한 세션 ID를 생성하여 사용자를 식별
    - 주로 사용자의 로그인 상태, 장바구니 내역, 사용자 프로필 등 주요한 정보를 유지
  • 쿠키와 세션의 차이점
  쿠키 세션
저장위치 클라이언트(사용자 브라우저)에 저장 서버에저장
보안 클라이언트에 저장 보안에 취약할수있음 서버에 저장되어 상대적으로 안전
라이플사이클 만료기간을 지정할수있음
브라우저 종료후에도 유지가능
일반적으로 브라우저 종료시 삭제
기간 지정도 가능
용량 클라이언트에 저장되므로 용량제한이 있음 서버 메모리를 사용하므로 더많은 데이터 저장가능
속도 클라이언트에 정되어있어 반응이 빠름 서버의 처리가 필요해 상대적으로 느림