e7e

오늘은 HJ의 요청으로 리액트 라우터에 대해 이야기를 구찌스럽게 해보려 한당.먼저 form 전송 방식이 아닌, 데이터 관련 한 것만 B/E 서버와 비동기 AJAX로 통신하는SPA(Single Page Application) 기준으로 보면 구찌 주소표시줄 URL을 관리하는 라우터가 필요한가 의구심이 들 수도 있당. (의구심이 들었다면 오히려 감각이 뛰어나미당!) AJAX에 쓰는 URL은 주소 표시줄에 나타나지 않고, 나타낼 필요도 없음이당.SPA란 것이 최종 사용자 입장에선 거의 데스크탑 앱 느끼미당.하지만 이미 최종 사용자들은 URL 자체를 즐겨찾기에 저장하거나, URL을 보고 본인이어디에 있는지를 아는 사람들도 있기 때문에 새로운 환경을 만들기 전까지는 URL 관리가필요함을 인지 하지 아니 하지 않을 ..

React 2025. 5. 16. 00:23

어찌 Context API에 대한 글이 없는 것인가? ㅠㅠ 나의 실수당.왜 없는 것인가? 생각에 생각을 도돌이표 해보닝 https://react.dev/reference/react/useContext에 나름 설명이 아주 잘 되어 있어서 그랬던 것 같다. 하지만 부족한 부분이 있다.더미 데이터를 이용했기 때문에 비동기 초기화 및 CRUD 부분이 빠져 있당.JSON-SERVER 를 이용해서 간단히 B/E를 구성하여 핵심 중요 예제(5번)인 todo 리스트 예제를 재 구성하여 보장.단순히 더미데이터를 가지고 하는 것과 실제 B/E 연동은 실행 환경 관점에서 보면 꽤나 달라 보일 수도 있당. (달라 미국 달라 달라!) 먼저 Context API를 쓰면 좋은 점은 Props Drilling은 컴포넌트 구조가..

React 2025. 5. 13. 00:23

흐름으로 보면 앞에 했어야 했던(나의 불찰이당~ ㅠㅠ) useReducer 훅에 대해서오늘 쪼메 알아 보도록 하장. 내 느끼미는 useState를 알면,useReducer는 그냥 보면 알 수 있을거라 지레 판단하는,성급한 판단의 오류를 범하고 말았당.그랬당. 다행인 건 성급한 판단의 오류를 오류동에서 했단 거시당.useState가 너무 단순하여, 조금 더 복잡한 상황에 편하게 쓰라고 만들어 주었당.문제는 편하게 쓰라고 만들어 주었는데, 처음 본 사람은 그 형태에 당황하게 된다는 거시당. https://ko.react.dev/reference/react/useReducer에 가면 설명 뿐만 아니라 예제도 잘 나와있당. react.dev 사이트는 리액트를 하고픈 개발자라면 분명 자주 들러야 할 즐겨찾..

React 2025. 5. 7. 17:50

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