IT/web35 [web] zero-runtime 이란? 개념 CSS 프레임워크나 라이브러리가 브라우저에서 실행되는 동안 전혀 추가적인 JavaScript 코드를 필요로 하지 않음을 나타냅니다. 즉, 프레임워크가 브라우저에서 실행될 때 추가적인 JavaScript 코드를 생성하거나 실행하지 않는 것을 의미합니다. 일부 CSS 프레임워크는 스타일을 적용하고 관리하기 위해 JavaScript를 사용합니다. 예를 들어, 특정 CSS 클래스를 토글하거나 동적으로 스타일을 변경하는 등의 작업을 수행하기 위해 JavaScript 코드를 사용할 수 있습니다. 이러한 프레임워크는 브라우저에서 실행될 때 JavaScript 코드를 실행하여 스타일을 조작합니다. 반면에 "zero runtime" CSS 프레임워크는 브라우저에서 실행되는 동안에도 추가적인 JavaScript 코드.. 2024. 4. 13. [web] thumbnail의 width 값 비율에 따라 height 크기 조절하기 정공법은 아니지만, 많은 개발자들이 사용하는 방법을 소개하고자 한다. 반응형이 100% 지원되진 않지만 레이아웃이 변경이 되면 일부 컨텐츠들은 반응형처럼 작동되는게 보기 좋다. 핵심은 코드는 아래와 같다 눈여겨 볼 속성은 height와 padding-bottom 이다. height를 0으로 설정함으로써 기본 보여주는 속성을 완전히 지우고, padding-bottom 속성을 주면서 width 기준으로 간접적으로 height를 1.6배 증가하라고 설정한다. padding을 %로 설정하면 width값에 비례한다고 한다. https://developer.mozilla.org/en-US/docs/Web/CSS/padding Percentages: refer to the width of the containing .. 2024. 4. 13. [Web] CSS를 어떻게 작성해야 할까? CSS.. 쉽지만 쉽지 않은 순간이 있고, 어려울땐 한없이 어려운 CSS 작성방법 - CSS 파일에 작성 - CSS-in-JS - Utility-First 등등 기존 CSS 작성 시 문제점 - Global namespace: 모든 스타일을 global에 선언하기 때문에 별도의 class 네이밍 규칙을 적용해야함 ex) BEM - Dependencies: 하나의 element에 여러 CSS룰이 적용되기 때문에 모든 스타일을 개발자가 기억해야 하는 문제 - Dead Code Elimination: CSS가 JS와 분리되어 관리되기 때문에 기능 변경에 따른 동기화 문제 발생 - Minification: 중복 제거를 위해 긴 클래스 이름 사용해 문서 사이즈 커질 수 있음 - Sharing Constants: C.. 2024. 2. 14. [Web] 사용자 경험과 성능 개선 방법 서비스 사용자 경험은 매우 중요 - 전환율이나 서비스의 지속적인 사용에 밀접하게 관련 - 심지어 매출에도 영향을 미침 사례 - 핀터레스트는 페이지 로드 시간을 40% 감소시켜서 검색엔진을 통해유입된 트래픽 및 가입자 전환율이 15%증가 - BBC는 사이트가 로딩하는 데 걸리는 매 초마다 10%의 사용자들이 감소 - 로딩 속도 1초가 빨라지면 아마존 판매량의 1%, 구글 검색량의 0.2%, 월마트의 전환율이 2% 증가 -> 작은 숫자로 보이지만, 돈으로 환산하면 수억에서 수십억 달러 정도 SSR cache 정적 페이지를 제공하는 것보다 분명 느림 트래픽이 몰리는 상황에서 렌더링 작업은 웹서버 부하 발생 이슈: 캐시 만료 시 무효화 하고 다시 렌더링해서 캐싱과 응답 주도록 했지만, 렌더링 발생시킨 요청을 포.. 2024. 2. 13. [Web] 하드웨어 가속과 IntersectionObserver 하드웨어 가속 인터렉션이 많은 영역은 cpu에 많은 연산을 맡기므로 렌더링에 많은 시간을 사용 gpu와 같이 연산하면 렌더링 시간 줄일 수 있음 하드웨어 가속 사용 방법 animation(keyframes) 다양한 케이스에 대응하기 힘듬 will-change 설정한 스타일의 요소가 빠르게 렌더링하기 위해 사전에 준비함 준비하는 시간이 대략 100 ~ 200ms 정도 소요. 남발하면 초기 렌더링이 늦어짐 trasform: translate3d 다양한 케이스에 대응하기 쉽고, 초기 렌더링에도 크게 영향을 주지 않는 방법 will-change와 마찬가지로 브라우저에게 하드웨어 가속해야한다고 미리 알려주고 자체 레이어로 승격시키고 gpu메모리에 할당이 되어 하드웨어가 계산을 하게 됨. 이런 레이러를 승격된 레이.. 2024. 2. 10. 이전 1 ··· 3 4 5 6 다음
