본문 바로가기

JavaScript82

[Nest] 데코레이터 데코레이터Nest는 데코레이터를 자주 사용한다.타입스크립트의 데코레이터는 파이썬의 데코레이터나 자바의 어노테이션과 유사한 기능을 한다. 클래스, 메서드, 접근자, 프로퍼티, 매개변수에 적용 가능하다.class CreateUserDto { @IsEmail() @MaxLength(60) readonly email: string; @IsString() @Matches(/^[A-Za-z\d!@#$%^&*()]{8,30}$/) readonly password: string;}위 코드는 허용값을 제대로 요청했는 지 검사하고 있다. @IsEmail(): 이메일 형식을 가진 문자열@MaxLength(60): 길이는 최대 60자 @IsString(): password는 문자열 @Matches(...): 주어진.. 2025. 3. 16.
[Nest] 설치 및 프로젝트 만들기 Nest.js 설치 및 프로젝트 만들기nest js 설치(node.js가 없다면: https://nodejs.org/ko 여기서 다운로드 받은 뒤 터미널에서 'node -v'으로 확인)npm i -g @nestjs/clinest도 'nest -v'로 버전 확인nest project 생성 (project-name에 원하는 이름을 적으면 된다. 적지 않고 'nest new'만 입력하면 이후에 물어본다.)nest new project-nametree로 확인해보니 약 6000개의 디렉토리와 18000개의 파일이 설치 되었다.cd project-name/project로 이동 후,nest startnpm run start로 로컬에서 확인 할 수 있다. localhost:3000에 hello world가 나오면 정상.. 2025. 3. 16.
서버 트래픽 비용을 줄이고 싶을 때, Squoosh https://squoosh.app/ SquooshSimple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files.squoosh.appSquoosh란? Google Chrome Labs에서 개발한 웹 기반 이미지 압축 및 변환 도구웹 브라우저에서 직접 실행되며, 이미지 품질을 유지하면서 파일 크기를 줄이는 것이 특징주요 기능이미지 압축 (Lossy & Lossless)JPEG, PNG, WebP, AVIF 등 다양한 포맷으로 변환 가능압축률을 조절하여 화질과 파일 크기 균형 맞춤실시간 비교 (Before & After)슬라이더를 움.. 2025. 3. 6.
Prismic 1. 언제 Prismic을 사용하면 좋을까?Prismic은 Headless CMS로, 정적인 웹사이트나 동적인 웹 애플리케이션에서 콘텐츠를 유연하게 관리할 때 적합해. 다음과 같은 경우에 특히 효과적이다.마케터나 콘텐츠 팀이 자주 콘텐츠를 수정하는 경우→ 개발자가 개입하지 않고, 비개발자가 직접 관리 페이지에서 콘텐츠를 수정할 수 있다.Next.js, Nuxt.js 등과 함께 정적인 페이지를 생성할 때 (SSG, ISR)→ 정적 생성(Static Site Generation)과 궁합이 좋아서 빠른 로딩 속도를 유지할 수 있다.다국어 지원이 필요한 경우→ 다국어 콘텐츠 관리를 손쉽게 할 수 있는 기능이 제공된다.반복적인 페이지 템플릿을 사용할 때→ 블로그, 제품 페이지, 랜딩 페이지 같은 템플릿화된 페이지.. 2025. 3. 6.
전역 상태 관리 라이브러리 소개 및 사용 시기(useContext, Zustand, Jotai, Recoil, Redux Toolkit, Nuqs) 라이브러리주요 특징상태 저장 방식성능 사용 난이도새로고침 후 유지 비동기 지원useContext + useReducer기본 내장, 간단함메모리 (React 상태)중간쉬움❌ 초기화됨❌ 직접 구현 필요Zustand가볍고 빠른 전역 상태 관리메모리 (React 상태)✅ 매우 빠름✅ 쉬움❌ 초기화됨✅ 가능 (비동기 지원)JotaiRecoil-like Atom 상태 관리메모리 (React 상태)✅ 빠름✅ 쉬움❌ 초기화됨✅ 가능 (비동기 지원)Recoil공식적으로 Facebook이 개발메모리 (React 상태)✅ 빠름⚠️ 중간❌ 초기화됨✅ 가능Redux Toolkit전통적인 상태 관리메모리 (Redux Store)🚀 최적화 가능⚠️ 중간❌ 초기화됨✅ 가능 (비동기 지원)NuqsURL을 상태처럼 사용URL Quer.. 2025. 3. 5.
Upstash Upstash는 서버리스(Serverless) 환경에 최적화된 Redis 및 Kafka 기반 데이터베이스 서비스이다.Next.js, Vercel, AWS Lambda 등과 함께 저비용, 저지연, 고성능으로 사용 가능하다.언제 Upstash를 사용할까?"서버리스 환경에서 Redis가 필요할 때" → Upstash가 가장 좋은 선택"Vercel, Netlify, AWS Lambda에서 Redis를 간편하게 쓰고 싶을 때""비용을 절감하면서 빠른 Key-Value 저장이 필요할 때""Redis의 모든 기능(예: Pub/Sub, Streams)을 써야 한다면 Redis Cloud를 고려"비용 효율적이고 사용이 간편하며 Next.js와 완벽하게 호환된다Redis와 Kafka란? 더보기더보기더보기1. Redis란?.. 2025. 3. 5.
Middleware 미들웨어 사용법 Next.js Middleware 완벽 가이드1. Middleware란?Middleware는 Next.js에서 요청(Request)이 특정 페이지(Route)나 API 핸들러에 도달하기 전에 **전처리(Preprocessing)**를 수행하는 서버 측 함수이다.Middleware의 역할사용자 인증: 로그인하지 않은 사용자를 로그인 페이지로 리디렉트A/B 테스트: 특정 트래픽을 랜덤하게 다른 페이지로 분배보안 강화: 요청을 필터링하거나 차단Locale 처리: 자동으로 언어별 페이지로 리디렉트쿠키 검사: 특정 쿠키 값을 기반으로 동작 결정Middleware 실행 흐름사용자가 요청을 보냄Middleware에서 요청을 가로채고 처리함 (request 객체 활용)NextResponse를 통해 다음 단계로 넘기거나.. 2025. 3. 5.
JavaScript & TypeScript 연산자 연산자 개념 정리1. 부정 연산자 (!)참 → 거짓, 거짓 → 참 으로 뒤집음!true // false!false // true실무 예시:const isLoggedIn = false;if (!isLoggedIn) { console.log('로그인이 필요합니다');}!! 의 의미!!는 값을 boolean(true/false)으로 강제 변환하는 가장 직관적이고 빠른 방법입니다.!userId → userId가 falsy면 true (즉, 반대값)!!userId → 다시 한 번 ! 연산을 하므로 원래 값의 boolean 값이 됩니다.예시:!!123 // true!!'' // false!!null // false!!undefined // false!!'hello' .. 2025. 3. 5.
정규표현식 정규 표현식(Regular Expression)정규 표현식(Regex, Regular Expression)은 문자열에서 특정 패턴을 검색·검증·치환하기 위한 강력한 도구입니다. JavaScript, Python, Java, SQL 등 다양한 언어에서 입력값 검증, 문자열 치환, 데이터 필터링 등에 폭넓게 사용됩니다.1) 기본 문법 요약. : 임의의 한 문자예) a.b → "acb", "a1b"^ / $ : 문자열의 시작 / 끝예) ^hello, world$* / + / ? : 0회 이상 / 1회 이상 / 0 또는 1회예) a*, a+, a?{n} / {n,} / {n,m} : 정확히 n회 / 최소 n회 / n~m회예) a{3}, a{2,}, a{2,4}[abc] / [^abc] : 집합 포함 / 제외예).. 2025. 3. 5.

티스토리툴바