목록 가상화 또는 "윈도잉" 무한 스크롤처럼 동적으로 node가 늘어나는 UI를 사용할때 node가 100개 1000개 늘어나면 어떻게 될까요 많은 행이 포함된 큰 테이블이나 리스트를 표시해야 하는 경우가 있습니다. 이러한 리스트의 모든 단일 항목을 로드하면 성능에 상당한 영향을 미칠 수 있습니다. 목록 가상화 또는 "윈도잉"은 사용자에게 보이는 것만 렌더링하는 개념입니다. 먼저 렌더링되는 요소의 수는 전체 목록의 아주 작은 부분 집합이며 사용자가 스크롤을 계속하는 경우 보이는 콘텐츠의 "window"이 움직입니다. 이렇게 하면 리스트의 렌더링 및 스크롤 성능이 모두 향상됩니다. react-window react-window는 애플리케이션에서 가상화된 목록을 쉽게 생성할 수 있게 해주는 작은 서드 파티 ..
CSS-in-JS는 모던 프론트엔드 개발, 특히 React 커뮤니티에서 점점 더 일반적으로 사용되고 있습니다. styled-components는 Tagged templates의해 구동되어 스타일만 정의하면 일반적인 react 컴포넌트를 생성할 수 있기 때문에 다른 CSS-in-JS 목록에서 눈에 띕니다. 이는 CSS 모듈성과 같은 중요한 문제를 해결하고, 중첩과 같은 non-CSS 기능을 제공하며, 이 모든 기능은 별도의 설정 없이 사용할 수 있습니다. 개발자는 CSS 클래스의 고유 이름에 대해 생각할 필요도 없으며, 클래스에 대해 전혀 생각할 필요도 없습니다. 그럼 styled-components는 어떻게 이를 해결할까요? styled-components에 익숙하지 않다면 우선 공식문서를 읽어보세요. ..
"styled-components"는 자바스크립트에서 CSS 스타일링을 위한 매우 인기있는 라이브러리입니다. 이 라이브러리의 핵심 기능 중 하나는 Tagged Template Literals라는 ES6의 템플릿 리터럴 기능을 활용하는 것입니다. styled-components와 Tagged Template Literals 먼저 Tagged Template Literals에 대해 간단하게 설명하자면, 템플릿 리터럴은 자바스크립트 문자열을 생성할 때 백틱(```)을 사용하는 방법입니다. Tagged Template Literal은 템플릿 리터럴 앞에 함수를 위치시켜 해당 문자열을 처리하는 방식입니다. 예시: function tag(strings, ...values) { return strings.reduce..
Styled Components의 특징 Styled Components는 React 애플리케이션의 컴포넌트에 스타일을 적용하는 라이브러리입니다. CSS-in-JS 라이브러리 중 하나로, JavaScript를 통해 CSS 스타일을 정의하고, 이를 컴포넌트와 연결합니다. 그렇다면, Styled Components가 내부적으로 어떻게 동작하는지 살펴보겠습니다. 1. JavaScript로 CSS 생성 먼저, Styled Components는 JavaScript 문법을 사용하여 CSS를 정의합니다. import styled from 'styled-components'; const Button = styled.button` background-color: blue; color: white; `; 여기서 styled..
리액트는 간단함과 유연함을 강점으로 최근 몇 년 동안 가장 인기 있는 프런트엔드 라이브러리 중 하나가 되었습니다. 그러나 어플리케이션이 더 복잡해질수록 상태를 관리하고 비동기 입력을 처리하며 확장 가능한 아키텍처를 유지하는 것이 어려워질 수 있습니다. 이 기사에서는 이러한 어려움을 극복하는 데 도움이 되는 다섯 가지 고급 리액트 패턴을 살펴보겠습니다: Backend for Frontend Pattern (BFF) Hooks Pattern Higher-Order Component Pattern Observer Pattern Compound Pattern 1. Backend for Frontend Pattern (BFF) Backend for Frontend (BFF) 패턴은 React 애플리케이션을 개발할..
자바스크립트의 setTimeout 함수는 특정 작업을 지정된 시간 후에 실행하도록 예약하는 데 사용됩니다. 하지만 의도와는 다르게 setTimeout의 실행 시간을 정확하게 보장할 수는 없습니다. 그 이유는 자바스크립트의 이벤트 루프와 싱글 스레드의 작동 방식과 관련이 있습니다. setTimeout 예시 function printPerformanceNow() { console.log(`${performance.now().toFixed(0)}ms`); } function myCallback() { console.log(`setTimeout 실행 시간`); printPerformanceNow(); } console.log(`실제 실행 시간`); printPerformanceNow(); // 1초 후에 콜백 ..
CSS 스타일 속성에 따라 리플로우(reflow)가 발생할 수도 있고 발생하지 않을 수도 있습니다. 리플로우는 요소의 크기, 위치 또는 구조가 변경될 때 브라우저가 해당 변경 사항을 계산하고 적용하는 프로세스를 말합니다. 리플로우는 성능에 영향을 주므로 최소화하는 것이 중요합니다. 리플로우가 일어나는 주요 CSS 속성에는 다음과 같은 것들이 있습니다: width, height: 요소의 크기를 변경할 때 리플로우가 발생합니다. padding, margin: 패딩과 마진을 변경하면 요소의 크기와 위치가 변경되므로 리플로우가 발생합니다. position: absolute, fixed: 절대 위치나 고정 위치로 요소를 배치하면 주변 요소의 배치가 변경되므로 리플로우가 발생합니다. display: none: 요소..
구현 function myNumber(str) { var isNegative = false; var result = 0; // 공백 제거 str = str.trim(); // 음수 체크 if (str[0] === '-') { isNegative = true; str = str.slice(1); } for (var i = 0; i 57) { break; } // 아스키 코드를 활용한 숫자 변환 var digit = charCode - 48; result = result * 10 + digit; } // 음수 처리 if..
