개발자 노트

이번 프로젝트는 Next.js 앱을 Docker 이미지로 만들어서 Azure App Service 에 올리고 있다.처음에는 staging 브랜치에 push 만 하면 바로 배포되게 해놨었는데, 운영하다 보니 몇 번 사고가 나서 지금의 형태로 바뀌었다. 그 과정에서 정한 것들을 정리해둘려고 한다.전체 흐름은 이렇다.feature 브랜치 ──PR──▶ staging ──workflow_dispatch──▶ Azure staging App Service │ └──PR──▶ main ──workflow_dispatch──▶ Azure production App ServiceGitHub Actions 가 Docker 이미지를 ..

Next.Js 2026. 11. 6. 16:28

요구사항이 Jira 티켓으로 들어오는 프로젝트에서, 티켓을 Claude Code 에게 던지면 PR 까지 만들고 Slack 에 기록까지 남기는 플로우를 쓰고 있다.처음에는 그냥 "이 티켓 해줘" 하고 URL 을 붙여넣었는데, 매번 같은 걸 설명하고 있었다. 브랜치는 어디서 따는지, DB 는 건드리면 안 되는지, 커밋 메시지는 어떻게 쓰는지. 결국 이 반복되는 설명을 레포 안의 스킬로 옮기게 됐다.이 글은 Claude Code 를 Jira 와 어떻게 연결했고, 스킬을 어떤 파일에 넣었고, 그 스킬이 어떤 작업을 하고, Slack 기록은 어떻게 남기는지를 큰 덩어리 위주로 정리한 것이다. 세부 규칙은 프로젝트마다 다를테니 뼈대만 적는다.1. Claude Code 와 Jira 연결연결이라고 해봐야 거창한 건 없..

AI 2026. 11. 6. 16:24

이번엔 카카오 클라우드의 인스턴스 생성/조회/활성화에 대한 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