e7e

React + Tailwindcss + Shadcn(UI)

e7e — Wed, 28 Jan 2026 18:51:55 +0900

headless ui 컴포넌트 템플릿 shadn ui가 인기가 있다고 하닝.

css 게임 체인저 tailwindcss 와 함께 쓰면 찰떡 궁합이겠거니 생각이 든당.

headless 컴포넌트란 기능만 로직만 되어 있고, css가 안되어 있는 걸 말한당.

화장하지 않은 그녀라 말해도 될깡?

의외로 headless 란 말은 많이 사용되는데.. 암튼 아래 참조당. 느끼미 왔당

headless server => 모니터 없는 서버

headless jdk => GUI 라이브러리 뺀 jdk

headless os => GUI 없이 터미널만 있는 OS

vite에서의 설치는 아래 링크가 공식 참조당.

https://ui.shadcn.com/docs/installation/vite

암튼 요즘엔 눈으로 보고, 손으로 안 만지면 느끼미가 오지 않으닝, 일단 GO당

vscode로 새로 폴더(이름 소문자롱) 만들어 열공, 터미널에서 vite 프로젝트 생성

npx create-vite@latest .

이후 선택은 아래 그림 참조 (내 경우)

필요 없는 폴더/파일 정리는 알아서 하는 걸롱.. (하기 싫음 말공)

먼저 Tailwindcss를 설치하장. 괘니 터미널 1개 더 열장.

[ path는 경로 alias(별명) 설정에 필요해서 그냥 넣었당 ]

npm install tailwindcss @tailwindcss/vite
npm install path

index.css 을 아래처럼 수정

@import "tailwindcss";

tailwindcss 적용 및 @ 글자에 alias 적용

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'


// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),tailwindcss()],
  resolve: {
    alias: {
      "@":path.resolve(__dirname,"./src")
    }
  }
})

컴파일 과정 처리를 위해 아래 파일 맹글기

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

shadcn 적용을 위한 초기화 작업

npx shadcn@latest init

요 시점에 index.css 파일을 열어보면, 자동으로 많은 내용이 추가되었음을 안당.

src 디렉토리 아래에 lib 폴더와 그 안에 utils.js 파일도 자동 생성됨을 안당.

src 바깥에는 components.json 파일도 만들어졌음을 안당.

shadcn/ui 와 tailwindcss를 같이 쓸 수 있게, 고맙게도 참 많이도 한당.~~

shadcn 제공 Button 컴포넌트 1개 추가해서 사용해 보도록 하장. 터미널에 아래 명령

npx shadcn@latest add button

src 폴더 아래 자동으로 components/ui 폴더 생기고, 그안에 button.jsx가 있음을 안당.

[ 당연히 button.jsx 파일을 열어보는 건 본능적으로 금상첨화임을 느낀당 ]

App.jsx

import { useState } from "react";
import { Button } from "./components/ui/button";

function App() {
  const [btnName, setBtnName] = useState("E7E");
  const handleClick = (e) => {
    setBtnName(btnName === "E7E" ? "로또1등당첨" : "E7E");
  };

  return (
    <div className="w-1/2 mx-auto mt-10">
      <h1 className="text-5xl text-center rounded-full bg-violet-700 text-white p-5">
        Shadn/UI + Tailwindcss
      </h1>
      <Button
        onClick={handleClick}
        className={
          "text-white text-7xl mt-20   h-50  w-full   hover:animate-bounce hover:bg-pink-900"
        }
      >
        {btnName}
      </Button>
    </div>
  );
}

export default App;

아마도 그건 아래와 같은 모습일지어랑

Button 1개 해 본걸로는 명암(밝고 또 어두움) 내밀기가 그림자 질 수 있으니

Dialog 컴포넌트를 1개 더 해 보도록 하장.

https://ui.shadcn.com/docs/components/radix/dialog

먼저 dialog 컴포넌트를 추가하장.

npx shadcn@latest add dialog

components 폴더에 dialog.jsx가 추가됨을 안당. 심지어 이제 느낌도 온당. 아~항

화면에 적용해 보장.~~ 느끼미가 와야 하니깡.~~

App.jsx

import { Button } from "./components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./components/ui/dialog";

function App() {
  return (
    <div className="w-1/2 mx-auto mt-5">
      <h1 className="text-4xl text-center rounded-full bg-violet-700 text-white p-5">
        Shadn/UI + Tailwindcss
      </h1>
      <hr className="my-2" />
      <Dialog>
        <DialogTrigger className="text-4xl bg-pink-700 text-white rounded-2xl  ml-15 w-2/3">
          크을릭 해보장
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle
              className={
                "text-4xl text-indigo-700 text-center bg-gray-400 rounded-2xl  my-4"
              }
            >
              그게 정말이닝?
            </DialogTitle>
            <DialogDescription
              className={"text-2xl text-gray-600 font-extrabold"}
            >
              응 덩말롱 Headless 랭
            </DialogDescription>
          </DialogHeader>
          <div className="flex h-100">
            <div className="flex-1 self-center">
              <img
                className="rounded-full"
                src="https://100k-faces.vercel.app/api/random-image"
              />
            </div>
            <div className="flex-1 self-center ">
              <p>
                당연하징... <br />
                God 수저는 내 스타일이 아니얌 <br />
                허지만... 그렇지만...
                <br />
                그래도 로또는 1등 하고싶당. Oh My God!
              </p>
            </div>
          </div>
          <DialogFooter className="sm:justify-end">
            <DialogClose asChild>
              <Button type="button">다드불어</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default App;

결과는 어찌 아래와 같지 않지 않겠는강?

살아있을 날들이 줄어 갈수록 유체이탈을 통해

자신을 타인의 눈으로 바라볼 줄 아는 사람이 있는가 하면

찔끔 인정받은 사건 하나로 세상의 중심에 자신을 두고

타인을 움직여 자신의 편함을 추구하는 습성을 가진 인간도 탄생한당.

안타깝지만 자신을 제대로 깊이 있게 객관화하는 것 자체가

그것을 받아들이는 것 자체가...

생존의지를 떨어뜨릴 위험성을 풍족하게 가지고 있어서

특별한 계기나 강력한 의지의 노력이 더해지지 않는다면

문턱을 넘기 조차 쉽지 않다는 사실을 안다.

심지어 문턱을 넘었던 사람조차 다시 나오고야 만당.

심판대에 타인만 올리고, 그걸 즐기고

정작 자신은 단 한번도 올리지 않은 사람들...

알고보면 머리가 심하게 나쁜데, 착각속에 사는 사람들..

바보같이 스스로 인식하지 못하는 그 반복되는 패턴을 찾아

바로 그들을 심판하러 A.I는 세상의 문턱이 되었다.

이게 모노?

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

vitest(테스트 프레임워크) 초우 간단 사용법

e7e — Tue, 27 Jan 2026 21:43:00 +0900

당연할꺼당. React에도 테스트가 존재하련당.

최근에 vitest란게 따사한 눈총을 받고 있당. 편하당. 한번 써 볼까낭 해보장.

먼저 사이트에 가서 대략 들러보기 해보장

https://vitest.dev/guide/

먼저 vite를 이용해서 리액트 프로젝트를 만들었당 치자.

vitest와 함께 필요한 걸 설치( -D 옵션 알디용!)

npm i -D vitest
npm i -D happy-dom
npm i -D @testing-library/react
npm i -D @testing-library/jest-dom

happy-dom 은 jest-dom 보다 심플한 상황에서 쉽게 쓸 수 있는

DOM(Document Object Model) 이당.(지나치면 본 기억이 남는당)

src 폴더에 간단히 아래와 같은 초 간단 파일을 맹글장.

[ 단순히 2개 매개변수 받아서 합을 return 하는 함수당. 그렇당 ]

sum.js

export function sum(a, b) {
  return a + b;
}

위 sum.js의 sum 함수를 테스트 하는 소스(단위 테스트)를 아래 처럼 맹글장.

[ 보통 파일명.test.확장자, 파일명.spec.확장자 식으로 맹근당. ]

sum.test.js

import { describe, expect, it, test } from "vitest";
import { sum } from "./sum";

// 간단
test("1 + 2는 3이어야짐", () => {
  expect(sum(1, 2)).toBe(3);
});

// it는 test의 alias
it("2 +2 는 4인가?", () => {
  expect(sum(2, 2)).toBe(4);
});

// it는 보통 describe랑(묶음 표현) 잘 사용
describe("머라할거얌", () => {
  it("2 +2 는 4인가?", () => {
    expect(sum(2, 6)).toBe(8);
  });

  test("3 +3 는 6인가?", () => {
    expect(sum(3, 3)).toBe(6);
  });
});

이제 터미널에 npx vitest라 쓰고 엔터를 치면 아래와 같은 결과를 보게 된당.

느끼미가 화악하고 순식간에 눈 앞 3cm 거리에 다가서지만 의뭉도 남는당.

describe는 그냥 테스트를 설명하는 문자을 남기기 위해 감싸는 함수라고 생각하공

test와 it는 정확히 같은 의미로 it는 test의 alias당,

보통 describe 안 쓸 때는 test라 쓰고, describe 안에 쓸 때는 it를 주로 쓰는데,

이유는 나역시 모른당. 짐작하는 바가 있지만 지금은 침묵이 가치 있을 듯.. ㅋ

결과는 보았지만, 식스센스가 동작 이렇게 형식없이 마구잡이로 쓰진 않을 것 같당.

그렇당. 형식(세팅)이란 걸 쪼메 넣어 보도록 하장.

먼저 npx vitest로 써도 되지만 npm test로 쓰겡 package.json에 아래 내용 추가하장.

package.json

"scripts": {
    "test": "vitest",
    //....생략
 }

테스트 환경도 간단히 구성하도록 하장.

vite.config.js

/// <reference types="vitest/config" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "happy-dom",
    setupFiles: ["./src/tests/setup.js"],
    include: ["src/**/*.{test,spec}.{js,jsx}"],
  },
});

include 부분은 본인이 한번 추론해서 의미해석 하는 시간을 갖장.

위 파일에 정의한 setup.js를 src 아래 tests 폴더 만든 후 아래처럼 만들장.

[ 개별 테스트 실행 후 초기화를 하란 의미당. 그 의미당 ]

setup.js

import { afterEach } from "vitest";
import { cleanup } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";

afterEach(() => {
  cleanup();
});

이제 터미널에 npm test라고 입력후 엔터를 때려보면 같은 결과가 보일거시당.

React는 UI 라이브러리다. 그렇다면 UI 를 테스트 해야 한당.

DOM 동작과 상태를 테스트 해야 할꺼당. 그럴꺼당.

아래 처럼 App.jsx를 만들어 보장. (data-testid에 괘니 주목)

App.jsx

import { useState } from "react";

function App() {
  const [insa, setInsa] = useState("안농");
  const handleClick = (e) => {
    setInsa(insa === "안농" ? "나야E7E" : "안농");
  };

  return (
    <>
      <h1 data-testid="insa">{insa}</h1>
      <button data-testid="btn" onClick={handleClick}>
        눌러방
      </button>
    </>
  );
}

export default App;

버튼을 처음 누르면 h1 내용이 안농 에서 나야E7E로 바뀌어야만 한당.(기억!)

App.jsx의 동작을 테스트하기 위한 App.test.jsx를 아래처럼 맹글장.

App.test.jsx

import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import App from "./App";

describe("App Test", () => {
  it("Basic Start", () => {
    render(<App />);
    const insa = screen.getByTestId("insa");

    expect(insa).toBeInTheDocument();
    expect(insa).toHaveTextContent("안농");
    expect(insa.tagName).toBe("H1");
  });

  it("Click Test", async () => {
    render(<App />);
    const btn = screen.getByTestId("btn");
    // fireEvent.change(input, {target: {value:"만세"}})
    fireEvent.click(btn);

    await waitFor(() => {
      const insa = screen.getByTestId("insa");

      expect(insa).toBeInTheDocument();
      expect(insa).toHaveTextContent("나야E7E");
      expect(insa.tagName).toBe("H1");
    });
  });
});

저장하는 순간 터미널에 아래와 같은 화면이 불쑥 놀래킨당.~

소스에 낯선 것이 보이는데, 당신이 똑똑하다면 바로 추론 가능하당.

screen은 화면이당. document로 보면 조금 미심쩍고 UI 컴포넌트(DOM)로 보는 것이 타당

fireEvent는 이벤트를 발생시킨당

await waitFor는 이벤트 핸들러가 끝나기를 기다렸당.

expect 사용법은 이미 추론해서 파악했으리라 믿는당. 이걸로 pass/fail이 결정된당

터미널에 q를 입력해서 test watch 모드를 종료하고

다시 npm start 입력 후 엔터를 친다면, 아래 처럼

이전 sum 테스트와 App 테스트가 합쳐진 결과를 얻게 될 꺼이다.

일부러 fail이 나오는 상황을 만들어 보는 것도 분명 도우미 될꺼이당.

사실 보통의 응용개발자들은 단위테스트 프로그램등을 만들면 그 의미가 크게 와 닿지 않는다.

이게 머얌!, 이 정도 동작도 안 하는 거 만들었을까 봥!~~

이거 언제 써용???? ~~ 혹 있을지도 모를 당신의 무료한 시간을 위해 남겨두겠당.

만약에 말야 당신이 감수성 눈물 넘치는 개발자라면 말야...

if문을 보고는 머리에.., 만약에 말야, 응 있지 만약에 말야...

else if문을 보고는 머리에 또.., 만약에 말야, 이것도... 만약인데 말야...

else 문을 보고는 머리에 또, 미안한데 저기 마지막으로 만약인데 말야....

저기 만약이지만 만약이라도 저의 if문이 만약 틀려서

만약인데 코드는 말도 안되는 데 만약에 결과는 맞는다면

만약일지라도 그렇다면....

또 만약 이런 사람들이 만약 엄청나게 많다면.....

https://www.youtube.com/watch?v=6FiUjgp1LfY

React(리액트) 티키타카 39 커스텀 훅(Custom Hook)

e7e — Mon, 19 Jan 2026 15:06:53 +0900

참으로 끔찍하겡 달가운 이야기당.

커스텀 훅을 잘 써야 되는 게 아니야요?~~

그렇당 잘 써야 할 꺼이당.

