분류 전체보기 썸네일형 리스트형 [ react, MUI ] 대리님이 알려준 CheckBox onChange에대한 데이터 타입 변환 공통 처리 MUI 컴포넌트중에 CheckBox가 있다.체크된 상태, 아닌 상태를 왔다갔다 하며 데이터 변환을 전달하는 용이한 컴포넌트이다. 나같은 경우 checked상태면 'Y'라는 값을 전달하고, 체크가 풀리면 'N'을 전달한다. 그걸 reactHookForm을 사용한다면setValue("flag","Y") 이런식으로 썼다. 그랬더니, 이게 ㅎ form변화가 실시간으로 개빨리 적용될 때가 있고 아닐 때도 있어서 그런지 됐다 안됐다 하는 거 아니겠음? 그래서 setValue("flag","Y",{ shouldDirty:true })옵션까지 써재끼면서 왔다갔다를 그렇게 했다...그걸 본 대리님은..이렇게 공통을 수정하셨고난 이렇게 사용하게 되었다 ㅎ 얼마나 편한지 원,,control를 인자로 받는 만큼 이 컴포넌트는.. 더보기 [ react, useHook ] 공통 컴포넌트의 실시간 데이터 전달 useImperativeHandle 훅 소개 https://ko.react.dev/reference/react/useImperativeHandle useImperativeHandle – ReactThe library for web and native user interfacesko.react.devReact를 이용하는 사람들의 대다수는 함수형 컴포넌트로 사용중이다. 과거엔 클래스형으로 사용했다는데, 난 그 땐 개발자가 아니었음 ㅎ 함수형 개발이 뭐가 좋냐?로 따지면 나는 일단 확실히... 보기 좋다라고 생각됨. 그리고 useHook이 정말 강력하다..useState, useMemo, useCallback, useEffect만 알면 프로젝트 다 할 수 있는 거 ㅇㅈ하는 부분임.하지만 같은 기능을 만들 때 useHook을 사용하면 정말 적은 비용이 듦.. 더보기 [ react, MUI ] mui의 dataGrid props "apiRef" 활용 뻔한 얘기이겠지만?? 데이터 그리드에서도 ref를 사용할 수 있다.useGridApiRef를 import하면, 데이터그리드 핸들링이 훨씬 편하다.이를 활용한 코드를 소개하려고 한다. 1. MUI 데이터그리드 정렬 기능의 동적 해제 기능 추가mui DataGrid에는 기본적으로 sorting 기능이 있다.컬럼에 마우스 오버하면 화살표가 생기면서 오름차순, 내림차순의 정렬이 가능하다. 이 때 정렬 기능을 사용하고나서 자동 해제를 동적으로 조절해야할 때가 있었다. 화면 내부에서 reset버튼을 눌렀을 때 화면을 새로 그리는데, 사실 데이터그리드는 데이터가 변경될 뿐 실제로 새롭게 화면이 렌더링이 되는 것은 아니라서 정렬 기능이 리셋되지 않았다.이 때 나는이런식으로 정렬 해제를 해주었다. reset을 알리는 상.. 더보기 useMemo, useCallback 차이점 더보기 [ MUI, Typescript ] Mutarial-UI 공통 컴포넌트 제작하면서 느낀점 Mui에는 많은 소스가 있다. 그 중에서 내가 이번 플젝 때 사용한 많~은 컴포넌트 중 하나는 바로 데이트레인지피커! 캘린더다. Range기때문에 start date, end date로 기간을 설정하는 달력인데, 이게 우리 플젝에서 나름 중요하게 쓰이는 컴포넌트였고, 당연히 다양한 기획이 있었기에 커스텀을 진행했다. 1차 땐 차장님이 만들어주신 공통 컴포넌트를 가져와 적용하면서 이해도를 높였다면 2차 땐 스스로 공통을 개발해보는 시간들이 많았는데 정말 큰 성장을 할 수 있었던 기회였다. 공통을 만든다면 대부분 재사용 가능성, 이해하기 쉬운 로직, 쉬운 유지보수가 중요할텐데 우물 안 개구리처럼 내가 만든 페이지에서 사용하는 컴포넌트들이 다른 영역에서 어떻게 쓰이는지를 경험할 수 있었던 시간이었다. 그리고 .. 더보기 [ chart.js ] chart.js 라이브러리 개발자한테 도움 요청한 후기 우리 플젝 기획서가 나와서 검토를 했는데 차트 관련 신박한 기획이 많았다. 사용하기로 한 라이브러리가 chart.js이고 다른 후보군도 있었는데 우리 플젝 환경에 집어넣기 편한 건 그나마 chart.js라고 생각해서 최우선으로 검토 해보는 중에 도저히 내 생각으로는 개발이 안될 거 같은 기획이 있었다. 근데 내가 안된다고 판단하는 것보단 나보다 더 능력있는 개발자 입장이 더 확실할테고, 그게 그 라이브러리 만든 개발자면 더 확실하지 않겠어요? Chart.js는 재밌게도 discord를 이용해 활발하게 의사소통을 하고 있었다. 그래서 바로 들어가서 물어봤음. 어학원에서 일 한 경험이 있긴 하지만 영어를 잘하진 못하는데 요즘같은 시대에 언어는..아무런 문제가 없었다ㅎ 도움을 요청했고 차트 개발자는 나를위해 .. 더보기 [ React, Typescript ] ChartJs 사용하기 chart.js 라이브러리 적용 해보고, 샘플 코드를 공유한다. 현재까지 공유된 버전이다. React를 지원하는데 Chart.js만 설치하는 게 아니고 react용 cahrt.js를 설치해줘야 한다 pnpm add chart.js react-chartjs-2 저렇게 설치를 해주고 난 후, 실제 사용하기위해서는 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; import { Doughnut } from "react-chartjs-2"; ChartJS.register(ArcElement, Tooltip, Legend); 위 작업이 필요하다. chart.js에서 사용하는 메서드를 가져온 후 react에서 사용할 수 있게 reg.. 더보기 [ Spring Boot 3 + Spring Security 6 + OAuth2.0 + JWT ] 마이그레이션과 같이 진행되는 OAuth2 로그인/회원가입 3 하던 플젝이랑 합친 거라 좀 어수선한데 Menu관련된 소스는 안봐도 됩니당. 로그인만 참고하세요 https://github.com/seulgi-i/authProject/tree/master GitHub - seulgi-i/authProject Contribute to seulgi-i/authProject development by creating an account on GitHub. github.com package com.oauth.clientserver.repository; import com.oauth.clientserver.repository.entity.UserEntity; import org.springframework.data.jpa.repository.JpaRepository; publi.. 더보기 이전 1 2 3 다음
