전체 글
-
Typescript에서 number타입을 조금 더 정확한 타입으로 사용하기Typescript 2024. 6. 5. 21:20
{ page: number; take: number;} 꽤 많이 사용하는 page와 take 타입이 있다고 가정 했을때 page는 backend에서 요청에 따라 유동적으로 달라지겠지만 take는 보통 상수 타입을 사용하여 동일한 갯수를 가져오는데 그범위는 number타입이기 때문에 상수의 값을 1000이든 10000이든 바꿀 수 있다. 여기서 Typescript의 강점이 나타난다. 바로 Typescript를 이용하여 number의 범위를 지정 해줄 수 있는 타입을 만든다면 런타임 환경에서 범위를 체크해주는 validation 코드 없이 해당하는 범위의 number 리터럴 타입만 올 수 있게 만들 수 있다.
-
NestJS에서 repository의 insert메서드로 유동적으로 데이터 생성하기Nest.js 2024. 6. 4. 18:30
// group repository create methodexport interface ICreateGroupArgs{ id: string; name: string; description: string; memberId: string;}async createGroup(createGroupArgs:ICreateGroupArgs){ await this.groupRepository.insert(createArgs)}예를들어 그룹을 생성하는 repository 메서드의 createGroup 메서드를 생성하여 사용하고 있다고 가정 했을때만약에 group-service에서 createGroup 메서드가 있고 createGroupAndCorverImage 메서드가 있다고 가정 해보자. // grou..
-
NestJS Response Dto에 generic을 swagger ApiProperty 데코레이터에 사용하기Nest.js 2024. 6. 4. 14:34
// pagination response{ list:T[]; page:number; totalPage:number; }// cursor pagination response{ list:T[]; cursor:{ after: string; }; count: number; next: string;} 보통 pagiantion이 필요하거나 cursor pagination이 필요한 api는 위와 같은 동일한 response형식을 가질것이다. // feed-get-all-res-dto.tsimport { ApiProperty } from '@nestjs/swagger';import { FeedResDto } from './feed-res.dto';export class Fe..
-
Typescript에서 객체의 프로퍼티의 key값에 접근할때 string으로 접근 할 수 없다Typescript 2024. 5. 30. 18:14
const obj = { foo: 'hello'}let propertyName = 'foo';console.log(obj[propertyName]); TypeScript는 기본적으로 객체의 프로퍼티를 읽을 때, string 타입의 key 사용을 허용하지 않는다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ foo: string; }'. No index signature with a parameter of type 'string' was found on type '{ foo: string; }'.(7053) 에러가 발생한다. key값으로 올 수 있는 것은 str..
-
WebRTC를 사용하기 위해WebRtc 2024. 5. 29. 19:20
https://bluemiv.tistory.com/96 React와 WebRTC를 활용하여 실시간 화상 채팅 구현하기시그널링 서버(signaling server)실시간 화상채팅을 구현하기 전에 Signaling 서버에 대해 알아야 합니다. WebRTC에서 시그널링 서버(signaling server)는 매우 중요한 역할을 합니다. 이 서버는 WebRTC 연결을bluemiv.tistory.comhttps://www.npmjs.com/package/webrtc-adapter webrtc-adapterA shim to insulate apps from WebRTC spec changes and browser prefix differences. Latest version: 9.0.1, last published..
-
cookie-option secure: true 옵션 사용시 Safari localhost에서 쿠키 저장이 안되는 문제Nest.js 2024. 5. 23. 16:39
Referencehttps://shanepark.tistory.com/454 Safari 에서만 localhost에 쿠키가 저장 안되는 문제 해결문제 쿠키에 JWT 를 저장하고, 토큰값 기반 로그인을 구현 해 두었다. 그런데 Chrome 이나 Firefox, Opera 등 다른 브라우저에서는 다 문제 없이 작동하는데 유독 사파리에서만 동작이 안된다. Network를shanepark.tistory.com secure:true 옵션은 `Marks the cookie to be used with HTTPS only.` 즉 HTTPS에서만 사용가능한 옵션인데 크롬에서는 localhost에서 잘 동작하지만 safari에서는 동작하지 않는다.제목과 그대로 cookie-option중에서 secure:true는 운영 ..
-
특정한 state 값에 따른 다른 페이지 랜더링을 효율적으로 랜더링 하는 방법에 대해React.js 2024. 5. 19. 19:10
const ScheduleSidebar: FC = ({ isSelecteGroup, isScheduleName, isStartEndPeriod, isPage,}) => { return ( {isPage === 'tourismPage' && ( )} {isPage === 'periodPage' && } ... ... ... {/* 계속 쭉쭉 늘어날거에요! 가독성이 안좋습니다 */} );};export default ScheduleSidebar; isPage 상태값에 따라 `&&` 연산자를 통해서 다른 컴포넌트를 렌더링 하게끔 만들게 되었을때 가독성이 굉장히 안좋아보인다. // 호출 부모 컴포넌트// const ex..