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의 경우 레티나를 사용하기 때문에 일반 모니터에서..

저희의 두번째 스터디 내용은 실행 컨텍스트 였어요! 이름만 듣고는 뭔지 전혀 감도 안잡혔는데 이번 스터디를 통해서 실행 컨텍스트에 관한 다양한 개념들을 알게 되었답니다 : ) 개발자스럽게 말 할 수 있는 단어가 또 하나 늘었네요 😎😎 실행 컨텍스트란? 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 실행 컨텍스트는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다. 자바스크립트는 어떤 실행 컨텍스트가 활성화 되는 시점에 선언된 변수를 위로 끌어올리고(hoisting), 외부 환경 정보를 구성하고(VariableEnvironment), this 값을 설정하는 등의 동작을 수행함으로써 다른 언어에서는 발견 할 수 없는 특이한 현상들이 발생합니다. 이러한 실행 컨텍스..

자바스크립트의 자료형이라는건 많이 들어봤는데 데이터 타입이라고 하니까 못알아 들었던 저같은 분들이 또 계실까요..? 자바스크립트의 데이터 타입 = 자바스크립트의 자료형 두개는 서로 같은 말이었습니다👏🏻👏🏻👏🏻 이렇게 자바스크립트를 주언어로 사용하고 있으면서도 얕게만 알고 있는거같아 심도있게 공부해야 할 필요성을 연차가 어느정도 쌓이기 시작하니 느끼게 됐어요 ㅎㅎ 마침 팀원들중에 저와 뜻이 같은 분들이 계셔 함께 자바스크립트 스터디를 꾸리게 되었어요 ! 지금부터 차근차근 함께 스터디했던 내용을 공유하도록 할게요 : ) 데이터 타입의 종류 원시타입 : 값이 담긴주소값을 바로 복제 Boolean Null Undefined 숫자 (Number) 문자열 (String) Symbol (ES6에서 추가됨) 참조타입 ..

앞으로 새롭게 시작할 프로젝트들에서 사용하게 될 타입스크립트를 정리하며 공부하고자해요! 배울게 너무 넘치고 넘쳐서 뭐부터 해야할지 모르겠다는 생각에 혼란스러웠는데, 그 시작을 타입스크립트로 정했어요 : ) 그럼 먼저 타입스크립트의 정의부터 알아볼까요? 타입스크립트란? 타입스크립트(TypeScript)는 자바스크립트의 Superset(상위 호환)인 오픈소스 프로그래밍 언어입니다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원하며 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있습니다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어입니다.자바스크립트의 Superset이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도..