분류 전체보기119 [Browser]브라우저 렌더링 과정 브라우저 렌더링 과정1. HTML파일을 파싱해서 DOM 트리를 생성한다.2. CSS파일을 파싱해서 CSSOM트리를 생성한다.3. 생성된 DOM트리와 CSSOM트리를 합쳐서 렌더 트리를 생성한다. (display: none 같은 경우 렌더 트리에 포함되지 않는다.)4. 레이아웃 단계에서 렌더 트리의 각 요소의 크기와 위치를 계산해서 화면에 배치한다.5. 페인트 단계에서 배치된 요소들을 화면에 그린다.기본적으로 알던 일련의 브라우저 렌더링 과정에 대한 설명좀 더 세분화해서 보면1. DOM트리 생성HTML의 원시 바이트를 읽는다. (8비트의 데이터 형태, 바이트 스트림) ->HTML에 정의된 인코딩(ex. utf-8)에 따라 개별 문자로 변환 -> 변환한 문자와 가지고 있는 토큰을 비교해 HTML코드인지 확인.. 2024. 7. 17. ECMAScript표준을 따르는 JS의 7가지 데이터 타입(자료형) 1. undefined - 개발자의 의도와 관계없이 시스템에 의해 자동으로 할당되는 값, 값이 할당되지 않는 변수 또는 존재하지 않는 객체 속성의 기본값2. null - 개발자가 값이 없음을 명시적으로 나타내기 위해 할당하는 값3. Boolean - ture 또는 false 값만 가질 수 있음, 논리적 상태를 나타내는 데 사용4. String - 문자열 데이터, 문자열은 변경 불가능(immutable)하며, 각 문자는 유니코드로 인코딩5. Symbol - 고유하고 변경 불가능한 원시 값을 나타냄, 주로 객체의 고유한 속성 키로 사용, 항상 고유하며, 같은 설명을 가진 심볼이라도 서로 다름6. Numeric (number + bigint) - number : 숫자열 데이터, 자바스크립트에서는 하나의.. 2024. 6. 3. ECMAScript, polyfill, transpile 에크마스크립트(ECMAScript)의 탄생넷스케이프와 마소는 자신들의 브라우저에 새로운 기능을 빠르게 늘리기 시작했고 이렇게 추가된 기능은 각자의 브라우저에서만 동작했다. 특히 익스플로러와 내비게이터의 DOM구조는 완전히 달랐는데 브라우저마다 웹 페이지가 다르게 동작하거나 제대로 동작하지않는 cross browsing이슈가 발생했다. 이에 따라 개발자의 어떤 기능을 추가하기 위해 두 개의 스크립트를 따로 개발 해야했다.또한 초기의 JS는 브라우저 생태계를 고려해서 작성된 것이 아니었고 단지 새로운 기능이 추가되는 형태로 발전했다.이에 따라 자바스크립트와 브라우저의 발전 속도의 차이가 나기 시작했고 결국 브라우저는 자바스크립트의 변화를 따라가지 못했다. 자바스크립트에 어떤 기능이 추가된다면 runtime.. 2024. 6. 3. [포케허브] dom-to-image와 next/image 최적화 호환 문제 해결 리액트 버젼에서 next로 마이그레이션 발생 문제 중 해결이 안된 문제dom-to-image를 사용해서 포켓몬 카드를 다운받는 부분인데이렇게 완성된 카드를 dom-to-image를 통해서 file saver로 다운 받으면...이렇게 포켓몬 이미지와 로고 이미지가 캡쳐가 되지 않는다. 그런데 카드 배경에 몬스터볼 이미지는 svg인데 다운로드하면 잘 보이고있어서 의구심을 품었다.기존 리액트 버젼에서는 img태그를 사용해서 png파일을 다운 받았는데next로 마이그레이션하면서 next/image를 사용하였다.일단 next/image를 사용하니 기존 png이미지가 webp로 변경되었다.개인적인 생각으로는 dom-to-image가 svg, png, jpeg 만 인식하고 캡쳐하기 때문이 아닌가 생각이 들었다.그래.. 2024. 5. 25. 이전 1 ··· 6 7 8 9 10 11 12 ··· 30 다음
