개발자 노트

[NestJs/mailer] NestJs에서 ejs 를 사용하여 메일 전송하기

NestJs에서 메일 보내는 방식에 대해서 작성하겠습니다. 라이브러리가 여러 종류 있긴한데 저는 nestjs-module/mailer 라는 종류를 사용하였습니다. 우선 라이브러리를 설치합니다. npm install --save @nestjs-modules/mailer nodemailernpm install --save-dev @types/nodemaileroryarn add @nestjs-modules/mailer nodemaileryarn add -D @types/nodemailer typescript를 사용하기에 type도 같이 받아줍니다. 그리고 이메일 작성시 사용할 handlebars나 pug, ejs 중 하나를 선택하여 설치하여 줍니다.저는 ejs를 사용했습니다. npm install --sav..

[React/Chat UI 라이브러리] 간편한 채팅 UI 라이브러리 사용

이번에 작성할 라이브러리는 채팅 UI를 간편하게 구성할 수 있게 해주는 라이브러리이다.몇가지 종류가 있지만 이번에 사용해볼 chat ui는 @chatscope/chat-ui-kit-react 이다. 1. 라이브러리 설치우선 라이브러리를 설치해준다.npm install @chatscope/chat-ui-kit-reactoryarn add @chatscope/chat-ui-kit-react 2. 기본 사용법기본적인 사용법은 어렵지 않다.import React from 'react';import ReactDOM from 'react-dom';import { MainContainer, ChatContainer, MessageList, Message, MessageInput} from '@chatscop..

[NestJs/Typescript/WebSocket] NestJs에서 웹소켓 설정

저번에는 프론트엔드인 React에서 웹소켓 설정을 작성했었는데, 이번엔 백엔드에서 해볼 예정이다. 백엔드에도 라이브러리가 다 되어있기에 어렵지는 않다. 모듈 생성nest g mo events게이트웨이 생성nest g ga events 우선 간단하게 웹소켓을 사용할 게이트웨이와 모듈을 생성해준다.(모듈 따로 안만들고 App 모듈에 다 연결해도 된다.) 우선 사용할 라이브러리를 받아주고,npm i --save @nestjs/websockets @nestjs/platform-socket.ionpm i --save-dev @types/socket.iooryarn add @nestjs/websockets @nestjs/platform-socket.ioyarn add @types/socket.io 게이트웨이에 들어..

[React/WebSocket] 기본적인 React에서의 WebSocket 연결

