Front End Develop Front End Develop

Puppeteer를 사용한 웹 성능 레시피 Puppeteer는 Lamda에서도 사용할 수 있는 통합 테스트 노드 라이브러리입니다. developers.google.com/web/tools/puppeteer Puppeteer | Tools for Web Developers | Google Developers Overview of Puppeteer developers.google.com BrowserStack SpeedLab 스피드에 대한 점수를 리포트로 받아 볼 수 있습니다. www.browserstack.com/speedlab Analyze your website speed test report generated using SpeedLab by BrowserStack. A free tool to test..

브라우저에서 웹 사이트를 꾸미는 것에 있어서 우리는 각자 다양한 방식으로 많은 스타일 속성들을 사용하여 꾸미게 됩니다. 그런 상황에서도 브라우저 렌더링을 최소화 할 수 있고 Reflow를 아예 안할 수 있는 속성들이 있어 소개드리려고 합니다. 기본적으로 브라우저 렌더링 상황에서는 Javscript > Style > Layout > Paint > Composite 순서를 따르게 됩니다. Layout(Reflow)단계를 뛰어넘게 되면 연산하는 양이 줄어들기 때문에 렌더링이 개선됩니다. Reflow가 일어나는 속성들 position width height left top right bottom margin padding border border-width clear display float font-famil..

최근 다크모드는 매우 매력적이고 사람들의 소구를 이끌어내는데 효과적입니다. 여러 업체들이 자신의 OS에 다크모드를 적용하고 있습니다. 목차 스위치처럼 켜고 끌 수 있는 테마 OS 레벨의 다크모드 유저 선호 성향 저장 User Agent 스타일 다루기 결합 접근 디자인 고려 여러 환경에서의 다크모드 다크모드를 제공하느냐 아니냐 실용적인 코드만 빠르게 확인하고 싶으신 경우에는 5번 결합접근으로 바로 스크롤 해 주시길 바랍니다. 1. 스위치처럼 켜고 끌 수 있는 테마 (1/8) 하나의 테마는 사용자가 처음 방문 할 때 얻는 기본값으로 정의되어야합니다. 대부분의 경우 밝은 테마입니다 다른 테마로 전환하는 방법이 있어야합니다(자동으로 수행 될 수 있음). 사용자가 버튼을 클릭하면 색상 테마가 변경됩니다. 이를 수..

DOM과 CSSOM 첫째, 브라우저에는 자바스크립트 엔진과 렌더링 엔진이 포함되어 있다는 것을 이해하는 것이 중요합니다. 우리는 후자에 초점을 맞출 것입니다. 예를 들어 WebKit (Safari), Blink (Chrome), Gecko (Firefox) 및 Trident / EdgeHTML (IE / Edge)과 관련된 세부 정보를 논의 할 것입니다. 브라우저는 DOM 및 CSSOM을 구성하는 Conversion, Tokenization, Lexing 및 Parsing 프로세스를 거칩니다. Conversion : HTML 및 CSS에서 원시 바이트를 읽어냅니다. Tokenization : 입력단위를 청크단위로 나눕니다. (시작태그, 종료태그, 속성이름, 속성값 등). 공백 및 줄바꿈과 같은 관련 없는..

최근 CSS는 사용자 정의 속성 및 새로운 기능과 같은 새로운 멋진 기능을 많이 추가했습니다. 이러한 것들이 우리의 삶을 훨씬 더 쉽게 만들 수 있지만, 또한 재미있는 방식으로 Sass와 같은 전처리기와 상호 작용할 수 있습니다. 새로운 CSS 사용자 속성인 min() 및 max() 함수를 사용해 본 적이 있다면 다른 단위로 작업 할 때 "호환되지 않는 단위 : vh 및 em"과 같은 오류 메시지가 표시 될 수 있습니다. 이는 Sass가 자체 min() 함수를 가지고 있고 CSS min() 함수를 무시하기 때문입니다. 또한 Sass는 고정된 관계가없는 단위로 두 값을 사용하여 어떤 종류의 계산도 수행 할 수 없습니다. min() 내부에서 calc()를 사용하려고하면 오류가 발생합니다. calc (20em..

과거에 비해서 최신 브라우저는 일반적으로 웹 페이지를 구성하고 HTML, CSS, Javascript등의 복잡한 웹을 렌더링하는데에 있어서 정말 효율적이게 발전해왔습니다. 보통 몇 초 남짓 안에 모든 것들이 렌더링됩니다. 프론트엔드 개발을 하면서, 렌더링 속도를 높이기 위해서 더 무엇을 할 수 있을까 고민하는 것은 중요합니다. 이럴 때 해결할 수 있는 방법 중 한가지로 Contain이라는 속성이 있습니다. Contain 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용한다고 합니다. /* 키워드 값 */ contain: none; /* 격리없이 평범하게 렌더링함 */ contain: strict; /* style을 제외한 모든 격리 규칙을 적용함 */ contain: c..

모바일 환경에서 많이들 사용하는 햄버거 메뉴는 애니메이션을 많이 넣어서들 사용합니다. SVG 및 CSS를 사용하여 다양한 효과들을 만들 수 있습니다. 우선 SVG를 적절히 그려서 애니메이션을 위한 라인들을 그립니다. body { align-items: center; display: flex; justify-content: center; height: 100vh; margin: 0; } .menu { background-color: transparent; border: none; cursor: pointer; display: flex; padding: 0; } .line { fill: none; stroke: black; stroke-width: 6; transition: stroke-dasharray 6..

자바스크립트를 다루는데에 있어서 좋은 습관들이 있어 공유드립니다. 코드를 쉽게 읽고 유지 관리하려면 몇 가지 모범 사례를 따라야합니다. Object와 Class를 다룰 때 Getter와 Setter를 쌍으로 이루자 우리는 Getter와 Setter를 반드시 쌍으로 다뤄야 합니다. Getter가 없으면 속성을 읽을 수 없으므로 사용되지 않습니다. 예를 들어 아래처럼 사용하기 보다는 const obj = { set a(value) { this.val = value; } }; 아래처럼 사용하는 것이 이상적입니다. const obj = { set a(value) { this.val = value; }, get a() { return this.val; } }; 배열을 여닫기 전에 줄바꿈 하기 const arr =..