개발자 노트

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

[NextJs] CSR, SSG, SSR, ISR 렌더링 방식

이번 글에서는 Nextjs에서 사용하는 렌더링 방식에 대해서 작성할 것이다. CSR(Client Side Rendering)CSR은 reactjs에서 개발할때, 사용하는 방식처럼 렌더링 주체가 클라이언트인 경우이다.초기에 HTML 빈 페이지가 먼저 표기된 후 데이터가 받아져 데이터가 채워지는 형태이다. 장점  - 초기 로딩 이후에는 빠른 UX를 제공하고 서버에 부하가 적다. 단점  - 처음으로 페이지에 접속할 때 로딩 시간이 오래 걸린다.  - javascript가 필수적으로 필요하다.  - 보안에 취약함  - SEO에 불리 사용법  - axios나 fetch등을 사용한다.  - nextjs에서 CSR을 사용시에는 SWR을 추천한다. SSG(Static Site Generation)SSG는 렌더링을 하는..

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

[API/NestJs] 구글 토큰 값을 활용한 캘린더 데이터 받아오기

이번 글에서는 구글 console에서 받은 token 값을 활용한 구글 캘린더를 가져와 볼 예정이다. token과 refresh token 가져오는 법 및 권한 설정은 https://startedev-jay.tistory.com/19 [API] 구글 캘린더 읽어오기 위한 권한 설정 및 token 값 받아오기 이번 글은 구글 캘린더에서 특정 캘린더를 읽어오는 api에 대해서 정리할 예정이다. 우선 구글 계정에 접속하여, https://console.cloud.google.com/ Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으 startedev-jay.tistory.com 위의 글을 보고 오면 된다. token 값이 있다면 사용하는 방식이 어렵지는 않기에 매우 간단히 정리해보려고 한다. ..

[API] 구글 캘린더 읽어오기 위한 권한 설정 및 token 값 받아오기

이번 글은 구글 캘린더에서 특정 캘린더를 읽어오는 api에 대해서 정리할 예정이다. 우선 구글 계정에 접속하여, https://console.cloud.google.com/ Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 위의 주소로 들어간다. 처음 들어가면 프로젝트가 없기때문에 새프로젝트를 선택하여 프로젝트를 하나 생성한다. 그 후 왼쪽 상단의 메뉴 > API 및 서비스 > 라이브러리로 접속하여 검색창에 calendar를 입력후 google calendar api에 들어가서 사용을 누르면 calendar api를 사용할 수 있게 된다. 이제 보안 권한을 위해서 왼쪽 상단의 메뉴 > API 및 서비스 > OAuth 동의화면으로 접속한다. 외부를..

[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); } 이 함수를 사용하..

[React/카카오톡 API] 카카오맵을 사용한 위치 검색 API 생성

이번 검색에서는 react가 아닌 nextjs에서 사용을 했었는데, react에서 사용하는 라이브러리인 react-kakao-maps-sdk를 처음에 사용했었다. 하지만 nextjs에서 맵을 좌표로 띄울때는 편했지만, 검색 기능 사용법을 몰라서 기본적인 API로 검색하게 되었다. 방식은 카카오톡에 나와있는 방식 그대로 사용하였다. kakaoMap 컴포넌트를 따로 만들었고, import React, { useEffect, useState } from "react"; // 카카오 api에서 받아온 token값을 입력해주고, 뒤의 libraries=services를 입력해줘야지 검색 기능을 사용할 수 있다. const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?ap..

[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() } } 위의 형태가 기본이고 안에 들어가는 내용에 대하여 차례대로 설명할려..