e7e

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

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

워드프레스 공식 에디터로 유명한  editor.js !!!, 노션 으로 더욱더 유명세를 타게 된당.공식 홈페이지는 https://editorjs.io/  를 가보면 된당! 블로그 제작시에 글 작성 에디터로 넣으면 아두 꽤나 있어 보이는뎅,문제는 필요한  플러그인들이 조각 조각 분리되어 있어, 일일이 가져다 붙여줘야 한당! 그래서  아래 소스를 맹글었당!(대략 혹 필요하다 싶은 플러그인은 모두 모아보았당!)내용 저장/  내용 불러오기 기능도 당근 필요할 것이니, 샘플데이터와 함께 집약시켰당! 이 소스 하나면 블록에디터 시작에는 아마 부족함이 없을 것으로 사료되었당.(가축 사료 아니공!~~ 개발자 사료땅!) 저장 바꾸깅 실행 결과를 보면(항상 F12화면도 같이 확인하장) 아래당. 웬 ..

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

이건 그냥 재미지만, Cross-Origin에 대한 이해가 필요하당.  일단 스프링 백엔드 없이 결과를 확인 할 수 있게 웹 스토어에서 cross origin으로 검색아래 그림 모양 플러인을 설치 하도록 하장. 왱? ( cross-origin 제약을 넘기 위해 필요!)설치 했다면 디폴트로 기능이 꺼져있다.(Cross-Origin 플러그인이 활성화되어 있는 경우 해킹될 수 있다하니,꼭 사용시에만 활성화하고, 평상시에는 비활성화하여 놓도록 하장.활성화 되어 있는 경우 daum이나 naver메일등이 제대로 동작하지 않을 수도 있당) ON 시키면 준비 완료.이제 백엔드 추가 작업 없이도 Naver URL에 요청 ajax로 응답을 받을 수 있었당. 아래 html 소스를 복사/붙여넣기로 실행해 보장.(꼭 서버위에서..

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

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

React 2025. 3. 12. 12:10