Dev갱이 Dev갱이

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에 따라 탭메뉴를 만드는 코드인데 중복 코드를 줄이는 흔한 방법이다...

결론부터 말하는 아직 방법을 찾지 못했다. 생각보다 원하는 방향으로 참고 할 만한 자료를 찾지 못했다. addSelectloadRelationCountAndMap두가지 방법을 사용해서 하는 방법이 있지만 둘다 동작하지 않는다. loadRelationCountAndMap  첫번째 인자값은 가상의 프로퍼티를 entity에 생성해주고 해당 프로퍼티를 넣어주고두번째 인자값은 관계대상의 @ManyToOne에서 post가 가르키는 post.comments를 넣어주고세번째 인자값은 alias 이름을 넣어준다. 하지만 loadRelationCountAndMap 사용은 굉장히 구리다. 일딴 무조건 getMany랑 함께 사용 해야 하는데 getMany를 사용하게 되면 select 칼럼들을 alias 할 수 없다. getM..

react-date-picker 사용시 startDate와 endDate를 선택 했을 때 startDate를 먼저 선택 했을때 선택 할 수 있는 endDate의 범위를 제한 하고 싶었다. 그럴때 아래와 같은 조건을 만족 해야한다. maxDate를 이용하여 선택 할 수 있는 범위를 startDate 기준으로 설정한다.startDate 선택시에만 해당 maxDate설정을 주어야 하고 그게 아닐때는 날짜 선택이 가능하게 해야 된다.위 그림처럼 범위 제한이 없어서 굉장히 곤란하다. github와 공식문서를 모든곳을 다 뒤져보았지만 range 제한을 두는 옵션은 존재하지 않았습니다. Calendar.interface.ts Calendar.tsx datePickerOptions에서maxDateonSelect Cal..

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보다 좋아보인다. 아직 베타 버전이라 주목 할 만하다.

useEffect(() => { const subscirbe = watch((data, { name }) => { console.log(data); console.log(name); }); return () => subscirbe.unsubscribe();}, [watch]); useEffect와 watch를 이용하여 field가 변경 될때를 감시 할 수 있다.

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..

Reference- (https://github.com/naver/passport-naver)- (https://github.com/rotoshine/passport-kakao)- (https://orangebrother.dev/blog/%08nestjs-google-oauth-passport)- (https://github.com/nestjs/passport/blob/master/lib/passport/passport.strategy.ts) NestJS에서 naver로그인과 kakao 로그인을 구현 할때 다운로드 수 와 게시글들을 비교 했을때 선택할 수 있는 라이브러리지만 9년전에 만들어 졌고 typescript를 지원하지 않는 라이브러리라 따로 @types를 설치 해주어야 한다.문제 1 NestJS에..

return ( {IntroductionData && IntroductionData.list[0] && ( {isTourist(IntroductionData.list[0]) && ( )} {isCultural(IntroductionData.list[0]) && ( )} {isFestival(IntroductionData.list[0]) && ( )} {isTourCourse(IntroductionData.list[0]) && ( )} {isLepo..