프론트엔드 기술 면접 - 4

지은·2023년 8월 1일
0

FE 면접

목록 보기
4/4

1. HTTP와 HTTPS의 차이점에 대해 말해주세요.

HTTP는 데이터를 평문으로 전송하기 때문에 보안에 취약하며, 데이터가 감청되거나 변조될 수 있습니다. 반면에 HTTPS는 SSL/TLS 프로토콜을 사용하여 데이터를 암호화하여 전송하기 때문에 개인 정보나 민감한 정보를 주고 받을 때 보안상 큰 장점을 가집니다.

HTTP는 데이터를 평문으로 전송하기 때문에, 데이터가 암호화되지 않아 제 3자가 데이터를 쉽게 감청하거나 변조할 수 있는 취약점이 있습니다. 따라서 개인 정보나 결제 정보 등 민감한 정보를 주고 받는 경우에는 보안상 큰 문제가 될 수 있습니다.

반면에 HTTPS는 HTTP에 보안이 추가된 방식으로, SSL 또는 TLS 프로토콜을 이용해 데이터를 암호화하여 전송합니다. 이렇게 암호화된 데이터는 제 3자가 감청하더라도 해독하기 어렵기 때문에 데이터의 기밀성이 보장됩니다. 또한 인증서를 통해 웹사이트가 신뢰할 수 있는 사이트임을 인증하여, 클라이언트가 서버와 안전하게 통신할 수 있도록 보장합니다.


2. HTTP 1.0와 HTTP 1.1의 차이점에 대해 말해주세요.

HTTP 1.0과 1.1의 가장 큰 차이점은 지속성입니다.

HTTP 1.0은 매 요청마다 새로운 TCP 연결을 열고, 응답 후에 닫는 형태로 동작합니다. 매 연결마다 3-way handshake가 발생하며, 매번 새로운 연결을 설정하고 해제하는 비용이 들기 때문에 성능이 저하될 수 있습니다.

반면에 HTTP 1.1은 지속적인 연결을 지원합니다. 한 번의 TCP 연결이 이루어진 후에 연결을 유지하며, 여러 요청과 응답을 처리합니다. 이로 인해 매번 연결을 만들고 해제하는 오버헤드가 감소하여 더 효율적이고 성능이 개선됩니다.


3. CORS(Cross-Origin Resource Sharing) 에러란 무엇인가요?

CORS 에러는 웹 브라우저가 동일출처정책(SOP)을 따르기 때문에, 다른 출처 간의 리소스 공유를 제한하는 보안 정책에 따라 발생하는 에러입니다.

웹 브라우저는 기본적으로 동일출처정책(SOP)을 따르는데, 이는 리소스를 요청하는 출처와 제공하는 출처가 동일한 경우에만 리소스를 공유하도록 제한하는 보안 정책입니다. (이때 동일한 출처란 같은 프로토콜, 호스트, 포트번호를 가지는 것을 의미)
이로 인해 웹 페이지에서 다른 출처의 API를 호출하거나 외부 리소스를 가져오는 작업 등이 브라우저에 의해 차단되는 경우가 발생할 수 있습니다.

  • 예를 들어, 만약 웹사이트 A에서 웹사이트 B로 API 요청을 보낸다고 가정하면, 두 웹사이트의 출처가 다르기 때문에 SOP 정책을 위반하여 브라우저에서 CORS 에러가 발생합니다.

CORS 에러는 어떻게 해결하나요?

CORS 에러를 해결하기 위해서는 웹 서버에서 허용된 출처를 명시하는 응답 헤더인 Access-Control-Allow-Origin을 설정해야 합니다. 서버는 클라이언트의 요청 헤더에 담긴 Origin 값을 확인하고, 이에 대응하는 헤더를 응답으로 전송하여 브라우저에서 CORS 에러를 방지합니다. 이를 통해 클라이언트가 해당 리소스에 접근할 수 있게 됩니다.

  1. 클라이언트 : HTTP 요청 헤더에 Origin을 담아 서버에 보냄
  2. 서버 : HTTP 응답 헤더에 Access-Control-Allow-Origin 담아 클라이언트에게 허용된 출처를 알려줌
  3. 클라이언트 : 서버로부터 받은 Access-Control-Allow-Origin 값을 확인하여, 요청된 출처가 허용되었으면 리소스 접근을 허용하고, 그렇지 않으면 차단함

4. 브라우저에 www.naver.com을 입력하면 어떤 일이 일어나나요?

  1. 브라우저가 DNS 서버(Domain Name System)에 ‘www.naver.com’의 IP 주소를 요청한다.
  2. DNS는 ‘www.naver.com’ 도메인의 IP 주소를 브라우저에게 전달한다.
  3. 브라우저는 받은 IP 주소로 TCP 연결을 수립하고, 연결이 이루어지면 해당 서버에 HTTPS 요청을 보낸다.
  4. 네이버 서버는 요청을 받아, 필요한 리소스(웹페이지의 HTML, CSS, JavaScript, 이미지 등)를 브라우저에게 응답한다.
  5. 브라우저는 받은 응답을 해석하고, HTML을 렌더링하여 사용자에게 웹페이지를 표시한다.

이 과정을 통해 브라우저는 사용자가 입력한 URL을 해석하여 해당 웹페이지를 가져오고, 그 내용을 렌더링하여 화면에 표시한다.


5. Typescript 사용하면 어떤 점이 좋나요?

JavaScript는 기본적으로 동적 언어이기 때문에, 런타임시에 변수의 타입이 동적으로 정해집니다.
하지만 TypeScript는 정적 타입 언어이기 때문에, 컴파일 단계에서 타입 에러를 체크할 수 있습니다. 이 때문에 개발자는 코드를 작성하는 동안 타입 관련 오류를 사전에 파악할 수 있어, 코드의 신뢰성을 높여주고 디버깅 시간을 단축시켜줍니다.

또한 타입스크립트는 코드의 가독성을 향상시켜 코드의 의도를 명확하게 전달하고 이해할 수 있도록 해주며, 코드의 유지보수성 또한 높여줍니다.

profile
개발 공부 기록 블로그

4개의 댓글

comment-user-thumbnail
2023년 8월 1일

좋은 글 감사합니다.

답글 달기
comment-user-thumbnail
2023년 8월 6일

4번 질문 같은 경우 실제로 질문을 받았었는데 제대로 대답을 못했던 기억이…ㅠㅠㅠ 고생하셨습니다 !!

답글 달기
comment-user-thumbnail
2023년 8월 6일

네트워크 공부가 부족했었는데 내용들이 도움이 많이 되었습니다!

답글 달기
comment-user-thumbnail
2023년 8월 6일

네트워크 진짜 자주 물어보는 것 같아요 고생하셨습니당 ㅎㅎ

답글 달기