최근들어 프론트개발 면접 질문중에서 “브라우저에서 주소를 입력하게되면 어떤 과정을거쳐 웹 사이트를 보여주나요?” 라는 질문을 자주 듣게되었습니다.
대략적으로는 알고있지만 이것을 설명하는 과정에서 디테일하지 못하고 잠시 주춤하던 부분들이있어 이것을 다시한번 정리하고자합니다.
브라우저 주소창에 주소를 입력하게되면 크게는 아래와 같은 작업들이 발생합니다.
1.
브라우저에 URL을 입력
2.
DNS
3.
Web Server
4.
브라우저 렌더링
이중에서 Front 관련 질문에맞춰 해당 부분을 더 섬세하게 정리하고자합니다.
1. 브라우저에 주소를 입력
웹 서비스를 이용하려는 사용자들은 브라우저라는 프로그램을 이용하게됩니다. 이 브라우저를 이용하여 사용자가 원하는 웹 페이지를 열어볼 수 있습니다.
원하는 웹 페이지를 열어보기 위해서는 브라우저에 존재하는 주소창에 해당 웹 페이지의 주소를 입력하여 검색버튼을 누르는 것에서 출발합니다.
주소를 입력하는것은 어떤 화면을 불러올것인가를 입력하는 것입니다. 그리고 이 주소는 HTTP(Hyper Text Transfer Protocol) 통신을 하기위한 수단입니다. 해당 주소로 http 통신을 통해 원하는 화면을 불러옵니다.
HTTP란?
Http는 서버와 클라이언트 사이에 이뤄지는 요청/응답 프로토콜입니다. 즉, 통신을 할때 사용하는 규격이라고 이해하시면됩니다. 이 통신을 이용해서 브라우저는 웹 페이지를 불러옵니다. 그래서 주소의 대부분은 http: 로 시작합니다.
주소를 입력하다보면 https 로 시작하는 주소가 있습니다.
이것은 http 통신위에서 ssh 인증서를 거쳐서 통신하는 방법입니다. 이런 방법은 해당 페이지가 안전하다는 인증을 함으로써 더 원할한 웹 서비스를 사용하도록 합니다.
2. DNS
DNS를 통해 입력한 주소의 IP를 찾습니다. 그리고 해당 IP주소의 서버로 열고자하는 페이지를 요청합니다.
DNS란?
DNS(Domain Name System)은 IP 네트워크에서 사용되는 시스템입니다.
주소창에 입력하는 영어/한글 주소를 IP네트워크에서 찾아 IP주소로 변환 해줍니다.
원래 주소는 IP를 통해 관리되고 있습니다. 하지만 사람 관점에서 이런 IP는 읽기와 기억하기가 매우 불리합니다. 그래서 DNS를 통해 IP와 Domain Name을 매핑시켜 관리합니다.
nslookup 명령어
해당 명령어는 DNS 서버에 질의하여, 도메인 정보를 조회하는 명령어입니다.
여기서 사용되는 ns가 Name Server를 말합니다.
3. Web Server
페이지 요청이 웹 서버에 전달되면 웹 서버는 주소에 적혀있는 “리소스 경로”를 통해 페이지를 불러옵니다.
만약 “리소스 경로”가 존재하지 않다면 index.html 로 인식하여 해당 페이지를 불러옵니다.
웹 서버에서는 어떤일이 생길까?
웹 서버는 기본적으로 요청받은 페이지(HTML)을 응답값으로 보내주는 역할을합니다.
1.
먼저 URL을 통해 서버의 주소를 찾습니다.
2.
리소스 경로를 통해 서버에서 필요로하는 페이지를 요청합니다.
3.
이때 이때 페이지에 필요한 데이터를 DB(Database)에서 Query를 이용하여 가져오고, 가져온 데이터를 통해 화면을 구성합니다.
4.
요청한 Client에 응답값으로 페이지를 전달합니다.
웹 페이지는 정적인 컨텐츠를 제공하는 방식과 사용자 Interfaction을 통해 동적인 페이지를 제공하는 방식 두가지를 제공합니다.
이 두가지 방식에 따라서 서버 환경을 구성하는 방식이 달라집니다.
정적인 컨텐츠
동적인 컨텐츠
WAS란?
Web Applicaiton Server의 줄임말로 동적인 컨텐츠를 제공하기위한 어플리케이션 서버입니다.
위 구조를 보면 웹서버를 거쳐 Web Container로 요청이간뒤 동적 프로세싱을 통해 컨텐츠를 만들어서 클라이언트에게 제공하는 것을 알 수 있습니다.
일반적으로 정적 웹 페이지는 서버에 저장되어있는 HTML, CSS 파일을 그대로 보여주는 것이 일반적이며, 동적 웹 페이지는 상황에 따라 서버에 저장되어있는 HTML에 데이터를 추가/가공하여 보여줍니다.
정적 페이지는 저장되어있는 파일을 그대로 전달하기 때문에 속도가 빠르고 서버의 부담이 적은 반면, 추가 / 수정 / 삭제 등 내용 변경이 필요한 경우 HTML 자체를 수정해야하기 때문에 번거롭다는 단점이 있습니다.
•
블로그
•
사전
반면 동적인 페이지는 한페이지에서 상황 / 시간 / 사용자 요청에 따른 다른 화면을 보여줄 수 있는 장점이 있지만, 상대적으로 보안이 취약하고 화면이 변하기 때문에 검색 엔진 최적화(SEO)에 불리하다는 단점이 있습니다.
•
Client side rendering
•
Server side rendering
그럼 Node.js는 뭐야 ?
Node.js는 V8 엔진 기반의 JS 런타임(실행기)입니다. 이것을 이용하여 WAS를 구현 할 수 있습니다.
대표적으로 Express 프레임워크가 있습니다.
4. 브라우저 렌더링
브라우저는 요청한 웹 페이지의 콘텐츠를 표시하는 엔진이 존재하고 이것을 “렌더링 엔진”이라고 말합니다. 또 자바스크립트 코드를 실행하는 자바스크립트 엔진이 존재합니다.
렌더링 엔진은 아래와 같이 브라우저마다 사용하는 엔진이 다릅니다.
자바스크립트 엔진 역시 브라우저마다 다른데 대표적인 Chrome은 V8이라는 엔진을 사용합니다.
렌더린 엔진의 동작 과정
대표적인 크롬의 Blink를 기준으로 설명하겠습니다.
//… 작성중..
