e7e

headless ui 컴포넌트 템플릿 shadn ui가 인기가 있다고 하닝.css 게임 체인저 tailwindcss 와 함께 쓰면 찰떡 궁합이겠거니 생각이 든당. headless 컴포넌트란 기능만 로직만 되어 있고, css가 안되어 있는 걸 말한당.화장하지 않은 그녀라 말해도 될깡?의외로 headless 란 말은 많이 사용되는데.. 암튼 아래 참조당. 느끼미 왔당headless server => 모니터 없는 서버headless jdk => GUI 라이브러리 뺀 jdkheadless os => GUI 없이 터미널만 있는 OS vite에서의 설치는 아래 링크가 공식 참조당.https://ui.shadcn.com/docs/installation/vite 암튼 요즘엔 눈으로 보고, 손으로 ..

React 2026. 1. 28. 18:51

당연할꺼당. React에도 테스트가 존재하련당.최근에 vitest란게 따사한 눈총을 받고 있당. 편하당. 한번 써 볼까낭 해보장. 먼저 사이트에 가서 대략 들러보기 해보장https://vitest.dev/guide/ 먼저 vite를 이용해서 리액트 프로젝트를 만들었당 치자. vitest와 함께 필요한 걸 설치( -D 옵션 알디용!) npm i -D vitestnpm i -D happy-domnpm i -D @testing-library/reactnpm i -D @testing-library/jest-domhappy-dom 은 jest-dom 보다 심플한 상황에서 쉽게 쓸 수 있는 DOM(Document Object Model) 이당.(지나치면 본 기억이 남는당) src 폴더에 간단히 아래와 같은 ..

React 2026. 1. 27. 21:43

참으로 끔찍하겡 달가운 이야기당.커스텀 훅을 잘 써야 되는 게 아니야요?~~ 그렇당 잘 써야 할 꺼이당. 컴포넌트 내부 소스를 간단히 하기 위해서도, 더불어 가독성을 올려드리고,재 사용 가능하게 맹글어서, 이 컴포넌트 저 컴포넌트에서도 널리 재활용가능하게 하기 위해서도.. ( 현실에서도 재활용은 쓰레기를 줄여준당!) 사람도 일회성이 아니고, 재활용이 가능했으면 하는 무서운 바람이 분당. Custom Hook을 만드는 건 너무나 간단하지만좋은 재사용 유용한 Custom Hook을 만드는 일은 그리 간단하지는 않당. 개인적인 추천은 컴포넌트를 만들다 보면, 컴포넌트 내부(특히 JSX 리턴 앞부분)의JS 소스가 많아지면, 보기가 조금씩 힘들어지기 시작하는데, 이것을 커스텀 훅으로별도 파일로 빼내보면 은근 슬쩍..

React 2026. 1. 19. 15:06

프로젝트는 vite로 알아서 맹글기 보통은 특별히 react-hook-form(인기 짱) 같은 라이브러리를 사용하지 않고, 직접 form을 제어한다면 아마도 아래와 같은 형태가 될 꺼이당.form 태그에 onSubmit이벤트와 ref 걸어서 사용[ 물론 누군가는 useRef를 쓰지 않고 controlled 방식을 선호할 수도 있음이당. 또 누군가는 ref없이 event.target을 쓸 수도 있당 ] App.jsximport { useRef, useState } from "react";function App() { const [data] = useState({ email: "", password: "" }); const formRef = useRef(); const handleSubmit = as..

React 2025. 12. 26. 11:17

Restful, Rest Api 하면 따라다니는 용어가 있는데, OAS => Open API Specfication => 그저 Rest 관련 표준을 정하고 있구나 생각하면 된당. => 요것땜시 open-api 란 글자들도 자주 누네띤당. HATEOAS => Hypermedia As The Engine Of Application State => 자원(Resource)에 접근하면, 해당 자원 관련 처리를 할 수 있는 추가 API 링크를 받을 수 있는 형식! 억지로 무쟈게 쉽게 얘기하면 ..

스프링부트 2025. 12. 25. 15:01

그 누구인가는 또 배운 걸 내게 묻는다.문제는 안 쓰다 보니 나도 잊어 버렸당. 더 커가는 문제는 모든 이유를 이젠 나이로 돌려버리는 습관이당. 안된당!.다시금 의욕을 가지고 확인해 보장.AOP (Aspect Of Point) 참 좋은 기능이당. 가장 흔하디 흔하고 초 간단하며 누구나 아하 하는 스토리로 하장.성능 평가를 위해 특정 컨트롤러 메소드들의 실행 시간 측정을 착하디 착한 스스로 열심인 고객이 요청을 했다고 하장. 실행 시간 측정이 필요한 메소드들에 @TimeCheck 어노테이션을 붙여서해당 어노테이션이 붙은 메소드들에만 적용되는 Aspect를만들어 log 출력을 하면 될꺼이당.[ 일일이 메소드마다 필요한 코드를 붙이는 바보같은 행동을 막기 위해 AOP는 탄생했다] pom.xml에 aop..

스프링부트 2025. 12. 19. 18:38

미쳐 몰랐다. 귀차니즘에 근거한 외면에 뿌리를 둔 나의 불찰이당.jsp(thymeleaf도)의 security 설정과 react jwt security 설정을합쳐서 만들어 내는 걸 당연히 꽤나 많이 힘들어 한다는 걸! 그냥 security도 애매모호 한데, jwt까지 붙이라닝 아마도 힘들었으리라.사실 요즘 같은 A.I 시대엔 정확히 원하는 대로 동작하는 코드는 아니더라도, 질문을 잘 하면 꽤나 괜찮은 힌트들을 얻을 수 있고,거기서 잘 시작하면 원하는 결과에 도달하는 재미난 여정을 즐길 수 있다.[ 단 기초 개념이 잘 잡혀있는 경우에 그렇다. 기초 개념이 잘 잡혀있지 않으면 때려 맞춘 결과가 소멸하는 일시적 흥분을 준다] 아래 글은 일반적인 JSP를 사용하는 경우의 Spring Security를 담..

스프링 2025. 11. 13. 16:19

리액트 하다보면 꽤나 자주 로딩 Spinner가 아쉽당.코드 동작확인이야 대충 로딩중... 이란 메세지를 띄우면 되지만사람인지라 곧 제대로 된 있어보이는 Spinner를 넣지 못한게마음에 띰띰함을 남기고... 그저 반복되는 오디 괜찮은 거 없낭?하는 당연한 아쉬움이 그렇게 스스로의 맘을 눅눅하게 만든당. 요때다 지금 상황이 그러하다면 아래 링크를 따라 가보장.https://mhnpd.github.io/react-loader-spinner/꽤나 따양하고 땀찍한 9개 Spinner가 시선을 잡아간다.[실제는 훨씬 더 많이 제공되서 기쁘미당.] 그럼 바로 사용법을 눈에 확인 시켜 주어보장.당연 폴더를 1개 만들공, vscode로 해당 폴더를 열공, 터미널에npx create-vite@latest .입..

React 2025. 11. 7. 14:41