기술 면접 준비(4)

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

1. URL 입력 및 요청 초기화

   • 사용자가 주소창에 URL을 입력하거나 링크를 클릭합니다.
   • 브라우저는 입력된 URL을 파싱하여 프로토콜, 도메인, 경로 등을 식별합니다.

2. DNS 조회

   • 브라우저는 도메인 이름을 IP 주소로 변환하기 위해 DNS(Domain Name System) 서버에 쿼리를 보냅니다.
   • DNS 서버는 해당 도메인의 IP 주소를 응답으로 보냅니다.

3. TCP 연결 설정

   • 브라우저는 획득한 IP 주소로 TCP(Transmission Control Protocol) 연결을 시도합니다.
   • 3-way handshake 과정을 통해 서버와 클라이언트 간 연결이 설정됩니다.

4. HTTP 요청 전송

   • 연결이 설정되면 브라우저는 HTTP(Hypertext Transfer Protocol) 요청을 생성합니다.
   • 이 요청에는 요청 메서드(GET, POST 등), 헤더, 때에 따라 본문이 포함됩니다.

5. 서버 응답 처리

   • 웹 서버는 요청을 처리하고 HTTP 응답을 생성합니다.
   • 응답에는 상태 코드, 헤더, 그리고 요청된 콘텐츠(HTML, CSS, JavaScript 등)가 포함됩니다.

6. 콘텐츠 렌더링

   • 브라우저는 받은 HTML을 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
   • CSS 파일을 파싱하여 CSSOM(CSS Object Model)을 생성합니다.
   • DOM과 CSSOM을 결합하여 렌더 트리를 만듭니다.

7. 페이지 레이아웃 계산

   • 브라우저는 렌더 트리를 기반으로 각 요소의 정확한 위치와 크기를 계산합니다.
   • 이 과정을 레이아웃 또는 리플로우라고 합니다.

8. 페이지 그리기

   • 계산된 레이아웃을 기반으로 페이지의 각 요소를 화면에 그립니다.
   • 이 과정을 페인팅이라고 합니다.

9. JavaScript 실행

   • HTML에 포함된 JavaScript 코드나 외부 스크립트를 실행합니다.
   • 이 과정에서 DOM 조작, 이벤트 처리, AJAX 요청 등이 수행될 수 있습니다.

10. 추가 리소스 로딩

    • 이미지, 비디오, 폰트 등 추가적인 리소스를 로드합니다.
    • 이러한 리소스들은 비동기적으로 로드되어 페이지 렌더링에 영향을 줄 수 있습니다.

11. 페이지 완성 및 상호작용

    • 모든 리소스가 로드되고 렌더링이 완료되면 페이지가 사용자와 상호작용할 준비를 마칩니다.
    • 브라우저는 사용자 입력을 처리하고 필요에 따라 페이지를 업데이트합니다.

면접에서 할 대답

• 사용자가 URL을 입력하면 브라우저는 웹 서버에 HTTP 요청을 보내고 데이터를 수신합니다.
• 받은 HTML과 CSS는 파싱되어 DOM과 CSSOM 트리를 생성하며, 이들은 렌더 트리로 병합됩니다.
• 렌더 트리를 기반으로 레이아웃 단계에서 각 요소의 크기와 위치를 계산합니다.
• 계산된 정보로 화면에 페이지를 그리는 페인팅 단계가 이루어집니다.
• 필요한 JavaScript가 실행되고 모든 요소가 로드되면 페이지가 완성되어 사용자와 상호 작용합니다.
  
  

2. 쿠키, 세션의 개념과 차이를 설명해보세요.

1. 배경: HTTP의 무상태(stateless) 특성

   • HTTP 프로토콜은 기본적으로 무상태(stateless)입니다.
   • 무상태란 각 요청이 이전 요청과 독립적으로 처리된다는 의미입니다.
   • 이는 서버가 클라이언트의 상태를 유지하지 않아 확장성이 좋지만, 사용자 인증 등 상태 유지가 필요한 경우 문제가 됩니다.

2. 쿠키(Cookie)

   • 정의: 클라이언트 측에 저장되는 작은 데이터 조각
   • 특징:
     • 서버가 생성하여 클라이언트에 전송
     • 클라이언트의 브라우저에 저장
     • 이후 요청 시 자동으로 서버에 전송됨
   • 용도:
     • 사용자 선호 설정 저장
     • 장바구니 정보 유지
     • 사용자 추적 및 분석

3. 세션(Session)

   • 정의: 서버 측에서 유지되는 사용자별 상태 정보
   • 특징:
     • 서버에 데이터 저장
     • 클라이언트에는 세션 ID만 쿠키로 저장
     • 보안에 더 강함
   • 용도:
     • 로그인 상태 유지
     • 사용자별 데이터 관리

4. 쿠키와 세션이 생겨난 이유

   • HTTP의 무상태(stateless) 특성을 보완하기 위해
   • 웹 애플리케이션에서 사용자 상태를 유지할 필요성
   • 개인화된 사용자 경험 제공
   • 보안 강화 (특히 세션의 경우)

5. 쿠키와 세션의 주요 차이점

   • 저장 위치: 쿠키는 클라이언트, 세션은 서버
   • 보안: 세션이 쿠키보다 일반적으로 더 안전함
   • 용량: 쿠키는 용량 제한이 있고, 세션은 서버 자원에 따라 다름
   • 라이프사이클: 쿠키는 설정된 만료 시간까지, 세션은 브라우저 종료 시 까지 유지

6. 사용 시 고려사항

   • 쿠키: 민감한 정보 저장 시 암호화 필요, 용량 제한 고려
   • 세션: 서버 리소스 사용, 분산 환경에서의 관리 방법 고려

이 기술들은 HTTP의 무상태(stateless) 특성으로 인한 제한을 극복하고,
웹 애플리케이션에서 사용자 경험을 개선하며 필요한 상태 정보를 유지하기 위해 발전했습니다.
쿠키와 세션을 적절히 활용함으로써 무상태 프로토콜 위에서 상태 유지가 필요한 기능들을 구현할 수 있게 되었습니다.

면접에서 할 대답

• 쿠키는 클라이언트 측에 저장되는 작은 데이터 조각이고, 세션은 서버 측에서 유지되는 사용자별 상태 정보 입니다.
• 둘의 큰 차이점은 저장위치, 보안, 용량, 라이프사이클이 있습니다.
• 쿠키와 세션의 기술이 생겨난 주요 이유는 HTTP 프로토콜의 무상태(stateless) 특성을 보완하기 위해서 입니다.
• 무상태란 각 요청이 이전 요청과 독립적으로 처리된다는 의미인데 서버가 클라이언트의 상태를 유지하지 않아 확장성이 좋지만, 사용자 인증 등 상태 유지가 필요한 경우 문제가 됩니다.