zoeful-coder

🤚🏻 잠깐! 렌더링 엔진의 역할이 뭐라고 했지? 렌더링 엔진은 '사용자가 요청한 html문서를 브라우저 화면에 표시 한다' 라는 아주 단편화 된 정의로 간단하게 설명할 수 있겠습니다! 만.. 렌더링 엔진의 동작 과정 사용자가 요청한 내용을 브라우저 화면에 표시 할 수 있게 되는 과정은 그리 간단하지만은 않겠습니다. 렌더링 엔진은 통신으로 부터 요청한 문서의 내용을 얻어 1. HTML 문서를 파싱하여 DOM트리 구축 html문서를 파싱하여 dom트리를 생성하고 2. 외부 CSS파일을 파싱하여 CSSOM트리 구축 외부css파일과 함께 포함된 스타일 요소를 파싱하여 cssom트리를 생성합니다. 3. 파싱된 스타일 정보와 HTML 표시 규칙이 렌더 트리를 생성 이렇게 파싱된 스타일 정보와 html 표시 규칙이 ..

사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 북마크 메뉴 등 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 : 사용자가 요청한 콘텐츠를 표시 통신 : HTTP 요청과 같은 네트워크 호출에 사용됨 UI백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림 자바스크립트 해석기 : 자바스크립트 코드를 해석-실행 자료 저장소 : 자료를 저장하는 계층 ⇒ 자료를 저장하기 위해 브라우저가 지원하는 웹 데이터 베이스가 있다. 🤚🏻 잠깐! 웹 데이터 베이스란? 저장되어 있는 다량의 데이터를 편리하고 효율적으로 웹에 보여주기 위해 등장한 개념 가변적인 스키마를 가지는 다양한 타입의 데이터를 저장하고 관리 ▶ 브라우저에서 지원하는 웹 데이터 베이스 사용자가 가장 많이 사용하는 데이..

인터넷 브라우저에 https://www.naver.com 을 치고 이동했을때 일어나는 과정에 대해서 알아봅시다. 1. 브라우저 URL 파싱 어떤 프로토콜을 통해 해당 URL에 요청할 것인가 ex ) gopher, telnet, ftp, http, usenet 등 어떤 URL로 요청할 것인가 어떤 포트로 요청할 것인가 명시적으로 port를 선언하지 않았다면 브라우저에서 설정된 기본값을 이용해 요청 ex ) HTTP = 80 , HTTPS = 443 2. HSTS 목록 조회 (= HTTP Strict transport security) HTTP를 허용하지 않고 HTTPS를 사용하는 연결만 허용하는 기능 HSTS캐시에 해당 URL을 저장 ( ⇒ HSTS 목록 ) HSTS 목록 조회를 통해 해당 요청을 HTTP..

웹에서 preflight가 발생하는 4가지는 무엇이 있는지 알아보도록 하겠습니다 : ) preflight란 CORS상황에서 보안을 확인하기 위해 브라우저가 제공하는 기능입니다. preflight는 미리 통신을 함으로써 문제가 있는 요청에 대해 일부러 ERROR를 발생시킵니다. 요새는 크롬 개발자도구에서 preflight를 표기해줘 어디서 preflight가 일어났는지 확인하기 더 쉬워졌어요 ! 그렇다면 preflight는 어떤 상황에서 일어나게 되는 것일까요 ? 1. OPTIONS 브라우저에서 OPTIONS를 던져 해당 사이트에서 사용가능한 methos정보를 가져오게 될때 preflight가 일어납니다. 따라서 개발자는 실제 원하는 요청에 대해 작성해주면 되고 따로 OPTIONS request를 보내는 ..

프론트앤드 개발을 하다보면 화면전환이 느리다거나 기타 에니메이션에서 느리게 동작한다고 클라이언트 쪽에서 이슈를 제기하는 경우가 있다 . 이때 조금이라도 빠르게 최적화 시킬 수 있는 방법이 있을까..? 크롬의 경우 개발자 도구에 들어가게 되면 기본 옵션 이외에 추가적인 설정으로 Layer옵션을 볼 수 있다. Layer에 들어가면 각 영역에 잡아놓은 섹션의 모양을 전개도처럼 확인할 수 있는데 원하는 영역을 클릭하게 되면 해당 섹션에서 잡아먹고 있는 메모리를 눈으로 확인 할 수 있다.!!! 화면에 안보이니까,, 라며 너무 과도하게 큰 이미지를 사용하고 있다면 딱 필요한 만큼만 사용하게끔 줄여도 메모리가 확 주는것을 눈으로 직접 확인하면서 작업할 수 있다! IOS의 경우 레티나를 사용하기 때문에 일반 모니터에서..

S3 (= simple strobe service ) 파일서버 파일을 저장하고 필요한 사람한테 제공 파일 = 객체 특징 많은 사용자가 접속을 해도 이를 감당학 위해 시스템적인 작업을 하지 않아도 된다. 저장할 수 있는 파일 수의 제한이 없다. 최소 1바이트 ~ 최대 5TB의 데이터를 저장하고 서비스 할 수 있다. 파일에 인증을 붙여서 무단으로 접속하는것을 막아준다. HTTP와 BitTorrent 프로토콜을 지원한다. 데이터를 여러 시설에서 중복으로 저장해 데이터의 손실이 발생할 경우 자동으로 복원한다. 버전관리 기능을 통해 사용자의 실수도 복원가능하다.

sessionStorage.setItem("name", "hello") 검사 > application > Session Storage > 주소 setItem에서 설정한 key : value값이 들어가있는걸 확인할 수 있다. localStorage.setItem("name", "hello") 검사 > application > Local Storage > 주소 setItem에서 설정한 key : value값이 들어가있는걸 확인할 수 있다. 차이점 Sessionstorage에 셋팅해준 값은 창을 닫으면 사라지는 값 Localstroage에 셋팅해준 값은 창을 닫아도 그 주소로 접속했을때 계속해서 그 값을 가지고 있음 set해준 값을 받아오기 sessionStorage. getItem("name") localS..