Zod: TypeScript 스키마 검증
·
TypeScript
# 설치npm install zod기본 사용법import { z } from "zod";// 기본 스키마 정의const userSchema = z.object({ name: z.string(), age: z.number().min(0), email: z.string().email(), website: z.string().url().optional()});// 타입 추론type User = z.infer;// 데이터 검증try { const user = userSchema.parse({ name: "John", age: 30, email: "john@example.com" });} catch (error) { console.error(error);}고급 스키마 정의const a..
React Hook Form: 폼 상태 관리
·
TypeScript
React Hook Form은 고성능의 유연한 폼 유효성 검사를 제공하는 라이브러리입니다. 불필요한 리렌더링을 최소화하고, 사용하기 쉬운 API를 제공합니다.기본 설치 및 사용법npm install react-hook-formimport { useForm } from 'react-hook-form';interface FormInputs { email: string; password: string;}function LoginForm() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data: FormInputs) => { console.log(data); }; return ( ..
PM2로 Node.js 애플리케이션 관리하기
·
Linux
PM2는 Node.js 애플리케이션을 위한 강력한 프로덕션 프로세스 관리자입니다. 자동 실행, 로그 관리, 모니터링 등 다양한 기능을 제공합니다.PM2 설치 및 기본 명령어# 전역 설치npm install -g pm2# 기본 실행pm2 start app.js# 모든 프로세스 확인pm2 list# 특정 프로세스 중지pm2 stop app_name# 모든 프로세스 중지pm2 stop all프로세스 구성 설정// ecosystem.config.jsmodule.exports = { apps: [{ name: "api-server", script: "./src/index.js", instances: "max", exec_mode: "cluster", watch: true, env..
Node-Cache : 서버 성능 최적화
·
TypeScript
Node-Cache는 Node.js 애플리케이션에서 메모리 캐싱을 구현할 수 있게 해주는 간단하고 강력한 모듈입니다. 데이터베이스 쿼리 결과나 API 응답을 캐싱하여 애플리케이션의 성능을 향상시킬 수 있습니다.기본 설치 및 설정const NodeCache = require('node-cache');// 기본 캐시 인스턴스 생성const cache = new NodeCache({ stdTTL: 600, // 기본 TTL 10분 checkperiod: 120 // 만료된 항목 점검 주기 2분});기본적인 캐시 사용법// 데이터 저장cache.set('user:123', { name: 'John', age: 30 });// 데이터 조회const data = cache.get('user:123');/..
React : map
·
TypeScript
React에서 map은 배열의 각 요소를 순회하며 새로운 JSX 요소를 생성하는 데 사용되는 필수적인 메서드입니다. 이를 통해 반복적인 UI 요소를 효율적으로 렌더링할 수 있습니다.기본적인 map 사용법const numbers = [1, 2, 3, 4, 5];function NumberList() { return ( {numbers.map(number => ( {number} ))} );}객체 배열 다루기const users = [ { id: 1, name: 'John', email: 'john@example.com' }, { id: 2, name: 'Jane', email: 'jane@e..
MongoDB 프로젝션(Projection)
·
MongoDB
프로젝션은 MongoDB에서 쿼리 결과로 반환될 필드를 선택하는 기능입니다. 필요한 필드만 선택적으로 가져옴으로써 네트워크 대역폭을 절약하고 애플리케이션의 성능을 향상시킬 수 있습니다.기본 프로젝션 문법// 기본 형태db.collection.find({}, { field1: 1, field2: 1 })// 예시: 사용자의 이름과 이메일만 가져오기db.users.find( {}, { name: 1, email: 1 })필드 제외하기// 특정 필드 제외db.users.find( {}, { password: 0, secretKey: 0 })// _id 필드 제외db.users.find( {}, { _id: 0, name: 1, email: 1 })중첩 문서의 프로젝션// 중첩..
React useEffect 의존성 경고
·
TypeScript
더보기React Hook useEffect has a missing dependency: ''. Either include it or remove the dependency arrayReact의 useEffect Hook을 사용할 때 자주 마주치는 경고 메시지에 대해 알아보고, 이를 올바르게 해결하는 방법을 살펴보겠습니다.경고가 발생하는 일반적인 상황const [data, setData] = useState([]);const fetchData = async () => { const response = await api.getData(); setData(response.data);};// 경고 발생: fetchData가 의존성 배열에 없음useEffect(() => { fetchData()..
Nginx 413 Request Entity Too Large 오류 해결
·
TypeScript
** 가이드**413 오류는 클라이언트가 업로드하는 파일이나 요청 데이터가 Nginx에서 설정된 최대 허용 크기를 초과할 때 발생합니다. 이 문제를 효과적으로 해결하는 방법을 알아보겠습니다.오류의 주요 원인파일 업로드 크기 제한 초과POST 요청 데이터 크기 제한 초과클라이언트 요청 본문 버퍼 크기 제한Nginx 설정 수정하기http { # 클라이언트 요청 본문 최대 크기 설정 client_max_body_size 100M; # 클라이언트 요청 본문 버퍼 크기 client_body_buffer_size 128k; server { # 특정 위치에 대한 설정 location /upload { # 이 위치에 대한 특별한 크기 제한 ..