개발자 노트

이번엔 카카오 클라우드의 인스턴스 생성/조회/활성화에 대한 API를 다뤄볼려고 한다. 인스턴스를 사용하기 위해서는 여러 종류가 필요해서, 이번엔 좀 공간을 분리할 예정이다. 기본설정 -Token (header에 넣어서 전송)const getAuthToken = async () => { const url = 'https://iam.kakaocloud.com/identity/v3/auth/tokens' const payload = { auth: { identity: { methods: ['application_credential'], application_credential: { id: iam.accessKey..

API 2026. 3. 22. 22:09

카카오 클라우드의 Object storage의 기본적인 업로드 및 폴더 읽는 방법에 대해서 올릴 예정입니다. 우선 카카오 클라우드의 경우 s3 와 같은 방식으로 사용이 가능하기에 s3 client 라이브러리를 사용가능합니다.npm install @aws-sdk/client-s3;const s3 = new S3Client({ region: 'kr-central-2', endpoint: S3_Config.baseUrl, credentials: { accessKeyId: S3_Config.authKey, secretAccessKey: S3_Config.secretKey, }, forcePathStyle: true,});카카오 클라우드의 object Storage에 S3용 키를 따로 발급받..

API 2026. 3. 22. 21:19

NestJS에서 TypeORM을 사용할 경우, 검색을 위해서 Input을 받아서, find나 QueryBuilder를 통해서 Where을 넣는경우가 많을 것이다. 이런 경우에 Input에 대한 Class와 Service에서 또 Where이 각각의 컬럼이 어디에 어떻게 연결될 지 정해줘야되는데, 여러 곳에서 사용하다 보니, 설정이 귀찮다. 이번 글은 조금이라도 코드를 줄이고, 중복으로 다시 입력을 없애기 위해서 해보았다. GraphQL용으로 제작하였다. @InputType()export class Where { @Field(() => String, { nullable: true }) test?: string;} const filter = {}; for (const key in where) {..

Nest.js 2026. 1. 27. 11:27

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

Nest.js 2024. 7. 18. 14:11

이번에 작성할 라이브러리는 채팅 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..

React 2024. 6. 12. 11:01

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

Next.Js 2024. 5. 22. 11:22

저번에는 프론트엔드인 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 게이트웨이에 들어..

Nest.js 2024. 5. 8. 17:05

어쩌다보니, 채팅 프로그램 비슷하게 만들일이 생겨서 웹소켓을 공부하게 되어, 간단하게 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 2024. 5. 8. 16:40