HTML을 처음 접하지만 강의를 듣고 따라해보기식으로 해봤습니다.
~1 주차 까지 들었고, 오늘은 1주차 강의 까지 들었던 내용을 바탕으로 정리와 이해를 해보겠습니다.
BACKEND 이지만, FRONTEND 에 대해서도 어느정도 알고 있어야 하기에 내부작동 방식부터 훑어보도록 하겠습니다.
서버 / 클라이언트
서버?
클라이언트 요청을 받아서 데이터를 제공하는 컴퓨터 또는 프로그램을 의미한다.
클라이언트?
서비스를 요청하는 장치 또는 프로그램을 의미한다.
일반적으로 웹 브라우저(Chrome, Edge, Firefox 등), 모바일 앱`등등이 해당 된다.
이 둘의 관계?
서버와 클라이언트는 요청(Request) - 응답(Response) 방식으로 통신한다.
클라이언트가 서버에 요청을 보냄
예: 웹 브라우저가 https://naver.com 요청서버가 요청을 처리하고 응답을 보냄
예: 서버가 해당 웹페이지 HTML 데이터를 클라이언트(브라우저)에게 보냄클라이언트가 응답을 받아 화면에 표시
예: 웹 브라우저가 HTML을 해석하고 화면에 표시
작동 원리?
기본적으로 우리는 FRONTEND 에 대해서도 알아야 하지만, 근본적으로 BACKEND 는 작동 원리에 대해서 잘 알아야 한다고 생각합니다.
- URL 입력 및 요청 과정
- EX ) 사용자가 웹 브라우저를 통해 https://naver.com 과 같은 URL 을 입력하면 브라우저는 다음과 같은 작업을 수행하게 된다. DNS 조회 - 입력한 도메인을 IP 주소로 변환하기 위해 DNS 서버에 조회를 보낸다. - DNS 서버가 해당 도메인의 IP 주소를 반환한다. HTTP/HTTPS 요청 전송 - 브라우저는 해당 IP 주소 웹 서버로 HTTP OR HTTPS 프로토콜을 사용해 요청을 보낸다. - 요청에는 브라우저 정보, 쿠키, 캐시 정보 등이 포함된다.
- 웹 서버의 응답
웹 서버는 클라이언트(브라우저)의 요청을 받은 후, 다음과 같이 응답(Response)을 보낸다. 웹 서버에서 데이터 찾기 - 정적인 HTML/CSS 파일을 제공하거나, PHP, Node.js 등의 서버 코드에서 동적으로 페이지를 생성한다. HTTP 응답 전송 - 응답 코드(200 OK, 404 Not Found 등)와 함께 HTML, CSS, JavaScript 등의 데이터를 브라우저로 보낸다.
- 랜더링(Rendering) 과정
- 브라우저는 웹 서버에서 받은 데이터를 화면에 표시하기 위해 다음 단계를 수행한다. HTML 파싱 및 DOM 트리 생성 - HTML 파일을 해석하여 DOM(Document Object Model) 트리를 만든다. - <head>, <body> 등의 태그가 계층 구조로 정리된다. CSS 파싱 및 스타일 계산 - CSS 파일을 해석하여 CSSOM(CSS Object Model) 트리를 생성한다. - DOM 트리와 결합하여 최종 스타일을 계산한다. JavaScript 실행 - HTML과 CSS가 렌더링되는 중간에도 JavaScript 파일이 로드되면 실행된다. - JavaScript는 DOM을 조작할 수 있어, 동적인 콘텐츠 변경이 가능하다. 렌더 트리(Render Tree) 생성 및 레이아웃 계산 - DOM과 CSSOM을 합쳐 렌더 트리를 구성한다. - 각 요소의 위치와 크기를 계산하는 레이아웃(Layout) 과정이 수행된다. 페인팅(Painting) 및 화면 출력 - 계산된 요소들을 픽셀로 변환하여 화면에 그린다. - 최적화를 위해 GPU 가속을 활용할 수도 있다.
4.사용자와의 상호작용
- 웹페이지가 로드된 후, 사용자는 마우스 클릭, 입력, 스크롤 등의 동작을 할 수 있으며, 브라우저는 이에 따라 다음과 같은 작업을 수행한다. - 클릭 이벤트 발생 시 JavaScript 실행 - AJAX 요청을 보내 추가 데이터 로드 - CSS 애니메이션 적용 - 새로운 페이지 요청 시 다시 위 과정을 반복
- 캐싱 및 최적화
- 웹 브라우저는 성능 최적화를 위해 일부 데이터를 저장한다. HTTP 캐시(Cache) - 자주 요청하는 리소스를 저장하여 빠르게 불러온다. 쿠키(Cookies) & 로컬 스토리지 - 사용자 데이터를 저장하여 로그인 상태 유지 등 수행. - 프리로드 & 프리페치 예상되는 리소스를 미리 로드하여 속도 향상.
정말 어렵고, 이해하기 힘든 부분도 많았습니다.
다음 TIL 에는 해당 부분의 내용을 하나하나 뜯어보면서 알아가보는 시간을 가져보겠습니다.
관련된 문서도 찾으면서 하나씩 알아가보겠습니다.
새롭게 알게 된 사실
"웹사이트 열어줘!" → 서버에 요청
"여기 HTML, CSS, JS 있어!" → 서버가 응답
"이걸 조립해서 보여줄게!" → 브라우저가 렌더링
"이제 클릭하면 움직일 수 있어!" → 상호작용 활성화
"빠르게 보이게 최적화할게!" → 캐시 저장, 미리 데이터 불러오기
