FrontEnd21 Contents 길이에 따른 스크롤 Flex Start/End 처리 웹 개발을 하다 보면 스크롤이 생길 때 레이아웃 정렬을 유동적으로 바꿔야 하는 경우가 있습니다. 예를 들어, 콘텐츠가 짧을 때는 flex-start로 위에서부터 시작되길 원하고, 콘텐츠가 길어 스크롤이 생기면 flex-end로 하단에 고정되도록 구성하는 시나리오입니다.이번 에서는 두 개의 요소 중 하나라도 콘텐츠가 더 길면 해당 요소를 기준으로 flex-end 또는 flex-start 클래스를 토글해주는 방법을 소개합니다. 구현 목적두 개의 요소를 비교해서 콘텐츠가 더 많은 요소를 기준으로 동적으로 스크롤 상태에 따라 flex-end 또는 flex-start 클래스를 토글하려고 합니다.이를 통해 레이아웃이 콘텐츠의 길이에 맞춰 자연스럽게 조정될 수 있도록 합니다.구현 코드 export const dyna.. 2025. 4. 4. CSS Counter를 활용한 컨텐츠 넘버링 처리 목록이나 리스트를 다룰 때, 자동으로 넘버링을 처리할 수 있다면 얼마나 깔끔할까요? 이런 코드를 만들 때 순수 CSS만으로 이런 처리를 하기가 쉽지 않다고 느낄 수 있습니다. 하지만 CSS Counter를 이용하면 간단하게 해결할 수 있습니다.이번 글에서는 CSS Counter를 활용해서 콘텐츠 자동 넘버링을 구현하는 방법을 소개합니다.결과 미리 보기아래는 우리가 만들게 될 결과 화면입니다.두 가지 버전이 보이죠?일반적인 넘버링 리스트넘버링과 라벨을 함께 사용하는 리스트핵심 기술: CSS CounterCSS Counter는 HTML 요소에 숫자를 자동으로 부여할 수 있는 기능입니다. counter-reset, counter-increment, content 속성을 조합해서 리스트 스타일을 제어합니다.예제.. 2025. 4. 3. getBoundingClientRect를 활용한 Viewport 내의 컨텐츠 요소 체크 방법 웹 개발을 하다 보면 특정 요소가 현재 뷰포트(Viewport)에 들어와 있는지를 판단해야 할 때가 있습니다. 예를 들어, 사용자가 특정 영역에 도달했을 때 애니메이션을 주거나, 스타일을 변경하는 등의 동작을 할 수 있죠. 이 경우 Observer를 활용한 방식 또는 컨텐츠의 높이값을 계산해서 처리하는 방식 등 다양한 방식이 있지만 이번 글에서는 getBoundingClientRect() 메서드를 활용하여, 요소가 뷰포트 안에 들어와 있는지 체크하는 방법을 소개합니다.getBoundingClientRect()란?이 메서드는 DOM 요소의 크기와 뷰포트에 상대적인 위치 정보를 담고 있는 DOMRect 객체를 반환합니다. 이 객체는 top, right, bottom, left, width, height 등의.. 2025. 4. 3. Cloudflare 이미지 변환을 활용한 최적화된 이미지 처리 웹사이트에서 이미지 최적화는 필수적인 요소입니다. 특히, 다양한 해상도와 디바이스에서 최적의 품질을 유지하면서 로딩 속도를 개선하는 것이 중요합니다. Cloudflare의 이미지 변환(Image Resizing) 기능을 활용하면 URL을 통해 간단하게 이미지를 변환하고 최적화할 수 있습니다. 이 글에서는 Cloudflare의 이미지 변환 기능을 활용하여 최적화된 이미지 URL을 생성하는 imageConverter 함수와 반응형 이미지 URL을 생성하는 getSource 함수, 그리고 이를 활용한 makeConvertedThumb 함수를 소개합니다.1. imageConverter: Cloudflare를 이용한 이미지 변환 URL 생성const formats = { optimization: ['avif', .. 2025. 3. 4. PDF에서 첫 페이지 썸네일 추출하기 프로젝트에서 PDF 파일의 첫 페이지를 썸네일 이미지로 추출해야 할 때가 있습니다. 이를 위해 PDF.js 라이브러리를 사용하면 간단히 구현할 수 있습니다. 이번 글에서는 PDF 파일의 첫 페이지를 Canvas에 렌더링하고 썸네일 이미지를 생성하는 방법을 설명합니다.1. 프로젝트 준비먼저, 프로젝트를 시작하기 위해 다음과 같은 환경을 설정합니다:패키지 매니저: pnpm기술 스택: TypeScript, pdf.js목표: PDF 파일의 첫 페이지를 썸네일로 변환프로젝트 초기화 및 라이브러리 설치pnpm install -D pdfjs-distpdfjs-dist는 pdf.js의 브라우저 빌드 패키지입니다.2. PDF 첫 페이지를 이미지로 변환하는 함수PDF 파일의 첫 페이지를 썸네일로 변환하는 TypeScrip.. 2025. 1. 22. Zustand를 활용한 리스트 상태 관리 스토어 구현하기 이 글에서는 Zustand와 TypeScript를 활용해 서비스의 리스트들의 데이터를 관리하는 ListStore를 구현하는 과정을 공유합니다.Zustand란?Zustand는 React 기반의 상태 관리 라이브러리로, 가볍고 간단한 API를 제공합니다. 기존의 상태 관리 라이브러리인 Redux와 비교했을 때 설정이 간소화되어 있고, 직관적인 코드 작성을 가능하게 합니다.1. Zustand로 리스트 상태 관리 스토어 구현하기초기 상태 정의하기리스트 상태를 관리하기 위해 listInitialState를 정의합니다. 이 객체는 다양한 리스트 데이터를 초기화합니다.const listInitialState = { ...allLists,};export type ListState = typeof listInitial.. 2024. 12. 30. 이전 1 2 3 4 다음
