deep_sea deep_sea

critical rendering path 토스 세션 영상을 보면서 찾아본 용어이다. 대충 짐작은 가지만 처음 들어보는 용어였기에 한 번 찾아보았다. 크리티컬 렌더링 패스(Critical Rendering Path)는 웹 페이지의 초기 로드 시각과 사용자에게 내용이 표시되는 시간에 영향을 주는 일련의 단계이다. 웹 페이지를 표시하는 데 필요한 리소스를 가져오고 처리하는 과정을 의미한다. 크리티컬 렌더링 패스는 몇 가지의 단계로 구성된다. HTML 파싱 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다. DOM은 Document Object Model의 약자로 문서의 구조와 컨텐츠를 표현하는 객체 트리이다. CSS 파싱 브라우저는 CSS 파일 및 내장 스타일을 파싱하여 CSSOM(CSS Objec..

문자열을 생략 처리하는 방법에는 대표적으로 2가지가 있습니다. 방법은 다음과 같습니다. CSS로 생략 처리하기 아래는 CSS를 통해 문자열을 생략 처리하는 방법입니다. text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } Javascript로 생략 처리하기 javascript를 통해 문자의 길이를 제한하고 '...' 텍스트를 삽입하는 방식입니다. {text.length > 100 ? : `${text.slice(0, 100)}...` : text} 문자의 길이가 100이 넘어가면 100까지만 자르고 그 뒤에는 '...' 으로 생략 처리를 해줍니다. 하지만 위의 두가지 방법에는 UI적 차이가 존재합니다. CSS를 활용할 경우 ele..