책 읽다가 코딩하다 죽을래
브라우저에서 웹이 동작하는 방법 본문
📖 웹 브라우저와 웹 서버
우리가 크롬이나 파이어폭스 같은 브라우저를 실행하여 어느 웹사이트에 들어가기 위해서는 두 가지가 필요하다.
하나는 크롬과 파이어폭스 같은 웹 브라우저,
그리고 나머지 하나는 웹사이트의 정보를 웹 브라우저에게 주는 웹 서버가 필요하다.
웹 브라우저와 웹 서버를 더 넓은 개념으로 보자면 request를 하는 클라이언트(웹 브라우저)와 request를 받으면 response를 하는 서버(웹 서버)가 필요한 것이다.
📖 사용자가 웹 사이트 정보를 받아오는 과정
우리가 웹사이트에 접속하면은 총 3단계를 거쳐 웹 정보를 받아오게 됩니다.
1. 웹사이트의 url을 주소창에 직접적으로 입력하거나 또는 간접적으로 입력하는 방식을 따른다.
2. 웹 브라우저가 url을 읽고 해당 웹 서버에 가서 request를 한다.
3. request를 받은 웹 서버는 웹 브라우저가 필요한 정보를 주어 response를 한다.
이때 필요한 정보는 html, css, javascript 코드들이다. 또한 폰트 파일, 이미지, 동영상 같은 미디어 파일도 같이 주어지기도 한다.
📖 받아온 웹 사이트 정보를 화면에 표시하는 과정
이 때 코드들과 미디어 파일들을 받게 되면 웹 브라우저에서는 총 4단계를 거쳐 사용자에게 웹 페이지를 보여주게 된다.
1. 먼저 html 코드를 통해 기본적인 DOM 요소를 이룬다.
2. css 코드를 통해 애니메이션 및 웹의 디자인이 적용된다.
3. 이미지 및 동영상을 다운로드합니다.
4. js 코드가 실행되어 이벤트 함수가 생성되거나 API 서버에서 웹에 필요한 데이터 등을 받아온다.
이때 4번 과정에서 API 서버와 통신하는 과정도 알아보자
📖 웹과 API 서버의 통신 과정
웹 서버에서 정적인 html, css, js 코드만 다운로드한다고 해서 끝이 아니다.
쿠팡 의류 카테고리 항목 페이지를 예를 들어보자
의류 카테고리 항목들은 보면 수많은 의류 사진들과 제목 가격정보 즉 옷의 데이터들이 있다. 이 데이터들은 html, css, js에 이미 들어가 있는 데이터들이 아니다. 매일 수많은 신상품이 나올 텐데 그때마다 프론트엔드가 일일이 웹사이트 정보를 초기화하지는 않을 것이다. 이러한 동적인 요소들은 DB에 저장이 되며 웹 브라우저에서 이 DB에 담긴 정보들은 동적으로 갖고 오기 위해선 API 서버와 통신해야 한다.
만약 우리가 쿠팡에서 카테고리 스포츠 의류 페이지에 들어가게 된다면 API 서버와 이런 식으로 통신하게 된다.
1. 브라우저는 웹 서버에게 요청하는 것이 아닌 API 서버에게 요청을 하게 됩니다.
2. API 서버는 브라우저가 필요한 데이터를 DB에서 탐색한다.
3. 탐색에 성공하게 되며 이 결과물을 웹 브라우저에게 제공된다.
이 3가지 단계가 마쳐지면 동적 페이지가 완성이 되는 것입니다.
매번 같은 정보만 나타내는 정적 페이지는 이 과정이 필요하지 않을 수도 있습니다.
😊 여기까지 읽어주셔서 감사합니다.
지금까지 우리는 웹 브라우저를 통해 웹 사이트를 들어가면 동작하는 과정을 살펴보았습니다.
이 과정은 프론트엔드 직무면접에서 자주 물어보는 것이니 간단하게 알고 가시면 좋을 거 같습니다.