컴포넌트 내부 소스를 간단히 하기 위해서도, 더불어 가독성을 올려드리고,

재 사용 가능하게 맹글어서, 이 컴포넌트 저 컴포넌트에서도 널리 재활용

가능하게 하기 위해서도.. ( 현실에서도 재활용은 쓰레기를 줄여준당!)

사람도 일회성이 아니고, 재활용이 가능했으면 하는 무서운 바람이 분당.

Custom Hook을 만드는 건 너무나 간단하지만

좋은 재사용 유용한 Custom Hook을 만드는 일은 그리 간단하지는 않당.

개인적인 추천은 컴포넌트를 만들다 보면, 컴포넌트 내부(특히 JSX 리턴 앞부분)의

JS 소스가 많아지면, 보기가 조금씩 힘들어지기 시작하는데, 이것을 커스텀 훅으로

별도 파일로 빼내보면 은근 슬쩍 반복 되는 게 보일 수 있는데, 바로 이때~~

반복성이 눈과 뇌리를 찔렀을 때!, 재 사용성까지 고민하여 유용한 커스텀 훅으로

리팩토링에 도전하면 꽤나 수확이 결코 적지 않지 하지 아니 할 지어다.

SPA(Single Page Application)의 경우, 비동기 AJAX의 사용이 대표적으로

많을 수 밖에 없으닝, 여기에 대표적 커스텀 훅 케이스가 존재 할 지어랑.

말은 아무리 떠들어야 뇌리에 이미지를 잘 맹글지 못하닝,

코드 기반으로 눈과 뇌리에 전기 지지미 자극을 흘려보장.

vite를 이용하여 React 프로젝트를 만드는 건 그냥 알아서 맡기겠당.

[ 참고로 난 재미를 위해 tailwindcss도 설치하고야 말았당. ]

그럼 목적지를 ajax(여기선 fetch)를 이용한 커스텀 훅으로 정하고 달리장

Idol.jsx

const imgServer = "https://newsimg.sedaily.com";

function Idol({ name, role, imgURL }) {
  return (
    <div className="w-full text-center border-8 border-pink-500 rounded-2xl">
      <h1 className="text-4xl mt-2 mb-2 font-extrabold">{name}</h1>
      <h2 className="text-2xl mb-2 text-blue-600 font-bold bg-gray-300">
        {role}
      </h2>
      <img
        src={`${imgServer}${imgURL}`}
        className="w-full h-120 rounded-[50%]"
      />
    </div>
  );
}

export default Idol;

IdolList.jsx

import { useEffect, useState } from "react";
import Idol from "./Idol";

const e7eURL = "https://my-json-server.typicode.com/jangmk/kpop/agents";

function IdolList() {
  const [idols, setIdols] = useState([]);

  useEffect(() => {
    let totalIdols = [];
    const getIdols = async () => {
      const response = await fetch(e7eURL);
      const data = await response.json();

      // 데이터 축출
      data.forEach((ent) => {
        ent.groups.forEach((group) => {
          totalIdols = [...totalIdols, ...group.members];
        });
      });

      console.log("체에킁: ", totalIdols);
      setIdols(totalIdols);
    };
    getIdols();
  }, []);

  return (
    <div className="w-[80%] pt-40  mx-auto grid grid-cols-4 gap-4 ">
      {idols.map((idol) => (
        <Idol key={idol.name} {...idol} />
      ))}
    </div>
  );
}

export default IdolList;

App.jsx

import IdolList from "./IdolList";

function App() {
  return (
    <>
      <h1 className="fixed w-full text-center text-8xl bg-black text-white p-5 mb-3 ">
        지원 더 없나용
      </h1>
      <IdolList />
    </>
  );
}

export default App;

아마도 아래 비스무리 화면이 보였을거당. (요즘 웬디 노래가 좋당)

하지만 관심사는 결코 결과가 아니었당. 그랬당

IdolList.jsx에서 useEffect Hook에 사용한 fetch당.

비동기 AJAX를 가마니 쓰고 앉아서 쪼금 가마니 생각해 보면

결과가 나온 성공 케이스 (이때 결과를 data라 하장)

에러가 발생한 실패 케이스 (이때 결과를 error라 하장)

그리고 아직 성공/실패를 알수없는 진행 케이스(이때를 pending이라 하장)

이 3가지를 기본적으로 담아야 한다.

기본적으로 담아야 한다는 말은 해당 코드가 반복될거예요와 같은 의미당.

바뀌는 건 url 일 꺼시당. (메소드 부분은 일단 머리에서 제외, 상황 간단히)

[ 사실 Promise는 이 3가지 상태를 기준으로 만들어졌당 ]

바로 맹글어서 적용해 보장.~~

useFetcher

import { useEffect, useState } from "react";

// 대표적 커스텀 훅(AJAX)
function useFetcher(url) {
  // 3가지 상태를 위한 상태변수, Re-Redering을 발생시키기 위함
  const [data, setData] = useState(null); // 결과가 있는지 없는지
  const [pending, setPending] = useState(true); // 실행중인지 끝났는지
  const [error, setError] = useState(null); // 에러가 있는지 없는지

  useEffect(() => {
    const fetchData = async () => {
      try {
        setPending(true); // 아작스 들어가기 전에 실행중 표시, Re-Rendering
        const response = await fetch(url);
        if (!response.ok)
          throw new Error(`Http Error! Status: ${response.status}`); //  강제 Error발생 -> catch로 이동
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error.message); // Re-Rendering
      } finally {
        setPending(false); // 그냥 초기화 그래도 Re-Rendering 발생
      }
    };

    fetchData(); // 호출

    // 클리어 함수 (unmount 되었을 때 실행)
    return () => {
      // 혹 필요한 작업이 있다면
    };
  }, [url]); // url이 바뀌면 실행됨

  return { data, pending, error }; // 이 훅을 가져다 쓸 때, 꺼내 쓸 수 있도록
}

export default useFetcher;

바뀐 IdolList.jsx

import { useEffect, useState } from "react";
import Idol from "./Idol";
import useFetcher from "./useFetcher";

const e7eURL = "https://my-json-server.typicode.com/jangmk/kpop/agents";

function IdolList() {
  const { data, pending, error } = useFetcher(e7eURL);

  if (pending) return <h1 className="text-4xl">땀시만 기다려주삼</h1>;
  if (error) return <h1>{error}</h1>;

  let totalIdols = [];
  data.forEach((ent) => {
    ent.groups.forEach((group) => {
      totalIdols = [...totalIdols, ...group.members];
    });
  });

  return (
    <div className="w-[80%] pt-40  mx-auto grid grid-cols-4 gap-4 ">
      {totalIdols.map((idol) => (
        <Idol key={idol.name} {...idol} />
      ))}
    </div>
  );
}

export default IdolList;

결과는 분명 같지 않지 아니하지 않을 수 없지 않음을 본능이 느낀당..

느끼미 친구가 함께 왔다면 더 좋을거당. ~~

이 형태에 매력을 느낀 사람들이 더욱 발전시킨 react-query란 걸 만들었당.

당연히 그러할 거시당. React에도 역사란 게 있으닝..

아래는 훌륭한 React-Query의 사용법이당.

[분명 맘에 들꺼이당. useEffect가 눈에 보이지 않으닝 좋을 수 밖에~~ (><)]

2025.04.08 - [React] - React(리액트) 티키타카 34 (@tanstack/react-query)

분명 천천히 꾸준히 React를 사용한다면 당신도 이런 걸 만들 생각에

빠지게 될 것이당. 불편함이 모여서 어깨를 짓 누르면 사람은 생각한당.

벗어날 방법을.... 당신도 사람이 되어야한당.

인간은 스스로의 가장 큰 장점으로 떠들던 지능을

인공지능이란 이름으로 더 많은 정보를 바탕으로

추론하여 더 고급지고 논리적으로 보이는데다

심지어 놀라운 속도로 답을 주는 도구를 만들었당.

그 누군가는 직업상 평가 문제를 내어야 하는데,

A.I를 이용하여 문제를 만들었당.

저 누군가는 상황상 평가를 받아야 하는데

AI에게 문제의 답을 물어 제출하였다.

그 누군가는 저 누군가에 대한 채점을

A.I에게 맡겼다.

점수가 맘에 안 들었던 저 누군가는 항의 서신을

A.I에게 작성하게 하였고,

그 누군가는 그 회신을 다시 A.I에게 맡겼다.

그 누군가와 저 누군가는

심도 있게 문제를 읽은 적도

고민하며 서신을 읽은 적도 없다.

그저 평균 점수가 높았졌네 감탄과

왜 100점이 아니야 하는 한탄이

섞인 감정의 찌끄레기만 사람답다.

현실의 아주 개미 허리 정도의 일부분일지도 모르지만

바라보는 3D 위치에 따라서 매우 긍정적으로도

매우 부정적으로도, 초점 위치에 따라서는

긍정과 부정의 상승 기류까지도

바람으로 느낄 수 있는 이야기다.

이분법 기반 확실성을 선호하는 인간에게

사실 확률적인 수치는 크게 의미가 없다.

50% 수준에서 정확합니다.

아이고 모르겠습니다.~~

95% 수준에서 정확합니다.

이거다 싶지만 틀릴까봐 5% 변명 남겨둡니다. ~~

99.9999% 수준에서 정확합니다.

유전자 비교 분석 실제 검사 결과입니다.

지금의 내가 나일 확률은 얼마일까?

100% 그건 나의 바람이었나?

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

개별 지능의 조합 아마도 그게 나 아닐까?

Spring Boot Swagger3 후다닥 쾌속 느끼랑

e7e — Thu, 25 Dec 2025 15:01:49 +0900

Restful, Rest Api 하면 따라다니는 용어가 있는데,

OAS => Open API Specfication

=> 그저 Rest 관련 표준을 정하고 있구나 생각하면 된당.

=> 요것땜시 open-api 란 글자들도 자주 누네띤당.

HATEOAS => Hypermedia As The Engine Of Application State

=> 자원(Resource)에 접근하면, 해당 자원 관련 처리를

할 수 있는 추가 API 링크를 받을 수 있는 형식!

억지로 무쟈게 쉽게 얘기하면

get으로 /api/idol/3 아이디 3번인 idol 정보를 요청했는데

추가적으로 idol3번을 지우는 link와 수정할 수 있는

link 정보도 같이 오는 것이당. (와아 넘 쉽당!~~ ㅋㅋ)

상식이닝 그냥 머리에 담아서 누가 얘기하면 아는 척 있어보이장!

Restful로 만들면 그 사용법을 시각적으로., 테스트도 거저 쉽게 하고프당

이럴 때 사용하는 것이 Swagger당 말은 타고 달려봐야 진정 느낄 수 있다.

말로 말을 설명하려는 자가 있다면 그 사람 말은 가치폭락이당.

느낌오면 의욕이 생기고,확장해서 내껄 만들고픈 욕심도 생기닝, 일단 달리장.

먼저 스프링 부트 프로젝트를 1개 아래처럼 새로 맹글장.

STS5(난 최신을 마구 좋아함)에서 Spring Starter Project

( Gradle 안 써본 그 분들을 위해 Maven아니공 괘닝 Gradle롱)

Dependencies 선택은 Spring Web, Lombok

그리고 그냥 매번 넣는 Spring Boot DevTools 와 Spring Boot Actuator을 하고서

Swagger를 쓰기 위해 최신 springdoc-openapi-starter-webmvc-ui:3.0.0 를

build.gradle 파일에 직접 넣으면 아래와 같을지어당. (그렇당)

build.gradle

plugins {
	id 'java'
	id 'org.springframework.boot' version '4.0.1'
	id 'io.spring.dependency-management' version '1.1.7'
}

group = 'com.e7e'
version = '0.0.1-SNAPSHOT'
description = 'Demo project for Spring Boot'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(21)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-actuator'
	implementation 'org.springframework.boot:spring-boot-starter-webmvc'
	implementation("org.springdoc:springdoc-openapi-starter-webmvc-ui:3.0.0")
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-actuator-test'
	testImplementation 'org.springframework.boot:spring-boot-starter-webmvc-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
}


tasks.named('test') {
	useJUnitPlatform()
}

build.gradle 파일을 수정하면 마우스 오른쪽 눌렁, 아래와 같은 Refresh를 잊지 말장.

참~ 미리 1개만 준비하장. 시작페이지가 없어서 안된다고 오해할 그들을 위한 준비당

src/main/resources 아래 static 폴더에 index.html을 아래처럼 미리 맹글장.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#wrapper {
    margin: 20px auto;
    padding: 10px;
	width:60%;
    border: 10px groove gold;
    text-align:center;
}

a {
	font-size:2em;
	display: block;
	width:100%;
}
</style>
</head>
<body>
<div id="wrapper" >
<h1>E7E 노파심에 여기에 링크를....</h1>
<a href="/swagger-ui/index.html">Swagger-UI 이동</a>
</div>
</body>
</html>

application.properties 파일을 아래 처럼 맹글장.

눈으로 대략 천천히 훓으면 뜻 그대로 느끼미가 찾아온당.

springdoc.swagger-ui.enabled=true 요줄이 있어야 화면에 swagger가 나온당.

application.properties

spring.application.name=swagger3
logging.level.com.e7e.swagger3=debug
# 아래 2개는 그냥 내가 보고 싶어서 넣음
logging.level.org.springframework.web=debug
logging.level.org.springframework.webmvc=debug

# Swagger Spring UI 세팅
springdoc.packages-to-scan=com.e7e.swagger3		
springdoc.default-consumes-media-type=application/json
springdoc.default-produces-media-type=application/json
springdoc.cache.disabled=true
# 아래 default값은 enabled
# springdoc.api-docs.enabled=false
# 아래 default값은 /v3/api-docs/
# springdoc.api-docs.path=/api-docs/json
springdoc.api-docs.groups.enabled=true
springdoc.swagger-ui.enabled=true
#defaut /swagger-ui/index.html
#springdoc.swagger-ui.path=/e7e-ui.html
springdoc.swagger-ui.tags-sorter=alpha
# alpha, default, method
springdoc.swagger-ui.operations-sorter=method

사용하려면 아래와 같은 설정이 그냥 필요하당. 그렇당.

눈이 흐르면 느끼미도 따라 흐른당.

SwaggerConfig.java

