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

https://www.ag-grid.com/javascript-data-grid/getting-started/ 웹페이지를 만들다 보면 엑셀 모양의 리스트 페이지를 많이 만들게 되고 당연히 리스트를 만들면페이지 나누기와 검색기능이 들어가야 하고 업무용 이라면 사용자는 원하는 부분을 파일로 받는 것을넘어서 엑셀 시트 처럼 컬럼순서도 자유롭게 바꾸고,보고 싶은 컬럼과 보고 싶지 않은 컬럼 까지 자유롭게선택할 수 있는 기능을 요구할거시당.어쩌면 이미 엑셀등에 익숙한 사용자 입장에선 당연한 요구 지만 개발 입장에선 조금 난감하당.이 경우 서버단과 클라이언트단이 이 책임을 나누어 가지는 것은 좋은 디자인이 아니고,화면제어가 많이 필요한 상황에서 서버단이 책임을 지는 것 역시 좋은 디자인이 아닐 거시당.클라이언트 단..

자바스크립트 2025. 4. 7. 12:52

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