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

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

React 2025. 11. 7. 14:41

아니 또 누군가는 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로 필요한 프로젝트 맹글었..

React 2025. 11. 4. 12:19

드디어 svar gantt가 쓸만하게 업그레이드 되었당. (패키지이름도 wx-react-gantt에서 @svar-ui/react-gantt로 살짜기 바뀌었당) 대부분의 간트차트가 유료인 어쩔수 없는 상황에서 svar gantt는 나름 유일한 대안이었지만가이드 문서부터 실제 실행되는 모습, 리액트 버젼 지원까지 디테일하게 따지자면...문제가 한 두가지가 아니었지만... 이제는 사용해 볼만하당.(제대로 안된 문서를 읽고 버린 시간에 미쳐버린 천둥 눈물이 썰물로 빠진당.)[결코 완벽하다는 이야기는 결코 아니당. 비 바람 번개는 여전히 하늘에 산당] 아래 링크에 가면 열심히 설명한당.https://docs.svar.dev/react/gantt/getting_started/ 바로 감정 들어가 보장.당근..

React 2025. 11. 3. 12:31

아무래도 때가 된 것 같다.이제 부터는 TypeScript로 리액트를 해보장.Node와 vscode는 당근으로 이미 설치되어 있어야 한당. TypeScript가 대략 먼지는? 아래 글을 읽고 오장 (싫다면 그러렴)2025.01.13 - [자바스크립트] - TypeScript(타입스크립트) 넌 머냥? 거두절미 하고 바로 퐁당 들어가 보장. (실무는 실체적 느끼미가 중요하당)나의 경우 react-type1(꼭 소문자로)으로 새 폴더를 만들어서 열었당. Terminal -> New Teriminal을 열고는 아래 명령어를 치장(Powershell 이 문제를 일으키면 그냥 cmd라고 치고 다시 한당)npx create-vite@latest .아래 처럼 선택 하여 본당. 참고로 rolldown-vite는 Exp..

React 2025. 10. 21. 20:03