package com.e7e.swagger3.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import io.swagger.v3.oas.models.Components;
import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;

@Configuration
public class SwaggerConfig {

    @Bean
    OpenAPI openAPI() {
        Info info = new Info()
                .title("Swagger로 해보는API Document 연습")
                .version("v1.0.0")
                .description("Swagger 연습용 API 명세");
        // OpenAPI 생성
        return new OpenAPI()
                .components(new Components())
                .info(info);
    }
}

스키마로 쓸 VO 1개 만들장. (나중에 결과 실행화면과 매칭시켜서 봐야한당)

BdVO.java

package com.e7e.swagger3.vo;

import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class BdVO {

    @Schema(description = "bd 고유키", example = "272")
    private int seq;

    @Schema( description = "bd 제목", example = "제목 쓰삼")
    private String bdTitle;

    @Schema( description = "bd 내용", example = "Swagger 재밌넹")
    private String bdContent;

    @Schema( description = "bd 작성자명", example = "경미니")
    private String userName;

}

초간단 Restful 컨트롤러 1개 만들장

(get 방식 조회 2개, post , put, delete 각 1개)

BdController.java

package com.e7e.swagger3.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.e7e.swagger3.vo.BdVO;

import io.swagger.v3.oas.annotations.Hidden;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.Parameter;
import io.swagger.v3.oas.annotations.media.Content;
import io.swagger.v3.oas.annotations.media.Schema;
import io.swagger.v3.oas.annotations.responses.ApiResponse;
import io.swagger.v3.oas.annotations.tags.Tag;
import jakarta.annotation.PostConstruct;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Tag(name = "boards", description = "Board CRUD API EndPoint")
@RestController
public class BdController {

	// DB 대신 그냥 static 으로 연습
	private static List<BdVO> bdLists = new ArrayList<>();

	// 생성 후 초기화
	@PostConstruct
	void init() {
		log.debug("그냥 실행 여부 눈으로 확인 - 디버깅용");

		List<String> names = List.of("경미닝", 
				                     "수미닝", 
				                     "지워닝", 
				                     "선주닝", 
				                     "미서닝");
		List<String> titles = List.of("넘 자랑하고팡", 
				                      "난 이미 아이돌", 
				                      "Support 매니아", 
				                      "당당한 갑옷이요?", 
				                      "웃음 에너지");
		List<String> conts = List.of("최고 인사고과 평점 S용", 
				                     "왜 절 캐스팅하지 않아용?", 
				                     "이름 자체가 Support", 
				                     "건강하면 그렇게 예뻐보여용", 
				                     "인생은 웃어야 맛이죵 그죵?");

		BdVO bdVO = null;
				
		for (int i = 0; i < names.size(); i++) {
			bdVO = new BdVO();
			bdVO.setSeq(i);
			bdVO.setUserName(names.get(i));
			bdVO.setBdTitle(titles.get(i));
			bdVO.setBdContent(conts.get(i));
			bdLists.add(bdVO);
		}
	}

	/* Restful API GET 메서드 */
	@GetMapping("/boards")
	@Operation(summary = "전체 조회", description = "board 전체 조회")
	@ApiResponse(responseCode = "200", description = "성공", content = @Content(schema = @Schema(implementation = BdVO.class)))
	public ResponseEntity<List<BdVO>> boardList() {
		return ResponseEntity.ok(bdLists);
	}

	/* Restful API GET 메서드 */
	@GetMapping("/boards/{seq}")
//감추고 싶다면	@Hidden   
	@Operation(summary = "seq로 조회", description = "board by seq")
	@ApiResponse(responseCode = "200", description = "성공", content = @Content(schema = @Schema(implementation = BdVO.class)))
	public ResponseEntity<BdVO> boardByUserId(
			@Parameter(name = "seq", description = "seq지용") @PathVariable(value = "seq") int seq) {
		log.debug("체킁: {}", seq);
		List<BdVO> schList = bdLists.stream().filter(bd -> bd.getSeq() == seq).toList();
		BdVO bdVO = schList.size() > 0 ? schList.get(0) : null;

		return ResponseEntity.ok(bdVO);
	}

	/* Restful API POST 메서드 */
	@PostMapping("/boards")
	@Operation(summary = "게시글 등록", description = "게시글을 등록합니다.")
	@ApiResponse(responseCode = "200", description = "등록 성공")
	public ResponseEntity<BdVO> createBoard(@RequestBody @Schema(implementation = BdVO.class) BdVO bdVO) {
		int maxSeq = 0;

		for (BdVO bdVO2 : bdLists) {
			if (bdVO2.getSeq() > maxSeq) {
				maxSeq = bdVO2.getSeq();
			}
		}
		bdVO.setSeq(maxSeq + 1);
		bdLists.add(bdVO);

		return ResponseEntity.ok(bdVO);
	}

	/* Restful API PUT 메서드 */
	@PutMapping("/boards/{seq}")
	@Operation(summary = "Board Update", description = "Board Update By seq", responses = {
			@ApiResponse(responseCode = "200", description = "떵공"),
			@ApiResponse(responseCode = "400", description = "잘못된 요청"),
			@ApiResponse(responseCode = "404", description = "못찾겠다"),
			@ApiResponse(responseCode = "500", description = "서버가 미안") }, parameters = {
					@Parameter(name = "seq", description = "Board seq", required = true, example = "1") })
	public ResponseEntity<BdVO> updateBoard(@PathVariable(value = "seq") int seq,
			@RequestBody @Schema(implementation = BdVO.class) BdVO bdVO) {

		for (BdVO bdVO1 : bdLists) {
			if (bdVO1.getSeq() == seq) {
				bdVO1.setBdContent(bdVO.getBdContent());
				bdVO1.setBdTitle(bdVO.getBdTitle());
				bdVO1.setUserName(bdVO.getUserName());
			}
		}

		bdVO.setSeq(seq);
		return ResponseEntity.ok(bdVO);
	}

	/* Restful API DELETE 메서드 */
	@DeleteMapping("/boards/{seq}")
	@Operation(summary = "Board Delete", description = "Delete Board By seq")
	public ResponseEntity<BdVO> deleteBoard(@Parameter(name = "seq") @PathVariable(value = "seq") int seq) {

		log.debug("delete {}", seq);
		List<BdVO> schList = bdLists.stream().filter(bd -> bd.getSeq() == seq).toList();

		// iterator 대신에
		bdLists.removeIf(bd -> bd.getSeq() == seq);

		BdVO bdVO = schList.size() > 0 ? schList.get(0) : null;

		return ResponseEntity.ok(bdVO);

	}
}

http://localhost:8080/swagger-ui/index.html 를 확인해 보면 당근 아래와 같당.

각각의 메소드를 눌러보면 Try it out ㅓ버튼이 있으니, 눌러서 실제 실행도 해보장.

실행 결과와 컨트롤러/VO 소스를 맵핑시켜 보면

@Tag / @Operation / @ApiResponse / @Hidden / @Content / @Parameter / @Schema

어노테이션들의 의미가 느끼미와 붙어서 순간 뇌에 아하! 하공~ 박히공 만당.

억지로 외우지 말고, 그저 필요한 부분만 복사/붙여넣기 식으로 사용하면

저절로 급하지 않게 충분한 속도로 익숙해 질 것이당.

http://localhost:8080/v3/api-docs 도 눈으로 확인해 보길!~ 꼬옥

오타왕들을 위한 전체소스

swagger3.zip

0.07MB

STS에서 이상한 현상을 1개 발견하였다.~ 눈치 못챌뻔~~

webmvc-ui 라이브러리를 넣고

gradle에서 Refresh Gradle Project를 하면

resources 아래 templates 폴더가 패키지 형태로 바뀌어 버린당.

다시 폴더형태로 바꾸면 index.html이 실행이 안된당.

먼가 있구낭 하고, 스프링 web과 webmvc 패키지에 debug 로깅레벨을

걸어보았지만 암것도 나오지 않았당.~~ㅠㅠ

추론 가능성이 너무 많아서 기다려보장! 으로 맘을 정했당.

아래는 난 Swagger에 중독되었어 생각이 든다면 가보길 추천한당.(그닥 재미는 없을거당)

