본문으로 바로가기

코딩 면접 질문들 - 사용자가 웹브라우저를 통해 서버에 이미지를 요청해서 사용자에게 보여주기까지 과정



면접 질문에 아래와 같은 질문이 나온다면 어떻게 할 것인가? 라는 생각이 들어서 이 글을 쓴다.


'사용자가 웹브라우저를 통해 서버에 이미지를 요청해서 사용자에게 보여주기까지 과정을 설명하세요' 이 질문인데 이걸 간단하게 설명을 하면 '웹 브라우저가 url로 서버에 요청을 보냅니다. 그리고 서버는 요청을 받고 해당 이미지가 있으면 이미지를 보내줍니다.' 이렇게 이야기를 할텐데 이건 면접관이 의도한 정답은 아닌 것 같다.


실제 답변은 위 그림과 같이 복잡한 http통신 과정을 설명 할 수 있는대로 최대한 자세히 설명하라는게 질문의 의도였을 것이다. 그냥 기술적인 내용만 쭉 쓰면 잘 이해가 안되므로 실제 우리가 많이 하는 www.google.com을 예로 한번 들어보겠다.


www.google.com에 접속하면 이런 화면이 나온다.

여기에서 저 google자 써있는게 .png로 되어있는 이미지인데 저 이미지가 보이기까지 과정을 한번 알아보자.


www.google.com에 접속하면 index.html을 받아온다. 여기 안에 이미지로 https://www.google.com/images/google.png가 들어있다. 웹 브라우저는 html파일을 읽어서 해석을 하는데 이미지 주소가 나오면 해당 url로 서버에 요청을 보낸다.


요청을 보내고 받는 과정을 '트랜젝션' 이라고 하는데 요청을 보내고(request) 응답을 받고(response)를 하나의 http 트랜젝션이라고 부른다. 위 구글 첫 화면이 나오는 과정에서 이미지 요청을 보내고 받았기 때문에 트랜젝션이 일어난 것이다. 이미지에 대한 트렌젝션만 이루어진 것이 아니고 html페이지도 트랜젝션이 이루어졌다. 이렇게 한개의 페이지를 보여주는데도 여러개의 트랜젝션이 발생한다.


HTTP트랜젝션은 'HTTP 메세지(HTTP Message)'라고 불리는 데이터 덩어리를 이용해 이루어진다. 이걸 좀 정리를 해보면

1.웹 브라우저가 https://www.google.com/images/google.png로 이미지를 요청 해야 한 다는 것을 인지 한다.

2.웹 브라우저는 url을 이용해 서버의 ip를 추출한다.

3.이미지를 요청하기 위한 HTTP 메세지를 만든다.

4.메세지는 get메서드이고 /google.png를 요청하는 메세지이다.

5.웹브라우저는 서버와 TCP 컨넥션을 맺는다.

6.웹브라우저는 서버에 HTTP요청을 보낸다.

7.서버는 메세지를 받고 무슨 내용인지 해석한다. get이라는 메서드이고 /google.png라는 파일을 요청 했다는 것을 인지한다.

8.서버는 해당 리소스가 있는지 찾는다.

9.찾으면 상태코드가 200인 메세지와 함께 응답 메세지를 작성한다.

10.서버는 클라이언트와 TCP컨넥션을 맺는다.

11.서버는 클라이언트에 HTTP 응답을 보낸다.

12.커넥션이 닫히면 웹브라우저는 사용자에게 이미지를 보여준다.


여기서 중요 포인트는 TCP컨넥션을 맺고 HTTP 요청/응답을 보내는 부분이다. 면접때 이 부분을 꼭 언급을 해야 '이 사람이 알고는 있구나'이런 인상을 줄 수 있지 않을까 싶다.



end.




댓글을 달아 주세요