웹 동작 방식
웹의 본질은 클라이언트와 서버 간의 통신을 의미
이 통신은 주로 "요청(Request)"과 "응답(Response)"의 형태
요청과 반환
요청(Request) ➩
- 클라이언트(사용자의 브라우저)가 서버에게 정보를 요청
- 요청은 일반적으로 클라이언트에서 발생
- HTTP(하이퍼텍스트 전송 프로토콜) 요청 메시지의 형태로 전송됨
- 요청 메시지는 다양한 형태의 데이터를 포함할 수 있으며, 주로 URL, 메서드(GET, POST, 등), 헤더, 바디 등의 구성 요소를 가짐
예시) 사용자가 브라우저에서 웹 페이지를 요청할 때, 브라우저는 해당 페이지의 URL을 서버에게 요청하여 페이지를 가져온다.
응답(Response) ⇦
- 서버가 클라이언트의 요청에 대한 결과를 반환하는 것
- 응답은 서버에서 클라이언트로 전송되며, HTTP 응답 메시지의 형태로 전송됨
- 응답 메시지에는 요청에 대한 상태 코드, 헤더, 바디 등이 표함됨
예시) 사용자가 브라우저에서 웹 페이지를 요청하면, 서버는 해당 페이지의 HTML, CSS, JavaScript 파일 등을 포함한 응답을 클라이언트에게 전송하여 페이지를 표시한다.
REST API (Representational State Transfer)
- 리소스에 기반한 아키텍처 스타일로, 네트워크를 통해 리소스를 다루는 데 사용됨
- 리소스는 주로 URL로 식별되고, HTTP 메소드(GET, POST, PUT, DELETE 등)를 통해 해당 리소스에 대한 액션을 수행함
- REST API는 일반적으로 요청을 보내고 응답을 받기 위해 JSON이나 XML 형식의 데이터를 사용함
각 엔드포인트는 특정한 리소스나 작업을 나타내며, CRUD(Create, Read, Update, Delete) 작업을 수행함
GraphQL
- Facebook에서 만들어진 쿼리 언어
- REST API와 달리 클라이언트가 필요로 하는 데이터의 구조와 양을 정확하게 명시할 수 있음
- 클라이언트는 서버에 필요한 데이터 스키마를 정확하게 요청가능
- 하나의 엔드포인트를 사용하며, 클라이언트는 쿼리를 보내고 서버는 해당 쿼리에 대한 응답을 제공함
- 클라이언트가 필요로 하는 모든 데이터를 한 번의 요청으로 가져올 수 있어 네트워크 오버헤드를 줄일 수 있음
- GraphQL 스키마는 데이터의 유형과 관계를 정의하며, 클라이언트는 이를 통해 데이터를 요청하고 변이(mutations)를 수행 가능함
REST API는 데이터를 가져오고 조작하기 위한 전통적인 방법이고, GraphQL은 클라이언트가 정확히 필요한 데이터를 요청할 수 있는 새로운 접근 방식이다.
웹 페이지 구성 요소에 대한 트리 구조
DOM Tree
- DOM은 문서 객체 모델(Document Object Model)의 약자로, 웹 페이지의 구조를 나타냄
- HTML 문서가 브라우저에 로드되면, 브라우저는 해당 문서의 각 요소를 트리 구조로 구성함
- 트리 구조는 요소들의 부모-자식 관계를 나타내며, 각 요소는 DOM 요소로 표현됨
- JavaScript를 통해 동적으로 조작할 수 있으며 웹 페이지의 내용, 구조 및 스타일 등을 변경할 수 있음
CSSOM Tree
- CSSOM은 CSS 객체 모델(CSS Object Model)의 약자로, 스타일 시트의 구조를 나타냄
- HTML 문서에 연결된 CSS 스타일 시트들은 브라우저에 의해 해석되어 CSSOM 트리로 구성됨
- DOM 트리와 마찬가지로, CSSOM 트리도 JavaScript를 통해 동적으로 변경할 수 있음
Render Tree
- DOM 트리와 CSSOM 트리의 조합으로, 실제로 브라우저에 표시되는 요소들을 나타냄
- 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성하고, 화면에 렌더링될 요소들을 결정함
- 화면에 나타날 요소들의 레이아웃 및 스타일 정보를 포함하고 있으며, 이를 바탕으로 브라우저는 화면을 렌더링함
DNS(Domain Name System)
- 인터넷에서 도메인 이름을 IP 주소로 변환하고, IP 주소를 도메인 이름으로 변환함
- 컴퓨터가 서로 통신할 수 있도록 도메인 이름과 IP 주소 간의 매핑을 관리
DNS 기능
① 도메인 이름 해석
사용자가 웹 브라우저에 도메인 이름을 입력하면, DNS는 해당 도메인 이름에 대한 IP 주소를 찾아서 사용자 컴퓨터로 반환함
-> 사용자는 도메인 이름을 통해 웹 사이트에 액세스할 수 있음
② IP 주소 관리
DNS는 인터넷 상에서 각 컴퓨터나 네트워크에 대한 고유한 IP 주소(컴퓨터 간 통신 가능)를 관리함
③ 도메인 이름 계층 구조 관리
DNS는 계층적인 도메인 이름 시스템 관리
최상위 도메인(Top-Level Domain, TLD)부터 하위 도메인까지 이어지는 구조로 이루어짐
④ 도메인 등록 관리
DNS는 도메인 이름 등록을 관리하고 각 도메인에 대한 정보를 유지함
도메인 이름은 도메인 등록자에 의해 구매되며, DNS는 이러한 등록 정보를 관리하여 도메인 이름과 해당하는 IP 주소를 연결함
⑤ 캐싱
DNS 서버는 이전에 요청된 도메인 이름과 해당하는 IP 주소를 캐싱하여 더 빠른 응답을 제공함
동일한 도메인에 대한 다수의 요청을 처리할 때 응답 시간을 줄일 수 있음
DNS는 인터넷에서 핵심적인 역할을 수행하며 웹 브라우징, 이메일 통신, 파일 공유 등과 같은 다양한 네트워크 서비스에 필수적으로 사용된다.
