Front-end 개발

📌 제목JavaScript Intersection Observer로 무한 스크롤 구현 — 성능 최적화까지📝 본문웹사이트에서 **무한 스크롤(Infinite Scroll)**은 사용자가 페이지 끝까지 스크롤하면 자동으로 다음 데이터를 불러오는 UX 패턴입니다.예전에는 scroll 이벤트로 구현했지만, 스크롤 이벤트는 성능 문제와 복잡한 계산을 유발할 수 있습니다.이를 해결하는 현대적인 방법이 Intersection Observer API입니다.이번 글에서는 기본 개념, 무한 스크롤 구현 예제, 성능 최적화 기법까지 자세히 안내합니다.1️⃣ Intersection Observer 개념특정 요소가 뷰포트에 진입/이탈하는 시점을 감지하는 API주요 장점:스크롤 이벤트를 직접 사용하지 않아 성능 최적화코드 간..

📄 본문웹사이트에 다크 모드를 도입하는 것이 사용자 경험 개선의 중요한 트렌드가 되면서, CSS 변수(CSS Custom Properties)를 활용해 효율적으로 테마를 관리하는 방법이 주목받고 있습니다.이번 글에서는 CSS 변수를 활용해 다크 모드 토글 UI를 구현하는 방법과, 이를 통해 테마를 쉽게 변경하고 관리하는 팁을 알려드립니다.1. CSS 변수(CSS Custom Properties)란?CSS 변수는 --로 시작하는 사용자 정의 프로퍼티로, CSS 내에서 재사용 가능한 값을 선언할 수 있습니다.일반 변수와 달리, CSS 변수는 런타임에 동적으로 변경 가능하며, 상속과 우선순위에 따라 적용됩니다.:root { --primary-color: #3498db; --background-color:..

1.React(리액트)란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용할 수 있습니다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 합니다. 2.React 특징 단방향 데이터 바인딩(One Wat Data flow) ▷리엑트는 단방향 바인딩을 사용하여 성능저하를 줄이고 더 확실하게 데이터를 추적 할수 있습니다. 가상돔(Virtual Dom) ▷싱글 페이지 어플리케이션(SPA)에서는 리플로우/리페인트거 자주 발생 되는데 가상돔을 사용하여 최소화하여 성능을 최적화 시켰습니다. 컴포넌트(..

1. CSS Ketframes로 이미지 모션 만들기 한장씩 제작된 이미지가 아닌 한장으로 만들어진 스프라이트 이미지로 모션 구현(모션용 제작 이미지 필요) img 내 position 변경 2. 소스 및 스프라이트 이미지 (Result 탭 에서 확인가능) 3. 스프라이트 이미지 장,단점 서버에 요청을 한 번만 함 (장점) 하나의 이미지 파일만 관리 (장점) 이미지가 크다면 로딩시 오래 걸림 (단점) 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.