creamymood의 개발 공부 발자취 💭

cva()로써 tailwind 쉽게 쓸 수 있을 것 같아서 두근 두근 - ! cva() 함수 만드는 순서1. cn() 유틸 함수 만들기 : 유틸 폴더 작성이 함수는 clsx()랑 twMerge()를 조합해서, Tailwind 클래스들을 깔끔하게 병합할 수 있게 해준다.import { clsx, type ClassValue } from 'clsx';import { twMerge } from 'tailwind-merge';export function cn(...inputs: ClassValue[]) { return twMerge(clsx(...inputs));} 2. cva() 함수로 스타일 구성 : 주로유틸 폴더 작성cva()는 "class variance authority"의 핵심 함수로, var..

앞서, clsx와 twMerge에 대해 알아봤다. 지금부터는 cn(), cva() 함수에 대해 공부해볼 것인데.결론은 cva()가 안에 clsx, twMerge가 내장되어 있지만 훨씬 큰 기능을 가지고 있는 끝판왕 이라고 보면 됌. 한 마디로,- clsx는 클래스 네임 조건부 렌더링 시, 조금 더 깔끔하게 보여주는 것이고(조건부 클래스 네임 관리기)- twMerge는, 클래스 네임 중복시 충돌이 날 경우, 클래스 선택자들의 CSS 속성이 겹칠 경우 마지막 클래스 선택자만 남겨두는 역할(중복 클래스 정리기)- cn()는 이 두 clsx, twMerge를 합친 유틸 함수 !! - cva() 클래스 조합 정의 + 옵션 시스템 + 기본값 + clsx + twMerge 포함 ! clsx → twMerge → c..

프로젝트 초창기에 clsx 라이브러리 쓰자! 또는 말자 ? 에 대해 논의 했었는데우선 쓰지 않고, 진행 되었지만.. 내가 직접 코드를 작성해보니, 훨씬 유용했을거란 생각이 든다. 조건부 렌더링으로 UI 구현 하는 일이 정말 많았는데코드가 정말 길~~어지는게 눙물나는 상황 .. ^_ㅠ 🥹 그럴 때, 쉽게 사용하기 위해, clsx라고 귀동냥 했던 라이브러리 공부해보기! 💗className들을 조합해주는 라이브러리라고 생각하면 된다.단독보다, 다른 두~세개의 라이브러리랑 추가로 같이 사용 되는 것 같았다(tailwindmerge, cn, cva)이 라이브러리, 함수에 대해선 다음 게시글에서 다룰 예정이다clsx 완벽 가이드: 리액트에서 CSS 클래스를 깔끔하게 관리하는 방법리액트 컴포넌트에서 조건부로 CS..

css를 지피티에만 의존할 수는 없군..나도 어느정도는 할 줄 알아야 하니까, 자주 쓸 것들 정리해두기 🍑 추가될 때 마다 와서 정리해야지 !Tailwind에서 **자주 쓰이는 접두사(클래스 prefix)**랑 기능을 카테고리별로 총정리🎨 색상 관련text-글자 색상text-gray-800bg-배경 색상bg-blue-100border-테두리 색상border-red-300placeholder-input 안 placeholder 색상placeholder-gray-400divide-자식 요소 사이의 구분선 색divide-gray-200 🔡 텍스트 관련text-글자 크기/색text-sm, text-whitefont-폰트 굵기font-bold, font-lightleading-줄 간격(line-height)..

자바스크립트 공부하면서 아직 flex에서 못벗어난 나..더보기Q : html flex 공부하고 있는데,  flex direction이나 뭐 기타 등등 속성이 많잖아.문법이, 다 하나하나 단계별로 적어야 하는거야, 아니면 필요한거만 적어도 되는거야 ? A : HTML에서 flex 관련 속성들은 필요한 것만 적어도 됩니다. 예를 들어, flex-direction이나 justify-content, align-items 등은 각자의 역할이 있어서, 그 속성이 필요할 때만 사용하면 됩니다.간단히 말하면, 필요한 속성만 적으면 되고, 기본값을 그대로 두는 경우에는 생략할 수 있어요. 예를 들어, flex-direction의 기본값은 row이기 때문에, 특별히 방향을 바꾸지 않으면 굳이 명시할 필요는 없습니다.

플렉스 박스가 뭘까.. 코드를 짜기 전까지 이론만 공부했을 때 정말 어렵다고 생각한 파트그렇지만 실제 작성할 때, 정말 필요하고 필수적이라고 생각한 파트 !>> 한마디로 레이아웃을 짜기 위한 코드 !  👩🏻‍💻공부하다가 몇가지 알게 된 부분이 있어 나중에 내가 다시 보기 쉽게 정리해두기 :) 📝공부하다가 자꾸 궁금한게 생겨서 비교해보고 다시 정리중...   출처 : Chat GPT네모네모 사고 하는 습관 기를 것 - ⭐️   공부하다가 강사님이 소개해주신 정말 쉽고 좋은 사이트!! https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 studiomeal.com  정말.. 큰 도움이 된 사이트 :) !!  CSS에서 display: flex;를 설정..