HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
학습 TIL/
📝
25일차 배운 것 정리 (1)
📝

25일차 배운 것 정리 (1)

대주제
모의면접
작성완료
작성완료
전날 정리 노트 이동
다음 정리 노트 이동
주제
브라우저렌더링
해시테이블
날짜
Apr 22, 2022

목차

목차1. 모의면접 준비1. 브라우저 렌더링 과정질문List2 해시테이블 링크

1. 모의면접 준비

1. 브라우저 렌더링 과정

질문List

  • 브라우저에 특정한 URL을 입력하면 발생하는 각각의 단계에서 어떤 일이 발생하는지 알려주세요.
    • URL 파싱, DNS 조회, ARP로 MAC주소 변환, TCP 통신, 브라우저 렌더링
      • 답변
      💡
      브라우저가 주소창 입력이벤트를 감지 후 , 1) url을 해석하여 실제 resourse가 존재하는 서버의 주소를 찾는과정 2) 해당 server와의 연결을 통해 통신을 주고 받는 과정 3) 실제 화면상에 이를 그려주는 과정
      • 1. 서버의 주소를 찾는 과정
        • url 해석: 프로토콜과 url, port 번호를 통해 찾을 목적지와 방법에 대해서 정의합니다.
        • DNS 조회 : 도메인 주소를 IP 주소로 변환하는 단계
          • Appache: 로컬과 브라우저 캐시에서 먼저 검사
        • 라우터 : 네트워크 장비의 라우터를 통해 실제 server가 존재하는 게이트웨이 까지 이동
        • ARP: IP 주소가 MAC 주소로 변환
      • 2.server와 통신을 주고 받는 과정
        • TCP : client와 server의 연결을 보장하는 통신 프로토콜
          • 3way-handshake 방식을 통해, 서로를 확인하고 연결하는 과정
        • 응답: HTML, CSS , Javascript 파일등
      • 3. 실제 화면에 그려주는 과정 (브라우저 렌더링과정)
  • 브라우저 렌더링 과정을 흐름에 따라 설명해주세요.
    • HTML파싱, CSSOM , DOM Tree, RenderTree, Layout(reflow), Paint
      • 답변
      • HTML파싱: HTML 파일의 파싱 → DOM 트리 생성
      • CSSOM: CSS link만나서 CSS 파싱 → CSSOM 생성
      • RenderTree: DOM트리와 CSSOM을 합쳐서 RenderTree 생성
        • 렌더트리는 요소의 위치, 크기, 모양등의 정보를 가짐
      • Layout: 렌더트리의 요소들이 화면에 실제 어디에 위치해야하는지 결정
      • Paint: 레이아웃 트리를 순회하며, 페인트 순서정하기, 실제 화면 픽셀로 변환
        • 합성 단계를 거쳐 1장의 비트맵으로 출력
  • Reflow와 Repaint는 무엇이고, 언제 발생하나요?
      • 답변
      • reflow (링크)
        • 전체 reflow
            1. 글꼴 크기 변경과 같이 모든 렌더러에 영향을 주는 전역 스타일 변경.
            1. 화면 크기 변경에 의한 결과.
        • 부분 reflow
          • 위치가 바뀌면, 해당 요소와 자식, 형제들 까지 리플로우 & 페인팅
          • DOM 추가 시, 추가 된 노드 리플로우 & 리페인팅
          • display: none → block
        • 페이지 초기 렌더링 시(최초 Layout 과정)
          • 윈도우 리사이징 시 (Viewport 크기 변경시)
          • 노드 추가 또는 제거
          • 요소의 위치, 크기 변경 (left, top, margin, padding, border, width, height, 등..)
          • 폰트 변경 과(텍스트 내용) 이미지 크기 변경(크기가 다른 이미지로 변경 시)
      • repaint
        • 요소의 색깔만 바뀌는 경우, 해당 요소만 리페인팅
        • visibility, outline
       
      • 해결방법
        • position 속성 fixed, absolute는 리플로우 영향 받지 않음
        • inline 속성사용안하기
        • css class 필요한 만큼만 적기
        • virtual DOM을 사용하는 것이 항상 옳을까요? (링크)
          • virtual DOM의 장단점
            • 답변
            • 장점: DOM 조작 시 반복되는 리플로우,리페인팅 과정의 비효율성 해결
            • Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
            • virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요.
            • Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
  • script 태그를 body 가장 하단에 삽입하는 이유는 무엇일까요?
    • DOM 조작, 로딩 시간
      • 답변
      💡
      [한 줄] 브라우저 렌더링과정을 고려했을 때 화면을 빠르게 보여주기 위해서라고 생각합니다. [script] script 태그가 body의 마지막 부분에 있는 것은, <head>부분에 존재할 경우 html 파싱이 끝나기 전 script가 실행이 되어 html파싱이 멈추고, 그에 따라 존재하지 않는 DOM요소에 접근하게되어 오류가 발생할 수 있습니다. 따라서 html파싱 중 자바스크립트 파일이 반드시 필요하지 않다면 html파싱 이후에 스크립트가 실행되도록 하여, 오류발생을 막고 빠르게 화면을 보여줄 수 있습니다. [css] 한편 css 태그의 경우 스크립트와 다르게 html 파싱과정을 멈추게 하지 않고, 별도의 css파서가 스타일을 관리하기 때문에 헤드에 위치하도록 합니다. 또 script 가 실행될 때, 스타일이 파싱되지 않는 경우 의도치 않은 화면을 보여줄 수 있기 때문에 보통 body태그에 있는 스크립트에 앞서 실행되도록 합니다.
  • script 태그의 async, defer 어트리뷰트에 대해서 설명해주세요
    • HTML 파싱 블로킹, 비동기
      • 답변
      💡
      [script태그] <script> 태그는 브라우저에서 자바스크립트 파일을 다운로드 하고 실행하도록 동작하게 하는 태그를 의미합니다. 일반적으로 script 태그는 <body>태그가 끝나기 전에 위치하여 html파싱 이후 실행되도록 합니다. [script async & defer] script async와 defer 는 head 태그안에 script태그를 넣고자 할 때 사용할 수 있는 script태그의 속성들입니다. [async] script 태그는 스크립트 파일을 다운로드 하는 것과 실행하는 단계가 존재하는데, async 속성의 경우 html파일 파싱과정에서 script태그를 만났을 때, html파싱과 동시에 javascript 파일의 다운로드를 진행합니다. 하지만 곧이어 script 파일을 실행되면서 html파싱은 잠시 중단 됩니다. 또 여러개의 스크립트가 존재할 경우 순서에 상관없이 다운로드 된 파일이 먼저 실행되는 문제가 있습니다. [defer] 이를 보완할 수 있는 태그가 defer 태그라고 할 수 있습니다. defer속성은 html파싱 중 스크립트 태그를 만나면 html파싱과 동시에 스크립트 다운을 진행하되, html파싱 이후에 스크립트를 실행시킵니다. 따라서 html파싱이 중간에 멈추지 않으며, 스크립트도 순서에 따라 실행될 수 있어 이상적이라고 할 수 있습니다. html파싱과 동시에 스크립트 다운, html파싱 이후 스크립트 실행
 
