NestJs에 socket.io와 websocket gateway를 사용하기 위해서 공식 문서에 나온 대로 진행하였다. $ npm install @nestjs/websockets @nestjs/platform-socket.io npm 패키지를 설치하는 부분부터 의존성 이슈가 발생하였다. 기존에 사용하던 nestjs와 관련된 모든 패키지의 메이저 버전이 7.x 였는데 최신 websocket 관련 패키지를 사용하려면, 최소한 nestjs 메이저 버전이 8.x는 되어야한다고.... 기존이라면 nestjs 버전에 맞춰서 이전 버전의 패키지를 설치하겠지만, nestjs 버전 8과 버전 7의 socket.io의 버전이 메이저 버전 2.x와 4.x로 차이가 많이 발생하여 하는 김에 nestjs 공식 문서에 있는 mi..
React로 프론트를 개발하다보면, api request를 하기전에 state 값이 set되지 않아서 request시 body나 parmater에 담겨와야되는 정보가 null이나 state를 정의할 당시의 default값으로 들어오는 경우가 종종 발생한다. 물론 다른 이유로 인해 안 담겨오는 경우도 있지만, 대부분의 경우는 React의 생명 주기(LifeCycle)만 제대로 지키면 발생되지 않을 문제이기도 하다. React LifeCylcle에 대해서는 이번 포스트의 주제와는 살짝 벗어나므로 다른 포스트에서 다뤄보겠다. useEffect(() => { if (token) { const socket = io(`${process.env.REACT_APP_API_URL}/message`); setSocket(..
매일 $ npm run start:dev를 통해 NestJS 서버를 run시키지만, TimeZone 이슈가 발생하기 전까지 생각하지도 못했던 부분이었다. 아래의 코드처럼 createdAt 칼럼을 기준으로 유저 테이블에 하루동안 얼마나 많은 유저가 누적이 되었는지를 가져오는 쿼리를 구성할 때, new Date()를 통해 현재 시각을 가져오고, .setDate()를 통해 하루 이전의 시각을 가져와 그 사이에 있는 유저를 가져오도록 하려했다. async getUsersPerDay(){ const from = new Date(); const to = new Date(); from.setDate(from.getDate() - 1); return await this.repository .createQueryBuil..
어드민이나, 홈페이지에서 다운로드 버튼을 클릭하면 대량의 파일(CSV, 이미지 파일, PDF 등)을 다운로드 받아야되는 경우가 있다. 기존의 어드민에서는 다운받아야하는 파일의 개수가 1,2개 단위로 한정적이여서 아래와 같이 반복문 방식으로 react-saver 패키지의 saveAs() 메소드를 파일의 개수만큼 호출하는 방식으로 구성하였다. const saveFiles = (files: File[]) => { files.map((file: File) => { saveAs(file.url,`${file.name}.{file.type}`); // saveAs 메소드는 'file-saver.js'에서 import함 }) } 어드민에서 한번에 700~1000개 내외의 다른 포맷의 파일을 다운로드 받아야하는데 위의..
개발/NestJS 2022. 3. 12. 08:20
NestJs에 socket.io와 websocket gateway를 사용하기 위해서 공식 문서에 나온 대로 진행하였다. $ npm install @nestjs/websockets @nestjs/platform-socket.io npm 패키지를 설치하는 부분부터 의존성 이슈가 발생하였다. 기존에 사용하던 nestjs와 관련된 모든 패키지의 메이저 버전이 7.x 였는데 최신 websocket 관련 패키지를 사용하려면, 최소한 nestjs 메이저 버전이 8.x는 되어야한다고.... 기존이라면 nestjs 버전에 맞춰서 이전 버전의 패키지를 설치하겠지만, nestjs 버전 8과 버전 7의 socket.io의 버전이 메이저 버전 2.x와 4.x로 차이가 많이 발생하여 하는 김에 nestjs 공식 문서에 있는 mi..
개발/ReactJS 2022. 3. 8. 08:20
React로 프론트를 개발하다보면, api request를 하기전에 state 값이 set되지 않아서 request시 body나 parmater에 담겨와야되는 정보가 null이나 state를 정의할 당시의 default값으로 들어오는 경우가 종종 발생한다. 물론 다른 이유로 인해 안 담겨오는 경우도 있지만, 대부분의 경우는 React의 생명 주기(LifeCycle)만 제대로 지키면 발생되지 않을 문제이기도 하다. React LifeCylcle에 대해서는 이번 포스트의 주제와는 살짝 벗어나므로 다른 포스트에서 다뤄보겠다. useEffect(() => { if (token) { const socket = io(`${process.env.REACT_APP_API_URL}/message`); setSocket(..
개발/NestJS 2022. 2. 25. 08:20
매일 $ npm run start:dev를 통해 NestJS 서버를 run시키지만, TimeZone 이슈가 발생하기 전까지 생각하지도 못했던 부분이었다. 아래의 코드처럼 createdAt 칼럼을 기준으로 유저 테이블에 하루동안 얼마나 많은 유저가 누적이 되었는지를 가져오는 쿼리를 구성할 때, new Date()를 통해 현재 시각을 가져오고, .setDate()를 통해 하루 이전의 시각을 가져와 그 사이에 있는 유저를 가져오도록 하려했다. async getUsersPerDay(){ const from = new Date(); const to = new Date(); from.setDate(from.getDate() - 1); return await this.repository .createQueryBuil..
개발/ReactJS 2022. 2. 17. 08:20
어드민이나, 홈페이지에서 다운로드 버튼을 클릭하면 대량의 파일(CSV, 이미지 파일, PDF 등)을 다운로드 받아야되는 경우가 있다. 기존의 어드민에서는 다운받아야하는 파일의 개수가 1,2개 단위로 한정적이여서 아래와 같이 반복문 방식으로 react-saver 패키지의 saveAs() 메소드를 파일의 개수만큼 호출하는 방식으로 구성하였다. const saveFiles = (files: File[]) => { files.map((file: File) => { saveAs(file.url,`${file.name}.{file.type}`); // saveAs 메소드는 'file-saver.js'에서 import함 }) } 어드민에서 한번에 700~1000개 내외의 다른 포맷의 파일을 다운로드 받아야하는데 위의..