Dev갱이 Dev갱이

NestJS 여러개의 exception filter와 모든 exception catch filter 사용시 주의할점에 대해서 알아보자.예시 Exception filter 종류BadRequestFilter : 400 bad request 를 catch 하는 filterServiceHttpExceptionFilter : service 에러 catch 하는 filterAllExceptionFilter : 모든 에러를 catch 하는 filter// exceptionapp.useGlobalFilters( new BadRequestServiceExceptionFilter() new ServiceHttpExceptionFilter(), new AllExceptionFilter(httpAdapterH..

monitoring 하는 여러가지 방법들이 존재하고 백엔드에 국한되지 않고 프론트에서도 꼭 필요하다. 이는 production 환경에서 문제를 해결하는데 있어서 중요한 역할을 하기 때문이다.목표winston을 통해 Log 파일을 기록과 Log관리sentry를 통해 모니터링과 slack을 통한 실시간 알림 보내기1. winston을 통한 Log파일 생성과 Log 관리$ winston nest-winston$ winston-daily-rotate-file 필요 라이브러리를 설치 해준다. 2. winston과 winston-daily-rotate-file을 위한 설정 파일 작성common/logger/winston.tsimport { WinstonModule, utilities } from 'nest-wins..

TypeORM의 쿼리빌더 사용시에 where절을 사용하는 메서드 where, andWhere, orWhere 사용시에 괄호를 사용하여 where절에 사용하고 싶으면 Brackets를 사용하면 된다.SelectQueryBuilder.d.ts Brackets 사용 괄호로 감싸주고 싶을때 사용 WHERE "a"."isPublic" = true OR "a"."memberId" = '410b7202-660a-4423-a6c3-6377857241cc' AND "a"."isPublic" = false 실제 쿼리 인데 OR 뒤의 부분을 괄호를 이용하여 감싸고 싶을때 사용 하면된다.  WHERE "a"."isPublic" = true OR ("a"."memberId" = '410b7202-660a-4423-a6c3-6..

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가 변경 될때를 감시 할 수 있다.