CH's 개발 공부 일지

auth.tsimport { expressjwt } from "express-jwt";import reviewRepository from "../repositories/reviewRepository";import { AuthenticationError, ForbiddenError, NotfoundError, ValidationError,} from "../types/errors";import { NextFunction, Request, Response } from "express";function throwUnauthorizedError() { // 인증되지 않은 경우 401 에러를 발생시키는 함수 const error = new AuthenticationError("Unauthorized"..

userController.tsimport express, { NextFunction, Request, Response } from "express";import userService from "../services/userService";import auth from "../middlewares/auth";import passport from "../config/passport";import { ValidationError } from "../types/errors";import { User } from "@prisma/client";import { CreatedUserDto, LoginUserDto } from "../dtos/user.dto";const userController = express...

1. Prisma란?Prisma는 TypeScript를 완벽하게 지원하는 ORM임 주요 특징타입 자동 생성: 스키마에서 TypeScript 타입 자동 생성타입 안전성: 모든 데이터베이스 작업이 타입 안전자동 완성: IDE에서 완벽한 자동 완성 지원2. 패키지 설치 및 스키마 정의 (Prisma 7 기준) npm install prisma @types/node @types/pg --save-devnpm install @prisma/client @prisma/adapter-pg pg dotenvnpx prisma init --datasource-provider postgresql --output ../src/generated/prisma schema.prismagenerator client { provid..

1. req, res, next 타입 정의각 미들웨어 매개변수 마다 타입 지정import express, { Request, Response, NextFunction } from 'express';const app = express();app.get("/", (req: Request, res: Response, next: NExtFunction) => { res.send("Hello World");}); Request Handler에 직접 타입 지정import express, { RequestHandler } from "express";const app = express();const handler: RequestHandler = (req, res) => { res.send("Hello World")..

1. React Hook Form이란?폼 관리를 위한 리액트 인기 라이브러리 주요 장점TypeScript 지원 우수: 폼 데이터 타입을 제네릭으로 지정보일러플레이트 코드 감소: 상태, 핸들러 직접 관리 최소화유효성 검사 기능 내장: validation 기능 내장 및 확장 용이성능 최적화: 불필요한 리렌더링 최소화기본 사용법import { useForm, SubmitHandler } from 'react-hook-form';// 폼 데이터 타입 정의interface IFormData { firstName: string; lastName: string; age: number;}function MyForm() {// useForm 제네릭에 폼 데이터 타입 전달 const { register, handl..

1. useQuery에 대한 타입 지정TQueryFnData: queryFn의 리턴 데이터 타입TError: hook 내에서 발생하는 에러 타입TData: select 함수의 리턴 데이터 타입TQueryKey: queryKey의 데이터 타입useQueryuseQuery(options)2. useMutation에 대한 타입 지정TData: mutationFn의 리턴 데이터 타입TError: hook 내에서 발생하는 에러 타입TVariables: mutationFn의 매개변수 타입TOnMutateResult: optimistic update 시 onError의 세 번째 매개변수에 해당하는 OnMutateResult 타입useMutation(...)useMutation(options)Optimistic Upd..

방법 1: Context Value 초기값 제공type UserContextType = { user: User | null; login: (user: User) => void; logout: () => void;}// 기본값 제공으로 undefined 방지const UserContext = createContext({ user: null, login: () => {}, logout: () => {}});export function useUser(): UserContextType { return useContext(UserContext); // undefined 체크 불필요, but Provider 밖에서 사용해도 기본값 제공}방법 2: undefined 허용(권장)interface Auth..

1. useState 타입 정의React의 useState는 제네릭을 통해 상태의 타입을 지정할 수 있음import React, { useState } from 'react';function BasicComponent() { const [count, setCount] = useState(0); const [name, setName] = useState(''); const [isVisible, setIsVisible] = useState(false); const [age, setAge] = useState(25); const [message, setMessage] = useState('Hello'); return ( Count: {count} Name: {name} ..

1. React 이벤트 타입 기초React는 브라우저의 네이티브 이벤트를 SyntheticEvent로 래핑하여 제공함TypeScript에서는 각 이벤트별로 구체적인 타입을 제공함 주요 이벤트 타입들import React from 'react';// 1. MouseEvent - 마우스 관련 이벤트function handleClick(e: React.MouseEvent) { console.log('클릭됨:', e.button);}const handleClick: React.MouseEventHandler = (e) => { console.log('클릭됨:', e.button);}// // 2. FormEvent - 폼 관련 이벤트function handleSubmit(e: React.FormEvent) ..

1. 기본 컴포넌트 타입 지정설명Props는 interface로 정의하고 ComponentNameProps 네이밍 사용"항상 interface만 써야 한다"라는 것은 아니지만, 리액트 컴포넌트의 props처럼 하나의 객체 모양을 표현할 때는 interface가 실용적으로 더 유리한 경우가 많다고 생각하기선택적 props는 ?를 사용하고 기본값 설정 권장함수 반환 타입은 명시하지 않고 JSX 추론에 맡김React.FC는 사용하지 않는 것이 최신 트렌드 코드 예시// ✅ 권장 방식: Props interface + 함수 선언interface UserCardProps { name: string; age: number; email: string; isActive?: boolean; // 선택적 props..