프론트엔드 개발을 하다 보면 z-index 때문에 겪는 문제를 피하기 어렵습니다. 특히 프로젝트 규모가 커질수록 z-index는 예상치 못한 충돌을 일으키며, 가독성을 떨어뜨리곤 합니다. 예를 들어, 특정 UI 요소가 다른 요소에 의해 가려지거나, 의도한 대로 화면에 표시되지 않는 문제를 종종 경험하게 됩니다. 이 글에서는 CSS 변수를 활용하여 이러한 z-index 문제를 체계적으로 관리하는 방법을 공유해 보고자 합니다. Floating UI 대부분의 프로젝트에는 여러 개의 floating UI가 존재합니다. 예를 들어, Header, Drawer, Dialog(Modal), Tooltip, Dropdown Menu 등을 생각해볼 수 있습니다. 이러한 UI들은 동시에 여러 개가 겹칠 수 있으며, 이들의 레이어 순서를 명확히 정의하지 않으면 화면에서 엉뚱한 위치에 겹쳐 보이거나 클릭이 되지 않는 문제가 발생할 수 있습니다. Header UI Drawer UI Dialog UI…

TL;DR; TypeScript와 ESLint는 “의도적으로 무시”하는 코드에 대해 다른 접근 방식을 가집니다. TypeScript는 언더스코어(_) 접두사로 시작하는 변수를 자동으로 무시하지만, ESLint의 no-unused-vars 규칙은 기본적으로 더 엄격하므로, 언더스코어로 시작하는 변수도 사용되지 않은 것으로 간주하여 오류를 발생시킵니다. 개발자는 ESLint 설정을 통해 “의도적으로 무시”하는 코드에 대해 TypeScript와 유사한 동작을 구현하거나 더 세밀한 제어를 할 수 있습니다. “의도적으로 무시”하는 코드 아래 예시와 같은 코드를 작성해본 경험이 있으신가요? 우리는 가끔 “의도적으로 무시” 하는 것으로 간주하는 코드를 작성해야 할 때가 있습니다. 루프 인덱스 무시: _index는 사용되지 않지만, entries() 메서드의 반환 값을 구조 분해하기 위해 필요 콜백 함수에서 매개변수 무시: _item은 사용되지 않지만, index에 접근하기 위해 선언 구조 분…

Astro는 애플리케이션을 구축이 아닌 콘텐츠에 중점을 두고 설계된 정적 사이트 빌더입니다. 따라서 블로그, 포트폴리오, 이벤트용 마케팅 성격의 사이트 개발에 매우 적합한 프레임워크 입니다. Astro 컴포넌트에 대해 먼저 간략히 알아보고, 어떻게 여러 프레임워크(React, Preact,Svelte, Vue, SolidJS)를 하나의 프로젝트에서 혼합해서 사용할 수 있는지 알아보도록 하겠습니다. Astro 컴포넌트 Astro 컴포넌트는 모든 Astro 프로젝트의 기본 구성 요소입니다. 이는 클라이언트 측 런타임이 없는 HTML 전용 템플릿 컴포넌트로 .astro 파일 확장자 사용합니다. Astro 컴포넌트에 대해 알아야 할 가장 중요한 점은 클라이언트에서 렌더링되지 않는다는 것입니다. HTML로 렌더링되며, 컴포넌트 스크립트는 브라우저로 전송되는 최종 페이지에서 모두 제거됩니다. 구성(스크립트 + 템플릿) .astro 파일은 스크립트와 템플릿으로 구성됩니다. src/compone…