브라우저web browser)의 기본 정리
CodeStatesCS
Contents
웹 브라우저가 도메인으로 IP 주소 조회
DNS란? 도메인 이름 시스템DNS은 사람이 읽을 수 있는 도메인 이름예 www.naver.com 을 머신이 읽을 수 있는 IP 주소예 192.0.2.44로 변환합니다. DNS는 혼잡하고 매우 빨라야 하기 때문에 DNS 데이터는 웹 브라우저 사이의 서로 다른 계층과 인터넷의 여러 관련하여 임시로 저장되는데 이를 캐시Cache라고 부릅니다. 브라우저는 네 개의 캐시를 확인하는데 하나의 브라우저 캐시, 운영 체제 캐시, 라우터 로컬 연결망 캐시, 기업 연결망 아니면 인터넷 서비스 제공업체ISP의 DNS 서버 캐시를 확인합니다.
그렇다면 왜 네 가지나 되는 캐시를 가지고 있는걸까? 캐싱된 정보가 개인 정보 보호에는 위험할 수 있지만 캐시는 연결망 트래픽을 규제하고 데이터 전송 시간 개선하는데 중요한 역할을 합니다.
AJAX의 두 가지 핵심 기술
JavaScript와 DOM, 그리고 Fetch 전통적인 웹 애플리케이션에서는 태그를 이용해서 서버에 데이터를 전송해야 했습니다. 또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공해 주어야 했습니다. 다시 말해, 클라이언트에서 요청을 보내면 매년 새로운 페이지로 이동해야 했습니다. 그러나 Fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다.
Fetch는 사용자가 현재 페이지에서 업무를 하는 동안 서버와 통신할 수 있도록 합니다. 즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 지속해서 페이지를 사용할 수 있게 하는 비동기적인 계획을 사용합니다.
고객 서버 통신과 API
클라이언트와 서버 간의 통신은 요청과 응답으로 구성된다 요청이 있어야 응답이 온다 서버 자유롭게 클라이언트에 리소스를 전달하지 않음 통신 규약, 즉 약속을 개념 주문을 하기 위해서는 꼭 지켜야 하는 약속이 몇 가지 있다 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나누는데, HTTP를 이용해서 주고받는 메시지는 HTTP 메시지라고 부른다 서버와 통신할 수 있는 여러 방법이 존재 예시, 카페에서 주문할 때 직접 카운터에 가거나, 앱 이용, 아니면 키오스크를 이용하는데 이런 방법이 모두 다.
APIApplication Programming Interfac
서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공해주시기 바랍니다야한다 Interface 의사소통이 가능하도록 만들어진 접점 다만 API는 앱이 요청할 수 있고 프로그래밍 가능한 인터페이스라는 점이 크게 독특하다 비슷하게 서버가 리소스 전달을 위한 메뉴판, 즉 API를 구축해놓아야 클라이언트가 이를 활용할 수 있어요.
AJAX의 단점
웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 자료를 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됩니다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering이라고 합니다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보냅니다.
웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면 어떻게 될까요? 브라우저가 다른 경로로 이동할 때마다. 서버는 같은 업무를 다시 수행합니다.
Headers
요청의 Headers는 기본 구조를 따릅니다. 헤더 이름대소문자 구분이 없는 문자열, 콜론 , 값을 입력합니다. 값은 헤더에 따라 다릅니다. 여러 형태의 헤더가 있고, 다음과 같이 그룹을 나눌 수 있습니다. General headers 메시지 전체에 해당되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더입니다. Request headers fetch를 통해 가져올 리소스나 고객 자체에 대한 구체적인 정보를 포함하는 헤더를 의미합니다.
UserAgent, AcceptType, AcceptLanguage와 같은 헤더는 요청을 보다. 구체화합니다. Referer처럼 컨텍스트를 제공하거나 If-None과 같이 조건에 따라 제약을 추가할 수 있습니다.
SSR, CSR차이점
SSR과 CSR의 주요 차이점은 페이지가 렌더링되는 위치입니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저클라이언트에서 페이지를 렌더링합니다. CSR은 사용자가 다른 경로를 요청할 때마다. 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리합니다.
자주 묻는 질문
웹 브라우저가 도메인으로 IP 주소
DNS란 도메인 이름 시스템DNS은 사람이 읽을 수 있는 도메인 이름예 www. 구체적인 내용은 본문을 참고하시기 바랍니다.
AJAX의 두 가지 핵심
JavaScript와 DOM, 그리고 Fetch 전통적인 웹 애플리케이션에서는 태그를 이용해서 서버에 데이터를 전송해야 했습니다. 궁금한 사항은 본문을 참고하시기 바랍니다.
고객 서버 통신과 API
클라이언트와 서버 간의 통신은 요청과 응답으로 구성된다 요청이 있어야 응답이 온다 서버 자유롭게 클라이언트에 리소스를 전달하지 않음 통신 규약, 즉 약속을 개념 주문을 하기 위해서는 꼭 지켜야 하는 약속이 몇 가지 있다 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나누는데, HTTP를 이용해서 주고받는 메시지는 HTTP 메시지라고 부른다 서버와 통신할 수 있는 여러 방법이 존재 예시, 카페에서 주문할 때 직접 카운터에 가거나, 앱 이용, 아니면 키오스크를 이용하는데 이런 방법이 모두 다. 구체적인 내용은 본문을 참고 해주시기 바랍니다.