2022-03-23 T.I.L

정종훈·2022년 3월 23일

T.I.L

목록 보기

10/20

네트워크 면접질문 준비

브라우저

SSR과 CSR에 대해 설명해주세요.
내 블로그
SSR : 서버에서 사용자에게 보여줄 페이지를 렌더링하여 사용자에게 페이지를 보여주는 방식이다.
HTML은 즉시 렌더링되므로 유저가 사이트를 직접 볼 순 있음(JS파일이 로딩되는동안 조작은 불가 TTV TTI 공부해야함 TTV 와 TTI의 간격이 큼. 하지만 기억했다가 실행)
CSR 보다 페이지를 구성하는 속도는 늦어지지만(HTML과 스크립트만 불러오고 나머지 CSS등은 또 다시 다운) 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
SSR 모든 컨텐츠가 HTML에 담겨있기 떄문에 SEO 좋음
네이버 블로그가 SSR로 바꿈

CSR(client-side rendering)클라이언트에서 사용자에게 보여줄 페이지를 렌더링하여 사용자에게 페이지를 보여주는 방식이다.
HTML파일에는 스크립트부분에 js파일 링크만 달랑 들어있음. 즉
JS파일에 다 들어있는 HTML, CSS와 모든 스크립트들을 한 번에 불러오기때문에
보다 페이지를 구성하는 속도는 늦어진다. 네트워크 상황이 좋지 않다면 글을 보기 전에 상당 시간 하얀 화면을 봐야한다.
또한 CSR에서 사용되어지고 있는 HTML 바디는 텅텅 비어있기 때문에 SEO가 좋지 않음.

https://www.youtube.com/watch?v=iZ9csAfU5Os
https://d2.naver.com/helloworld/7804182
https://proglish.tistory.com/216
AJAX에 대해 설명해주세요.
웹 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술임.
전체 페이지를 매번 새로고침하지 않고도 페이지의 일부만 데이터를 로드함.
새로고침을 매번 할 필요가 없으므로 웹 페이지 전환이 부드러워짐.
fetch 문법이나 async 문법 혹은 외부 라이브러리(axios등)
단점은 페이지 내 복잡도가 증가하므로 에러 발생 시 디버깅이 어려움.

https://qkrtkddn77.tistory.com/50
https://www.youtube.com/watch?v=nKD1atl6cAw

웹 페이지가 사용자에게 보여지는 과정에 대해서 설명해주세요.

URL 입력
URL 처리 : 웹 브라우저 URL 해석 ( http 프로토콜, 도메인 이름, 포트, 경로, 파라미터 등)
DNS 조회
서버로 request 전송
response로 브라우저에게 응답 전송

https://yeonjewon.tistory.com/87

네트워크 프로토콜

OSI 7계층 또는 TCP/IP 4계층에 대해 설명해주세요.
이 모형을 알아야하는 이유는 네트워크 관리자가 어떤 문제의 원인이 어디에 있는지 범위를 좁힐 수 있기 때문.
IT 기업은 고객에게 신제품을 설명할 떄 OSI 모형을 많이 활용함.
해당 제품이 어떤 계층에서 작동하는지 아니면 스택 전체에 걸쳐 작동하는지

모든 사람은 데이터 처리가 필요한 듯 하다(All-People-Seem-To-Need-Data-Processing)

7층. 응용 계층(Application) : 사용자에게 보이는 부분. 구글 크롬등의 웹 브라우저나 HTTP, FTP 등의 프로토콜등이 있음 UI를 제공하는 계층

6층. 표현 계층(Presentation) : 데이터의 변환 작업을 하는 계층
예를 들어 데이터를 안전하게 전송하기 위해 암호화, 복호화하는 작업

5층. 세션 계층(Session) : 응용 프로그램 간의 연결을 지원해주는 계층
2대의 기기, 컴퓨터 또는 서버 간에 대화가 필요하면 세션을 만들어야하는데 이 작업이 여기서 처리.

-----------------------이까지 애플리케이션 계층 ------------------

4층. 전송 계층(Transport) : 서비스를 구분하고 데이터의 전송 방식을 담당하는 계층 (TCP/UDP)

보낼 데이터의 용량과 속도, 목적지 등을 처리. TCP(전송 제어 프로토콜)

3층. 네트워크 계층(Network) : 네트워크를 논리적으로 구분하고 연결하는 계층 - 논리적 주소 사용 IP

2층. 데이터 링크 계층(Data Link)

1층. 물리 계층(Physical)

https://ryusae.tistory.com/4

TCP와 UDP 방식의 차이점을 설명해주세요.
둘다 프로토콜임.
TCP와 IP를 함께 사용하는데, IP가 데이터의 배달을 처리한다면 TCP는 패킷을 추적관리하게 됨.
(패킷은 인터넷 내에서 데이터를 보내기 위한 라우팅을 효율적으로 하기 위해 데이터를 여러 조각들로 나눈것)

