프론트엔드/CSS

모달과 팝오버를 칼로 베듯 명확히 구분해본 적은 없었다. 그저 화면 한가운데에 떠서 다른 작업을 막으면 모달, 특정 버튼을 눌렀을 때 앵커를 기준으로 나타나면 팝오버라는 정도로 느슨하게 생각해왔다. 하지만 두 개념은 단순한 위치나 동작의 차이를 넘어, 그 목적과 사용 방식에서 뚜렷한 차이를 지닌다. 이를 제대로 이해하면 사용자 경험을 보다 세밀하게 설계할 수 있다.아래의 표에서 조금 더 체계적으로 정리해두었지만, 모달은 차단적 인터페이스다. 사용자가 모달을 닫기 전까지는 배경의 다른 요소와 상호작용할 수 없다. 이러한 차단성은 주로 중요한 작업을 처리하거나 사용자로부터 명확한 결정을 요구할 때 사용된다. 예를 들어, 삭제 확인 창이나 로그인 폼이 대표적이다.반면, 팝오버는 비차단적 인터페이스로, 배경과의..

프론트엔드 개발자들 모인 자리에 가서 '어떤 스타일링 라이브러리 좋아하세요?'하고 물어보면 못해도 30분은 할 이야기가 생긴다. 내 경우에는 여러번 밝힌 바와 같이 TailwindCSS와 ModuleCSS를 선호한다. 하지만 내 선호를 밝히면 늘 돌아오는 질문이 있다. '그것들은 동적 스타일링하기 불편하지 않아요?'하고.요즘 사용자를 늘려가고 있는 Vanila-extract나 이제는 죽어버린 StyledComponent와 비교하면 앞서 언급한 두 라이브러리는 확실히 동적 스타일링에 취약하다. 특히 TailwindCSS는 빌드 과정에서 사용된 클래스 이름만 추출해서 최종 CSS를 생성하는 'content scanning' 과정이 필요한데, 이 때문에 아래와 같이 동적으로 클래스 이름을 조합하거나 조건부로 ..

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

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

박스 높이를 제한해놓아도 컨텐츠가 많으면 흘러넘치기 마련이다. 이를 방지하기 위해 overflow: hidden을 사용하지만, 이것만으로는 마뜩찮다. 컨텐츠가 뚝 하고 잘려버리는 느낌이 들기 때문이다. 게다가 사용자는 숨겨진 텍스트가 존재하는지도 알 길이 없다.이럴 때 사용하는 것이 바로 텍스트 트렁케이팅(text truncating)이다. 제한된 공간에서 텍스트가 넘칠 때, 텍스트 트렁케이팅을 사용하면 넘치는 부분을 "..."(ellipsis)으로 표시할 수 있다. 이를 통해 사용자는 해당 영역에 더 많은 텍스트가 존재한다는 힌트를 얻을 수 있다. 단일 줄 텍스트 트렁케이팅단일 줄에서 텍스트가 넘치는 경우 text-overflow: ellipsis를 사용해 간단히 처리할 수 있다..text-trunca..

웹 어플리케이션을 제작하는 데 있어 반응형 디자인은 필수적이고, 일반적으로 이를 처리하기 위해 CSS Media Query를 사용한다. 그러나 이 방식은 뷰포트 크기를 기준으로 하기에 컴포넌트 내부 크기 변화에 민감하게 대응하지 못한다는 한계가 존재했다. 만약 컴포넌트 자체의 크기 변화에 따라 스타일을 다르게 처리하고 싶다면 Resize Observer와 useEffect 등 JS의 도움을 받아야 했다.하지만 CSS Container Query의 등장으로 인해 JS가 아닌 CSS의 힘 만으로 개별 컴포넌트의 크기와 컨텍스트에 따라 스타일을 적용할 수 있게 되었다. 이로 인해 더 유연한 UI 설계가 가능해지며, 특히 복잡한 레이아웃을 가진 웹 어플리케이션에서 컴포넌트의 재사용성을 극적으로 끌어올릴 수 있게..

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부터 시작한 사람이라 그런가..

기본 형태styled 객체styled components를 사용해 컴포넌트를 만들 때는 변수명이 컴포넌트의 이름이 되며, styled 객체에 존재하는 다양한 HTML 프로퍼티를 가져다 사용한다. 백틱을 통해 각 프로퍼티에 css 스타일을 작성해줄 수 있다. import styled from 'styled-components';const Button = styled.button` border: none; padding: 16px; &:hover, &:active { background-color: #463770; }`;export default Button;css 스타일을 작성할 때 nesting 문법을 사용하여 하위 노드는 물론, & 키워드를 통해 pseudo selector등을 사용할 수..