꼬리질문
visibility: hidden과 display: none의 차이를 렌더링 관점에서 설명
  • DOM 트리와 렌더트리의 차이
reflow되었는지 repaint 되었는지 어디서 어떤 기준으로 판별하고 최적화할 수 있을까요?

2 해시테이블 링크

해시테이블 (Hash Table)에 대해서 간단하게 설명해주세요.
답변
  • 해시테이블은 효과적인 데이터 탐색을 위한 자료구조
  • 키와 값을 대응하도록 저장
  • 해시함수를 통해, 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하여 저장
    • 키 값을 해시함수를 통해 변환하고, 이를 배열의 idx로 참조하여 값을 저장하고 찾는 방법
    • js에는 배열의 크기가 고정되어 있지 않기 때문에 객체 키를 통해 값을 찾는 행위가 해시테이블
    • 해시함수는 동일한 입력값에 항상 같은 값을 리턴
해시테이블을 사용하는 이유, 장점에 대해서 설명해주세요.
답변
  • 직접주소테이블(입력받은 value가 바로 key가 되는 방식)이 가지는 데이터공간 비효울성 문제 해결
    • 비효율성문제: 입력받은 value가 크다면, 사이의 모든 공간이 비는 문제
    • 해결 : 해시함수를 통해, index의 범위를 보장
    • 후속문제: 해시값이 같아지는 해시충돌 발생
해시충돌에 대해서 설명해주세요
해시 충돌의 해결 방법에 대해서 설명해주세요.
답변
  • 좋은 해시함수 만들기
    • 좋은해시함수 : 해시충돌이 적게 발생하도록, 해시값이 균등하게 퍼지는 알고리즘을 가진 해시함수 - 근본적 해결 불가
  • 개방주소법 (Open Address)
    • 개방주소법 : 충돌이 발생할 경우, 비어있는 공간을 찾아 해당 index에 저장하는 방식
    • 선형탐사법, 제곱탐사법, 이중해싱등
      • 상세 설명
      • 선형탐사
        • 가장 기본적인 충돌해결기법으로 위에서 설명한 기본적인 동작방식이다. 선형탐사는 바로 인접한 인덱스에 데이터를 삽입해가기 때문에 데이터가 밀집되는 클러스터링(Clustering) 문제가 발생하고 이로인해 탐색과 삭제가 느려지게 된다.
      • 제곱탐사
        • 말 그대로 1^2,2^2,3^2.. 으로 탐사를 하는 방식으로 선형탐사에 비해 더 폭넓게 탐사하기 때문에 탐색과 삭제에 효율적일 수 있다. 하지만 이는 초기 해시값이 같을 경우에 탐사하는 역시나 클러스터링 문제가 발생하게 된다.
      • 이중해싱
        • 선형탐사와 제곱탐사에서 발생하는 클러스터링 문제를 모두 피하기 위해 도입된 것이다. 처음 해시함수로는 해시값을 찾기 위해 사용하고 두번째 해시함수는 충돌이 발생했을 때 탐사폭을 계산하기 위해 사용되는 방식이다.
  • 테이블 크기 재할당 (resizing)
    • resizing: 데이터공간의 70%이상이 찼을 경우, 해시테이블의 크기를 2~3배 늘려주어 테이블 공간을 확보
  • 자주 hit 되는 값을 cashe 처리
해시테이블을 활용한 사례가 있다면 알려주세요. 없다면 언제 쓰일 수 있을까요?
답변
  • js에는 배열의 크기가 고정되어 있지 않기 때문에 객체 키를 통해 값을 찾는 행위가 해시테이블
  • 비밀번호 저장 사례
    • 해시를 통해 암호화 하여 저장
해시테이블 시간복잡도
답변
  • 충돌이 없는 경우
    • 추가, 삭제, 탐색: O(1)
  • 충돌 발생한 경우
    • 추가, 삭제, 탐색: O(N)