TCP는 연결지향형 프로토콜 3-way handshaking과정을 통해 연결을 설정하기 때문에 높은 신뢰성 보장. 패킷에 대한 응답을 해야하기 때문에 성능이 낮고, 스트리밍 서비스에 불리(손실된 경우 재전송 요청을 하므로)

UDP는 데이터를 데이터그램 단위로 처리하는 프로토콜임. 데이터그램이란 독립적인 관계를 지니는 패킷이라는 뜻이므로 패킷마다 지맘대로인(연결을 위해 할당되는 논리적인 경로) 비연결지향 프로토콜임.
전송 순서 보장도 안되오, 데이터 수신 여부도 확인하지 않지고 신뢰성이 낮지만 속도가 빠르기 때문에 스트리밍 서비스에 적합.

출처: https://mangkyu.tistory.com/15

DNS에 대해 설명해주세요.
도메인 네임 시스템. 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP 주소로 변환.
https://aws.amazon.com/ko/route53/what-is-dns/

예를 들어 www.naver.com 치면
브라우저는 IP를 모르니 로컬 DNS 서버에 물어봄.(보통 통신사 것으로 세팅되어 있음)

거기에 없으면 Root DNS서버(전세계 13개) 에 물어보고 Root DNS서버는 .com으로 끝나는 도메인들을 담당하는 DNS 서버 반환 => 다시. .com에서 naver.com 반환 =>
다시 naver.com DNS 서버에서 www.naver.com 반환!

https://www.youtube.com/watch?v=6fc9NAQkcv0

HTTP

클라이언트 - 서버 아키텍처에 대해 설명해주세요.
2티어 아키텍쳐라고도 함.
클라이언트가 직접 서버에 접속하여 자원을 활용함.
그러기 위해 클라이언트 프로그램 내에 수많은 SQL문들이 존재.
https://m.cafe.daum.net/psdotnet/244w/14?q=D_3DXX1nSmrbc0&

장점은 데이터를 중앙 서버에 저장하여 관리하여 데이터의 유일성과 통일성을 보장하며 편리하지만
보안에 취약하고(서버털리면 끝) 유지보수도 어려움.

3티어 아키텍쳐는 클라이언트 - 서버 - DB 로 구성
DB를 서버에서 같이 관리하지 않기 때문에 보안측면에서 유리해지지만
관리 포인트가 늘어나 비용 증가
https://www.stevenjlee.net/2020/05/08/%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-3%EA%B3%84%EC%B8%B5-%EA%B5%AC%EC%A1%B0-3-tier-architecture/
https://tosiri.tistory.com/7

HTTP의 특징인 무상태성과 비연결성에 대해 설명해주세요.
서버가 클라이언트의 상태를 보존하지 않는 무상태 프로토콜임.
클라이언트가 서버에 HTTP 요청시 서버1이 다운되었다면 다른 응답 서버로 쉽게 바꿀수있기 때문에
무한한 서버 증설 가능 그러나 로그인 서비스같이 유저의 상태를 유지해야하는경유 브라우저 쿠키, 서버 세션, 토큰등을 이용해 상태 유지.

비연결성은 요청을 주고받을 때만 연결을 유지하고 응답을 주고 나면 TCP/IP 연결을 끊음.
(TCP/IP의 경우 기본적으로 연결 유지 => 서버 자원 지속적으로 소모)
이를 통해 최소한의 자원으로 서버 유지를 가능하게 함.
허나 각각의 자원(HTML, JS, 이미지)을 다운로드하기 위해 연결 종료를 반복하게 됨으로써 자원을 낭비했지만 (HTTP 1.0 초기) TCP 연결이 세팅된 후에 처음에 연결된 TCP연결을 이용해 나머지 파일에 대해 서로 요청/응답을하는 HTTP 지속연결기술을 통해 해결.
지속연결

REST API에 대해 설명해주세요.
키워드 : 그런 REST API로 괜찮은가
Representational State Transfer
요청을 보내는 주소만으로도 대략 뭘하는 요청인지 파악하게끔 REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스.
REST API에 대해

적절한 엔드포인트를 사용한다거나
적절한 HTTP 메서드를 사용해
해당 자원에 대한 CRUD Operation을 적용하는것.

응답에 리소스의 URI(URI URL)
를 포함한 링크 요소를 삽입하여 작성 함.

GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
GET 메서드는 서버의 리소스에서 데이터를 요청할 때 SELECT
그리고 HTTP 요청에 body가 없음. url 파라미터에 요청하는 데이터가 있으므로
또한 멱등임.
POST 메서드는 서버의 리소스를 새로 생성할때 사용 CREATE
HTTP 요청 body에 데이터를 담다 보내고 멱등아님.

