e7e

2024.10.14 - [React] - React(리액트) 티키타카 15 ( restful, tanstack, axios)글에서 잠깐 다루었지만도 불구하고, 은폐 엄폐된 낯설다는 의견이  어느덧 분분하여 암막커튼이 오토매틱하게 스스로 뽀인또를 드러낼 수 있도록 기본 전개를 다시 해보장. 아래 tanstack 홈페이지에 가면 실시간으로 NPM 다운로드 숫자가 표시되는데, 엄청나당.https://tanstack.com/원래는 그냥 react-query였는데, 유명해져서 @tanstack 브랜드명을 가지게 되었당. 잘 쓰고싶땅?. 잘 쓰려면 아래 3가지를 일단 브레인에 단어라도 낯설지 않게 구겨넣장.[ Restful 단어가 브레인에 잔잔하게 파도친다면 이미 너무 훌륭하당!~~]QueryClient   -> ..

React 2025. 4. 8. 21:32

간트차트는 대부분 유료당....  ㅠㅠㅠ그나마 SVAR React Gantt가 무료인데, 아래 링크에 가면 열심히 설명한당.https://docs.svar.dev/react/gantt/getting_started/ 하지만 호환성 문제가 있당. 감정없는 AI는 터무니없이 호환 된단단당. Supported Versions of React​The wx-react-gantt package is designed for React 18. Due to backward-incompatible changes in the react-dom library, it is not compatible with React 19. We plan to release an updated version that supports React ..

React 2025. 3. 27. 10:22

웹 프로그램을 하다 보면 , 당근 빼 놓을 수 없는게 자잘한 애니메이션이당.개발자의 더 큰 재미를 위해서도, 고객의 더 큰 만족을 위해서도...마치 인생에 재미가 필요하듯, 화면엔 오버스럽지 않은 애니메이션이 필요하당. 이걸 편하게 해주는 모듈이 바로 motion이당. 아래 링크에 잠시 방문하고 오장. https://motion.dev/docs 여기 설명은 당연 그 뿌리를 위 링크에 두고 있당. 긴 말은 사치당. 달려보장 먼저 vite로 react / javascript 프로젝트를 아무폴더에나 만들었다 치장. 추가 필요 모듈 설치 ( tailwindcss도 설치해서 자주 써 보도록 하장. 정말 좋당)npm i   motion          npm i  tailwindcss   @tailwindcss/v..

React 2025. 3. 26. 09:13

알리(권투선수 알리가 생각난당. 모를깡?)차트는 진정 레고 처럼 참으로 객체 지향적으로 잘 설계 되었당.하나 기억해야 할 꺼이 있는데, Recharts는 SVG로 이루어졌당. 문서도 한글이 아니어서 그렇지, 그저 아래 링크를 따라만 하는 것으로 그 메인 맥락을갖고 싶던  맥미니를  선물받은 느끼미처럼 강렬하지 아니하다 아니할 수 없당.https://recharts.org/en-US/guide/getting-started  거두절미(생선은 불쌍하당!!~~) 하고, 시동(설치, 나 지금 설치냥?) 걸고 엑셀 발바보장!npm i recharts 그럼 기본 LineChart로  Recharts에 담긴 레고 철학을 먼저 느껴보장 JunyLineChart.jsximport { Line, LineChart } fro..

React 2025. 3. 25. 12:33

그냥 alert를 디버깅이나 프로토타입이 아닌 만약 Production 모드, 곧 실제 서비스에 사용한다면 그건 거의 예의가 바닥과 키스하는 수준일거시다. 많이 사용되는 sweetalert는 react에도 역시 편하게 사용된다. 그냥 한번만 보장 설치npm i sweetalert2  sweetalert2-react-content 그냥 보기만 하면 알게 되는 억지스러운 억지 예제 중에서 억지스러울만큼억지스럽기가 억지스러운 억지스럽기 그지없는 억지 예제App.jsximport { useState } from "react";import Swal from "sweetalert2";import withReactContent from "sweetalert2-react-content";function App() { ..

React 2025. 3. 24. 12:40

CKEditor5가 좋은 기능은 거의 다 유료화되면서 참으로 쓸만한 게 잘 없당. 그래도 무료로 쓸수 있는 만큼 써보장. 첨부터 다 설정하기에는 플러그인이 너무 마나 AI가 아닌 사람으로써는 무리당.아래 builder 링크에 가서 고르는 수고가 그나마 조금 나을거시당.https://ckeditor.com/ckeditor-5/builder/ 난 Preset  Classic Editor를 선택했는뎅,  Premium이 포함되었다 하여 두번째 Features 스텝에서  일일이  골라빼보는 재미 (Productivity 와 File Management)를 하고, 세번째 Toolbar에서도 일단 그냥 재미로 암거나 ON 시키고, 마지막installation 스텝에서  아래 처럼 선택 아니하지 아니 하지 아니 할 ..

React 2025. 3. 22. 12:11

Tanstack Query(구 React-Query)에서 제공하는 무한 스크롤을 쉽게 구현하게도와주는 useInfiniteQuery를 괘니 그냥 특별한 이유없이 심심하게 해보장.[꼭 써야 하는 건 아니당. 안 쓰고도 얼마든지 구현할 수 있당. 아무튼 그러탕!] 그라믄 또 이제는 손이 지겨워할 반복 준비 작업부터 시작하장.(기본 세팅된 폴더를 가지고 있고, 그걸 복사해서 쓰고 있다면 당신은 이미 캡짱이당!) 1. 이름 영어로 아무렇게나  어딘가 나중에도 찾기 쉬운 곳에 새 폴더를 만들공2. vscode로 해당 폴더를 연 후, 터미널 열공 3. npx create-vite@latest .                         명령으로 필요한 파일들 현재 폴더에 다운로드4. npm i           ..

React 2025. 3. 19. 11:31

2025.03.12 - [React] - React(리액트) 티키타카 25 (AG-Grid 활용 1)글에 다 설명하지 못한 걸 이어 달리기로 속도 줄임없이 가보장. 먼저 이름 컬럼에 검색 기능을 괘니 넣어보장. 왱? 쉬워서 안 쓸 수 없당.data.js 의  field:name 정의 부분 끝자락에 filter:true 부터 넣어보장.const colDefs = [ { field: "name", headerName: "이름", flex: 2, valueFormatter: (p) => { // console.log("체킁2:", p); // 누느로 확인하게 뽀인또 return `${ranEmoji()} ${p.data.name}`; }, filter: tr..

React 2025. 3. 17. 21:27