e7e

참으로 끔찍하겡 달가운 이야기당.커스텀 훅을 잘 써야 되는 게 아니야요?~~ 그렇당 잘 써야 할 꺼이당. 컴포넌트 내부 소스를 간단히 하기 위해서도, 더불어 가독성을 올려드리고,재 사용 가능하게 맹글어서, 이 컴포넌트 저 컴포넌트에서도 널리 재활용가능하게 하기 위해서도.. ( 현실에서도 재활용은 쓰레기를 줄여준당!) 사람도 일회성이 아니고, 재활용이 가능했으면 하는 무서운 바람이 분당. Custom Hook을 만드는 건 너무나 간단하지만좋은 재사용 유용한 Custom Hook을 만드는 일은 그리 간단하지는 않당. 개인적인 추천은 컴포넌트를 만들다 보면, 컴포넌트 내부(특히 JSX 리턴 앞부분)의JS 소스가 많아지면, 보기가 조금씩 힘들어지기 시작하는데, 이것을 커스텀 훅으로별도 파일로 빼내보면 은근 슬쩍..

React 2026. 1. 19. 15:06

프로젝트는 vite로 알아서 맹글기 보통은 특별히 react-hook-form(인기 짱) 같은 라이브러리를 사용하지 않고, 직접 form을 제어한다면 아마도 아래와 같은 형태가 될 꺼이당.form 태그에 onSubmit이벤트와 ref 걸어서 사용[ 물론 누군가는 useRef를 쓰지 않고 controlled 방식을 선호할 수도 있음이당. 또 누군가는 ref없이 event.target을 쓸 수도 있당 ] App.jsximport { useRef, useState } from "react";function App() { const [data] = useState({ email: "", password: "" }); const formRef = useRef(); const handleSubmit = as..

React 2025. 12. 26. 11:17

Restful, Rest Api 하면 따라다니는 용어가 있는데, OAS => Open API Specfication => 그저 Rest 관련 표준을 정하고 있구나 생각하면 된당. => 요것땜시 open-api 란 글자들도 자주 누네띤당. HATEOAS => Hypermedia As The Engine Of Application State => 자원(Resource)에 접근하면, 해당 자원 관련 처리를 할 수 있는 추가 API 링크를 받을 수 있는 형식! 억지로 무쟈게 쉽게 얘기하면 ..

스프링부트 2025. 12. 25. 15:01

그 누구인가는 또 배운 걸 내게 묻는다.문제는 안 쓰다 보니 나도 잊어 버렸당. 더 커가는 문제는 모든 이유를 이젠 나이로 돌려버리는 습관이당. 안된당!.다시금 의욕을 가지고 확인해 보장.AOP (Aspect Of Point) 참 좋은 기능이당. 가장 흔하디 흔하고 초 간단하며 누구나 아하 하는 스토리로 하장.성능 평가를 위해 특정 컨트롤러 메소드들의 실행 시간 측정을 착하디 착한 스스로 열심인 고객이 요청을 했다고 하장. 실행 시간 측정이 필요한 메소드들에 @TimeCheck 어노테이션을 붙여서해당 어노테이션이 붙은 메소드들에만 적용되는 Aspect를만들어 log 출력을 하면 될꺼이당.[ 일일이 메소드마다 필요한 코드를 붙이는 바보같은 행동을 막기 위해 AOP는 탄생했다] pom.xml에 aop..

스프링부트 2025. 12. 19. 18:38

미쳐 몰랐다. 귀차니즘에 근거한 외면에 뿌리를 둔 나의 불찰이당.jsp(thymeleaf도)의 security 설정과 react jwt security 설정을합쳐서 만들어 내는 걸 당연히 꽤나 많이 힘들어 한다는 걸! 그냥 security도 애매모호 한데, jwt까지 붙이라닝 아마도 힘들었으리라.사실 요즘 같은 A.I 시대엔 정확히 원하는 대로 동작하는 코드는 아니더라도, 질문을 잘 하면 꽤나 괜찮은 힌트들을 얻을 수 있고,거기서 잘 시작하면 원하는 결과에 도달하는 재미난 여정을 즐길 수 있다.[ 단 기초 개념이 잘 잡혀있는 경우에 그렇다. 기초 개념이 잘 잡혀있지 않으면 때려 맞춘 결과가 소멸하는 일시적 흥분을 준다] 아래 글은 일반적인 JSP를 사용하는 경우의 Spring Security를 담..

스프링 2025. 11. 13. 16:19

리액트 하다보면 꽤나 자주 로딩 Spinner가 아쉽당.코드 동작확인이야 대충 로딩중... 이란 메세지를 띄우면 되지만사람인지라 곧 제대로 된 있어보이는 Spinner를 넣지 못한게마음에 띰띰함을 남기고... 그저 반복되는 오디 괜찮은 거 없낭?하는 당연한 아쉬움이 그렇게 스스로의 맘을 눅눅하게 만든당. 요때다 지금 상황이 그러하다면 아래 링크를 따라 가보장.https://mhnpd.github.io/react-loader-spinner/꽤나 따양하고 땀찍한 9개 Spinner가 시선을 잡아간다.[실제는 훨씬 더 많이 제공되서 기쁘미당.] 그럼 바로 사용법을 눈에 확인 시켜 주어보장.당연 폴더를 1개 만들공, vscode로 해당 폴더를 열공, 터미널에npx create-vite@latest .입..

React 2025. 11. 7. 14:41

react-router가 업그레이드 되는 바람에,기존 코드의 import가 문제되어 끝내 수정하는 수고를 하고 만당. 아니 또 누군가는 Tree 컴포넌트를 쓰고 싶단다.jstree는 jquery가 필요한 jquery 플러그인이닝, React를 쓴다면 과감없잉 버릴깡? rc-tree란 게 있당. 중국말 설명이 중국산인가 보당. 아래 npmjs에 가면 api가 테이블로 정리 되어 있당. 지금은 대략 눈치껏 확인 정도만...https://www.npmjs.com/package/rc-tree 아래 링크 가면, 실행 예제와 소스를 볼 수 있어, 어쩔 또 올 수 밖에 없낭? 하는 느낌이당. https://tree-react-component.vercel.app/demo/draggable 시작하면 절반이라 했..

React 2025. 11. 4. 12:19

드디어 svar gantt가 쓸만하게 업그레이드 되었당. (패키지이름도 wx-react-gantt에서 @svar-ui/react-gantt로 살짜기 바뀌었당) 대부분의 간트차트가 유료인 어쩔수 없는 상황에서 svar gantt는 나름 유일한 대안이었지만가이드 문서부터 실제 실행되는 모습, 리액트 버젼 지원까지 디테일하게 따지자면...문제가 한 두가지가 아니었지만... 이제는 사용해 볼만하당.(제대로 안된 문서를 읽고 버린 시간에 미쳐버린 천둥 눈물이 썰물로 빠진당.)[결코 완벽하다는 이야기는 결코 아니당. 비 바람 번개는 여전히 하늘에 산당] 아래 링크에 가면 열심히 설명한당.https://docs.svar.dev/react/gantt/getting_started/ 바로 감정 들어가 보장.당근..

React 2025. 11. 3. 12:31