전체 글

axios client 의 실전적 구성1. 문제 정의axios 클라이언트 구성을 매번 그때그때 하다보니 문제가 생길때가 많음그러다보니 구조화가 되어있지 않아 어떻게했었지 하고 또 찾아봄요청, 응답 interceptor 작성을 관성적으로 했더니 사용할때 제네릭을 두번씩 api.get 이런식으로 쓰고 있었음2개 이상의 axios 클라이언트를 만들때(ex 서버용, 클라이언트용 등) 계층화가 안되어있어 불편타입 안전성 부족과 에러 처리가 일관성이 없음환경별 설정 관리가 어려움2. 해결 방안클래스로 axios api 클라이언트를 구성한다api-client 추상 클래스 에서는 axios instance 를 생성하고 기본 메서드를 오버라이드한다기본메서드를 오버라이드 하는 이유는 사용시 제네릭 입력 두번 안하고 편하게..

Biome 로 테일윈드 클래스 저장시 자동정렬하기biome.jsonclevel을 errorfix를 safe"nursery": { "useSortedClasses": { "level": "error", "fix": "safe", "options": { "attributes": [ "classList" ], "functions": [ "clsx", "cva", "cn" ] } }}.vscode/settings.jsoneditor.codeActionsOnSave에 아..

Next.js static build + s3 조합에서 라우팅이 안된다?그렇습니다. 아래처럼 next.config 설정하고const nextConfig: NextConfig = { output: "export", // 정적 파일만 trailingSlash: true, images: { unoptimized: true },};빌드하여 s3 에 올리고 CF 붙이면메인 index.html 은 잘 나오는데 라우팅이 안됩니다.클로드쌤과 함께 해결했습니다.CloudFront FunctionsLambda@Edge보다 비용이 저렴한 CloudFront Functions를 사용해 보았습니다.function handler(event) { var request = event.request; var..

DNS와 hosts 파일 동작 원리1. 일반적인 DNS 조회 과정브라우저 → hosts 파일 확인 → DNS 서버 조회 → IP 주소 반환 → 웹사이트 접속2. hosts 파일 수정 후 과정브라우저 → hosts 파일에서 직접 IP 발견 → DNS 서버 건너뛰고 바로 해당 IP로 접속hosts 수정하여 사용하기 단계별 정리단계 1: 현재 상황 파악원래 도메인(예: example.com)이 CloudFront → S3를 가리킴하지만 Cafe24 서버(000.000.000.000)의 내용을 확인해야 함단계 2: hosts 파일 수정로컬 hosts 파일에 다음과 같은 내용 추가:000.000.000.000 example.com단계 3: 결과브라우저에서 example.com 입력 시 DNS를 거치지 않고 바로 ..

패스워드 저장 방법패스워드는 절대 평문으로 저장하면 안 되고, 해싱해서 저장해야 합니다.1. bcrypt 설치pnpm add bcryptpnpm add -D @types/bcrypt2. 회원가입 시 패스워드 해싱// app/api/auth/signup/route.tsimport bcrypt from 'bcrypt';import { prisma } from '@/lib/prisma';export async function POST(request: Request) { const { email, nickname, password } = await request.json(); // 패스워드 해싱 (saltRounds: 10~12 권장) const hashedPassword = await bcrypt.has..

질문:스키마 새로 작성시 마이그레이션, 클라이언트 생성 은 맨날 반복하면 되남유?답변:네 맞습니다! 스키마를 변경할 때마다 반복해야 해요.스키마 변경 시 워크플로우# 1. schema.prisma 수정# 2. 마이그레이션 생성 & 적용npx prisma migrate dev --name add-user-model# 3. Prisma Client 재생성 (보통 자동으로 됨)npx prisma generate중요한 점들migrate dev의 장점npx prisma migrate dev는 마이그레이션 파일 생성 + DB 적용 + 클라이언트 생성을 한 번에 처리해요--name 옵션으로 마이그레이션에 의미있는 이름을 부여하세요실제 사용 예시# 처음 User 모델 만들 때npx prisma migrate dev -..

SSO vs OAuthSSO(Single Sign-On)와 OAuth는 인증(Authentication)과 인가(Authorization) 관점에서 서로 다릅니다. 간단히 비교하면 다음과 같습니다:✅ 목적의 차이항목SSO (Single Sign-On)OAuth (Open Authorization)핵심 목적하나의 로그인으로 여러 서비스 사용제3자 앱이 사용자의 자원에 접근 허용주요 개념인증(Authentication) 중심인가(Authorization) 중심✅ 예시SSO:회사 포털에 한 번 로그인하면 이메일, 회계, 인트라넷 등 다양한 시스템에 추가 로그인 없이 접근 가능OAuth:어떤 앱이 “구글 계정으로 로그인”할 때, 구글에서 인증하고 → 해당 앱이 사용자 이메일, 프로필 등 제한된 정보에 접근하도록..

질문:seed.ts 를 작성했는데, 이거 자동 반영되나유??답변:아니요! 시드 스크립트는 앱 시작과는 별개로 수동 실행해야 해요.시드 실행 방법1. 직접 실행npx tsx seed.ts# 또는node --loader ts-node/esm seed.ts2. package.json에 스크립트 추가 (권장){ "scripts": { "dev": "next dev", "build": "next build", "seed": "tsx seed.ts" }}그러면 이렇게 실행:pnpm run seed3. Prisma 공식 방법package.json에 prisma 설정 추가:{ "prisma": { "seed": "tsx prisma/seed.ts" }}그러면 이렇게 실행:npx prisma..

질문:src/generated/prisma/index.d.ts 에 다음 코드가 있는 걸 확인 했는데, export type Post = $Result.DefaultSelectionsrc/generated/prisma 는 gitignore 처리 되어 있어요.그러면 이거.. git 에 올라가지 않으니 vercel 배포시 오류날 것 같은데,저 export type Post 부분을 prisma 에서 제공하는 인터페이스? 등을 활용해서 제가 작성해야 하나유? 답변:아니요! Vercel 배포 시 자동으로 해결돼요. 걱정하지 마세요!Vercel 배포 과정1. 빌드 시 자동 생성// package.json{ "scripts": { "build": "next build", "postinstall": "pri..

RSC에서 QueryClient 패턴질문: prisma client 혹은 다른 여러 이런 종류 클라이언트들은 singleton 으로 쓰는 경우 많은데,왜 tanstack-query server side 에서는 매번 new QueryClient() 하나유?왜 매번 새로 생성하나요?// 각 요청마다 독립적인 QueryClient가 필요async function PostPage() { const queryClient = new QueryClient() // 서버 요청별로 새 인스턴스 await queryClient.prefetchQuery({...}) return 이유서버사이드는 stateless: 각 요청이 독립적요청간 격리: 다른 사용자의 데이터가 섞이면 안됨메모리 누수 방지: 요청 완료 후 GC로 ..