CSS

웹 애플리케이션의 사용자 경험은 상태 전환의 자연스러움에 크게 좌우된다. 사용자가 리스트에서 항목을 선택해 상세로 들어가거나, 카드가 화면에서 커다란 히어로 이미지로 확장되는 장면이 부드럽게 이어지면 인터페이스는 훨씬 더 신뢰감을 준다. 과거에는 이런 효과를 만들려면 복잡한 DOM 측정·계산·동기화 로직을 직접 구현해야 했지만, View Transitions API는 브라우저 수준에서 '상태 변경을 알려주면 알아서 전환을 처리'하는 패러다임을 제시한다.전통적인 전환은 개발자가 이전 상태와 이후 상태를 둘 다 직접 다루고, 애니메이션 타이밍을 맞추며, 엔터/엑시트 애니메이션을 수동으로 제어해야 했다. View Transitions API는 이 과정을 단순화한다. 개발자는 "이제 상태를 바꾼다"는 사실만 브..

CSS를 다루다 보면 뷰포트 크기에 따라 유동적으로 변화하는 레이아웃이나 폰트 크기를 구현해야 하는 경우가 많다. 이때 반응형 디자인을 유연하게 만들어주는 함수들이 바로 min(), max(), clamp()이다. 이 함수들은 각각 최소값, 최대값, 그리고 범위를 지정한 선호값을 설정할 수 있도록 도와주며, CSS 속성에서 숫자 단위를 계산할 수 있는 기능을 제공한다.기존에는 미디어 쿼리로 복잡하게 처리하던 작업들도 이 함수들을 사용하면 훨씬 간결하고 직관적으로 구현할 수 있다. 특히 clamp() 함수는 하나의 속성 값에 최소값, 선호값, 최대값을 한 번에 설정할 수 있어 반응형 타이포그래피나 요소 크기 조절에 매우 유용하다. min() 함수: 요소 크기의 상한선 지정min() 함수는 여러 개의 값 중..

CSS는 점점 더 강력한 언어로 발전하고 있다. 예전에는 단순히 스타일을 지정하는 수준에 그쳤지만, 이제는 조건부 로직, 선택자 그룹화, 부모 요소를 기준으로 한 선택까지 가능해졌다. 그 중심에는 :is(), :where(), :has()와 같은 새로운 CSS 함수들이 있다. 이 함수들은 선택자 작성 방식을 간결하게 만들고, 지금까지 불가능하거나 번거로웠던 스타일링 패턴을 더 직관적으로 구현할 수 있도록 도와준다. :is() 중복을 줄이고 유지보수성을 높이는 선택자 그룹화:is() 함수는 여러 선택자를 묶어서 한 번에 스타일링할 수 있다. 단순히 코드 길이를 줄여주는 것 같지만, 실무에서는 UI 컴포넌트의 상태 관리에 자주 활용된다.예를 들어 버튼 컴포넌트가 있고, 이 버튼은 hover, focus, a..

선호하는 스타일링 라이브러리에 대한 질문을 받으면, 나는 언제나 '디자인 시스템이 잘 갖춰진 프로젝트라면 tailwindCSS(이하 테일윈드)를, 그렇지 않은 경우라면 moduleCSS를 선택한다'고 답해왔다. 그러나 오늘부터는 이 대답의 결이 조금 달라질 것 같다. 새로운 버전의 테일윈드가 출시되었고, 이 라이브러리의 메인테이너가 내린 많은 결정들이 내 마음에 쏙 들었기 때문이다. Theme variables이전까지만 해도 테일윈드의 클래스를 입맛대로 수정하려면 tailwind.config.ts를 사용해야 했다. 아래는 내가 실제로 작성했던 설정 파일 일부이다. spacing의 값을 rem으로 덮어쓰기 위해 여러 과정을 거치고 있고, [ 이런 ] 어처구니 없는 문제를 맞닥트리기도 했다.import ty..

requestAnimationFrame을 사용하는 근본적인 이유는 브라우저의 화면 갱신 주기에 맞춰 콜백을 실행하고, 이를 통해 애니메이션이 더 부드럽고 일관되게 실행되도록 하는 것에 그 목적이 있다. 그런데 이전의 두 포스트에서 다루었던 애니메이션의 경우와 같이 CSS를 수정하는 형태 ─ 첫 번째는 엘리먼트 스타일의 top과 left 값을 변경했으며, 두 번째는 translateX 값을 변경하였다 ─ 에서는 복잡한 자바스크립트 로직 대신 transition 하나로 대응이 가능하다고 생각한다. 우선 마우스 움직임을 처리하는 로직이다. requestAnimationFrame 관련 로직을 제거하고, ref를 커스텀 훅 내부에서 처리하여 외부로 전달하는 방식을 채택했다.export const useFollow..

이전 포스트에서는 페이지 전체를 대상으로 어떤 아이템(네모난 상자, 나비 등)이 마우스를 따라오도록 했고, 이를 구현하기 위해 전역 객체에 이벤트 리스너를 등록하였다. 하지만 컴포넌트 수준에서는 각각의 이벤트 리스너를 ReactElement에 직접 연결할 수 있다. 아래의 커스텀 훅은 이전 포스트에서 작성했던 useFollowMouse 훅과 구조적으로 동일하나, 이벤트 리스너를 ReactElement에 연결할 수 있도록 리턴하는 부분이 조금 다르다.이벤트 리스너인 handleMouseMove를 잠시 살펴보면 e.terget이 아닌 e.currentTarget을 사용하고 있다는 점을 알 수 있다. 이는 이벤트 버블링으로 인한 오작동을 막기 위한 것이다. 사족이지만 나는 이벤트 객체의 이 두 프로퍼티가 이름..

requestAnimationFrame는 브라우저에서 애니메이션을 효율적으로 실행하기 위해 제공하는 메서드다. 이는 rAF 메서드가 window 객체에 속해있다는 의미이며, node 환경에서는 접근할 수 없다는 뜻이기도 하다. rAF는 다음 리페인트 전에 지정된 콜백 함수를 호출해 애니메이션이 화면 재생 빈도에 맞춰 부드럽게 실행될 수 있도록 한다. 모니터가 60hz라면 초당 60번, 144hz라면 초당 144번 호출된다. 또한, rAF는 setTimeout보다 성능이 뛰어나며, 비활성 탭에서는 호출이 중지되어 리소스를 절약할 수 있다. MDN의 예시 코드만 봐도 바닐라 JS에서는 재귀함수의 형태로 requestAnimationFrame를 사용하는 듯하다. 그러나 리액트에서는 몇 가지 이유로 인해 다른 ..

리액트프론트엔드 개발자로 면접을 보다보면 '왜 vue나 angular가 아니라 react를 주력으로 사용하는지' 물어보는 면접관들이 이따금씩 존재한다. 나는 아주 솔직한 사람이기 때문에 대부분의 경우 '회사에서 보통 react를 가장 많이 사용하고 있기 때문'이라고 답한다. 그렇지만 이 대답만으로 끝나지는 않는다. 나는 몇 가지 부연설명을 곁들인다.vue는 3 버전 이후로 react와 크게 다를 바 없어졌다고 생각한다. anguler는 일반적인 수준의 프로젝트의 경우 그 복잡도로 인해서 react를 대신할 메리트가 없다고 느껴진다. svelte까지 포함해서 세 개의 라이브러리(혹은 프레임워크)는 모두 데이터가 양방향으로 바인딩되거나, 양방향 데이터 바인딩을 지원한다. react부터 시작한 사람이라 그런가..