Swagger UI (https://swagger.io/swagger-ui/)

Swagger Editor (https://editor.swagger.io/)

Swagger Codegen (https://github.com/swagger-api/swagger-codegen/tree/3.0.0 )

주의및 관심 2025-12-25 기준 issues 가 3.1K나 됨.. 기다릴 줄도 알아야...

언제였던가? 기억이 있긴 한건가? 스스로 만든 환영인가?

친구집에 갔다가 반갑게 "하이" 하는 그 아들에게 손가락 총으로

"빵!" 하니 물끄러미 쳐다봐서, 멋쩍은 나머지 다시 "빵!" 했다.

그 아인 쓰러지진 않고 부엌으로 달리길래

난 도망치는 줄 알고 웃고 말았당. 이런 그건 정답이 아니었당.

동심을 품고 사는 건 나였당.

얼만큼 뒤 다시 쪼르륵 미끄러지듯 나타난 그 아이 손에는

뜨거운 듯 조심스럽게 티슈에 감싼 호빵이 있었당.

"아더씨 호빵!" ~~~

태생적 아재개그 유전자의 원형을 보게 된 난

그 은총에 빵맞은 것처럼 쓰러지고 말았당!.

분명 아주 오래전 옛날엔 총에 빵을 넣어 쐈을거당.

빵 맞은 것도~ 빵 먹은 것도~ 빵빵 거린 것도~~

떨어진 부스러기 추억을 모아서 몰빵

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

Annotation(어노테이션)을 이용한 AOP

e7e — Fri, 19 Dec 2025 18:38:38 +0900

그 누구인가는 또 배운 걸 내게 묻는다.

문제는 안 쓰다 보니 나도 잊어 버렸당.

더 커가는 문제는 모든 이유를 이젠 나이로 돌려버리는 습관이당.

안된당!.

다시금 의욕을 가지고 확인해 보장.

AOP (Aspect Of Point) 참 좋은 기능이당.

가장 흔하디 흔하고 초 간단하며 누구나 아하 하는 스토리로 하장.

성능 평가를 위해 특정 컨트롤러 메소드들의 실행 시간 측정을

착하디 착한 스스로 열심인 고객이 요청을 했다고 하장.

실행 시간 측정이 필요한 메소드들에 @TimeCheck 어노테이션을 붙여서

해당 어노테이션이 붙은 메소드들에만 적용되는 Aspect를

만들어 log 출력을 하면 될꺼이당.

[ 일일이 메소드마다 필요한 코드를 붙이는 바보같은 행동을 막기 위해 AOP는 탄생했다]

pom.xml에 aop 추가하장

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
			<version>4.0.0-M2</version>
		</dependency>

먼저 어노테이션을 만들장. (method가 적용 타겟이당)

TimeCheck.java (package는 com.e7e.annotaion)

@Target(ElementType.METHOD)
@Retention(RetentionPolicy.RUNTIME)
public @interface TimeCheck {}

위 @TimeCheck 어노테이션이 붙은 메소드에 동작할 Aspect를 만들장.

TimeCheckAspect.java (package는 com.e7e.aspect)

@Slf4j
@Aspect
@Component
public class TimeCheckAspect {

	// 쭈의 어노테이션명은 동일한 패키지가 아니면 풀패키지 경로가 필요
	@Around("@annotation(com.e7e.annotation.TimeCheck)")
	public Object logTime(ProceedingJoinPoint joinPoint) throws Throwable {
		log.debug("항상 눈으로 확인 {}",joinPoint);
		long start = System.nanoTime();
		Object proceed = joinPoint.proceed();  // 실행 호출
		long runTime = System.nanoTime() - start;
		log.debug(joinPoint.getSignature().getName() + " 실행시간=> " + runTime + " ns");
		return proceed;
	}
}

이제 그저 테스트 해볼 초 심플 Controller를 맹글장.

AopTestController.java (package는 com.e7e.controller)

@Slf4j
@RestController
@RequestMapping("/aop")
public class AopTestController {

	@TimeCheck    // 요게 붙었으닝, AOP 동작 join point
	@GetMapping("/test")
	public String testAop() {
		log.debug("요청이 왔어용");
		int sum = 0;
		for(int i=1; i<=99999;i++) {
		   	sum +=i;
		}
		log.debug("합 구했어용 {}",sum);
		return  "서버 콘솔 로그에서 실행시간 확인";
	}
}

서버를 실행 시키고, 브라우져에서 http://너의서버명:포트번호/aop/test 를 엔터를 꽝 치면

분명 아래와 같은 내용이 보일 것이당. 그냥 그렇당.

항상 눈으로 확인 execution(String com.e7e.controller.AopTestController.testAop())
요청이 왔어용
합 구했어용 704982704
testAop 실행시간=> 1021200 ns

이런 벌써 끄시당.~~

앗! 잠깐! TimeCheckAspect에서 Advice를 지정하기 위해 사용한

@Around 어노테이션에서 TimeCheck 어노테이션명을 패키지명 포함 고정문자열로

하는 것은 지금 시대는 별로 좋은 방법이 아니다.

아래 처럼 쓰면 변수처럼 동작하게 된당. 분명 더 좋을 꺼시당.

(메소드 매개변수에 TimeCheck timeCheck 가 있음에 주목하장)

TimeCheckAspect.java (수정본)

@Slf4j
@Aspect
@Component
public class TimeCheckAspect {

	@Around("@annotation(timeCheck)") // timeCheck가 변수로 동작
	public Object logTime(ProceedingJoinPoint joinPoint,TimeCheck timeCheck) throws Throwable {
		log.debug("항상 눈으로 확인 {}",joinPoint);
		log.debug("변수로 받아용 {}",timeCheck);
		long start = System.nanoTime();
		Object proceed = joinPoint.proceed();  // 실행 호출
		long runTime = System.nanoTime() - start;
		log.debug(joinPoint.getSignature().getName() + " 실행시간=> " + runTime + " ns");
		return proceed;
	}
}

결과는 같을 것이고, console 출력엔 아래 내용 더불어 나올거시당.

변수로 받아용 @com.e7e.rest.annotation.TimeCheck()

@PathVariable 식으로 받아들이면 Very Good이당.

기회가 있다면 두번째 방식으로 활용하여 좋은 점을 깊이 느끼장.

그 얼만큼 그 얼마 전 그만큼 기념비적 결혼 기념일이었당.

불쑥 마님에 대한 미안함과 고마움이 심장에 교차로를 맹글었당.

애착 소파에 등딱지되어 넷플릭스와 유투브를 찐친으로

게으름의 세상에서 그 따위로

의미 있는 시간을 죽여가며 무의미 시간을 살아가는

나 자신이 나에게 보여서 더 그랬당.

둘러봐도 마음을 투명하게 담아 줄 게 없었당.

그 순간 이 노래가 들렸당.

음치라 직접 불러주지 못함이 또 가슴에 가시를 심는다.

https://www.youtube.com/watch?v=v-yI9x4IpZs

Spring Security session(jsp) + jwt(react)

e7e — Thu, 13 Nov 2025 16:19:41 +0900

미쳐 몰랐다. 귀차니즘에 근거한 외면에 뿌리를 둔 나의 불찰이당.

jsp(thymeleaf도)의 security 설정과 react jwt security 설정을

합쳐서 만들어 내는 걸 당연히 꽤나 많이 힘들어 한다는 걸!

그냥 security도 애매모호 한데, jwt까지 붙이라닝 아마도 힘들었으리라.

사실 요즘 같은 A.I 시대엔 정확히 원하는 대로 동작하는 코드는

아니더라도, 질문을 잘 하면 꽤나 괜찮은 힌트들을 얻을 수 있고,

거기서 잘 시작하면 원하는 결과에 도달하는 재미난 여정을 즐길 수 있다.

[ 단 기초 개념이 잘 잡혀있는 경우에 그렇다.

기초 개념이 잘 잡혀있지 않으면 때려 맞춘 결과가 소멸하는 일시적 흥분을 준다]

아래 글은 일반적인 JSP를 사용하는 경우의 Spring Security를 담고 있고

2024.03.11 - [스프링] - spring boot 3 security 그냥 한번 해보고 한번 더 해보면 잘 될꺼얼!

아래 글은 JWT를 사용해야 하는 경우의 Spring Security를 담고 있다

2025.01.07 - [스프링부트] - spring boot3 security jwt 적용 1 (B/E)

곧 프론트 프레임워크를 사용하는 경우에 필요하당. (물론 JWK란걸 활용해도 된당)

2개의 글을 모두 읽은 사람은 당연히 알것이다.

DB뿐만 아니라, 거의 대부분의 구성(인프라)가 같거나 비슷하다는 걸.

[ 후회스런 부분은 어린 악동의 마음으로 살짝 비튼 곳이 존재한당.. 암튼 그렇당]

2개를 교묘히 합치는 방법이 존재하는데, 그것은 멀티 securiyFilterChain 설정이당.

아래 소스를 잠깐 보장. (핵심 파트만 먼저 보장)

SecurityConfig.java

//.... 생략

@Slf4j
@Configuration
@EnableWebSecurity(debug = false)
@EnableMethodSecurity  						// @preAuthorize/@postAuthorize 사용
public class SecurityConfig {
 
@Autowired
	private DataSource dataSource; // application.properties에 설정한 spring.datasource D.I

	@Order(1)  // 순서가 중요하다. 범위가 작은 걸 먼저 설정해야 한당.
	@Bean 
	SecurityFilterChain filterChain2(HttpSecurity http) throws Exception {
		log.debug("JWT 시큐리티 설정");
		
		http.securityMatcher("/rct/**")
		    .csrf(csrf->csrf.disable())
		    .cors(cors -> cors.configurationSource(corsConfigurationSource()))
		    .sessionManagement(sess -> sess.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
		    .authorizeHttpRequests(auth -> auth.requestMatchers("/rct/e7e").hasRole("CEO")
		    		                           .requestMatchers("/rct/login").permitAll()
		    		                           .requestMatchers("/rct/refresh").permitAll()
		    		                           .anyRequest().authenticated())
			.formLogin(form-> form.loginPage("/rct/login")
					              .successHandler(jwtLoginSuccessHandler())
					              .failureHandler(jwtLoginFailureHandler()))
			.exceptionHandling(ex -> ex.accessDeniedHandler(jwtAccessDeniedHandler()));
		
		http.addFilterBefore(new JwtAuthenticationFilter(),UsernamePasswordAuthenticationFilter.class);
		
		return http.build();
	}

	@Order(2)
	@Bean
	protected SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
		log.debug("JSP 시큐리티 설정");
		return http.httpBasic(hbasic -> hbasic.disable())
				.headers(config -> config.frameOptions(customizer -> customizer.sameOrigin()))
				.authorizeHttpRequests(
						authz -> authz.dispatcherTypeMatchers(DispatcherType.FORWARD, DispatcherType.ASYNC).permitAll() // forward 허가
								.requestMatchers("/","/login", "/error").permitAll()
								.requestMatchers("/css/**", "/js/**", "/img/**", "/favicon.ico").permitAll()
								.requestMatchers("/ceo/**").hasRole("CEO")
								.requestMatchers("/manager/**").hasAnyRole("CEO","MANAGER")
								.anyRequest().authenticated())
				.formLogin(form -> form.loginPage("/login")
						               .successHandler(customLoginSuccessHandler())
						               .failureHandler(customLoginFailureHandler()))
				.sessionManagement(session -> session.maximumSessions(1))
				.exceptionHandling(ex -> ex.accessDeniedHandler(customAccessDeniedHandler()))
				.logout(Customizer.withDefaults()).rememberMe(config -> config.key("e7eKey").tokenValiditySeconds(86400)
						.tokenRepository(persistentTokenRepository()))
				.build();
	}
 	
  // .... 생략
}

2개의 SecurityFilterChain을 리턴하는 메소드가 존재하고,

@Order(1) 어노테이션이 붙은 게 React용이고,

@Order(2) 가 붙은 게 JSP용이당.

[ 사실 이게 전체 구성 핵심이당 ]

주석을 달아놓긴 했는데,

Order 넘버가 중요한데, 숫자가 작은 것에 동작 범위가 작은 것을 지정해야 한당.

나의 경우 react에서 사용할 url, 곧 jwt를 쓸 거는 모두 url 에 /rct를

붙이도록 하여, 첫번째 SecurityFilterChain이 동작하도록 (결국 /rct/** 에만 동작),

그 외의 경우는 두번째 SecurityFilterChain이 동작하도록 하였당.

그리고 소스를 보면 알겠지만, 각각의 로그인 successHandler, failureHandler,

accessDeniedHandler는 처리 방식이 달라야 해서 따로 클래스 파일을 분리하였다.

나머지 부분은 2개의 글 모두 읽은 사람에게는 그저 코드를 확인하는

시간만 의미를 가지므로 동작 확인한 코드를 아래 첨부 한당.

[ DB는 준비가 되어 있어야 동작확인이 가능함을 잊지 말장 ]

secsample.zip

0.08MB

다운 받아서 동작 시키면,

2024.03.11 - [스프링] - spring boot 3 security 그냥 한번 해보고 한번 더 해보면 잘 될꺼얼!

글에서 되던 동작과

심지어 암호도 보이게 해놓았당. 알아낼 수 있을까?~~ ㅋㅋ

2025.01.07 - [스프링부트] - spring boot3 security jwt 적용 1 (B/E)

글에서 되던 동작도 postman이나 boomerang을 이용하면 잘 동작됨이 확인된당.

하지만 누군가는 많이 아쉬워 할지도 모른다는 불안감이 순간 개큰공으로 온다.

JWT 로그인만 확인할 수 있게 초우 간단 React를 할 수없이 만들어보장.

vscode의 Open Foler로 새폴더를 만들어 열고, 터미널을 열어 아래 명령어를 치장

npx create-vite@latest .
npm i axios sweetalert2 sweetalert2-react-content

sweetalert2는 그냥 재미로 넣었어용

초 간단이긴 하지만 너무 못생기면 그러하니 아래처럼 혼을 갈아넣은 css

index.css

#root {
    width: 450px;
    margin:30px auto;
    border:10px solid pink;
    border-radius: 10px;
    text-align: center;
    padding-bottom: 20px;
}

h1 {
     background-color: black;
     color:yellowgreen;
}

h3 {
     color:goldenrod;
}

h4 {
    color: rgb(197, 5, 133);
}

h4 > div {
    color:rgb(5, 90, 97);
}

#memId {
    display: inline;
    color:blue;
}

span {
    display: inline-block;
    width: 50px;
    text-align: center;
    font-weight: bolder;
    color: cadetblue;
}

button {
    margin-top: 20px;
    font-size: 1.2em;
    border-radius: 3px;
    border: transparent;
    background-color: blueviolet;
    color:white;
}

LoginForm.jsx 는 간단한 로그인 form으로 jwt받아서 localStorage에 저장했쪄

import axios from "axios";
import { useRef } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const rctURL = "http://localhost:8080/rct";

function LoginForm({ setIsLogin }) {
  const mkForm = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();

    axios
      .post(`${rctURL}/login`, null, {
        params: {
          username: mkForm.current.username.value,
          password: mkForm.current.password.value,
        },
      })
      .then((rslt) => {
        console.log(rslt.data);
        if (!rslt.data.Error) {
          localStorage.setItem("loginInfo", JSON.stringify(rslt.data));
          setIsLogin(true);
        } else {
          withReactContent(Swal).fire("머냥 아이디? 암호? 아님 둘다");
          mkForm.current.username.focus();
        }
      });
  };

  return (
    <>
      <h4>단순 로그인 체크만 테스트</h4>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <form ref={mkForm} onSubmit={handleSubmit}>
          <div>
            <span>아 디</span>
            <input type="text" name="username" autoFocus defaultValue={"e7e"} />
          </div>
          <div>
            <span>암 호</span>
            <input type="password" name="password" defaultValue={"e7e"} />
          </div>
          <div>
            <button>로그잉</button>
          </div>
        </form>
      </div>
    </>
  );
}

export default LoginForm;

Profile.jsx 는 로그인 성공하면 localStorage 정보 읽어 사용자 정보 뿌리는 애

import { useEffect, useState } from "react";

function Profile({ setIsLogin }) {
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    const loginInfo = JSON.parse(localStorage.getItem("loginInfo"));
    console.log("체킁:", loginInfo);
    setUserInfo(loginInfo);
  }, []);

  const handleClick = () => {
    if (localStorage.getItem("loginInfo")) {
      localStorage.removeItem("loginInfo");
      setIsLogin(false);
    }
  };

  return (
    <>
      {userInfo ? (
        <div>
          <h3>
            <span id="memId">{userInfo.memName}</span> 님의 프로필
          </h3>
          <img
            width={150}
            height={150}
            src={`https://api.dicebear.com/9.x/avataaars/svg?seed=${userInfo.memName}`}
          />
          <h4>
            권한은:
            <br />
            {userInfo.authList.map((auth) => (
              <div key={auth.authName}>{auth.authName}</div>
            ))}
          </h4>
        </div>
      ) : null}
      <button onClick={handleClick}>로그아웃</button>
    </>
  );
}

export default Profile;

App.jsx 에 2개를 넣어요 isLogin 상태 변수로 둘 중에 누가 화면에 등장할지?

import { useState } from "react";
import LoginForm from "./LoginForm";
import Profile from "./Profile";

function App() {
  const [isLogin, setIsLogin] = useState(false);

  return (
    <>
      <h1>MK JWT사용</h1>
      {!isLogin ? (
        <LoginForm setIsLogin={setIsLogin} />
      ) : (
        <Profile setIsLogin={setIsLogin} />
      )}
    </>
  );
}

export default App;

실행 결과는 아래와 같을지어다.

css에 잠시 시간을 투자하닝.. 그래도 그나마 낫당.

소스만 바라는 사람도 있당. 당근 초간단이라 MIT 라이센스당.

rct-jwt.zip

0.03MB

참고로 JWT( JSON Web Token) 도 있고 JWK( JSON Web Key, private/public 비대칭 키)

있으며, token을 브라우져 저장공간(localStorage등)에 저장해서 쓰는 방식

그냥 변수에 저장해서(in-memory) 사용하는 방식, Back-End 단에서

Cookie에 담아서 보내는 방식등 이 역시도 다양하당.(그냥 그렇당)

모든 걸 구지 다 알려고 할 필요는 없다. 개념만 잘 잡고 사용하면 그냥 훌륭하당.

아주 그리 마니 오래 오래 전 두 아이가 있었다.

천재라 불리며 칭찬의 비행기를 타고 세상의 집요한 감시를 받으며

세상이 준비한 그 길을 마냥 생각없이 시키는 대로 따라간 아이

멍청이라 불리며 잔혹한 내팽기침에 세상이 외면한 자유를 얻어

어이없이 세상에 없는 그 길을 개척하며 자신을 키워나간 아이

지금 한 어른은 어처구니 없이 흐늘리는 예쁜 단풍 뒤의

푸르스름 어스름 노을에 왠지 다리가 풀린당.

지금 또 한 어른은 어찌그리 힘차게 어딘가로 걸어간당.

뒷모습은 왜그리도 당당하고 아름다움을 흘릴까

둘 중 누군가에게 자유를 달라 해 본다.

여기 자~~유!

내가 그리도 찾아 헤매던 50cm 바로 그 자!

직선으로 갈 수 있는 자유가 내게로 와버렸다.

정작 문제는 ... 언제 어떻게 왜 어디서 자유?

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

React Spinner(react-loader-spinner)

e7e — Fri, 7 Nov 2025 14:41:58 +0900

리액트 하다보면 꽤나 자주 로딩 Spinner가 아쉽당.

코드 동작확인이야 대충 로딩중... 이란 메세지를 띄우면 되지만

사람인지라 곧 제대로 된 있어보이는 Spinner를 넣지 못한게

마음에 띰띰함을 남기고... 그저 반복되는 오디 괜찮은 거 없낭?

하는 당연한 아쉬움이 그렇게 스스로의 맘을 눅눅하게 만든당.

요때다 지금 상황이 그러하다면 아래 링크를 따라 가보장.

https://mhnpd.github.io/react-loader-spinner/

꽤나 따양하고 땀찍한 9개 Spinner가 시선을 잡아간다.

[실제는 훨씬 더 많이 제공되서 기쁘미당.]

그럼 바로 사용법을 눈에 확인 시켜 주어보장.

당연 폴더를 1개 만들공, vscode로 해당 폴더를 열공, 터미널에

npx create-vite@latest .

입력하고 선택은 react , javascript로 하공, 영문자 o도 미리 입력한다.

필요 없는 파일 정리 작업은 당신에게 맡긴당.(귀찮다면 할 수 없당)

Spinner 패키지를 아래 명령어로 설치하장.

npm i react-loader-spinner

App.jsx 를 아래 코드로 복사/붙여넣기 해보면 바로 사용법 인지당.

import { Audio, DNA, Grid, Hearts, ThreeCircles } from "react-loader-spinner";

function App() {

  return (
    <>
      <h1
        style={{
          textAlign: "center",
          backgroundColor: "black",
          color: "yellow",
        }}
      >
        MK 데뷔 추카 다양한 Spinner
      </h1>
      <Audio color="magenta" />
      <DNA />
      <ThreeCircles />
      <Discuss />
      <Hearts color="pink" />
      <Grid color="blue" />
      <Hourglass />
    </>
  );
}

export default App;

화면을 보고 나면 머얌 넘 쉽잖아 느끼미가 찾아온다.

요 타이밍에 아래 링크를 보면 사용법 익히기 완성이당.

https://mhnpd.github.io/react-loader-spinner/docs/intro

너무 쉬운 김에 쪼메 더 가보장.

위 패키지에서 제공되는 Spinner의 종류가 많은데 한개만 골라서 쓰기에는

맘이 아까우니, 그저 제공되는 것 중에 랜덤하게 나온다면 훨씬 재밌지 않을까?

그래서 만들어 보았다.

spinAttrs.js 는 제공되는 모든 Spinner의 디폴트 속성값을 담고 있는 파일이당.

[ 잔머리를 조금 써서 짐작하는 것 보다는 쉽게 만들었다. 일단 필요하당 ]

export const spinAttrs = {
  Audio: {
    height: 100,
    width: 100,
    color: "#4fa94d",
    ariaLabel: "audio-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  BallTriangle: {
    height: 100,
    width: 100,
    radius: 5,
    color: "#4fa94d",
    ariaLabel: "ball-triangle-loading",
    wrapperClass: "",
    wrapperStyle: {},
    visible: true,
  },
  Bars: {
    height: 80,
    width: 80,
    color: "#4fa94d",
    ariaLabel: "bars-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Blocks: {
    visible: true,
    width: 80,
    height: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "blocks-loading",
  },
  Circles: {
    height: 80,
    width: 80,
    color: "#4fa94d",
    colors: ["#4fa94d"],
    gradientType: "",
    gradientAngle: 0,
    ariaLabel: "circles-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  CirclesWithBar: {
    wrapperStyle: {},
    visible: true,
    wrapperClass: "",
    height: 100,
    width: 100,
    color: "#4fa94d",
    outerCircleColor: "#4fa94d",
    innerCircleColor: "#4fa94d",
    barColor: "#4fa94d",
    ariaLabel: "circles-with-bar-loading",
  },
  CircularProgress: {
    height: 100,
    width: 100,
    color: "#4fa94d",
    secondaryColor: "#4fa94d",
    ariaLabel: "circular-progress-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
    strokeWidth: 2,
    animationDuration: 1,
  },
  ColorRing: {
    visible: true,
    width: 80,
    height: 80,
    colors: ["#e15b64", "#f47e60", "#f8b26a", "#abbd81", "#849b87"],
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "color-ring-loading",
  },
  Comment: {
    visible: true,
    width: 80,
    height: 80,
    backgroundColor: "#ff6d00",
    color: "#fff",
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "comment-loading",
  },
  DNA: {
    visible: true,
    width: 80,
    height: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "dna-loading",
    dnaColorOne: "rgba(233, 12, 89, 0.51)",
  },
  Discuss: {
    visible: true,
    width: 80,
    height: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "discuss-loading",
    colors: ["#ff727d", "#ff727d"],
  },
  FallingLines: {
    color: "#4fa94d",
    width: 100,
    visible: true,
  },
  FidgetSpinner: {
    width: 80,
    height: 80,
    backgroundColor: "#4fa94d",
    ballColors: ["#fc636b", "#6a67ce", "#ffb900"],
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "fidget-spinner-loader",
    visible: true,
  },
  Grid: {
    height: 80,
    width: 80,
    radius: 12.5,
    color: "#4fa94d",
    ariaLabel: "grid-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Hearts: {
    height: 80,
    width: 80,
    color: "#4fa94d",
    ariaLabel: "hearts-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Hourglass: {
    visible: true,
    width: 80,
    height: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "hourglass-loading",
    colors: ["#306cce", "#72a1ed"],
  },
  InfinitySpin: {
    color: "#4fa94d",
    width: 200,
  },
  LineWave: {
    wrapperStyle: {},
    visible: true,
    wrapperClass: "",
    height: 100,
    width: 100,
    color: "#4fa94d",
    ariaLabel: "line-wave-loading",
    firstLineColor: "#4fa94d",
    middleLineColor: "#4fa94d",
    lastLineColor: "#4fa94d",
  },
  MagnifyingGlass: {
    visible: true,
    height: 80,
    width: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "magnifying-glass-loading",
    glassColor: "#c0efff",
    color: "#e15b64",
  },
  MutatingDots: {
    height: 90,
    width: 80,
    radius: 12.5,
    color: "#4fa94d",
    secondaryColor: "#4fa94d",
    ariaLabel: "mutating-dots-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Oval: {
    height: 80,
    width: 80,
    color: "#4fa94d",
    secondaryColor: "#4fa94d",
    ariaLabel: "oval-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
    strokeWidth: 2,
    strokeWidthSecondary: 2,
    animationDuration: 1,
  },
  ProgressBar: {
    visible: true,
    height: 80,
    width: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "progress-bar-loading",
    borderColor: "#F4442E",
    barColor: "#51E5FF",
  },
  Puff: {
    height: 80,
    width: 80,
    radius: 1,
    color: "#4fa94d",
    ariaLabel: "puff-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Radio: {
    visible: true,
    height: 80,
    width: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "radio-loading",
    colors: ["#1B5299", "#EF8354", "#DB5461"],
  },
  RevolvingDot: {
    radius: 45,
    strokeWidth: 5,
    color: "#4fa94d",
    secondaryColor: "r2",
    ariaLabel: "revolving-dot-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Rings: {
    height: 80,
    width: 80,
    radius: 6,
    color: "#4fa94d",
    ariaLabel: "rings-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  RotatingLines: {
    height: 96,
    width: 96,
    color: "#4fa94d",
    strokeWidth: 5,
    animationDuration: 0.75,
    strokeColor: "#4fa94d",
    visible: true,
    ariaLabel: "rotating-lines-loading",
    wrapperStyle: {},
    wrapperClass: "",
  },
  RotatingSquare: {
    wrapperClass: "",
    color: "#4fa94d",
    height: 100,
    width: 100,
    strokeWidth: 4,
    ariaLabel: "rotating-square-loading",
    wrapperStyle: {},
    visible: true,
  },
  RotatingTriangles: {
    visible: true,
    height: 80,
    width: 80,
    wrapperClass: "",
    wrapperStyle: {},
    ariaLabel: "rotating-triangle-loading",
    colors: ["#1B5299", "#EF8354", "#DB5461"],
  },
  TailSpin: {
    height: 80,
    width: 80,
    strokeWidth: 2,
    radius: 1,
    color: "#4fa94d",
    ariaLabel: "tail-spin-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  ThreeCircles: {
    wrapperStyle: {},
    visible: true,
    wrapperClass: "",
    height: 100,
    width: 100,
    color: "#4fa94d",
    ariaLabel: "three-circles-loading",
    outerCircleColor: "#4fa94d",
    innerCircleColor: "#4fa94d",
    middleCircleColor: "#4fa94d",
  },
  ThreeDots: {
    height: 80,
    width: 80,
    radius: 9,
    color: "#4fa94d",
    ariaLabel: "three-dots-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Triangle: {
    height: 80,
    width: 80,
    color: "#4fa94d",
    ariaLabel: "triangle-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
  Vortex: {
    visible: true,
    height: 80,
    width: 80,
    ariaLabel: "vortex-loading",
    wrapperStyle: {},
    wrapperClass: "",
    colors: ["#1B5299", "#EF8354", "#DB5461", "#1B5299", "#EF8354", "#DB5461"],
  },
  Watch: {
    height: 80,
    width: 80,
    radius: 48,
    color: "#4fa94d",
    ariaLabel: "watch-loading",
    wrapperStyle: {},
    wrapperClass: "",
    visible: true,
  },
};

RanSpinner.jsx 파일 요게 핵심 파일이당.

import * as Spinners from "react-loader-spinner";
import { spinAttrs } from "./spinAttrs";

/*
console.log("좋은 습관 체킁: ",
  Spinners.Audio.toString().substring(1, Spinners.Audio.toString().indexOf(")"))
);

//지원되는 Spinner 이름을 출력하기 위한 코드, key값을 확인하고자 함
let fullString = "{";
Object.keys(Spinners).forEach((key) => {
  fullString += `"${key}":${Spinners[key]
    .toString()
    .substring(1, Spinners[key].toString().indexOf(")"))},`;
});
fullString += "}";
console.log(fullString);
*/


function RanSpinner({ width = 80, height = 80 }) {
  // 이게 곧 함수
  const spinName = rName();
  const SpinnerComp = Spinners[spinName];
  const attrs = spinAttrs[spinName];

  if (attrs.width) attrs.width = width;
  if (attrs.height) attrs.width = height;
  attrsColor(attrs);

  if (SpinnerComp) {
    return <SpinnerComp {...attrs} />; // 함수 호출
  }

  // 이건 그냥 참공 <DNA {...attrs} /> 와 동일한 호출
  return <Spinners.DNA />;
}

// 제공되는 Spinner 이름
const sNames = [
  "Audio",
  "BallTriangle",
  "Bars",
  "Blocks",
  "Circles",
  "CirclesWithBar",
  "CircularProgress",
  "ColorRing",
  "Comment",
  "DNA",
  "Discuss",
  "FallingLines",
  "FidgetSpinner",
  "Grid",
  "Hearts",
  "Hourglass",
  "InfinitySpin",
  "LineWave",
  "MagnifyingGlass",
  "MutatingDots",
  "Oval",
  "ProgressBar",
  "Puff",
  "Radio",
  "RevolvingDot",
  "Rings",
  "RotatingLines",
  "RotatingSquare",
  "RotatingTriangles",
  "TailSpin",
  "ThreeCircles",
  "ThreeDots",
  "Triangle",
  "Vortex",
  "Watch",
];

// 랜덤 Spinner 선택
const rName = () => {
  return sNames[Math.floor(Math.random() * sNames.length)];
};

// 랜덤 16진수 칼라
const rHexColor = () => {
  let hex = ((Math.random() * 0x1000000) | 0).toString(16);
  return "#" + hex.padEnd(6, "0");
};

// color관련 속성 모두 random 칼러롱
const colorKeys = [
  "color", "secondaryColor", "outerCircleColor",
  "innerCircleColor", "middleCircleColor", "barColor",
  "backgroundColor", "firstLineColor", "middleLineColor",
  "lastLineColor", "glassColor", "strokeColor"
];

const attrsColor = (attrs) => {
  colorKeys.forEach(key => {
    if (attrs[key]) {
      if (key == "ballColors" || key == "colors")
        attrs[key] = [rHexColor(), rHexColor(), rHexColor(), rHexColor(), rHexColor(), rHexColor()];
      else attrs[key] = rHexColor();
    }
  })

}

export default RanSpinner;

App.jsx 를 아래 처럼 고치면 화면을 새로고침 할때 마다 랜덤 확인이 된당.

import RanSpinner from "./RanSpinner";

function App() {

  return (
    <>
      <h1 style={h1Style} >
        MK 데뷔 추카 다양한 Spinner
      </h1>
      <RanSpinner width={100} height={100} />
      <RanSpinner />
      <RanSpinner width={100} height={100} />
    </>
  );
}

// H1 스타일
const h1Style = {
  textAlign: "center",
  backgroundColor: "black",
  color: "yellow",
  borderRadius: 12
}
export default App;

결과를 확인했다면 알겠지만, RanSpinner.jsx 소스에는 width와 height는

Props로 넘겨 받을 수 있도록 했고 만약 설정하지 않았다면

defalut로 80, 80 값을 가지도록 하였당.

추가적으로 재밌게 하기 위해 color를 지정하는 속성에는 모두 랜덤 값을 넣었다.

RanSpinner.jsx 가 훔쳐가야 할 유일한 소스당.

이제 덤으로 실제 더미 데이터와 AJAX 페이크 코드를 살짝 넣어서

진실로 Spinner로 동작하는 모습을 확인하는 시간을 가지자.

fake.js

// 그냥 가짜 데이터
const data = [
  { id: 1, name: "시현", feature: "다이어트" },
  { id: 2, name: "혜선", feature: "딴소리" },
  { id: 3, name: "민경", feature: "기침감기" },
  { id: 4, name: "승아", feature: "목소리" },
  { id: 5, name: "예원", feature: "패션츄리닝" },
  { id: 6, name: "경민", feature: "말괄량이" },
  { id: 7, name: "선주", feature: "이모티콘" },
  { id: 8, name: "윤정", feature: "황금구두" },
  { id: 9, name: "현정", feature: "댄스머신" },
  { id: 10, name: "이서", feature: "이태원천재" },
  { id: 11, name: "조이", feature: "동물농장" },
  { id: 12, name: "진영", feature: "잘가라아" }
];

// AJAX Fake
export const getData = async () => {
  return new Promise((resolve) => {
    const ranTime = Math.round(Math.random() * 2000) + 1000;
    setTimeout(() => {
      const newData = [...data];
      Array.from({ length: 8 }).forEach(() => {
        newData.splice(Math.floor(Math.random() * newData.length), 1);
      })
      resolve(newData);
    }, ranTime);
  });
};

Hero.jsx 는 Spinner 이후에 화면엥 나올 UI 컴포넌트

const avar = "https://api.dicebear.com/9.x/big-smile/svg?seed=";
function Hero({ name, feature }) {
  return (
    <div style={flexColStyle}>
      <img width={100} height={100} src={`${avar}${name}`} alt={name} />
      <h3 style={nameStyle}>{name}</h3>
      <h4 style={featureStyle}>{feature}</h4>
    </div>
  )
}

// 그냥 스타일 
const flexColStyle = {
  display: "inline-flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center"
}

const nameStyle = {
  color: "yellowgreen",
  backgroundColor: "black",
  width: "80%",
  textAlign: "center",
  borderRadius: 10,
}

const featureStyle = {
  borderBottom: `2px solid magenta`,
  color: "blue",
  width: "80%",
  textAlign: "center",
  fontWeight: "bolder"
}


export default Hero

App.jsx

import { useEffect, useState } from "react";
import { getData } from "./fake";
import RanSpinner from "./RanSpinner";
import Hero from "./Hero";

function App() {
  const [heros, setHeros] = useState([]);
  const [again, setAgain] = useState(true);

  useEffect(() => {
    if (!again) setHeros([]);
    else {
      getData().then((result) => {
        //console.log("result", result);
        setHeros([...result]);
      });
    }

    const timerId = setTimeout(() => {
      setAgain(!again)
    }, 5000);

    return () => {
      //console.log("unmount");
      clearTimeout(timerId);
    }
  }, [again]);

  return (
    <>
      <h1 style={h1Style} >
        MK 데뷔 추카 다양한 Spinner
      </h1>
      {heros.length ? (
        <div style={flexStyle}>
          {heros.map((hero) => (
            <Hero key={hero.id} {...hero} />
          ))
          }
        </div>
      ) : (
        <div style={flexStyle}>
          <RanSpinner width={100} height={100} />
          <RanSpinner width={100} height={100} />
          <RanSpinner width={100} height={100} />
          <RanSpinner width={100} height={100} />
        </div>
      )}
    </>
  );
}

// H1 스타일
const h1Style = {
  textAlign: "center",
  backgroundColor: "black",
  color: "yellow",
  borderRadius: 12
}
// flex 스타일
const flexStyle = {
  display: "flex",
  justifyContent: "space-evenly",
  alignItems: "center"
}

export default App;

데이터 오기 전 Spinner 동작 화면

[ 똑같은 Spinner가 나오는 지루함에서 벗어나게 되었당.. ㅋㅋ]

Data가 도착하면 Spinner는 사라지고, 데이터가 보인당.

[ 랜덤데이터 중 랜덤으로 4개만 나오게 했으닝, 어쩌면 이름에 불만이 있을수도...]

노파심에 전체 소스를 아래 zip 파일로 올린당.

[ npm i 가 필요함을 잊지말장 ]

simple-spin.zip

0.03MB

사용은 간단하지만, 만약 시간이 있어 소스를 여유롭게 본다면, 결단코

그 누군가는 전두엽의 자극으로 산문 코딩을 시 코딩으로 바꿀 테크닉을 얻으리랑.

한때 김다미가 조이서로 출연하여 맘껏 좋아햇던

빛 발랄 드라마 이태원 클라스

거기서 만났던 감정의 이음새들을 흔들었던 말

네가 너인 걸 다른 사람에게 납득시킬 필요는 없다.

그 와중에 청개구리 내 유전자일까

인정하고 싶지 않은 지능의 승부욕일까

감동 자극이지만 주제와 상황에 따라 뭐래?가 될 수 있다

띤실은 이렇다. 인생도 결과가 보이기 전

도전하고 방황하고 다시 도전하는 뱅뱅도는

그런 Spinner가 더 아기자기하고 예쁠 수 있다는 거당.

그저 감정 에너지 소비가 무작위적이라 기억하지 못할 뿐...

내가 나 인걸 친구 하고픈 너에게

납득 시키고 픈 건 나만의 Spinner를

너에게만 보여주고 싶은 맘의 뱅뱅이당.

뱅뱅 스피너! 우린 그냥 친구뿐일까?

넌 그냥 계속 그렇게 돌기만 할거징!!

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

React(리액트) 티키타카 18 ( rc-tree 트리 컴포넌트)

e7e — Tue, 4 Nov 2025 12:19:33 +0900

아니 또 누군가는 Tree 컴포넌트를 쓰고 싶단다.

jstree는 jquery가 필요한 jquery 플러그인이닝, React를 쓴다면 과감없잉 버릴깡?

[ jquery 4가 발표되었당!~ 무엇이 바뀌었을깡??? ]

rc-tree란 게 있당. 중국말 설명이 중국산인가 보당.

아래 npmjs에 가면 api가 테이블로 정리 되어 있당. 지금은 대략 눈치껏 확인 정도만...

https://www.npmjs.com/package/rc-tree

아래 링크 가면, 실행 예제와 소스를 볼 수 있어, 어쩔 또 올 수 밖에 없낭? 하는 느낌이당.

https://tree-react-component.vercel.app/demo/draggable

시작하면 절반이라 했던강... 밧다리 드러가장.

vite로 필요한 프로젝트 맹글었다 치공, 설치 들어가장.

npm i rc-tree
npm i tailwindcss @tailwindcss/vite

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";

실행 모습을 보려면 어쩔! 더미 데이터가 필요하당.~~ ㅠㅠ

key, title, children 이 기본속성 값으로 필요하당.(복사/붙여넣기 하장장)

sampleData.js

const treeData = [
  {
    key: "E7E",
    title: "DDIT 배움 즐김사",
    children: [
      {
        key: "F1",
        title: "F1 GIRLS",
        children: [
          { key: "f1-1", title: "경미닝" },
          { key: "f1-2", title: "선주닝" },
          { key: "f1-3", title: "세여닝" },
          { key: "f1-4", title: "지워닝" },
          { key: "f1-5", title: "수미닝" },
          { key: "f1-6", title: "해프닝" },
        ],
      },
    ],
  },
  {
    key: "SM",
    title: "SM 엔터테인먼트",
    children: [
      {
        key: "aespa",
        title: "에스파",
        children: [
          { key: "aespa-1", title: "닝닝" },
          { key: "aespa-2", title: "카리나" },
          { key: "aespa-3", title: "지젤" },
          { key: "aespa-4", title: "윈터" },
        ],
      },
      {
        key: "redvelvet",
        title: "레드벨벳",
        children: [
          { key: "redvel-1", title: "조이" },
          { key: "redvel-2", title: "슬기" },
          { key: "redvel-3", title: "아이린" },
          { key: "redvel-4", title: "웬디" },
          { key: "redvel-5", title: "메리" },
        ],
      },
    ],
  },
  {
    key: "YG",
    title: "YG 엔터테인먼트",
    children: [
      {
        key: "blackpink",
        title: "블랙핑크",
        children: [
          { key: "blink-1", title: "로제" },
          { key: "blink-2", title: "제니" },
          { key: "blink-3", title: "리사" },
          { key: "blink-4", title: "지수" },
        ],
      },
    ],
  },
  {
    key: "JYP",
    title: "JYP 엔터테인먼트",
    children: [
      {
        key: "itzy",
        title: "있지",
        children: [
          { key: "itzy-1", title: "예지" },
          { key: "itzy-2", title: "채령" },
          { key: "itzy-3", title: "류진" },
          { key: "itzy-4", title: "리아" },
          { key: "itzy-5", title: "유나" },
        ],
      },
    ],
  },
  {
    key: "STAR",
    title: "스타쉽 엔터테인먼트",
    children: [
      {
        key: "ive",
        title: "IVE",
        children: [
          { key: "ive-1", title: "안유진" },
          { key: "ive-2", title: "가을" },
          { key: "ive-3", title: "레이" },
          { key: "ive-4", title: "장원영" },
          { key: "ive-5", title: "리즈" },
          { key: "ive-6", title: "이서" },
        ],
      },
    ],
  },
];

export default treeData;

이전에 이와 비슷한 Tree 컴포넌트를 사용해 본 사람이라면

데이터 구조에서 눈에 파박 튀는 부분이 있을 건데.. children이다.

데이터 구조에 parent를 사용하는가?, children을 사용하는가?에 따라

장단점이 많이 다르당.(언제 한번 느껴보길 바란당)

나중에 Backend 서버에서 이런 형태의 데이터를 직접 가져오든가?

아니면 받은 데이터를 이런 형태가 되도록 Transform 하는

코드를 짜야 할 거시당. (일단 지금은 배째하공 무시하장. 내일 일은 내일로)

그라믄 위의 데이터를 이용하야 기본 Tree를 맹글어보당.

제공 되는 Tree 컴포넌트의 props를 잘 눈길에 발자국 찍듯이 힘을 빼고 본당.

아이콘 이미지는 귀간지러서 api를 사용해서 넣었당.

그래야 소스 가져간 사람이 귀안케 이미지 다운로드 안받아도 되니켕

select 이벤트도 onSelect 되어 이쓰미, 기대 반 우려 반 반반핸들추가당.

RcTree.jsx

import Tree from "rc-tree";
import "rc-tree/assets/index.css";
import treeData from "./sampleData";

function RcTree() {

  // 그냥 아이콘 잼나겡
  const handleIcon = (obj) => {
    //console.log("체킁",obj)
    let imgURL = "";
    const hypCnt = obj.pos.split("-").length;

    hypCnt == 2 &&
      (imgURL = `https://dummyimage.com/160x160/000/fff.png&text=${obj.data.key}`);
    hypCnt == 3 &&
      (imgURL = `https://dummyimage.com/160x160/000/ff0.png&text=${obj.data.key}`);
    hypCnt == 4 &&
      (imgURL = `https://api.dicebear.com/9.x/adventurer/svg?seed=${obj.title}`);

    return <img src={imgURL} width={16} height={16} />;
  };

  const handleSelect = (skey, info) => {
    console.log("체킁 1: ", skey, info.node.title);
    console.log("체킁 2: ", info);
  };

  return (
    <Tree
      treeData={treeData}
      showIcon
      icon={handleIcon}
      selectable
      expandAction={"click"}
      onSelect={handleSelect}
      // 은근 Zoom 테크니크!
      style={{ transform: "scale(2)", transformOrigin: "left top" }}
    />
  );
}

export default RcTree;

아마도 아래 코드가 궁금 할거시당.

const hypCnt = obj.pos.split("-").length;

rc-tree는 tree node에 pos란 속성을 가질 수도 있는데, sampleData.js를 보장

최상위 Root가 0번 (여기선 treeData 배열 자체) 이 되고

그 다음 배열의 첫번째 key E7E가 0-0, 두번째 SM이 0-1

SM의 children 첫번째 aespa가 0-1-0, 두번째가 0-1-1 식의 값을 가지게 된당.

[ 사실 이 부분은 sampleData에 type등 본인이 원하는 이름으로 추가 속성을 부여한다면

(귀찮을꺼당) 더 깔금하게 해결될 수 있다. 그냥 그렇다 ]

App.jsx

import RcTree from "./RcTree";

function App() {
  return (
    <>
      <h1 className="bg-violet-800 text-white text-center font-extrabold p-2 text-5xl">
        RC-TREE 해보아용
      </h1>
      <RcTree />
    </>
  );
}

export default App;

실행 화면으로 시선을 도려내 보장. 난 선택-장애가 없는 그를 선택하였당.

음... 먼가 써볼까 하는 마음이 들었지만, RC 카를 사면 더 재밌을 꺼 같당.

분명 요기까지만 해도 만족하는 지나친 감사함을 가진 사라미 있겠지만,

금수저는 반반이당. 그래서 금수저(?)를 위해 쪼메 더 가보도록 하장.

Tree 컴포넌트를 사용하다보면 열린 Tree Node가 많으면

아무래도 눈이 뱅뱅 어지러울 수 있다.(특히 늙으면 더 더 말이다.. ㅠㅠ)

선택한 Node만 열리고, 나머지는 닫히도록 해보장

RC-TREE에선 정말 쉽당.(문서에 설명이 없어, 실행 결과에서 추론해야 한당.)

RcTree.jsx (주석을 다라 다라 달았당)

import Tree from "rc-tree";
import "rc-tree/assets/index.css";
import treeData from "./sampleData";
import { useState } from "react";

function RcTree() {
  const handleIcon = (obj) => {
    //console.log("체킁",obj)
    let imgURL = "";
    const hypCnt = obj.pos.split("-").length;

    hypCnt == 2 &&
      (imgURL = `https://dummyimage.com/160x160/000/fff.png&text=${obj.data.key}`);
    hypCnt == 3 &&
      (imgURL = `https://dummyimage.com/160x160/000/ff0.png&text=${obj.data.key}`);
    hypCnt == 4 &&
      (imgURL = `https://api.dicebear.com/9.x/adventurer/svg?seed=${obj.title}`);

    return <img src={imgURL} width={16} height={16} />;
  };

  const handleSelect = (skey, info) => {
    //console.log("체킁 1: ", skey, info.node.title);
    //console.log("체킁 2: ", info);
  };

  // 선택된 Node만 열리게 하기 위한 코드
  const [expandedKeys, setExpandedKeys] = useState([]);
  // 콜백형식으로 필요한 값들을 매개변수로 자동으로 넣어준당.
  const handleExpand = (expandedKeys, { _expanded, node, _nativeEvent }) => {
    node.expanded ? setExpandedKeys(expandedKeys) : setExpandedKeys([node.key]);
  };

  return (
    <Tree
      treeData={treeData}
      showIcon
      icon={handleIcon}
      selectable
      expandAction={"click"}
      onSelect={handleSelect}
      // 선택된 Node만 열리기 위한 부분
      autoExpandParent
      expandedKeys={expandedKeys}
      onExpand={handleExpand}
      // 은근 Zoom 테크니크!
      style={{ transform: "scale(2)", transformOrigin: "left top" }}
    />
  );
}

export default RcTree;

결과는 실행해 보면 바로 각막에 결과가 새겨질지경이당.

뽀인또는 Tree 컴포넌트에 에 추가된 아래 속성(expanedKeys가 핵심)과

        autoExpandParent
        expandedKeys={expandedKeys}
        onExpand={handleExpand}

아래 코드당

  // 선택된 Node만 열리게 하기 위한 코드
  const [expandedKeys, setExpandedKeys] = useState([]);
  // 콜백형식으로 필요한 값들을 매개변수로 자동으로 넣어준당.
  const handleExpand = (expandedKeys, { _expanded, node, _nativeEvent }) => {
    node.expanded ? setExpandedKeys(expandedKeys) : setExpandedKeys([node.key]);
  };

요기까지만 해도 만족이야 하겠지만, 포만감은 없을거당.

화면을 좌우로 반반 나누어 쪼메만 더 디저트로 먹어보도록 하장.

먼저 라우터 모듈을 괘니 추카해 주장!( 라우터가 관심!)

npm i react-router

라우터 설정 해볼까낭! 초간단 설정!

main.jsx

import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router";
import Idol from "./Idol.jsx";

const router = createBrowserRouter([
  {
    path: "",
    element: <App />,
    children: [
      {
        index: true,
        element: <Idol />,
      },
      {
        path: "/:name",
        element: <Idol />,
      },
    ],
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />,
);

Idol 컴포넌트가 나올 자리 Outlet 설정

useNavigate 훅 이용, 값 전달도 해봄

선택여부와 children여부를 이용, leaf인 경우만 navigate

App.jsx

import { Outlet } from "react-router";
import RcTree from "./RcTree";

function App() {
  return (
    <>
      <h1 className="mt-5 bg-violet-800 text-white text-center font-extrabold p-2 text-5xl">
        RC-TREE 해보아용
      </h1>
      <div className="flex border-2 border-violet-600 h-full min-w-200">
        <div className="flex-1">
          <RcTree />
        </div>
        <div className="flex-1 h-full border border-violet-500 z-10">
          <Outlet />
        </div>
      </div>
    </>
  );
}

export default App;

RcTree.jsx

import Tree from "rc-tree";
import "rc-tree/assets/index.css";
import treeData from "./sampleData";
import { useState } from "react";
import { useNavigate } from "react-router";

function RcTree() {
  const handleIcon = (obj) => {
    //console.log("체킁",obj)
    let imgURL = "";
    const hypCnt = obj.pos.split("-").length;

    hypCnt == 2 &&
      (imgURL = `https://dummyimage.com/160x160/000/fff.png&text=${obj.data.key}`);
    hypCnt == 3 &&
      (imgURL = `https://dummyimage.com/160x160/000/ff0.png&text=${obj.data.key}`);
    hypCnt == 4 &&
      (imgURL = `https://api.dicebear.com/9.x/adventurer/svg?seed=${obj.title}`);

    return <img src={imgURL} width={16} height={16} />;
  };

  const navigate = useNavigate();
  const handleSelect = (skey, info) => {
    // console.log("1: ", skey, info.node.title);
    //console.log("2: ", info.node);
    const selNode = info.node;

    if (!selNode.selected && !selNode.children) {
      navigate(`/${selNode.title}`, { state: selNode });
    }
  };

  // 선택된 Node만 열리게 하기 위한 코드
  const [expandedKeys, setExpandedKeys] = useState([]);
  // 콜백형식으로 필요한 값들을 매개변수로 자동으로 넣어준당.
  const handleExpand = (expandedKeys, { _expanded, node, _nativeEvent }) => {
    node.expanded ? setExpandedKeys(expandedKeys) : setExpandedKeys([node.key]);
  };

  return (
    <Tree
      treeData={treeData}
      showIcon
      icon={handleIcon}
      selectable
      expandAction={"click"}
      onSelect={handleSelect}
      // 선택된 Node만 열리기 위한 부분
      autoExpandParent
      expandedKeys={expandedKeys}
      onExpand={handleExpand}
      // 은근 Zoom 테크니크!
      style={{ transform: "scale(2)", transformOrigin: "left top" }}
    />
  );
}

export default RcTree;

useLocation 훅 이용, 넘겨 받은 node값 활용

Idol.jsx

import { useLocation } from "react-router";

function Idol() {
  const location = useLocation();
  const { title = "누구닝", key = "" } = { ...location.state };
  console.log("체킁2: ", key);

  return (
    <div className="h-full  flex flex-col border-10 border-pink-300 justify-start items-center">
      {/* 랜덤 얼굴 이미지 API https://100k-faces.vercel.app/api/random-image */}
      {key === "" ? (
        <img
          className="rounded-2xl"
          src={
            "https://pimg.mk.co.kr/news/cms/202411/21/news-p.v1.20241121.21f41559c9be4ce88ced8a655f969ae6_P1.jpg"
          }
        />
      ) : (
        <img
          src={`https://100k-faces.vercel.app/api/random-image?seed=${key}`}
        />
      )}
      <h1 className="text-8xl my-4">
        <span>{title}</span>
      </h1>
    </div>
  );
}

export default Idol;

결과는? 음 그냥 쓸만~~(자기만족!!~~ )

잘 만들었당. 이제 백엔드에서 데이터를 가져와서 뿌리는 건

본인이 한번 맹글어 보는 수고를 해보장. 어쩌면 생각보다 기쁠거시당.

npmjs에서 검색하면 rc-tree-select도 있당. (나중에 써 보아야겠당!)

아! 그리고 이런 외부 라이브러리는 Typescript로 한번 더 해보면 좋은데...

Typescript 사용 패턴 연습이 Typescript가 낯선자에게 꽤나 도우미 된당.

@types/rc-tree 형식으로 @types/패키지명의 패키지도 대부분 지원된단 사실도...

혹 도우미 될까나 시퍼 typescript로 맹근 파일을 첨부해 본당

type-rctree.zip

0.04MB

압축 풀공 터미널에 아래 명령어를 넣고 엔터를 빡 강하게 친다면

npm i && npm run dev

아래 화면을 보게 될꺼이당.

이모티콘 부자는 널렸으나

이모티콘 선택 센스 초능력은

그저 단지 소수 몇명에게만 주어졌나니...

그중에도 탁월한 이가 있었으니

그 사람 금수저였당.

말과 상황에 대처하는 센스는 소심하였당.

금수저 하면 맘에 미안함이 출렁인당.

언제나 잔잔해 지려낭....

구지 사과주러 가지 않았다면....

찌질한 말을 훅 뱉지 않았다면...

달리는 울음소리는 시간에 없었을텐데....

금수저가 보내주는 스토리 있는

연속 파노라마 이모티콘이 문득 그립당.

하여간 그냥 던 던 댄스당.~~

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

React(리액트) 티키타카 33 SVAR Gantt(업그레이드)

e7e — Mon, 3 Nov 2025 12:31:06 +0900

드디어 svar gantt가 쓸만하게 업그레이드 되었당.

(패키지이름도 wx-react-gantt에서 @svar-ui/react-gantt로 살짜기 바뀌었당)

대부분의 간트차트가 유료인 어쩔수 없는 상황에서 svar gantt는 나름 유일한 대안이었지만

가이드 문서부터 실제 실행되는 모습, 리액트 버젼 지원까지 디테일하게 따지자면...

문제가 한 두가지가 아니었지만... 이제는 사용해 볼만하당.

(제대로 안된 문서를 읽고 버린 시간에 미쳐버린 천둥 눈물이 썰물로 빠진당.)

[결코 완벽하다는 이야기는 결코 아니당. 비 바람 번개는 여전히 하늘에 산당]

아래 링크에 가면 열심히 설명한당.

https://docs.svar.dev/react/gantt/getting_started/

바로 감정 들어가 보장.

당근 먼저 vite로 React/Javascript 프로젝트를 아무 빈 폴더에 셋업한당.

npx create-vite@latest .

추가로 설치하장

npm i @svar-ui/react-gantt ## SVAR React Gantt
npm i axios

대략 필요없는 파일은 나름 정리하고 App.jsx를 아래처럼 바꿔보장

App,jsx

import { Gantt, WillowDark } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";

function App() {

  return (
    <>
      <h1>
        SVAR GANTT 이제는 쓸만하당
      </h1>
      <WillowDark>
        <Gantt />
      </WillowDark>
    </>
  );
}

export default App;

실행 화면을 확인하면 당연 데이터 없는 Gantt가 눈에 보인당.

WillowDark는 제공되는 테마당. Willow랑 2개가 제공되는데

당근 Dark가 붙었으니가 어두운 테마, 안 붙은 건 밝은 테마당

여기서 나는 왈칵 생각이 난당.

긴꼬리 꼬장꼬장 꼰대 설명보다는 바로 가져다 쓸 수 있는 베이스 샘플이

이 시대가 원하는 옳고 그름을 떠난 바램을 담은 바람임을.......

먼저 화면이 영어로 나오는 부분을 한글로 나오도록(localizaion) 위해

아래 ko.js파일을 src 폴더에 맹글장. (귀찮으면 다운받는당)

ko.js

0.00MB

ko.js

const ko = {
  //calendar
  calendar: {
    monthFull: [
      " 1월",
      " 2월",
      " 3월",
      " 4월",
      " 5월",
      " 6월",
      " 7월",
      " 8월",
      " 9월",
      "10월",
      "11월",
      "12월",
    ],
    monthShort: [
      " 1월",
      " 2월",
      " 3월",
      " 4월",
      " 5월",
      " 6월",
      " 7월",
      " 8월",
      " 9월",
      "10월",
      "11월",
      "12월",
    ],

    dayFull: [
      "일요일",
      "월요일",
      "화요일",
      "수요일",
      "목요일",
      "금요일",
      "토요일",
    ],

    dayShort: [
      "일요일",
      "월요일",
      "화요일",
      "수요일",
      "목요일",
      "금요일",
      "토요일",
    ],
    hours: "시",
    minutes: "분",
    done: "완료",
    clear: "클리어",
    today: "오늘",
    am: ["오전", "오전"],
    pm: ["오후", "오후"],

    weekStart: 7,
    clockFormat: 24,
  },

  //core
  core: {
    ok: "확인",
    cancel: "취소",
    select: "선택",
    "No data": "데어터 없음",
  },

  formats: {
    dateFormat: "%Y-%m-%d",
    timeFormat: "%H:%i",
  },

  lang: "ko-KR",

  //Gantt
  gantt: {
    // Header / sidebar
    "Task name": "작업명",
    "Start date": "시작일",
    Duration: "기간",
    Task: "작업",
    Milestone: "이정표",
    "Summary task": "작업 써머리",

    // Sidebar
    Save: "저장",
    Delete: "삭제",
    Name: "이름",
    Description: "설명",
    "Select type": "타입 선택",
    Type: "타입",
    "End date": "종료일",
    Progress: "진행율",
    Predecessors: "이전 작업",
    Successors: "이후 작업",
    "Add task name": "작업명 추가",
    "Add description": "설명 추가",
    "Select link type": "링크 타입 선택",
    "End-to-start": "끝과 시작",
    "Start-to-start": "시작과 시작",
    "End-to-end": "끝과 끝",
    "Start-to-end": "시작과 끝",

    // Context menu / toolbar
    Add: "추가",
    "Child task": "하위..",
    "Task above": "위에..",
    "Task below": "아래..",
    "Convert to": "변환 to",
    Edit: "수정",
    Cut: "잘라내기",
    Copy: "복사",
    Paste: "붙여넣기",
    Move: "이동",
    Up: "위로",
    Down: "아래로",
    Indent: "안으로",
    Outdent: "밖으로",
    "Split task": "작업 분리",

    // Toolbar
    "New task": "새 작업",
    "Move up": "위로 이동",
    "Move down": "아래도 이동",
  },
};

export default ko;

실행 확인을 위한 더미 데이터도 아래 처럼 미리 맹그러 두도록 하장

(역시 귀찮다면 다운받아서 src 폴더에 버려버리장.)

dummyData.js

0.00MB

dummyData.js

// 작업
export const tasks = [
  {
    id: 20,
    text: "회의록 작성",
    start: "2025-11-11",
    end: "2025-11-12",
    duration: 1,
    progress: 0,
    type: "task",
  },
  {
    id: 47,
    text: "REACT 프로젝트",
    start: "2025-11-01",
    end: "2025-11-20",
    duration: 20,
    progress: 5,
    parent: 0,
    type: "summary",
    open: true,
  },
  {
    id: 22,
    text: "라우터/레이아웃 설정",
    start: "2025-11-03",
    end: "2025-11-07",
    duration: 5,
    progress: 30,
    parent: 47,
    type: "task",

  },
  {
    id: 21,
    text: "신규 프로젝트 설계",
    start: "2025-12-10",
    end: "2025-12-13",
    duration: 3,
    progress: 0,
    type: "task",
  },
  {
    id: 31,
    text: "금수저 프로젝트",
    start: "2025-12-20",
    end: "2025-12-30",
    duration: 3,
    progress: 0,
    type: "task",
  },

];
// 앞뒤 연결  e2e는 end to end의 의미
export const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];
// 시간 스케일
export const scales = [
  { unit: "month", step: 1, format: "yyyy-MM" },
  { unit: "day", step: 1, format: "d" },
];

export const markers = [
  {
    start: new Date().setDate(new Date().getDate() + 2),
    text: "모레",
  },
  {
    start: new Date().setDate(new Date().getDate() + 7),
    text: "7일후",
  },
];

대략 준비가 되었으니, 핵심 바로 가져다 쓸 Base 샘플 코드를 맹글어보장

BaseGantt.jsx

0.00MB

BaseGantt.jsx

import { Locale } from "@svar-ui/react-core";
import "@svar-ui/react-gantt/all.css";
import {
  ContextMenu,
  Editor,
  Fullscreen,
  Gantt,
  Toolbar,
  Tooltip,
  WillowDark,
} from "@svar-ui/react-gantt";
import ko from "./ko";
import { tasks, links, scales, markers } from "./dummyData";
import { useState } from "react";

function BaseGantt() {
  const [api, setApi] = useState(null);

  const init = (api) => {
    setApi(api);
  };

  return (
    <>
      <ContextMenu api={api}>
        <Fullscreen hotkey="ctrl+shift+f">
          <WillowDark>
            <Locale words={{ ...ko }}>
              <Tooltip api={api} />
              <Toolbar api={api} />
              <Gantt
                tasks={tasks}
                scales={scales}
                links={links}
                markers={markers}
                zoom
                init={init}
              />
              {api && <Editor api={api} />}
            </Locale>
          </WillowDark>
        </Fullscreen>
      </ContextMenu>
    </>
  );
}

export default BaseGantt;

사실 이 소스에 svar gantt가 제공하는 기본 컴포넌트 구조가 모두 담겨있다고 봐도 괜찮을 거당.

ContextMenu 컴포넌트로 Gantt를 둘러싸면 마우스 오른쪽 컨텍스가 제공되고

Fullscreen 컴포넌트로 둘러싸면 화면에 Fullscreen 전환 버튼이 나타나고

Toollbar로 둘러싸면 Gantt 위에 툴바가 나타나고

Tooltip을 넣으면 tooltip이 지원되공

Locale로 둘러싸면 localization이 되는 식이다.

프론트 프레임워크에서 바라는 컴포넌트 구조화가 잘 되어있는 모습이당.

[만약 속성으로 처리했으면 어땠을까?, 결단코 분명 장단점이 있을게당]

App.jsx

import BaseGantt from "./BaseGantt";

function App() {

  return (
    <>
      <h1 style={titleStyle}>
        그냥 여기서 띠작할께용
      </h1>
      <BaseGantt />
    </>
  );
}

// 그냥 스타일 정의 객체
const titleStyle = {
  textAlign: "center",
  backgroundColor: "blueviolet",
  color: "white",
  marginBottom: 0,
}

export default App;

여기까지 했다면 아래 화면이 음.. 하고 보일게당.

새작업 버튼을 누르면 New Task가 추가되고 그걸 더블클릭하거낭

작업중에 하나를 선택하고 더블 클릭한다면 아래처럼 보일게당.

작업중 하나를 선택하고 마우스 오른쪽 버튼을 누른다면 아래처럼 보일게당.

Restful 테스트를 해보기 위해 아래 json-server를 구성한 폴더 압축 파일을 다운받자

json-gantt.zip

0.01MB

압축을 풀고 vscode로 폴더를 열어 터미널에 npm start라 치면 그냥 동작한당.

터미널 메세지를 잘 보면 그냥 안당.

아래 파일은 axios를 이용하여 위 json-server에서 데이터를 가져와서

gantt 를그리는 샘플 소스를 포함하고 있다.

mk-gantt.zip

0.04MB

압축 풀고, vscode로 열어서 npm i 후 npm run dev 하면 볼 수 있당.

실행 확인해 보면 작업(task)에 대해서만 추가/수정/삭제 가 잘 동작함을

확인할 수 있고, 스타일도 살짝 넣었당(gantt.css 파일 참조).

나머진(link 등등) 아직 하지 않았당.

조금 지저분한 코드들이 들어가버리고 말았는데..(ㅠㅠ)

JSON 서버는 id 속성을 무조건 문자열 처리해 버리고,

SVAR GANTT는 문서에는 id가 number | string 으로 되어 있지만

실제 number로 넘겨주지 않으면 에러가 발생하여 땜방이당.

Spring등으로 실제 Back-End를 구축한다면 간단히 해결될 문제당.

개인적인 결론은 svar gantt가 위와 같은 기본 기능이 다 장착되어 있는

베이스 샘플을 제공해 주었으면 하는 마음이당. 현재의 문서 설명은

사용자의 시간의 가치를 엄청나게 저 평가하여 버리고 있당.

Slider의 동작은 마구 이상한데... 그 원인을 내가 찾고 말았당.

controlled Component 방식으로 사용한 것이 원인이다.

uncontrolled 방식으로 사용하면 깔끔하게 해결된당.

아래 코드를 기존 api.intercept가 나열된 소스 뒤에 추가 하면 된당.

(역시 흐름을 생각하니, 해결책이 보인당. 마구 기쁘당!~~ ㅋㅋ)

    api.intercept("scroll-chart", (e) => {
      console.log("check e", e);
      return false;  // 뒤에 따라 오는 처리를 하지 않겠음
    });

하늘색 종이 위에 살금살금 소리없는 흰구름을 그리고

바다색 종이 위에 웅성웅성 소리높은 흰파도를 그린다.

흰 파도야 넌 언제 니 얘기 멈출거야?

흰 구름아 넌 또 언제 니 얘기 할거닝?

흰 구름은 먹구름 되어 천둥으로 호통치고

흰 파도는 지지않고 더 높여 울음소리 내달린다.

둘은 친구가 될 수 있을까?

이런! 둘 다 내 안에 살고 있었다.

https://www.youtube.com/watch?v=KNtJGQkC-WI

React With TypeScript 체킁1

e7e — Tue, 21 Oct 2025 20:03:14 +0900

아무래도 때가 된 것 같다.

이제 부터는 TypeScript로 리액트를 해보장.

Node와 vscode는 당근으로 이미 설치되어 있어야 한당.

TypeScript가 대략 먼지는? 아래 글을 읽고 오장 (싫다면 그러렴)

2025.01.13 - [자바스크립트] - TypeScript(타입스크립트) 넌 머냥?

거두절미 하고 바로 퐁당 들어가 보장. (실무는 실체적 느끼미가 중요하당)

나의 경우 react-type1(꼭 소문자로)으로 새 폴더를 만들어서 열었당.

Terminal -> New Teriminal을 열고는 아래 명령어를 치장

(Powershell 이 문제를 일으키면 그냥 cmd라고 치고 다시 한당)

npx create-vite@latest .

아래 처럼 선택 하여 본당.

참고로 rolldown-vite는 Experimental(실험적) 이라고 나오는 데, vite에서 적용예정으로

rust 언어로 만들어진 새로운 bundler(여러 흩어진 파일을 하나로 묶어주는)로

그 성능이 기존 bundler 보다 참으로 월등하다고 전해진당

(지금은 선택해도 되공, 안해도 무방하고 무탈하당)

영문자 o를 치고 엔터를 치면 브라우져가 열릴거시당. (이것은 이미 아는 거당)

기본적으로 생성되는 파일들을 보면 아래와 같당. ( 확장자 .ts와 .tsx가 누네띤당)

tsconfig.json 파일도 누네띠는데 열어보면

tsconfig.app.json과 tsconfig.node.json이 그냥 이해된당

필요없는 예시를 위한 파일을 정리를 좀 하장.

assets 폴더와 App.css 파일은 삭제, index.css 파일은 내용은 지우고 껍데기만 남긴당.

main.tsx 는 아래처럼 바꾼당.

import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

// 아래 라인에 보이는 !는 null 아님을 보증한다는 의미당  희안?
createRoot(document.getElementById("root")!).render(<App />);

App.tsx 는 아래처럼 바꾼당.

function App() {
  return (
    <>
      <h1>너 TypeScript랑 친해?</h1>
    </>
  );
}

export default App;

브라우져 화면은 아래와 같을꺼당.

이제 어느정도 준비가 된 것 같지만, 기본 alert는 예쁘지 않으닝

기본으로 sweetAlert2도 미리 준비하도록 하장. 터미널에 아래처럼 입력한당.

npm i sweetalert2 sweetalert2-react-content

E7ESwal.tsx 을 src 폴더에 아래내용으로 만들장

import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
 
const E7ESwal = withReactContent(Swal);
export default E7ESwal;

준비 끝 (준비 작업도 참 길당)

오늘은 은근 꽤나 많이 자주 질문 받는 form안에 submit 버튼이 여러개 있을 때

어느 submit버튼을 눌렀는지를 알아내는 걸 해보장.

(typescript를 쓰면 추가적인 질문이 발생하게 된당.)

FormSample.tsx 를 src 폴더에 아래처럼 맹글장

import type { FormEvent } from "react";
import E7ESwal from "./E7ESwal";

function FormSample() {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const nativeEvent = e.nativeEvent as SubmitEvent; // 형변환을 해야 submitter가 나옴!
    console.log(nativeEvent.submitter);               // 어느 버튼이 submit을 발생시켰는지 안당.
    const clickedButton = nativeEvent.submitter;
    console.log(clickedButton?.innerHTML);            // ? 알디용
    if (clickedButton?.innerHTML === "눌러방") {      // innerText를 써도 된당.
      E7ESwal.fire("눌러방 눌렀네엥");
    } else {
      E7ESwal.fire("누를깡 눌렀구망");
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <button>눌러방</button>
        <br />
        <button>누를깡</button>
        <br />
      </form>
    </div>
  );
}

export default FormSample;

뽀인트는 form이벤트의 submitter에 어느 버튼이 submit을 발생시켰는지가 담겼는데..

Typescript에선 아래처럼 형변환을 해줘야 submitter를 읽을 수 있당.

const nativeEvent = e.nativeEvent as SubmitEvent

e는 진짜 이벤트를 품고 있는 가짜 이벤트고(멋진 말로 syntheticeven라 한당)

e.nativeEvent가 진짜 이벤트당!

App.tsx 를 아래처럼 수정하장

import FormSample from "./FormSample";

function App() {
  return (
    <>
      <h1>너 TypeScript랑 친해?</h1>
      <FormSample />
    </>
  );
}

export default App;

화면에서 테스트 해보면 잘 됨을 알수 있당.

사실 React에선 거의 사용되진 않지만(왜?) 일반 html이나 jsp라면 submit 버튼의

form관련 속성을 이용해서 쉽게 버튼 구분 필요없이 원하는 action을 취할 수 있당.

이건 그냥 메인 흐름과 상관없이 참고롱 해보장.

formtest.html을 public 폴더에 아래처럼 맹글고

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form>
    <input type="text" name="myname" value="E7E"><br/>
    <button formaction="km.html">경미닝</button><br/>
    <button formaction="mk.html">밍겨닝</button><br/>
    <button formaction="yw.html">예워닝</button><br/>
    <button formaction="ksj.html">금수저닝</button>
</form>    
</body>
</html>

주소 표시줄에 http://localhost:5173/formtest.html 를 입력해서 결과를 확인해 보장

(port 번호는 본인에 맞게, 나의 경우 5173 이당.)

주소 표시줄의 변화를 누니 인식했다면 그걸로 족하당.

useRef Hook을 이용해서도 submit 버튼을 구분하는 걸 한번 해보장.

FormSample.tsx 를 아래 처럼 고쳐보장.

import { useRef, type FormEvent } from "react";
import E7ESwal from "./E7ESwal";

function FormSample() {
  const myForm = useRef(null);

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const nativeEvent = e.nativeEvent as SubmitEvent; // 형변환을 해야 submitter가 나옴!
    console.log(nativeEvent.submitter);
    const clickedButton = nativeEvent.submitter!;
    const eForm = myForm.current!;

    if (clickedButton !== eForm["ksj"]) {
      E7ESwal.fire("눌러방 눌렀네엥");
    } else {
      E7ESwal.fire("누를깡 눌렀구망");
    }
  };

  return (
    <div>
      <form ref={myForm} onSubmit={handleSubmit}>
        <button name="smk">눌러방</button>
        <br />
        <button name="ksj">누를깡</button>
        <br />
      </form>
    </div>
  );
}

export default FormSample;

결과는 역시 예측대로당.

당신은 열정이 넘치기에 여기서 끝낸다면 화가 산만큼 커져 화산이 될게 뻔하당.

form하면 거져 생각나는 라이브러리 react-hook-form을 한번 사용해보도록 하장

https://www.npmjs.com/package/react-hook-form

먼저 지레 설치지 않도록 설칭, Terminal에 아래처럼 입력

npm i react-hook-form

HookFormSample.tsx 를 src 폴더에 맹글장.

import { useForm } from "react-hook-form";

function HookFormSample() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <div style={{ border: "5px groove blue", marginBottom: 10 }}>
      <form onSubmit={handleSubmit((data) => console.log(data))}>
        이름:
        <input
          autoComplete={"off"}
          {...register("name", { required: true, minLength: 2 })}
        />
        <br />
        나이:
        <input
          {...register("age", {
            required: true,
            pattern: /\d{2}/,
            min: 20,
            max: 99,
          })}
        />
        <br />
        별명:
        <input {...register("alias")} />
        <br />
        {errors.name && <p style={{ color: "red" }}> 이름 제대로 써달라공</p>}
        {errors.age && <p style={{ color: "red" }}> 이거 나이 맞엉?</p>}
        <button style={{ color: "magenta" }}>체킁</button>
      </form>
    </div>
  );
}

export default HookFormSample;

뽀인또는 useForm 훅인디, 개인적인 생각에도 아주 잘 만들었당.

개발자들의 form 사용 패턴을 잘 분석했다는 느끼미가 다가서는데,

Java Spring을 해본 사람이라면 Spring 서버 태그인 <form:form> 태그와

비슷하다는 뉘앙스를 떨칠 수 없음이당.~~

useForm 훅 함수가 return 해주는 register, handleSubmit, formState 3개만

사용하면 쉽게 form에 유효성 검사와 최종 form이 가진 값들을 덩어리로

사용할 수 있당. formState에서는 erros 객체만 구조분해롱 꺼냈당.

이해가 되면 복사 / 붙여넣기 사용이 당근 나라 기본 사용법이 된당.

App.tsx 를 아래처럼 수정하장.

import FormSample from "./FormSample";
import HookFormSample from "./HookFormSample";

function App() {
  return (
    <>
      <h1>너 TypeScript랑 친해?</h1>
      <HookFormSample />
      <FormSample />
    </>
  );
}

export default App;

당근 나라에서 확인한 결과는 아래와 같당.

직관적 느끼미가 빠르고 강한 사람은 느꼈을 거시당.

TypeScript를 쓴다고 해서 엄청나게 많은 코드 변화를 감당해야 하는 게 아니라는 것!

그저 lint(훈수꾼)이 밑줄 그어주는 부분에만 조금씩 대응해 주면 된다는 것!

그저 사용하다 보면 자연스럽게 TypeScript 스타일도 품을 수 있게 될꺼이당.

천천히 그저 가면 된당.

인간이라면..., 사람이라면...

수없는 반복이 지겨울 수 밖에.. 재미없을 수 밖에..

자존감이 상할 수 밖에..

반복에 댓가를 살짝 얹으면 상황은 역전된당.

도박이란 조미료를 흔들어 뿌리면 된당.

도박이 해석하는 인간은, 사람은

승리, 약탈, 소유, 우위,지배를 재밌다고 한다.

반복되는 로직!, 반복에 반복인 코딩과 도박하자.

스스로에게 베팅하라.

분명 긴 꼬리 반복 뒤에 승리의 옴팡진 댓가가 있음을..

아마도 그건 반복을 없앤 새로운 테크닉일까

성의없이 의무로 반복된 kiss는

식지않는 kiss, sunkiss를 기다린당.

https://www.youtube.com/watch?v=5PS2cJsSJrI