React.js
-
react-query useQuery 커스텀훅으로 재사용하기React.js/React-Query 2024. 9. 20. 15:37
useQuery는 useMuation처럼 팩토리 메서드 패턴으로 커스텀훅으로 만들 필요는 없어 보였다. 그래도 중복되는 쿼리키를 가지는 useQuery는 관심사를 분리하여 재사용 할 수 있게 커스텀훅으로 만드는게 좋아 보였다. feed-id를 통해서 특정 feed를 가져오는 useQuery 커스텀훅으로 만들기feed를 수정하기 위해 피드를 가져오는 부분 Notification에서 feedId를 통해 특정 피드를 가져오는 부분 useFeedByIdQuery.ts 커스텀 훅으로 만들었을때 장점feedDetail에서는 refetch가 필요하고 CreateFeed에서 remove가 필요할때 커스텀훅을 만들어 사용하면 원하는 옵션을 호출하여 사용할 수 있다.options를 호출하는 부분에서 사용하여 enable..
-
react-query useMutation 커스텀훅으로 재사용하기React.js/React-Query 2024. 9. 15. 13:39
코드를 볼때부터 DRY를 지키지 않은 코드라는것을 바로 알 수 있다.심지어 해당 코드 중복 방식은 무려 56개의 컴포넌트에서 사용되고 있다.... 커스텀훅으로 코드 리팩토링 하기목표Loading, Report Noti 관려 라이브러리들을 커스텀훅에서 import 하고 사용하기mutationFn과 mutationKey를 커스텀훅이 호출 하는곳에서 넘겨주기 OnMutate와onError는 거의 동일하게 사용되기 때문에 고정이고처리 완료되어 성공 했을때 Report.success 부분에 옵션들과 callback 함수를 통해서 성공 후의 작업들을 처리하게끔 작성 하였다.만약에 성공후의 data를 가공하거나 해야될 경우에는 코드를 수정 해야 될것 같다. 목표대로 Noti 관련 라이브러리들을 캡슐화 되었고 mu..
-
메인 화면에서 SessionStorage를 통한 Splash 이미지를 최초 로그인일때만 보여주기React.js 2024. 9. 8. 13:30
최초로 랜딩 페이지에 왔을때 getSessionStorage를 통해서 해당 데이터가 없을 경우에 Slash 이미지를 보여주고 해당 스토리지에 데이터를 저장한다. SessionStorage를 사용한 이유브라우저 창을 닫았을 경우 사라지는 휘발성 데이터여야 한다. 브라우저창을 닫고 다시 들어 왔을때 최초 접속이기 때문이다.브라우저 창을 닫지 않는 상태에서 다시 랜딩페이지로 갔을경우 splash 이미지가 로딩되지 않아야 하기 때문에
-
팩토리 패턴을 이용하여 동적 탭 메뉴 리스트 만들기React.js 2024. 8. 10. 14:36
export interface TabeMenuListType { link: string; options: Union; title: string;}export const feedTabMenus: TabeMenuListType[] = [ { link: '/feeds?options=TOP', options: 'TOP', title: 'TOP', }, { link: '/feeds?options=MYFEED', options: 'MYFEED', title: 'MYFEED', }, { link: '/feeds?options=ALL', options: 'ALL', title: 'ALL', },]; 객체 배열을 이용하여 list에 따라 탭메뉴를 만드는 코드인데 중복 코드를 줄이는 흔한 방법이다...
-
react-date-picker 사용시 selectsRange 옵션 사용시 range limit 주기React.js/React-date-picker 2024. 8. 6. 14:19
react-date-picker 사용시 startDate와 endDate를 선택 했을 때 startDate를 먼저 선택 했을때 선택 할 수 있는 endDate의 범위를 제한 하고 싶었다. 그럴때 아래와 같은 조건을 만족 해야한다. maxDate를 이용하여 선택 할 수 있는 범위를 startDate 기준으로 설정한다.startDate 선택시에만 해당 maxDate설정을 주어야 하고 그게 아닐때는 날짜 선택이 가능하게 해야 된다.위 그림처럼 범위 제한이 없어서 굉장히 곤란하다. github와 공식문서를 모든곳을 다 뒤져보았지만 range 제한을 두는 옵션은 존재하지 않았습니다. Calendar.interface.ts Calendar.tsx datePickerOptions에서maxDateonSelect Cal..
-
react 이미지 편집 라이브러리React.js 2024. 8. 6. 09:50
https://www.npmjs.com/package/react-advanced-cropper react-advanced-cropperThe react cropper library that gives the possibility to create croppers exactly suited for your website design. Latest version: 0.20.0, last published: 2 months ago. Start using react-advanced-cropper in your project by running `npm i react-advanced-croppewww.npmjs.comreact-cropper보다 좋아보인다. 아직 베타 버전이라 주목 할 만하다.
-
react-date-picker 사용하여 time-picker 재사용 컴포넌트 만들기React.js 2024. 7. 27. 13:44
Choose an appointment time: input의 type time을 사용 했을 때 30분 간격으로 선택지를 주거나 할 때 step이란 속성을 주면 된다고 나와있지만 실제로 사용 해보면 정상적으로 동작하지 않는다. react-date-picker에서 showTimeSelectOnly 옵션을 활용하여 재사용 컴포넌트 time-picker 생성interface Props> { control: Control; name: Path; validationOptions?: Omit>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled' >;}const TimePicker = >(props: Props) => { const { control, n..