[Frontend 기술 면접 대비] 시리즈는 Frontend 개발자로 취업하기 위해 내 프로젝트 경험과 지식들을 정리한 내용이다.
질문: 웹 동작방식에 대해 설명해라. 브라우저에 www.google.com을 치면 일어나는 일은?
1. DNS(Domain Name System)
어떤 컴퓨터가 다른 컴퓨터/모바일/웹 서버 등과 통신하기 위해서는 IP 주소가 필요하다. 우리가 접속하려는 www.google.com는 IP 주소가 아닌 domain이다. Domain은 모든 IP 주소를 알 수 없기 때문에 알기 쉬운 문자열로 매핑한 주소이다. 그리고 이러한 도메인 주소와 IP 주소의 정보를 담고 있는 서버를 DNS 서버라고 한다.
- DNS 서버는 IP 주소와 domain의 매핑 정보를 관리하며, 도메인 혹은 IP 주소를 묻는 요청이 오면 응답한다.
- DNS 서버에도 캐시가 존재해서 자주(최근) 요청을 받는 정보는 캐시로 관리한다.
웹 브라우저에 원하는 domain(
www.google.com)을 입력하면 컴퓨터는 브라우저 내에 존재하는 브라우저 DNS 캐시를 탐색한다. 브라우저 DNS 캐시에서 해당 domain의 IP 주소를 찾지 못하면 OS DNS 캐시(hosts)를 탐색한다. 만약 OS DNS 캐시에서도 찾지 못한다면 Router DNS 캐시에서 조회한다. 여기에도 없다면 ISP 캐시(우리나라의 경우 인터넷 망을 제공하는 통신사가 ISP 서버)에서부터 조회한다.
각 캐시에서 원하는 domain에 매핑된 IP 주소를 찾아내면 컴퓨터는 DNS query를 실행한다. ISP 캐시에도 원하는 정보가 없다면 ISP DNS 서버(DNS Recursor)가 인터넷을 통해 다른 DNS 서버(name server)에 DNS query를 통해 검색하여 IP 주소를 찾아낸다(이 과정을 recursive search라 하며, IP 주소를 찾을 때까지 반복한다).
2. TCP/IP
TCP/IP란 컴퓨터끼리 네트워크로 소통할 때 필요한 통신규약을 말한다. 이 통신규약 중 가장 대표적인 것이 HTTP 프로토콜이다. 또, IP 프로토콜을 사용하는 모든 프로토콜을 총칭하여 TCP/IP 프로토콜이라 한다.
브라우저가 IP 주소를 받으면 그 IP 주소에 해당하는 서버에 프로토콜을 통해 연결하려고 한다. 일반적으로 웹 사이트의 HTTP 요청의 경우 TCP를 사용한다.
TCP Conenction을 위해 TCP Socket을 개방하고, TCP 3 Way-handshake라는 연결 검증 절차를 통과하면 데이터를 주고 받을 준비가 끝난다.
3. HTTP 요청/응답
HTTP 요청을 통해 데이터에 특정 동작을 하기 위해서 HTTP 요청 메서드를 사용한다. 일반적으로 HTTP 요청 메서드는 HTTP Verbs라고도 불린다.
- 주요 메서드
GET: 존재하는 resource에 대한 요청POST: 새로운 resource를 생성PUT: 존재하는 resource에 대한 변경DELETE: 존재하는 resource에 대한 삭제
- 기타 메서드
HEAD: 서버 헤더 정보를 획득,GET과 비슷하나 Response Body를 반환하지 않는다.OPTIONS: 서버 옵션들을 확인하기 위해 요청, CORS 에서 사용.
클라이언트의 브라우저는 TCP Socket을 통해 웹 서버에 HTTP 프로토콜에 따른 HTTP request을 한다. 예를 들어,
GET요청을 통해 서버에게www.google.com웹 페이지를 요청하거나,POST요청을 통해 form을 제출한다.
서버에서 설정해주는 응답 정보는 HTTP 상태 코드를 포함한다. 이를 이용해 에러 처리를 할 수 있다.
2xx - 성공을 의미
200:GET요청에 대한 성공204:No Content. 성공했으나 응답 본문에 데이터가 없음.205:Reset Content. 성공했으나 클라이언트의 화면을 새로고침하도록 권고.206:Partial Content. 성공했으나 일부 범위의 데이터만 반환.
3xx - 클라이언트가 이전 주소로 데이터를 요청하여 서버에서 새 URL로 리다이렉트를 유도
301:Moved Permanently. 요청한 자원이 새 URL에 존재.303:See Other. 요청한 자원이 임시 주소에 존재.304:Not Modified. 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐싱된 자원을 사용하도록 권고.
4xx - 클라이언트의 코드가 잘못된 경우
400:Bad Request. 잘못된 요청401:Unauthorized. 권한 없이 요청, Authorization 헤더가 잘못된 경우.403:Forbidden. 서버에서 해당 자원에 대해 접근 금지404:Method Not Allowed. 허용되지 않은 요청 메서드409:Conflict. 최신 자원이 아닌데 업데이트하는 경우.
5xx - 서버 쪽에서 에러난 경우
501:Not Implemented. 요청한 동작에 대해 서버가 수행할 수 없는 경우.503:Service Unavailable. 서버가 과부하 또는 유지 보수로 내려간 경우.
요청을 받은 웹 서버는 HTTP request를 Request Handler에게 전달하여 요청 내용을 읽고 Response를 생성한다. Request Handler는 request와 request의 header, cookie 등을 파악하고,
json,xml,html등의 포맷으로 response를 작성한다. 이 response에는 요청한 웹 페이지, Status code, 인코딩 방식, 쿠키, 개인정보 등이 포함된다.
4. HTML content rendering
브라우저는 HTML Content를 단계적으로 보여준다.
- HTML Skeleton을 렌더링한다.
- HTML tag들을 체크한 후, 추가적으로 필요한 Image, CSS, JS 등을 웹 페이지 요소를
GET요청한다. 이 정적 컨텐츠들은 브라우저에 의해 캐싱되어 나중에 해당 웹 페이지를 재방문했을 때, 다시 서버로부터 불러올 필요가 없어진다.- 우리가 원하는 웹 페이지의 모습을 확인할 수 있다.
5. 최종 정리
- DNS에서 IP 주소 가져오기
- 브라우저와 Server TCP 연결하기
- HTTP 요청/응답 주고받기
- 브라우저에서 웹 페이지 렌더링하기
함께 보면 좋은 글
