본문 바로가기

전체 글384

터미널에서 mermaid 파일 변환하기 vs-code 터미널에 아래 명령어를 입력하여 mermaid-cli를 설치합니다.npm install -g @mermaid-js/mermaid-cli 아래의 diagram.mmd 처럼 원하는 내용으로 파일을 생성합니다. 간단하게 gpt에 '로그인 흐름을 정리한 mermaid 작성해줘.' 라고 입력하여 생성해 봅니다.sequenceDiagram participant Client participant Frontend participant Backend participant Redis Note over Client,Frontend: 1. 로그인 요청 Client->>Frontend: 로그인 정보 입력 Frontend->>Backend: POST /auth/login (id.. 2025. 4. 23.
socket 1 import { WebSocketServer } from 'ws';import path, { dirname } from 'path';import express from 'express';import { fileURLToPath } from 'url';const __filename = fileURLToPath(import.meta.url);const __dirname = dirname(__filename);const app = express();app.use('/', (req, res) => { res.sendFile(path.join(__dirname + '/index.html'));});app.listen(3000);const socket = new WebSocketServer({ port: 3001.. 2025. 4. 19.
express-generator npm i express-generator -gexpress 프로젝트 생성express -h 명령어 확인npm installwww 파일 port 3000->9999npm start app 2025. 4. 18.
🐳 Docker 자격 증명 에러 해결하기 (docker-credential-desktop not found) Git Bash에서 docker-compose up 실행 시docker-credential-desktop: executable file not found 오류가 발생했다.$ docker-compose up[+] Running 0/1 - pgadmin Pulling 0.0s error getting credentials - err: exec: "docker-credential-desktop": executable file not found in %PATH%, out: `` where docker-credential-desktop 명령어를 실행하여 확인해보니 해당 파일은 존재한다.$ where docker-credential-desk.. 2025. 4. 10.
NestJS에서 DTO는 왜 클래스(class)로 작성해야 할까? NestJS 실습을 하다 보면 DTO(Data Transfer Object)를 클래스(class)로 작성하는 것을 자주 보게 됩니다. 그런데 TypeScript에서는 interface도 타입 정의가 가능한데, 왜 하필 클래스를 쓰는 걸까요?그 이유는 바로 런타임(Runtime)에 있습니다.interface는 컴파일 타임에만 존재TypeScript의 interface는 오직 컴파일 타임에만 존재합니다. 즉, TypeScript가 JavaScript로 변환될 때 인터페이스는 전부 사라집니다. 런타임에는 아무 정보도 남아있지 않기 때문에, 실행 중에 이 타입을 활용할 수 없습니다.interface CreateUserDto { name: string;}이렇게 작성된 인터페이스는 JS로 컴파일되면 완전히 없어집.. 2025. 4. 8.
성능 측정 지표 Core Web Vitals (LCP, INP, CLS) 알아보기 1. LCP (Largest Contentful Paint)👉 페이지에서 가장 큰 콘텐츠(예: 이미지, 텍스트 블록)가 화면에 렌더링되는 데 걸리는 시간항목설명의미유저가 페이지 로딩이 끝났다고 느끼는 시점대상 요소큰 이미지, , 등의 텍스트 블록기준 (좋음)2.5초 이하면 우수개선 방법이미지 최적화, 서버 응답 속도 개선, 폰트 로딩 최적화💡 예시:사용자가 사이트에 들어왔을 때, 화면 대부분을 차지하는 배너 이미지가 2.3초만에 나타나면 → LCP = 2.3s2. INP (Interaction to Next Paint)**👉 사용자가 버튼을 누르거나 입력을 했을 때, 화면에 반응이 렌더링되기까지 걸린 시간항목설명의미반응성(Responsiveness) 측정대상클릭, 키보드 입력 등 모든 사용자 인터.. 2025. 3. 23.

티스토리툴바