e7e

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

개인적으로 디자인을 못하기 때문에 좋아하는 건 TailWindCSS인데bootstrap 설정도 질문하는 경우가 많아성.. (그냥 해보면 그냥 되는뎅... 흉흉..)여기서 설정 한번 정리하고 가면 좋겠당 싶당. (알면 패스!!...)두개 동시에 하지말공, 그냥 둘 중 하나만 잘하면 나머진 그냥 보인당. 개인적인 추천은 당연 Tailwind CSS 당. 넘 훌륭하당.왱? 게임의 흐름을 바꾸는 자 게임 체인저!!,  CSS 사용 방식의 흐름을 바꾸었당.아 그리고 mui 라고 있는데, 이것도 엄칭 추천이당.(css를 최소로 쓰게 될거당!)https://mui.com/?srsltid=AfmBOorqmLxxHIF3IJdYJYl98MOD5FDwKGGiTcclIkILh6dfbynTszAx개발자에겐 이거이 맞을지도.....

React 2025. 3. 14. 16:49

2022.10.26 - [자바스크립트] - ag-grid 간단 사용법(사용법 쪼메 바뀜!)글은 이제 보닝, 아주 오래 되었당. 맘에 걸렸는데, 잘 되었당.다시 쓰자니, 귀찮았는데 React를 기반으로 쓴다면 또 다른 맛의 향과 열매당. React에선 사용법이 더욱 쉽당. (자동완성의 힘은 항상 게으른 날 유혹한다)API나 컴포넌트는 항상 그것을 제공하는 홈페이지의 설명으로 부터 시작하장.https://www.ag-grid.com/그곳에서 React를 클릭하여 스스로 공부 (Self-Study)가 가능하다면 당신은 이미 날 업고 넘었다. 성격이 급하고 뽀인또만 뽑고 싶은 사람들은 지금부터 나와 함께 출발하장. 이제는 생략하고픈 아래와 같은 과정을 이젠 본능적으로 하자1. 이름 영어로 아무렇게나  어딘가 나..

React 2025. 3. 14. 00:17

2025.03.10 - [React] - React(리액트) 티키타카 23 (useDebounce Hook(훅))글을 그렇게 마무리 지은 게  빨간 볼펜심으로 옆구리 살에 숨은 양심을 찌른다.이야기를 꺼냈다면 다이어트 체형이 나올 때까정 해야 그렇게 그렇게간식도 챙겨야  진정한 코스 요리 다이어트 맛이 아니던가?  use-debounce 모듈에는 useDebouncedCallback 이란 것도 들어있다. 꽌씸을 끌어야 하니, 먼저 아래 재미진 결과를 만드는  소스를 복사/붙여넣기 해성,그 결과를  시험해 보는 시간을 가지장.(맘에 안드는 고참을 괴롭힐 때 쓰면 참 좋당!~~, 조금만 머리가 좋다면 대박이당.)  App.jsximport { useState } from "react";import { use..

React 2025. 3. 12. 12:10

React에서 의외로 꽤나 필요성이 높은 훅이 useDebounce당.프론트 프레임워크에선 ajax(api 요청)를 많이 쓰다보니,실시간으로 ajax요청을 남발하면  서버에 부하가 옴팡지게 많이 걸려서,성능상 문제가 발생하게 된당.요따구 상황에서 쓰면 좋은 거이 useDebounce당. 이상하다, 항상 말이란 건 느끼미가 부족하당. 공감력이 떨어진당. 괜찮당. 먼저 debounce가 무엔지 알아보고, 다음 댄스 스텝을 밟아보장. 참고로 debounce란 말은 하드웨어서 나왔는데.  스위치가 순간적으로 on/off를 반복하게 되는 걸 bouncing이라 하고 (오 머리 아프겠당),그걸 못하게 하는 거시  debounce당.~~ 그렇당~ 필요할 것은 느끼미당. 우린 소프트웨어적인 debounce를 누느로 공..

React 2025. 3. 11. 09:10