어제보다 더 나은 오늘

부모 요소의 state에 따라 특정 자식 요소의 스타일을 지정해야 하는 경우, 먼저 부모 요소에 `group` 클래스를 작성하고, target 요소에는 `group-hover` 등 `group-*` modifier를 사용해 스타일을 지정할 수 있다.  예를 들어 다음과 같은 책 상세 페이지에서 한 줄 평 영역에 마우스를 hover할 때 편집 버튼이 나타나게 하고 싶다면 다음과 같이 코드를 작성할 수 있다.   이 동작을 css에서 직접적으로 구현하려면 다음과 같은 방식으로 할 수 있다.   즉, Tailwind CSS의 `group`은 css의 가상 클래스와 자식 선택자를 활용해 부모 요소의 상태에 따라 자식 요소의 스타일을 지정하는 기능을 제공하는 것이다.  실제로 빌드 파일을 살펴보면 다음과 같은 라..

Reusing Styles - Tailwind CSSManaging duplication and creating reusable abstractions.tailwindcss.com Tailwind CSS 공식 문서에서 있는 Reusing Styles에 있는 내용을 내 나름대로 정리해보는 포스팅이다. 전문 번역은 아니고 필요한 내용에 대한 일부 번역임을 밝힌다.   1. 에디터 및 언어 기능 사용 재사용해야 하는 스타일을 단일 파일 내에서만 재사용하는 경우, 에디터의 다중 커서 편집 기능과 언어별 루프를 사용하는 것이 중복을 관리하는 가장 간단한 방법이다.   2. 컴포넌트 추출 여러 파일에서 일부 스타일을 재사용해야 하는 경우 가장 좋은 전략은 React, Svelte 또는 Vue와 같은 프론트엔드 프레..

UI 라이브러리를 처음 사용해 보고 있다. 개발의 많은 부분이 트레이드 오프인데 UI 라이브러리 도입도 이러한 부분이 있는 것 같다. pros. - 직관적이고 깔끔한 UX 컴포넌트 지원 - 빠른 개발 속도 - 웹 접근성 준수 cons. - 커스터마이징의 한계 - 이슈가 생기면 내가 코드를 잘못 작성한 탓인지 라이브러리 자체의 이슈인지 매번 찾아봐야함 antd 도입을 결정하고 난 후 매일 antd 레포의 이슈를 뒤지는 삶을 살고 있다 해도 과언이 아니다. 그 첫 시작은 tailwind와의 충돌이었다. tailwind가 설치된 프로젝트에 antd를 추가로 설치하고 버튼 컴포넌트를 불러왔더니 버튼이 보이지 않았다 😱 개발자 도구를 보면 antd primary button의 배경색 #1677ff 가 tailwi..

온라인 셀러 계산기 사이트: https://seller-calculator.vercel.app/ 개인 프로젝트로 마진, 판매가, 행사가 환원 등을 구할 수 있는 온라인 셀러 계산기를 뚝딱 만들어 보았다. 요구사항에는 없었지만 지난주 기능 구현 챌린지에서 만들었던 다크 모드 토글 컴포넌트를 가져와서 적용해 보았다. 그 과정에서 생긴 이슈와 해결책을 정리해 보기로 한다. 1. useEffect hook tailwind css를 사용하면 다크 모드를 굉장히 손쉽게 구현할 수 있다. 새로고침 시에도 테마가 유지될 수 있도록 사용자가 선택한 테마를 로컬 스토리지에 저장하기로 했다. 그리고 공식문서에서 알려준 대로 시스템 설정도 체크할 수 있도록 window.matchMedia() api를 사용했다. if ( lo..

Frontend Mentor | Social media dashboard with theme switcher coding challenge This challenge will be a perfect chance to practice your Grid skills. The color theme switcher also adds a nice additional test. www.frontendmentor.io - 깃헙 레포지토리: https://github.com/Ah-ae/social-media-dashboard - 배포 링크: https://social-media-dashboard-frontend-challenge.vercel.app/ 다크 모드를 구현해 보고 싶어서 sns 대쉬보드 챌린지를 선택했다. ..