Frontend Study - 2/Browser (3) 썸네일형 리스트형 브라우저 : 웹스토리지 (web storage) - 로컬스토리지(local storage), 세션스토리지(session storage) / 쿠키(cookie) 비교 1) Application(응용프로그램) 패널이란? 크롬 Ver. 브라우저에서 (mac 단축키) cmd + opt + i => application 브라우저 저장소의 기능 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사 2) Cookie 란? 쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일입니다. 쿠키는 사용자가 방문한 웹사이트에서 사용자의 브라우저에 전송하는 작은 텍스트 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키가 있으면 웹사이트에서 사용자의 방문에 관한 정보를 기억하여 다음번에 사이트에 .. 브라우저 - 개발자도구 : 네트워크 / chorme browser - DevTools : Network 크롬 Ver. 브라우저에서 (mac 단축키) cmd + opt + i => network - status : 상태 200이면 정상 -> 각 숫자별 오류 확인 https://developer.mozilla.org/ko/docs/Web/HTTP/Status 1) 빨간색 점을 통해 레코딩이 진행된다. 다시 클릭하면 기록을 멈출 수 있으며 정지되기 전까지 주고받은 모든 Network 요소를 보여준다. 오른쪽 🚫을 클릭하면 기록된 모든 요소를 지운다. 2) Filter▽와 Search🔍는 이름과 같이 필터링하고, 검색하는 기능. Filter는 네트워크 소스를 타입별로 볼 수 있으며, 대체로 Fetch/XHR 이 주로 사용된다. 별도의 Filtering 방식을 : 예를들어 HTTP Method 가 GET 인 인터페.. 브라우저 렌더링 과정 + 자바스크립트 (browser rendering process & javascript) 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다. 브라우저의 주요 구성 요소. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하.. 이전 1 다음
