반응형 분류 전체보기214 Github-Actions Playwright Test Report 결과 PR Commnet로 남기기 📒 Github-Actions Playwright Test Report 결과 PR Commnet로 남기기Github Actions 파이프라인에서 Playwright로 E2E 테스트를 진행하고, 테스트 결과 및 소요 시간을 Pull Request Comment로 남기는 방법을 소개합니다. 📌 Playwright Report output 설정playwright.config.ts 파일에서 테스트 결과 report를 다음과 같이 설정해 주었습니다.export default defineConfig({ ... reporter: process.env.CI ? [["json", { outputFile: "results.json" }]] : "line", ...});Github Action 환경에서 돌아갈 때는.. 2024. 12. 1. [NestJS] PM2 소개부터 Docker + Github Action을 활용한 배포까지 📒 [NestJS] PM2 소개부터 Docker + Github Action을 활용한 배포까지일반적으로 NestJS 혹은 NextJS는 Node.js의 런타임 위에서 동작하기 때문에 싱글 스레드 기반으로 작동합니다.이러한 구조는 많은 요청이 들어올 경우 병목현상이 발생해 이벤트 루프가 차단되어 응답성이 저하됩니다.이럴 때 여러 프로세스를 생성하여 멀티 코어를 활용하기 위해 주로 사용하는 프로세스 매니저가 있는데요, 바로 PM2입니다. 📌 PM2란PM2는 Node.js 애플리케이션을 관리하기 위한 프로덕션 프로세스 매니저입니다.애플리케이션의 실행, 모니터링, 로드 밸런싱, 무중단 배포 등을 지원하여, Node.js 애플리케이션을 안정적으로 운영할 수 있게 도와줍니다.특히, 서버에서 Node.js 애플리.. 2024. 11. 24. [NestJS, TypeScript] Swagger API에 Generic Type 정의하는 방법 📒 [NestJS, TypeScript] Swagger에 Generic Type 정의하는 방법백엔드에서 요청과 응답을 처리할 때 일정한 템플릿이 정해져 있는 경우가 있습니다.export class SuccessResponse { @ApiProperty({ description: '응답 데이터' }) payload: T; @ApiProperty({ description: '상태코드' }) code: string; @ApiProperty({ description: '호출된 URI' }) request: string;} 위 타입은 클라이언트의 요청을 성공적으로 처리하면 보내는 데이터 타입입니다.이러한 중복되는 타입을 각 DTO마다 사용하면 불편함이 한두 가지가 아니어서 아래와 같이 제네릭 .. 2024. 11. 22. [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기검색 엔진 최적화(SEO)에서 중요한 요소로 사용되는 사이트맵은, 웹사이트의 페이지와 콘텐츠를 구조적으로 나열한 파일로, 검색 엔진과 사용자에게 웹사이트의 구조와 페이지 간 관계를 명확히 전달하는 역할을 합니다. 이번 프로젝트에서 각 프렌차이즈 브랜드마다 사이트맵을 생성하여 검색 결과에 걸리게 하기 위해 사용해봤습니다. 이번엔 NextJS AppRouter에서 사이트맵을 동적으로 생성하는 방법에 대해 소개합니다. 📌 sitemap.xml Route Handler 폴더 구조 잡기app ㄴ sitemap.xml ㄴ route.ts위와 같이 폴더 구조를 잡아주어 https://xxx.com/sitemap.xml로.. 2024. 11. 22. [NextJS, SEO] AppRouter Dynamic Metadata 생성하기 📒 [NextJS, SEO] AppRouter Dynamic Metadata 생성하기동적인 메타데이터를 사용하면 페이지마다 맞춤화된 메타 정보를 제공할 수 있습니다. 이를 통해 검색 엔진이 페이지의 목적과 내용을 더 정확히 이해할 수 있어 SEO를 향상시킬 수 있고,example.com/post/123와 example.com/post/456처럼 같은 페이지여도 독립적으로 색인될 가능성이 증가합니다. 📌 정적 메타데이터 생성NextJS에서 정적 메타데이터를 생성하는 방법은 다음과 같습니다.import type { Metadata } from 'next' export const metadata: Metadata = { title: '...', description: '...',} export defa.. 2024. 11. 21. [Nginx, Certbot] 서브도메인에 SSL 인증서 발급 후 https 설정하기 📒 [Nginx, Certbot] 서브도메인에 SSL 인증서 발급 후 https 설정하기저번달에 포트폴리오 용도로 사용할 도메인을 하나 구매했었습니다.이번에 새로운 개인 프로젝트를 하며 Nexus Docker Repository를 설치했는데, 서브 도메인에 SSL 인증서를 적용해 https로 통신하도록 했습니다.이게 자주 할 수 있는 작업이 아니기 때문에 금방 기억에서 지워질 것 같아 기록해 봅니다. 📌 CNAME 레코드 설정CNAME은 한 도메인 이름을 다른 도메인 이름에 별칭으로 연결하는 역할을 합니다.저를 예로 들면 "lasbe.kr"이란 도메인을 구매했고, docker repository 통신을 위해 CNAME 레코드를 "docker"로 설정했으면 최종적으로 "docker.lasbe.kr"로.. 2024. 11. 19. [nginx, nexus docker repository] retrying, Request Entity Too Large 에러 해결 📒 [nginx, nexus docker repository] retrying, Request Entity Too Large 에러 해결개인 서버에 Nexus Docker Repository를 구축하고 image push 테스트를 해봤는데 다음과 같은 오류가 발생했습니다. 수 번의 재시도 끝에 Request Entity Too Large라는 에러를 뱉고 결국 이미지 푸시에 실패했습니다. 구글링을 하던 끝에 Nexus 서버의 문제가 아닌 앞 단에 proxy로 두었던 Nginx 문제라는 것을 알게 되었습니다. 📌 Nginx 로그 확인$ docker logs -f proxy로그로 확인해보니 Nginx에서 client intended to send too large chunked body라는 에러를 확인했습.. 2024. 11. 18. NestJS와 prisma로 편리하게 CRUD 구현하기 📒 NestJS로 편리하게 CRUD 구현하기요즘 NestJS를 조금씩 공부하며 진도를 나가고 있습니다.그런데 사용하면 사용할 수록 "정말 편리하다"고 느끼는 중입니다. 그럼 NestJS와 prisma로 CRUD api를 구성하는 과정을 소개드리면서 어떠한 점이 편리했는지 설명하겠습니다. 📌 prisma 설치 과정prisma를 설치하고 데이터베이스를 연동하는 과정은 다음 글에 자세히 소개되어있습니다. Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기📒 Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기NestJS로 개발할 때 주로 prisma와 postgresql을 사용하는 추세입니다.왜 어떠한 특장점이 있는지, 그리고 초기 설치 방법에 대.. 2024. 11. 12. Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기 📒 Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기NestJS로 개발할 때 주로 prisma와 postgresql을 사용하는 추세입니다.왜 어떠한 특장점이 있는지, 그리고 초기 설치 방법에 대해 설명하겠습니다. 📌 prisma와 PostgreSQL의 장점🔎 prismaPrisma는 TypeScript와 JavaScript 애플리케이션에서 ORM(Object-Relational Mapping) 역할을 수행하는 도구로, 데이터베이스와의 상호작용을 간편하고 효율적으로 만들어 줍니다.Prisma는 데이터베이스 모델링, 쿼리 작성, 마이그레이션 관리 등 다양한 기능을 제공하며, 특히 TypeScript와의 강력한 호환성을 바탕으로 코드 자동 완성, 타입 검사 등을 통해 생.. 2024. 10. 31. 반응형 이전 1 2 3 4 5 ··· 24 다음
오픈 채팅
