추천 동영상
- 이후의 모든 내용을 읽기 전에 아래의 링크를 한번 보시는 것을 추천드립니다.
6시간 웹서핑해도 어려운 내용을 40분만에 이해할 수 있습니다.
우아한 테코톡 - OSI7 계층 (by.히히)
브라우저의 기능
1. 개요
브라우저란 무엇일까요?
브라우저는 크롬, 사파리, 윈도우엣지, 파이어폭스.. 등등을 말합니다.
브라우저는 인터넷을 볼 수 있는 프로그램입니다.
프로그램 입니다.
강조하기 위해 두번 적었습니다.
브라우저는 흔히 사용하는 파워포인트, 엑셀, 메모장, 그림판 같이
특정한 기능들을 내장하고 있는 프로그램입니다.
그렇다면 우리가 파워포인트,엑셀,메모장에서 여는 "파일"들은 브라우저에서는 어디에 있는걸까요?
브라우저만으로는 네이버를 볼 수 없습니다.
네이버 페이지를 보기 위해서는, 네이버에서 보내주는 컨텐츠 파일(HTML,CSS,JS)가 필요합니다.
그렇다면
1. 이 컨텐츠 파일들은 어디에서 오는걸까요?
2. 이 컨텐츠 파일들은 어떤 기준으로 읽게 되는걸까요?
브라우저는 단순히 여러가지의 기능을 갖고 있는 프로그램일 뿐 이라는 것을 다시 한번 설명드리고 싶습니다.
그렇다면, 이제부터 위에 적은 의문과 관련해 브라우저의 기능을 알아보겠습니다.
2. 주요 기능
브라우저는 어떠한 기능을 갖고 있을까요?
어떻게 웹사이트에 접속할 수 있는 걸까요?
브라우저의 주요 기능에 대해 알아보겠습니다.
1. 요청의 전송
브라우저의 기능1. 사용자의 동작에 따라 HTTP 형태의 요청(request)을 보낸다.
사용자(user)가 주소창에 주소를 입력하면,
입력된 주소를 포함한 요청(request)을 연결된 네트워크에 보내려는 시도를 합니다.
-
브라우저는 프로그램(응용프로그램/어플리케이션)입니다.
요청은 하드웨어에 전달됩니다. -
요청은 다양한 정보를 포함하고 있습니다.
-
요청은 텍스트 형태로 보내집니다.
-
파일이 아닌 텍스트 형태로 전달된다면,
사이트마다 각기 다른 정보를 브라우저는 어떻게 항상 읽을 수 있을까요?
-> 필요한 정보들을 읽기 위해
전 세계 사람들이 동일한 형태로 메시지를 주고 받기로 약속했습니다.
이 약속이 바로 HTTP(*) 입니다. -
*HTTP
= Hypter Text Transfer Protocol
= 하이퍼텍스트형태의 문서의 전송에 대한 규약
출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/Messages
2. 렌더링
브라우저의 기능2. HTML, CSS, JS, 이미지파일을 사용자에게 보기좋게 보여준다.
자세한 내용이 궁금하다면? --> 네이버D2 : 브라우저는 어떻게 동작하는가?
사용자가 보는 화면은 일종의 파워포인트의 슬라이드쇼 같은 것입니다.
-
HTML - 텍스트
-
CSS - 텍스트 꾸미기, 박스 위치조정
-
JS - 각종 동작
-
오디오/이미지/동영상 파일
을 종합해서, 사람들이 흉한 모습의 텍스트
\<h6 style="color:red;"> HELLO WORLD </h6>
대신, 예쁜 모양의 꾸며진 텍스트를 볼 수 있습니다.
Hello world
브라우저의 기능3. HTML, CSS, JS파일 불러오기
HTML/CSS/JS파일은 1) 어디서 가져오고, 2) 어디에 저장하고, 3) 어떻게 불러오는 걸까요?
1) 사용자가 주소에 "www.naver.com"을 넣어서 요청(request)를 보내면, 해당 주소의 서버에서는 HTML, CSS, JS파일을 포함한 응답(response)이 옵니다.
이는 꼭 주소창에 무언가를 입력했을 때만 요청을 보낸다는 뜻이 아닙니다. 로그인 버튼을 눌러도, 검색버튼을 눌러도, 그 버튼에 연결된 HTML,JS파일의 내용에 따라 요청을 보낼 수 있습니다.
2,3) 브라우저는 이를 불러와, 브라우저 내부에 저장해서 불러옵니다. (개발자 도구 -> source)
!결론
1. 브라우저는 요청(request)을 보낸다.
2. 브라우저는 응답(response)에 포함된 HTML/CSS/JS파일을 저장한다.
3. 브라우저는 HTML/CSS/JS파일을 사람들이 보기 편하게 보여준다.
추가기능
위에서 설명한 기능은 브라우저의 핵심 기능입니다.
이외의 기능에 대해 알아보겠습니다.
브라우저의 기능 4. 이벤트 방출하기
브라우저는 사용자의 모든 동작(이벤트)를 추적해서 방출합니다.
참고 : mozilla - 브라우저 이벤트의 종류
참고 : 네이버 D2 - 최신 브라우저의 내부 살펴보기 4
사용자가 단순히 주소를 입력하는 거나 버튼을 누르는 것 외에도
마우스를 올리면 설명글이 표시되거나,
마우스 모양이 바뀌거나 하는 등의 동작은 어떻게 일어나는 걸까요?
이는 브라우저가 사용자의 모든 움직임(*)
(*마우스의 위치, 움직임, 클릭, 새로고침, 끄기, 켜기, 시간, 키보드의 입력 등등 거의 모든것!)
을 추적하기 때문입니다.
이러한 사용자의 움직임은
브라우저가 켜져있는 동안 "이벤트"라는 이름으로 추적됩니다.
이 발생한 "이벤트"는, 사용자가 보고있는 페이지와 연결된 자바스크립트 파일로 전달될 수 있습니다.
이를 이벤트가 방출(emit) 된다고 표현합니다.
이 "이벤트"가 자바스크립트로 보내져서 받아들여지는지의 여부는,
자바스크립트(또는 HTML에 포함된 script 부분)에
'이벤트 핸들러' 또는 '이벤트 리스너'가 포함되어 있는지에 달려 있습니다.
이벤트 핸들러/리스너가 있는 이벤트는, 연결된 자바스크립트 함수의 동작으로 이어집니다.
하지만 이벤트 핸들러/리스너가 없는 이벤트는 아무런 일도 발생하지 않습니다.
브라우저의 기능 5. 공통 인터페이스
브라우저는 사용자의 편의를 위한 다양한 추가 기능을 제공합니다.
대부분의 브라우저는 사용자들의 편의를 위해 추가적인 기능을 제공합니다.
예를 들어 공통인터페이스가 있습니다.
- URL을 입력할 수 있는 주소 입력줄
- 이전/다음/새로고침 버튼
- 북마크/즐겨찾기 버튼, 바
- 홈버튼
이 외에도
1. 이미지나 로그인정보를 저장해서 계속 다운로드를 받지 않아도 되게 하는 기능
2. 방문기록을 저장하는 기능
3. 비밀번호를 저장하는 기능 ... 등등이 있습니다.
이렇게 브라우저는 사용자 편의를 위해 다양한 기능을 하는 '요청하고 읽는 프로그램' 입니다.
사용자와 개발자의 역할
사용자
사용자가 할 수 있는 일은 정해져 있습니다.
1. 브라우저에서 주소를 입력하기
2. 컨텐츠 파일에서 제공하는 기능을 사용하기
-> 모든 버튼, 이벤트를 포함합니다.
웹개발자
여기에서 설명한 내용과 관련해서, 웹개발자는 어떤 일을 할 수 있을까요?
- 사용자가 들어올 수 있는 서버, 주소 준비하기.
-> 더 자세한 내용은 뒤에서 다루겠습니다. - HTML,CSS 파일 제공하기
- 브라우저,HTML,CSS파일과 이벤트로 연결된 JS파일 제공하기
결국, 개발자는 사용자에게 제공하고 싶은 모든 기능을 처음부터 끝까지 만드는 역할을 합니다.
하지만 걱정하지 마세요.
브라우저에서 처음부터 제공하는 기능을 사용하거나,
이미 만들어진 서비스/프레임워크/라이브러리를 사용해서
제작 난이도를 확! 낮출 수 있습니다.
조금 더 깊이
이 내용보다 조금 더 깊이 있게 알고 싶다면 어떤 걸 공부해야 할까요?
여기에서 설명하지 않고 넘어간 부분은 다음과 같습니다.
HTTP/HTTPS
- HTTP란 어떻게 이루어져 있는가? (Header/Body로 부터 이어지는지 여부)
- HTTP의 버전(1.1, 2.0, 3.0)과 각각의 차이점
- HTTPS와 HTTP의 차이
- 요청과 응답의 통신 규약
- 특정한 상황에서 header에 꼭 포함해야 하는 것
렌더링
- 브라우저라는 프로그램은 왜 HTML, CSS, JS 구분할까? (HTML/CSS/JS의 역사)
- HTML,CSS,JS가 화면에 나타나는 원리와 동작은 어떻게 된걸까?
- 렌더링 속도를 빠르기 위한 방법은 뭐가 있을까? (SPA, MPA, SSR, CSR의 개념과 차이)
브라우저의 추가 기능
- DOM과 이벤트의 종류 (*선행학습 : 자바스크립트의 객체 개념)
- 브라우저의 저장소 : 쿠키, 세션, 로컬스토리지의 차이와 개념
HTML, CSS, JS
- 각각의 언어에 대해 찾아보시는걸 추천드립니다.
-> 참고 링크 :
1. 네이버 부스트코스 - 비전공자를 위한 HTML/CSS
2. Poiema web
3. 생활코딩 - HTML/CSS/JS
다음 챕터에서는 브라우저와 운영체제 사이의 연결에 대해 설명해보겠습니다.
