카
카카오엔터테인먼트FE
March 3, 20221회
Tailwind CSS 사용기
간단 소개
Tailwind CSS 사용 시 유용한 팁, className props 문제 해결, Headwind 플러그인 활용법을 소개합니다.
AI Summary
- Tailwind CSS 도입 시 유용한 팁
- Arbitrary values 사용을 줄이기 위해
tailwind.config.js파일에서 테마를 커스터마이징하여 px 단위 프리셋을 등록하고, v3 이상에서는 arbitrary value 적극 활용을 권장합니다. - Preflight는 브라우저 기본 스타일과의 충돌을 방지하며, 필요에 따라 비활성화할 수 있습니다.
- Arbitrary values 사용을 줄이기 위해
- className props 사용 시 문제점 및 해결 방안
- 컴포넌트에
classNameprops를 추가할 때, Tailwind CSS 클래스의 우선순위 문제로 의도치 않은 스타일이 적용될 수 있습니다. - twin.macro를 활용하면
className에 선언된 클래스 중 뒤에 위치한 클래스가 우선 적용되도록 하여 문제를 해결하고, 개발 생산성을 향상시킬 수 있습니다.
- 컴포넌트에
- Headwind 플러그인 활용
- Headwind는 Tailwind CSS 클래스를 스타일 카테고리별로 정렬하여 코드 가독성을 높이고, 중복된 CSS 속성 기입으로 인한 휴먼 에러를 줄일 수 있습니다.
Next Feeds
팀을 더욱 유연하게 만들어가는 힘
컬리 출고서비스개발팀이 시스템 유지보수 어려움을 극복하고 효율적인 개발 문화를 구축하기 위해 다양한 시도를 통해 체계를 만들어가는 과정을 담고 있습니다.
체계리팩토링페어 프로그래밍코드 리뷰스크럼
2022. 2. 28.
컬리
2022년 2월 마켓컬리 개발자 밋업 후기
마켓컬리 개발자 밋업 후기: 개발 문화 공유 및 우수 인재 채용을 위한 노력.
마켓컬리개발자밋업채용개발 문화
2022. 2. 27.
컬리
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
React에서 서버 상태 관리를 위한 SWR과 React Query의 사용법과 장점을 비교 분석하고, 리덕스의 한계를 극복하는 방법을 제시합니다.
React QuerySWRdata fetching리덕스상태 관리
2022. 2. 24.
카카오엔터테인먼트FE
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
React에서 서버 데이터 관리를 위한 SWR, React Query 라이브러리 비교 및 사용법을 설명합니다.
ReactSWRReact Querydata fetching상태 관리
2022. 2. 24.
카카오엔터테인먼트FE
프론트엔드 테스트 팁
프론트엔드 테스트 전략, React Testing Library 활용 팁, 비즈레버의 테스트 적용 사례를 통해 효과적인 테스트 방법론을 제시합니다.
프론트엔드 테스트유닛 테스트통합 테스트E2E 테스트React Testing Library
2022. 2. 24.
매드업
주니어 엔지니어의 눈으로 본 AWS re:Invent
AWS re:Invent 참가 후기: 주니어 엔지니어의 성장 경험과 효과적인 질문의 중요성, 뱅크샐러드의 조직 문화에 대한 고찰.
AWS re:Invent주니어 엔지니어질문법문제 해결조직 문화
2022. 2. 22.
뱅크샐러드