e7e

간트차트는 대부분 유료당....  ㅠㅠㅠ그나마 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

요즘엔 거의 쓰이지 않는다고 생각했는데....필요한 사람이 있다닝.... 다시 한번 만들어 본당.그저 랜덤함수로 주민번호 형태를 만들다가 마지막 자리수만 주민번호 생성 알고리즘대로 나오는 숫자를 넣으면 그만이이당. 그렇당 주석을 마니 마니 다러노아쓰니  참꼬 참고하도록 하장!주민번호생성.html 영시니 주민번호 생성기 눌러방방  결과는 뻔하고 뻔하닝 줄여서 뻔뻔하다 하겠당. 더미 데이터 생성시에 위 함수만 뽑아서 입맛에 맞게 수정해 쓰면 그만  일거시다.    https://www.youtube.com/watch?v=BFneXcaG_kU

자바스크립트 2025. 3. 24. 20:20

그냥 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

AJAX로 직접 파일을 받아서 쓰는 건 생각보다 훨씬 유용하지 않을 수 없당.잘 쓰지 못해서 안 쓸 뿐, 이번 기회에 정리해서 다시는 날개를 접지 말장 sample1.html 실행 해보면 자동으로 파일4개가 다운됨을 알수 있당.[만약 console에 Cross-Origin 에러가 났다면 브라우져 플러그인 Cross-Origin을 실행하장 참고로 이 브라우져 플러그인은 그리 안정적이진 못하다 별 3개 반.] 위 코드는 자세히 보면 a  태그 만들고 하는 부분이 반복이 심하당.이럴땐 머리에 DRY(Do not Repeat Yourself) 원칙 과KISS(Keep It Simple, Stupid) 원칙이 생각나면 아름다운 후광이당. 사포로 조금 손질 좀 해보장.sample2.html ..

자바스크립트 2025. 3. 20. 12:50

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

React 2025. 3. 19. 11:31