어쩌다보니, 채팅 프로그램 비슷하게 만들일이 생겨서 웹소켓을 공부하게 되어, 간단하게 React에서 연결하는 걸 보여주려고 한다. react에서 사용하는 라이브러리중 socket.io-client 를 사용하였다. npm install socket.io-clientoryarn add socket.io-client 방식으로 설치할 수 있다. 우선 웹소켓을 연결할 준비가 되어있다는 전제로import { useEffect } from 'react';import io from 'socket.io-client';export default function WebSocket() { const socket = io('ws://localhost:8000'); useEffect(() => { sock..

[React/Typescript] React 커스텀 훅으로 페이지 새로고침 방지

웹 어플리케이션에서 양식 작성 중이거나 중요한 작업 수행 중에 실수로 페이지를 새로고침하여 진행 현황을 잃는 경우가 있다. 스마트폰으로 사용 시 위로 올리다가 새로고침 되는 경우도 다반사이다. 이러한 문제에 대한 해결책으로 usePreventRefresh라는 커스텀 훅을 생성하여 새로고침을 방지해보려고 한다. const usePreventRefresh = () => { const preventClose = (e: any) => { e.preventDefault(); e.returnValue = ''; }; // 브라우저에 렌더링 시 한 번만 실행하는 코드 useEffect(() => { (() => { window.addEventListener('beforeunload', preventClose); })..

[NextJs] next.js route 등록

NextJs는 react.js를 사용하는 SSR(Server-Side Rendering) 프레임워크이다. 그래서 reactJs의 라이브러리를 사용하지만, reactjs와 다르게 프레임워크이기에 router 등록 방식이 조금 다르다. 기존에 react.js에서는

[Typescript] 일자로 주차 구하기/주차로 일자 구하기

간단한 코드로 일자로 몇 주차인지 구하는 코드와 주차로 월요일과 일요일을 구하는 코드를 함수로 적어놓겠습니다. 일자로 주차를 구하는 코드 // 일자를 주차로 변경하는 코드 ex) getWeekly(new Date("2024-01-28")); function getWeekly(date: Date) { const currentDate = date.getDate(); // const firstDay = new Date(date.setDate(0)).getDay(); 안의 값을 0 -> 1로 교체 시 일요일 시작 const firstDay = new Date(date.setDate(0)).getDay(); return Math.ceil((currentDate + firstDay) / 7); } 이 함수를 사용하..

[NestJs/MySQL/Typescript] NestJs TypeORM을 사용한 select

이번에는 NestJs에서 TypeOrm을 사용 시, queryBuilder을 통한 select 작성법을 간단하게 작성할려고 한다. 기존에 만들어 놓은 test라는 entity가 있을 시, 사용하여 repository를 만든다 export class TestService { constructor( @InjectRepository(test) private readonly testRepository: Repository, ) {} async getValue(){ let value = await this.testRepository.createQueryBuilder() .select() .where() .orderBy() .getOne() } } 위의 형태가 기본이고 안에 들어가는 내용에 대하여 차례대로 설명할려..

[Nestjs/Typescript] NestJs에서 메일 전송하기(mailer 사용)

자동으로 메일 전송할 일이 생겨서 메일 관련 라이브러리를 찾아보다보니 편해 보여서 쓰게 되었다. https://nest-modules.github.io/mailer/docs/mailer.html NestJS - Mailer · Modules for the nestjs framework Modules for the nestjs framework nest-modules.github.io yarn add @nestjs-modules/mailer nodemailer #or npm install --save @nestjs-modules/mailer nodemailer nestjs에서 제공하는 사용법이다. 우선 mailer와 nodemailer를 설치하고, 텍스트 형식으로만 사용할 경우에는 위의 라이브러리만으로 메..

[React/Typescript] 간단한 QR생성 및 스캔 방법

이번에 프로젝트를 하면서 QR코드 생성과 스캔할 일이 있어서 여러 라이브러리를 찾아보고 테스트를 해보았다. QR 생성 QR코드 생성은 매우 편하다. qrcode.react 라이브러리를 사용하면 매우 편하게 qr코드를 생성할수 있다. yarn add qrcode.react import { Container } from "@mui/material"; import QRCode from "qrcode.react"; export default function Register() { const [value,setValue] = useState({ name: '홍길동', age: '26' }) return ( ); } 위의 코드처럼 QRCode 위치만 정해준 후 JSON.stringify에 value값만 넣으면 자동..

[React/Typescript] React 웹앱에서 카메라 사용

React 웹앱을 만들다 보면 카메라 기능을 넣고 싶은 경우가 생긴다. 이럴때 사용할 수 있는 webRTC API 사용을 간단하게 설명해 볼려고 한다. PWA를 사용하여 앱형태로도 카메라를 사용할 수 있기에 여러 방식으로 사용할 수 있다. const videoRef = useRef(null); const [isCameraOn, setIsCameraOn] = useState(false); useEffect(() => { const initCamera = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); if (videoRef.current) { videoRef.current.srcObje..

[React] React에서 xlsx와 file-saver를 사용한 excel 생성

이번 글에서는 react에서 excel을 생성하는 방법을 쓸 예정입니다. 우선 사용할 라이브러리는 xlsx와 fileSaver 2개를 같이 사용할 예정이다. yarn add xlsx file-saver 터미널에 입력하여 xlsx와 file-saver를 먼저 받아주고, import * as FileSaver from 'file-saver'; import * as XLSX from 'xlsx'; const excelFileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; const excelFileExtension = '.xlsx'; const excelFileName = `파일명`; 파일명과 파일..