Mong dev blog

1. 들어가며…이번 시간에는 별점을 매기는 Rating 기능을 구현하는 법을 알아보았다.Rating을 구현할 때 키 포인트는 (1) 빈 별 & 색이 차있는 별를 겹쳐야 하며, (2) clip-path로 색이 차 있는 별 일부를 보여줘야 한다.해당 포스팅을 다 읽고 나면, css의 clip-path 사용법과 Rating 기능 구현을 할 수 있게 된다.1) clip-path는 무엇일까?clip-path는 CSS 속성 중 하나로, 요소의 일부분을 잘라내거나 요소의 특정 영역만 표시할 때 쓴다..element { clip-path: ;}: 요소를 자르는 도형의 형태(ex. clircle, ploygon, inset 등): 도형의 위치와 크기를 결정하는 좌표 값 (1) 속성 살펴보기circle()은 원형으..

1. 들어가며…프론트엔드에서 Vue나 React와 같은 Virtual DOM 프레임워크의 사용이 활발하다.그리고 이러한 프레임워크들은 페이지마다 반복 작성했던 코드를 재사용 컴포넌트로 분리할 수 있다.그래서, 아토믹 단위로 요소를 관리하기 쉬워졌다.재사용 가능한 요소인 헤더, 네비게이션, 아코디언, 그리고 비즈니스 로직에서 반복되는 UI 등을 컴포넌트로 분리할 수 있다.물론, SVG 아이콘도 별도의 컴포넌트로 관리할 수 있다. ❓ 그런데, 과연 SVG 아이콘 파일을 컴포넌트로 만들어야 할 필요가 있을까?소규모 프로젝트에서는 그 필요성을 느끼지 못할 수도 있다. 하지만 실제 서비스되는 대규모 프로젝트에서는 아이콘을 컴포넌트화할 필요가 있다.그 이유는 크게 두 가지인데…첫째, 색상만 다른 아이콘 파일이 여러..

1. 들어가기 전에…이미지 지연 로드(LazyLoad)는 웹 페이지가 로드될 때 모든 이미지를 다운로드하지 않고, 사용자가 이미지를 필요로 할 때(예: 스크롤하여 이미지가 보이는 영역에 도달했을 때) 이미지를 로드하는 기술이다.이 기술을 사용하면, 초기 페이지 로딩 시간을 줄이고 네트워크 트래픽을 최적화해 사용자 경험을 개선할 수 있다.이번 시간에는 “이미지, 배경이미지의 지연 로드 구현 방법” 시리즈의 두 번째로,Vue의 커스텀 디렉티브로 지연로드를 구현하는 방법을 알아보았다.시리즈 순서(1) 이미지, 배경이미지의 지연 로드 구현 방법 (with. intersectionObserver API)👉 (2-1) 이미지, 배경이미지의 지연 로드 구현 방법 (with. Vue)(2-2) 이미지, 배경이미지의..