React(리액트) 티키타카 26 (bootstrap 아니면 tailwindcss)

개인적으로 디자인을 못하기 때문에 좋아하는 건 TailWindCSS인데

bootstrap 설정도 질문하는 경우가 많아성.. (그냥 해보면 그냥 되는뎅... 흉흉..)

여기서 설정 한번 정리하고 가면 좋겠당 싶당. (알면 패스!!...)

두개 동시에 하지말공, 그냥 둘 중 하나만 잘하면 나머진 그냥 보인당.

 

개인적인 추천은 당연 Tailwind CSS 당. 넘 훌륭하당.

왱? 게임의 흐름을 바꾸는 자 게임 체인저!!,  CSS 사용 방식의 흐름을 바꾸었당.

아 그리고 mui 라고 있는데, 이것도 엄칭 추천이당.(css를 최소로 쓰게 될거당!)

https://mui.com/?srsltid=AfmBOorqmLxxHIF3IJdYJYl98MOD5FDwKGGiTcclIkILh6dfbynTszAx

개발자에겐 이거이 맞을지도....  , 상황에 맞게 고르장!

[ 강아지가 좋아?, 고양이가 좋아? .... 난 금수저가 좋앙!! ]

 

그럼 bootstrap부터 설정 해보장.

1. 이름 영어로 아무렇게나  어딘가 나중에도 찾기 쉬운 곳에 새 폴더를 만들공
2. vscode로 해당 폴더를 연 후, 터미널 열공 
3. npx create-vite@latest .     명령으로 필요한 파일들 현재 폴더에 다운로드
4. npm i                                  명령으로 package.json 파일에 기술된 모듈들 설치
5. 필요 없는 파일들(App.css 등등..)  정리하고 
6. npm i bootstrap                 명령으로 bootstrap 설치
7. npm i react-toastify           명령으로 괜히 설치  그냥 재미용
7. npm run dev 
8. 영문자 O 누르고 엔터  눌러 브라우져 열기

 

main.jsx 파일에 한 줄 추가로 설정은 끝이당. (정말 쉽당!)

main.jsx

import { createRoot } from "react-dom/client";
import App from "./App.jsx";
// 아래로  설정 끝
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";

createRoot(document.getElementById("root")).render(<App />);

 

vscode의 extension으로 css나, bootstrap을 검색하면 bootstrap 자동 완성을 

지원한다는 플러그인 친구들을 찾을 수 있당.

난 이미 tailwind가 설정되어 있어서 인지(아직 잘 모름), 세번째 플러그인만 동작하는데

쪼금 좋지 않당. 그래도 없는 것 보단 아래 처럼 한 150배 정도 낫당.~~

 

혹여나 하는 검증용으로 index.css에도 그냥 개인적 클래스를 1개 추가했당.

index.css

.merong {
  font-size: 4em;
  color: wheat;
  background-color: blueviolet;
}

 

이제 설정 결과를  확인하장. 

App.jsx

import { Flip, Slide, toast, ToastContainer } from "react-toastify";

function App() {
  const e7eMsg = () => {
    toast.success("안농 나 경미니", {
      position: "top-right",
      autoClose: 2500,
      theme: "dark",
      transition: Flip, // Bounce, Slide, Zoom, Flip
    });
  };

  return (
    <>
      <div className="container ">
        <h1 className="text-bg-primary mt-5">Hello,경미닝?</h1>
        <button
          className="btn btn-primary m-4"
          onClick={() =>
            toast.error("헉 경미닝?", {
              position: "bottom-center",
              autoClose: false,
              transition: Slide,
            })
          }
        >
          눌러방
        </button>
        <button className="merong rounded-3" onClick={e7eMsg}>
          E7E
        </button>
        <ToastContainer />
      </div>
    </>
  );
}

export default App;

 

실행 결과를 보면 당근 아래 처럼 bootstrap이 잘 적용됨을 확인할 수 있당. 

 

이젠 묻는 사람이 없길.. , 누군가에겐 상황에 따라서 아래 링크가 도움이 될란지도

https://getbootstrap.com/docs/5.2/getting-started/vite/

---

이젠 앞에 껀 잊고 tailwindcss 설정 해보장.

tailwindcss는 최근 설정 방법이 아주 간단하게 바뀌었당.

1. 이름 영어로 아무렇게나  어딘가 나중에도 찾기 쉬운 곳에 새 폴더를 만들공
2. vscode로 해당 폴더를 연 후, 터미널 열공 
3. npx create-vite@latest .     명령으로 필요한 파일들 현재 폴더에 다운로드
4. npm i                                  명령으로 package.json 파일에 기술된 모듈들 설치
5. 필요 없는 파일들(App.css 등등..)  정리하고 
6. npm i tailwindcss @tailwindcss/vite                명령으로 tailwind 설치
7. npm i react-toastify           명령으로 괜히 설치  그냥 재미용
7. npm run dev 
8. 영문자 O 누르고 엔터  눌러 브라우져 열기

 

vite.config.js 파일 수정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

 

index.css 파일 수정

@import "tailwindcss";

 

기본 설정은 끝났지만, 확실하게 편하게 쓰기 위해 플러그인 2개를 설치하장

extension에서 tailwindcss를 검색 후 아래 2개를 설치하도록 하장.

 

 

써보면 알겠지만, vscode에서 약간의 문제가 있는데,