PUT 메서드와 PATCH 메서드의 차이점에 대해 설명해주세요.

PUT은 리소스의 모든것을 업데이트 (만약 PUT인데 일부만 요청을 보내면 보내지지않는 값에 대해서는 null로 처리)

PATCH는 리소스의 일부를 업데이트

PUT PATCH의 차이

HTTP 메세지 구조에 대해 설명해주세요.
요청 응답 둘다.
시작 줄, 헤더, 공백, 본문으로 구성되어 있음.

요청메세지 시작 줄에는 HTTP 메서드, 요청대상인 URL등, HTTP 버전이 들어감.
응답메세지 상태 줄에는 프로토콜버전(HTTP/1.1), 상태 코드(200등), 상태 텍스트가 들어감.

요청메세지 헤더에는 필수헤더 Host(요청한 호스트정보), User-Agent(유저 앱 정보) 등이 있고
응답메세지 헤더에는 Server(요청을 처리하는 origin 서버의 스프트웨어 정보 apache등)
Allow(허용 가능한 HTTP 메서드) 등이 있음.

MDN HTTP 메세지
velog 정리글

웹에서 캐시 데이터를 사용하는 이유와 관련된 헤더에 대해 설명해주세요.
클라이언트가 서버측에 동일한 데이터를 요청한다면 중간에 데이터나 값을 미리 복사해 놓은 임시 장소를 만들어 캐시 유효시간을 통해 일정시간 저장한다면 더 빠른 속도로 데이터에 접근할 수 있기 때문에 캐시 데이터를 사용함.
허나 캐시 유효시간이 지났지만 원본 데이터가 캐시에 있는 데이터와 아직 바뀌지 않았다면
검증 헤더 Last Modified를 이용함.

우선 브라우저 캐시와 서버가 데이터가 수정되었는지 검증 후
수정되지 않았다면 바디를 제외한 HTTP헤더에 Last Modified를 끼워서 전송
브라우저캐시에서 응답 결과를 재사용, 헤더 메타데이터 갱신
브라우저는 캐시에서 조회한 데이터를렌더링함.

If-Modified-Since와 If-None-Match의 차이점에 대해 설명해주세요.

둘다 HTTP 요청 헤더임.
If-Modified-Since는 캐시 관련 헤더.
웹 브라우더나 캐시서버가 웹서버에게 Last-Modified의 값을 표기하여 전달하면
실제 서버가 확인하고 304 Not Modified를 보내면 프록시 서버는 자신의 데이터를 클라이언트에게 저장

If-None-Match는 컨텐츠가 변경되었다면...임
GET 에서는 If-Modified-Since처럼

차이점
프록시 캐시에 대해 설명해주세요.
프록시 캐시 서버는 클라이언트 서버 사이에 중계 기능을 하는 서버임.
틀라이언트에 빈번히 요청되는 데이터를 프록시 캐시서버에 보관해빠른 서비스를 가능하게 함.
따라서 응답 시간을 줄이고 병목현상을 줄여 웹 트래픽을 줄일 수 있음.

보안/인증

CORS에 대해 설명해주세요.

교차 출처 리소스 공유

SOP와 CORS의 차이점을 설명해주세요.
SOP(Same-origin Policy)는 같은 출처(프로토콜, 호스트,포트 동일)에서만 리소스를 공유할 수 있다는 규칙임. 다른 출처의 리소스를 사용하거나 상호작용을 하지 못하도록 막고 경고가 발생 하는 것이임.

이를 해결하기 위해
CORS는 다른 출처의 리소스를 불러오려면 올바른 CORS 헤더를 포함한 응답을 반환해 접근을 허용하는것! !
Access-Control-allow-origin 헤더를 추가에 특정 호스트에 대한 요청을 허용할 수있음.

SOP와 CORS 블로그

Preflight 요청에 대해 설명해주세요.

브라우저가 본 요청을 보내기 전에 보내는 예비 요청. 이 요청에는 OPTIONS라는 HTTP 메소드가 사용. 이 역할은 본 요청을 보내기 전에 브라우저 스스로 이 요청을 보내는 것(내가 GET하러고 이렇게 보낼거다이렇게) 이 안전한지 확인하는 것

만약 예비 요청의 Host와 응답 헤더에 보함된 Access-Control-Allow-Origin의 값이 다르거나 하는 상황이 오면 CORS 정책을 위반했으므로 브라우저는 에러가 남

Preflight

정종훈

괴발개발자에서 개발자로 향해보자

이전 포스트

2022-01-19 T.I.L

다음 포스트