[Interview] 네트워크/HTML/Browser 면접 예상 질문

네트워크

대칭키와 비 대칭키(공개키)에 대해 설명해주세요

대칭키 : 암호화, 복호화에 사용하는 키가 동일한 방식으로 속도가 빠르다는 장점이 있지만, 같은 키를 사용하기 위해서 키를 교환해야한다는 문제가 발생한다. 키를 교환하는 중 키가 탈취될 수 있다.

비 대칭키 : 암호화, 복호화에 사용되는 키가 서로 달라 비 대칭키라고 한다. 대칭키의 키 교환 문제를 해결하기 위해 등장했으며, 이름 그대로 키가 공개되어있기 떄문에 키를 교환할 필요가 없다. 하지만 키의 길이가 길고 복합한 수학적 연산을 해야되기 떄문에 암호화, 복호화 속도가 느린 단점이 있다.

TCP의 흐름제어와 혼잡제어에 대해 말해주세요

혼잡제어 : 네트워크의 혼잡을 피하기 위해 송신측에서 보내는 데이터의 전송 속도를 줄이는 것, 3번 연속된 응답이나 패킷 손실로 인한 타임아웃을 보고 혼잡을 알아낸다. (AIMD, Slow Start, Fast Retransmit, Fast Recover)

흐름제어 : 송 수신측의 데이터 처리 속도 차이로 인해 송신측의 데이터 전송량을 수신측에 따라 조절하는 것 (Stop and Wait, Go Back N)

HTTP 버전별 차이점에 대해 말해주세요

HTTP/0.9 : 가장 초기버전으로 메소드, 헤더가 없어 HTML을 조회하는 용도로만 사용할 수 있었으며, 응답 코드가 없어 오류 메시지를 추가해서 응답했다.

HTTP/1.0 : 상태코드가 응답값 시작부분에 포함되어 성공과 실패를 바로 확인하게 되었고, 헤더가 추가되어 확장이 가능하게 되었다.

HTTP/1.1 : OPTION, DELETE, PUT, TRACE의 메소드가 추가되었고 헤더도 몇가지 추가되었다. 성능 향상을 위해 일정 시간동안 서버와 API서버간의 연결 정보를 기억해 반복적으로 일어나는 통신의 연결과 끊음을 줄였다.

HTTP/2.0 : 바이너리 포멧으로 인코딩된 Message와 Frame으로 구성되어있다. 스트림을 이용해서 한번의 커넥션으로 여러개의 데이터를 동시에 주고받을 수 있다. 이전 헤더내용과 중복되는 필드를 재 전송하지 않아 데이터를 절약하고 헤더를 허프만 코딩을 사용하는 HPack라는 압축방식을 사용해 데이터 전송 효율을 높였다.

HTTP/3.0 : QUIC 기반의 HTTP, TCP/IP기반의 어플리케이션 레이어 프로토콜인 HTTP를 QUIC위에 얹었다. QUIC : TCP의 신뢰성과, UDP의 빠른 성능을 토대로 구현, UDP 기반으로 만들어졌으며 대역폭을 예상해서 패킷 혼잡을 피하는 것이 주요 특징

HTTP 상태 코드

• 2xx : 성공
• 3xx : 리다이렉션
• 4xx : 클라이언트 에러 코드
  • 401 : Unauthorized로, 클라이언트는 요청에 대한 응답을 받기 위해 인증이 필요
  • 403 : Forbidden로, 클라이언트는 자원에 접근할 권리가 없음
• 5xx : 서버 에러코드

HOL Block에 대해 설명해주세요

HOL Block는 1.1버전까지 한번에 하나의 파일만 전송이 가능하기 떄문에, 여러 파일을 전송할 때 하나의 선행하는 파일이 늦어지면 전체 파일 전송시간이 늘어나는 문제로 2.0 버전에서 스트림을 통해 한번에 병렬 전송을 통해 이러한 문제를 해결하였다.

브라우저에 google.com을 입력했을 때 어떤일이 발생할까요?

1. 먼저 URL을 분석하여 TLD로 끝나면 요청을 보내고, 아니면 기본 검색 엔진으로 검색을 한다
2. URL로는 통신을 할 수 없기 때문에 IP주소로 변환해야 한다. 캐시( 크롬 DNS ⇒ hosts )를 확인하고 없으면 DNS를 통해 재귀적으로 (Root ⇒ TLD ⇒ 해당 서버 ) 쿼리를 보내면서 IP주소로 변환한다.
3. 라우터를 통해 해당 서버의 게이트웨이까지 이동합니다.
4. 실질적인 통신을 하기위해서는 물리주소인 MAC주소가 필요하기 때문에 ARP를 통해 IP주소를 MAC 주소로 변환합니다.
5. 대상 서버와 HTTP or HTTPS 연결을 한다음 서버에게 해당 페이지를 달라고 요청하고 서버는 이를 브라우저로 전송합니다
6. 브라우저는 응답을 해석하여 페이지를 사용자에게 보여줍니다.

쿠키와 세션에 대해말해주세요

쿠키 : 클라이언트에 저장되는 작은 파일로 이름, 값, 옵션 (만료날짜, 경로, httpOnly, Secure 등) 을 저장

세션 : 같은 사용자로부터 들어오는 요청을 하나의 상태로보고 그 상태를 관리하는 기술

차이점

REST API에 대해 설명해주세요

JWT에 대해 말해주세요

JWT는 Json Web Token으로 Json 포맷을 이용하여 사용자의 정보를 저장하는 claim 기반의 웹토큰이다. 토큰 자체를 정보로 사용하는 self-contained 방식

HEADER : 타입과 암호화 방식

PAYLOAD : 토큰의 정보, 클레임 셋이라고 부른다.