Tailwind CSS IntelliSense가 동작하지 않을 때가 있당. 그때는 보통 vscode를 재기동하거나

플러그인을 선택하고, disable -> restart extension -> enable 하는 방식으로 해결할 수 있당.

 

퍼펙트하당. 이젠 적응하는 일만 남았당.

App.jsx

import { Flip, Slide, toast, ToastContainer } from "react-toastify";

function App() {
  const e7eMsg = () => {
    toast.success("안농 나 미서니", {
      position: "top-right",
      autoClose: 2500,
      theme: "dark",
      transition: Flip, // Bounce, Slide, Zoom, Flip
    });
  };

  return (
    <>
      <div className="container">
        <h1 className="text-yellow-300 bg-slate-900 text-6xl mt-10 text-center h-30 pt-6">
          Hello,카리낭?
        </h1>
        <button
          className="rounded-2xl text-6xl bg-amber-700 text-amber-50 mt-5 ml-5"
          onClick={() =>
            toast.error("헉 선주닝?", {
              position: "bottom-center",
              autoClose: false,
              transition: Slide,
            })
          }
        >
          눌러방
        </button>
        <button
          className="rounded-2xl w-[60%] h-30 text-6xl bg-blue-800 text-amber-50 mt-5 ml-5"
          onClick={e7eMsg}
        >
          TailWindCss
        </button>
        <ToastContainer />
      </div>
    </>
  );
}

export default App;

 

코드 작성시 자동완성기능(설명도 나옴)은 

vite의 hmr(Hot Module Reload) 기능과 맞물려 환상적이당.

단 className의 문자열이 너무 길어져 가독성을 심하게 훼손당할 수 있당. 

그래서 설치한 플러그인이 Tailwind Fold인데,

해당 라인 이외에서 작업할 땐 아래 처럼 보여준당.(Good!)

 

여기서 두 세발 더 나아가 className에 자주 쓰는 패턴이 있다면 그것을 

index.css에 아래 처럼 등록하고 쓴다면

이 또한 기쁘지 아니 하지 않을 수 없지 않지 않겠는가?

 

index.css (className이 길고 자주 쓸것만 정리)

@import "tailwindcss";

/* 자주 쓰는 패턴 정리 추가 */
.h1karina {
  @apply text-yellow-300 bg-slate-900 text-6xl mt-10 text-center h-30 pt-6;
}

.btnkm {
  @apply rounded-2xl text-6xl bg-amber-700 text-amber-50 mt-5 ml-5;
}
.btnsunju {
  @apply rounded-2xl w-[60%] h-30 text-6xl bg-blue-800 text-amber-50 mt-5 ml-5;
}

 

만약 @apply에 노란 밑줄이 생긴다면 vscode 오른쪽 하단 파일 확장자 인식한 곳에 css로

표시 되어 있을 건데, 그걸 클릭하공,  configure file ...   .css 를 선택하공

tailwind 라 쓰공 , 나오는 것 중에 tailwind css를 선택하장. 

[해보장... 더 이상 화면 캡처할 에너지가 나마돌지를 않는당.... ]

 

위 index.css를 반영하면 App.jsx는 아래 처럼 바뀔거당. (className 부분만 바뀌었당!)

App.jsx

import { Flip, Slide, toast, ToastContainer } from "react-toastify";

function App() {
  const e7eMsg = () => {
    toast.success("안농 나 미서니", {
      position: "top-right",
      autoClose: 2500,
      theme: "dark",
      transition: Flip, // Bounce, Slide, Zoom, Flip
    });
  };

  return (
    <>
      <div className="container">
        <h1 className="h1karina">Hello,카리낭?</h1>
        <button
          className="btnkm"
          onClick={() =>
            toast.error("헉 선주닝?", {
              position: "bottom-center",
              autoClose: false,
              transition: Slide,
            })
          }
        >
          눌러방
        </button>
        <button className="btnsunju" onClick={e7eMsg}>
          TailWindCss
        </button>
        <ToastContainer />
      </div>
    </>
  );
}

export default App;

 

결과는 아래와 같이 자유로울 지경이당.

 

이제 잘 쓰는 일만 남았당. 잘 쓰려면 오래 오래 반복 반복 해서 써야 한당.

참고로 tailwind를 잘 쓰려면 , 구글에서 tailwindcss cheatsheet로 검색  

핵심 접두어 정도를 미리 머리에 담아두면, 훨씬 빨리 손에 익게 될거이당. (내 손은 멀었당!)

 

나! 고생했당.  스스로를 격려 해본당.~~ ㅋㅋ, 

 

---

사라미라서 사라미 그리운 걸까?

나의 그리움엔 이유도 많당.

 

최선을 다하지 못한 미안함에 그립고,

그럼에도 잘 살고 있나 궁금해서 그립고,

 

지난 세월에 어떻게 변했을까 해서 그립고,

지금은 어디 있을까 해서 그립고,

 

그저 술 한잔 하고파서 그립고,

그 사람의 재미가 그립고.

그 사람의 이모티콘이 그립고....

 

오래전 떠나 보낸 오랜 친구 렉스턴도 그립고....

엄마에 대한 그리움은 사무친 미안함에 영원하다.

 

그 누군가를 향해서는  최선을 너머

모든 걸 다 할 수 있는 삶이 필요했었다. 

모든 걸 다 했다는 모든 거짓말의 합이다.

 

 

https://www.youtube.com/watch?v=gB4ibgCseMc