프로젝트 선택구현 사항 중 ui 컴포넌트를 모아 놓은 라이브러리를 사용하는 것이 있어서 한번 프로젝트에 적용해보았다. 다들 alert를 많이 사용하고 있어서 alert ui를 통일해보장

설치

npx shadcn-ui@latest add alert

사용법

기본적으로 제공하고 있는 코드를 넣어주면 사용 완료..

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Tailwind CSS

<Alert className="z-50 bg-slate-50 fixed w-1/3 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white">
        <AlertTitle className="text-xl font-bold">{alertTitle}</AlertTitle>
        <AlertDescription className="mt-3">{alertMessage}</AlertDescription>
        <AlertDescription className="text-center mt-3">
          <button
            className="bg-main-color p-2 px-3 rounded-md text-white"
            onClick={() => setAlert(false, "", "")}
          >
            확인
          </button>
        </AlertDescription>
      </Alert>

적용

심화프로젝트 사전 기획 중 스타일링은 어떤 라이브러리를 사용할껀지 논의하다가 강민 튜터님께서 next.js를 쓰면 Tailwind css는 자연스럽게 쓰는 추세라고 말씀해주셨다. 거진 고정적이라고.. 그래서 이번 프로젝트 때 테일윈드를 사용해보기로 합의했다. 한번도 써본적 없어서 좀 부담스럽지만 요새 계속 쓰는 추세라고하니 사용해보는게 좋을 것 같다.

TailWind CSS

성능 이슈와 클래스 네임 충돌 이슈를 줄이고, 유연하고 직관적인 스타일링을 제공한다. 공식 문서에서는 

유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 빠르고 쉽게 스타일링을 적용할 수 있는 클래스를 제공한다 고 쓰여져있다.

📌 유틸리티 클래스란?
유틸리티 클래스는 특정 스타일 속성을 나타내는 짧고 간단한 `CSS 클래스`로, 
HTML 요소에 직접 적용하여 빠르고 쉽게 스타일링을 할 수 있습니다.
Tailwind CSS는 이러한 유틸리티 클래스를 대량으로 제공하여, 
별도의 CSS 작성 없이도 다양한 스타일을 구현할 수 있게 합니다. 
예를 들어,`bg-blue-500`은 배경색을 파란색으로, `p-4`는 패딩을 설정하는 유틸리티 클래스입니다.

성능

• Tailwind CSS는 불필요한 스타일을 제거하고, 필요한 부분만 스타일을 적용하는 방식으로 성능 최적화
• 사용하지 않는 CSS를 제거하여, 최종 빌드 파일 크기를 최소화
• CSS 파일의 크기를 줄이고, 애플리케이션 로딩 속도를 개선
• Tailwind CSS는 React의 JSX 문법과 함께 사용할 수 있어, 스타일링 간편
• Tailwind 설정 파일(tailwind.config.js)을 통해 색상, 폰트, 스페이싱 등 다양한 설정을 커스터마이징
• 다양한 설정 옵션을 제공하여, 프로젝트의 요구사항에 맞는 스타일링을 손쉽게 적용

📌 Purging CSS?
`Purging CSS`는 사용하지 않는 CSS를 제거하여 최종 빌드 파일 크기를 줄이는 과정을 의미합니다. 
Tailwind CSS는 이를 자동으로 처리해줍니다.

설치 및 기본 사용법

yarn add tailwindcss postcss autoprefixer

초기화 파일 생성

yarn tailwind init -p

tailwind.config.js

tailwind.config.js 수정

src 하위 파일 중 확장자가 .js, .jsx, .ts, .tsx인 파일을 대상으로 한다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

css에 적용하기

@tailwind base;
@tailwind components;
@tailwind utilities;

컴포넌트에 써먹기

inline-style

return (
    <div style={{display:"flex" flexDirection:"column" gap:"8px" marginBottom:"1.25rem"}} >
      {sortedPlace.map((place) => {
        return <PlaceItem key={place.id} place={place} />;
      })}
    </div>
  );

Tailwind CSS

return (
    <div className="flex flex-col gap-8 mb-20">
      {sortedPlace.map((place) => {
        return <PlaceItem key={place.id} place={place} />;
      })}
    </div>
  );

무조건 껐다 키기!!!!!!!!! 껐다 켜야지 적용된다 적용안된다고 울지마세요 엉엉 난 울었으니까..