SIGNATURE : 헤더와 페이로드를 합친 문자열에 헤더에 포함된 알고리즘과 비밀키를 통해 생성하고 Base64로 인코딩 한 것

헤더와 페이로드는 암호화 되지 않기 떄문에, 토큰이 탈취된다면 변조의 위험이 있다. 토큰의 유효성을 검사하기 위해 시그니처를 사용한다.

HTTPS란?

HTTP에 SSL/TLS 기반의 Secure Socket를 활용한 프로토콜로 브라우저와 서버가 각각 키를 가지고 있어, 해당 키를 사용해서 암호화/복호화하여 HTTP통신을 하기 때문에 중간에 탈취되어도 키가 없으면 데이터의 내용을 알 수 없다.

HTTPS 통신 흐름에 대해 설명해주세요

1. 클라이언트가 서버에게 random Data와 암호화 기법 목록을 보낸다.
2. 서버는 서버가 생성한 randomData와 서버가 결정한 함호화 기법, 인증서를 클라이언트에게 보냅니다.
3. 클라이언트는 CA에서 발급한 인증서인지 확인하고, 인증서를 public key로 복호화 합니다.
4. 인증이 되면 클라이언트는 앞서 보내준 random data와 서버가 보내준 random data를 합쳐 생성하고 public key로 암호화 하여 premaster 키를 만듭니다.
5. 이 premaster 키를 서버로 보내고 서버에서는 private key를 통해 복호화 하여 대칭키를 얻을 수 있습니다.
6. 대칭키를 통해 서버와 클라이언트가 통신할 수 있습니다.

TCP vs UDP

URI vs URL vs URN

• URI (Uniform Resource Identifier)
  • 자원을 고유하게 식별하고 위치를 지정하는 통합 자원 식별자
  • 인터넷 프로토콜을 명시
• URL (Uniform Resource Location)
  • 특정 서버의 한 리소스에 대한 구체적인 위치
  • 자원의 위치와 접근 방법을 알려줌
• URN (Uniform Resource Name)
  • 자원의 위치와 독립적인 이름
  • URL이 변경되면 기존의 객체를 찾을 수 없다는 URL의 한계를 극복하기 위해 사용

CORS란?

CORS란 다른 Origin과 리소스를 공유하기 위해 사용하는 정책이다. 브라우저는 기본적으로 보안상의 문제로 Same-Origin-Policy를 따른다. 이때 추가적인 HTTP Header을 사용해서 다른 Origin의 리소스에 접근할 수 있게 해주는 정책이다.

• 같은 Origin이란? Scheme, host, port 가 모두 같을 때만 same-origin이고 하나라도 다를시 cross-origin이다.

HTML / Browser

HTML 렌더링 과정

1. DOM, CSSOM 생성 가장 첫번째 단계는 서버로 부터 받은 HTML, CSS를 연산과 관리가 유리하도록 Object Model로 만들게 된다.
2. Render Tree 생성 DOM과 CSSOM으로 Render Tree를 만든다. 스타일 정보가 설정되어 있으며 실제 화면에 표시되는 노드들로만 구성된다. head와 display: none 등 화면에 실제 표시되지 않는 노드들을 제외한다.
3. Layout(reflow) 브라우저 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산한다.
4. Paint(repaint) 요소들을 실제 화면에 그린다. 이미 위치와 크기가 계산되어있기 때문에 실제 픽셀값을 채워넣는 과정

위의 과정을 통해 우리는 화면을 볼 수 있다.

크로스 브라우징이란?

웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 작업. 브라우저마다 렌더링 엔진이 다르기때문에 같은 코드라도 다르게 보일 수 있다.

크로스 브라우징 대처 방법

라이브러리 활용 호환성 이슈를 해결하기 위해 jQuery, polyfill 등과 같은 라이브러리를 사용한다. 그러나 라이브러리의 사이즈가 커질 수 있고, 라이브러리를 관리하는 비용이 발생한다

직접 구현 직접 구현시 기능 탐지를 이용한다. 브라우저를 파악해서 분기문을 사용하는것 보다 해당 브라우저에서 기능을 제공하는지에 따라 구현한다.

reset.css CSS의 경우 브라우저마다 기본스타일이 제각각이다. 동등한 스타일 적용을 위해 default값을 초기화 시킬 필요가 있기 떄문에 사용한다.

prefix 명시 브라우저의 엔진을 prefix로 적어준다. 이후 가장 마지막에 접두어가 없는 속성을 추가해준다

1
2
3
4
5

.menu {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

doctype란?

HTML이 어떤 버전으로 작성되었는지 미리 선언하여, 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해준다.

HTML과 XHTML의 차이점

XHTML은 HTML과 유사하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있다.

XHTML의 doctype를 명시해야하며 <html>, <head>, <title>, <body> 태그를 반드시 사용해야한다. 또한 태그는 반드시 순서대로 닫혀야한다.

브라우저의 최적화 방법

1. HTTP 요청을 최소화 할 수 있는지 분석한다.
   • 이미지 요청수를 분석하고 많다면 CSS 스프라이트를 적용할 수 있는지 검토한다.
   • HTTP요청에 대해 최적화가 되었다면 캐시 설정을 진행한다.
2. 구성 요소의 크기를 줄인다.
   • 불필요한 공백이나 주석을 제거한다.
   • 압축을 적용해서 파일 크기를 줄인다
3. 랜더링 향상을 위해서 다음과 같은 방법을 적용한다.
   • 스타일 시트는 head태그에 자바스크립트 태그는 body의 가장 마지막에 위치시킨다.
   • 한번에 페이지를 보여주기보다 점진적으로 보여주는 방법을 적용한다.