본문 바로가기
반응형

전체 글41

[TailWind] 테일윈드 CSS 프레임워크 클래스 정리 및 관리 Tailwind CSS는 빠른 UI 개발을 가능하게 해주는 강력한 도구이며,특히 React와 결합할 때 유틸리티 클래스 기반 스타일링 덕분에 컴포넌트 단위 개발이 매우 효율적이다. 하지만 실무에서는 className 속성이 길어지면서 코드 가독성이 떨어지거나 유지보수가 어려워지는 문제가 발생하곤 한다.이번 포스트에서는 이런 문제를 해결하고 깔끔한 코드를 유지하기 위한 다양한 전략을 구체적인 예제와 함께 소개한다.🧠 1. clsx 또는 classnames 라이브러리로 조건부 클래스 처리하기React에서는 상태에 따라 다른 스타일을 적용하는 일이 빈번하다.이런 경우 Tailwind 클래스를 조건부로 작성하면 가독성이 떨어질 수 있는데, clsx 또는 classnames를 활용하면 문제를 쉽게 해결할 수 있.. 2025. 7. 18.
[Tailwind] 테일윈드 CSS 프레임워크 기본 사용법 Tailwind CSS는 HTML에 직접 유틸리티 클래스를 작성하여 스타일을 적용하는 Utility-first CSS 프레임워크이다.기존 CSS처럼 별도의 스타일 파일을 작성하지 않고, 미리 정의된 클래스를 조합하여 빠르게 UI를 구성할 수 있다는 점에서 많은 개발자들에게 사랑받고 있다.이 글에서는 Tailwind CSS의 기본 개념부터 자주 사용하는 클래스까지, 실무에 바로 적용할 수 있도록 자세히 설명한다.🧩 Tailwind CSS의 핵심 개념Utility-first: 스타일을 구성하는 작은 단위의 클래스를 조합하여 UI를 만든다.모듈화된 클래스: p-4, bg-blue-500, text-center 등 직관적인 클래스 이름으로 구성된다.반응형, 상태 기반 스타일 지원: hover:, md: 등의 .. 2025. 7. 16.
[Tailwind] 윈도우 환경에서 테일윈드 CSS 로컬 개발 시작하기 가이드 (Node.js 설치 포함) Tailwind CSS는 유틸리티 클래스 기반으로 구성된 CSS 프레임워크이다.HTML에 클래스를 직접 작성하여 빠르게 디자인을 구현할 수 있어, 프론트엔드 개발자들 사이에서 많은 인기를 얻고 있다.이 글에서는 윈도우 환경에서 Tailwind CSS를 로컬에서 개발하기 위한 전체 셋업 과정을 설명한다.🧱 0단계: Node.js 설치Tailwind CSS를 로컬에서 빌드하려면 먼저 Node.js가 설치되어 있어야 한다.✔ 설치 방법Node.js 공식 웹사이트에 접속한다.추천되는 LTS(Long Term Support) 버전을 다운로드한다.설치 마법사에 따라 기본 옵션으로 설치를 진행한다.설치가 완료되면, 터미널 또는 명령 프롬프트에서 아래 명령어로 확인한다.node -vnpm -vNode와 함께 npm도.. 2025. 7. 14.
[Solr] 검색엔진 쿼리 문법 고급 기능 - MoreLikeThis, Faceting, Boost, 디버깅, 필터링까지 실전 활용 Solr는 기본적인 검색 기능을 넘어서, 추천 시스템, 필터링, 정렬, 카테고리별 집계 등 다양한 고급 기능을 지원한다.실무에서 바로 적용할 수 있는 주요 기능들을 예제와 함께 소개한다.1. MoreLikeThis – 유사 문서 추천 기능Solr는 특정 문서와 유사한 내용을 가진 문서를 자동으로 추천해주는 기능인 MoreLikeThis(MLT)를 제공한다.mlt=true&mlt.fl=title,content&mlt.mindf=1&mlt.mintf=1&q=id:12345이렇게 하면 id=12345인 문서를 기준으로, title과 content 필드의 내용을 분석하여 유사한 문서를 찾아준다. 🔍 mlt.mintf=1 (Minimum Term Frequency)의미 : 기준 문서 안에서 어떤 단어가 최소 몇.. 2025. 7. 4.
반응형

티스토리툴바