전체 글212 [React] react 렌더링 방식 이해와 memoization 가상 DOM과 부분 렌더링 방식이해가상 DOM의 작동 방식가상 DOM 생성: 브라우저의 실제 DOM과 별개로 메모리에 가상 DOM 객체를 생성합니다.상태 변화 감지: 데이터나 상태가 변경되면, 새로운 가상 DOM 트리가 생성됩니다.차이점 계산(Diffing): 기존 가상 DOM과 새 가상 DOM을 비교하여 정확히 어떤 부분이 변경되었는지 파악합니다.부분 업데이트(Reconciliation): 변경된 부분만 실제 DOM에 적용합니다.랜더링 최적화의 필요성상태가 변경됨에 따라 컴포넌트가 재렌더링되는 과정에서 하위 컴포넌트 역시 재렌더링 되어 일부 불필요한 렌더링이 발생할 수 있습니다.예를 들어 Context API 의 Context 및 state 값이 변경되면, 해당 컴포넌트의 모든 자식 컴포넌트들도 기본적.. 2025. 3. 16. ESLint 9 버전 Flat config 기존 8 버전 eslint 구조 이해주로 설정 세트를 가져오고(extends) 특별한 기능 지원이 필요한 경우 plugins 에 등록, 나머지 세부 설정(env, parser, settings, etc..) 및 일부 변경이 필요한 규칙의 경우 rules 에서 작성하는 구조// 기존 .eslintrc.json 파일 구조{ "extends": [ ... ], "plugins": [ ... ], "rules": { ... }, ...etc }8 버전 vs 9 버전 Flat config이전 8 버전계층적인 구조(extends, overrides)를 사용파일별로 설정을 병합하는 방식CommonJS 기반의 JS 설정만 지원new 9 버전 Flat config배열 기반 설정: 설정을 하나의 배.. 2025. 3. 6. cookie domain 으로 "vercel.app" 사용 시 생긴는 에러와 PSL,TLD,eTLD 이해 cookie domain 으로 "vercel.app" 사용 시 생기는 오류vercel로 배포 시 [...].vercel.app의 형태로 도메인이 지정되므로 vercel 로 배포한 프런트 서버와 백엔드 서버에서 쿠키를 같은 도메인으로써 공유하고 사용할 수 있을 거라 판단하여 응답 헤더에 Set-Cookie-"domain=vercel.app ...를 사용했더니"this attempt to set a cookie via a set-cookie header was blocked because its domain attribute was invaild with regards to the current host url"메시지와 함께 쿠키가 저장되지 않는 상황을 맞이하여 이유를 찾다 예상되는 이유를 발견 vercel.. 2025. 2. 12. [Nextjs 15] Uncaught Error: Switched to client rendering because the server rendering errored 에러 에러 발생nextjs 에서 비동기 요청 과정 중 자연스러운 ui 흐름을 구성하기 위해 useSuspenseQuery + Suspense + react-error-boundary 를 활용하는 중 "Uncaught Error: Switched to client rendering because the server rendering errored" 에러 발생"Uncaught Error: Switched to client rendering because the server rendering errored" 설명이 에러는 Next.js에서 발생하며, 서버 사이드 렌더링(SSR) 중에 오류가 발생하여 **클라이언트 사이드 렌더링(CSR) 으로 자동 전환**되었음을 의미합니다.Next.js App Router 환경에.. 2025. 2. 7. [Nextjs 15] Route handler cors 설정 설명route handler 를 통한 응답 헤더 cors 설정 방법 공식문서에서는 middleware.ts 및 next.conifg.ts 에서 설정하는 것을 추천cors 헤더 설명Access-Control-Allow-Origin요청을 허용할 출처(origin)를 지정* 는 모든 출처를 허용하지만, 인증된 요청(예: 쿠키 포함 요청)에는 사용 불가합니다.Access-Control-Allow-Methods서버가 허용하는 HTTP 메서드(GET, POST, PUT 등)를 지정기본적으로 서버는 GET, HEAD, POST만 허용Access-Control-Allow-Headers클라이언트가 요청할 때 사용할 수 있는 요청 헤더를 지정Access-Control-Allow-Credentials인증 정보를 포함한 요청.. 2025. 2. 7. [Prisma] 6. Pagination & Aggregation 앞으로 등장할 코드에서 prisma 변수는 const prisma = new PrismaClient() 를 의미합니다.mysql 사용 기준으로 작성되어 몇몇 기능 및 지원에 대한 내용이 없을 수 있습니다. PaginationPrisma Client는 offset pagination 과 cursor-based pagination 을 모두 지원합니다.1. Offset Pagination데이터베이스에서 데이터를 페이징할 때시작 지점(offset) 과 가져올 데이터 수(limit)를 기반으로 데이터를 가져오는 방식입니다. 주로 SQL 쿼리의 OFFSET 과 LIMIT을 사용합니다. 대부분의 데이터베이스가 LIMIT 과 OFFSET을 지원하며, 로직도 간단하게 구현할 수 있는 반면 OFFSET 값이 커질수록 성능.. 2025. 1. 18. [Prisma] 5. Nested Queries 앞으로 등장할 코드에서 prisma 변수는 const prisma = new PrismaClient() 를 의미합니다.mysql 사용 기준으로 작성되어 몇몇 기능 및 지원에 대한 내용이 없을 수 있습니다.Nested Queries단일 Prisma Client 쿼리를 사용하여 여러 테이블의 데이터를 한 번에 생성, 업데이트 또는 삭제할 수 있도록 하며, 이 모든 작업이 트랜잭션으로 처리되도록 보장합니다.쉽게 말해, 여러 테이블 간의 관계를 처리할 때, 한 번의 요청으로 모든 관련 데이터를 안전하게 처리할 수 있습니다. 만약 작업 중 하나라도 실패하면, 전체 작업이 롤백되어 데이터의 일관성을 유지할 수 있습니다.관련 레코드 생성createMany()는 중첩된 관계를 처리하지 않고 단순히 여러 레코드를 생성할.. 2025. 1. 17. [Prisma] 4. query filtering & sorting 앞으로 등장할 코드에서 prisma 변수는 const prisma = new PrismaClient() 를 의미합니다.mysql 사용 기준으로 작성되어 몇몇 기능 및 지원에 대한 내용이 없을 수 있습니다.Query Optionwhere : 필드 필터링- filters// equals: 값이 n 과 동일한 경우const result = await prisma.user.findMany({ where: { name: { equals: 'Eleanor' }, // or name: 'Eleanor' },});// not: 값이 n과 다른 경우await prisma.user.findMany({ where: { OR: [ { name: { not: 'Eleanor' } }, { na.. 2025. 1. 17. [Prisma] 3. Prisma query 사용 (CRUD, query options) 앞으로 등장할 코드에서 prisma 변수는 const prisma = new PrismaClient() 를 의미합니다.mysql 사용 기준으로 작성되어 몇몇 기능 및 지원에 대한 내용이 없을 수 있습니다.Generated Typeprisma generate 명령어 실행 시 기본적으로 각 model type 이 생성되고 query 의 옵션, 필터, 입력값, 결과값 등등 여러가지 관련 type 또한 생성되어 필요한 경우 import 하여 사용할 수 있습니다.example// ex) UserCreateInputtype UserCreateInput = { name: string; email: string;};// generated type 사용 예시import { Prisma } from "@prisma/.. 2025. 1. 14. [Prisma] 2. Prisma Model 디테일 mysql 사용 기준으로 작성되어 몇몇 기능 및 지원에 대한 내용이 없을 수 있습니다. Model 설명데이터 모델은 애플리케이션의 주요 개념(예: 사용자, 게시글, 댓글 등)을 표현하는 객체가 되며 데이터베이스의 테이블에 매핑됩니다. 데이터 모델은 Prisma가 자동으로 생성하는 Prisma Client API의 기반이 되어 해당 모델에 대한 CRUD 쿼리 제공 및 자동으로 타입을 정의합니다.모델 생성 Prisma 에서 데이터 모델을 생성하는 방법 2가지Introspection : 현재 DB 내용을 기준으로 데이터 모델 생성Model Definition : 데이터 모델을 수동으로 작성하고 DB 에 업데이트1. IntrospectionPrisma CLI 를 사용하여 데이터베이스를 내부적으로 조사하여 Pri.. 2025. 1. 12. [Prisma] 1. Prisma 란 무엇인가? mysql 사용 기준으로 작성되어 몇몇 기능 및 지원에 대한 내용이 없을 수 있습니다.설명Prisma는 데이터베이스와 상호작용하기 위한 현대적인 ORM(Object-Relational Mapping) 도구입니다. TypeScript 및 JavaScript와 함께 주로 사용되며, 간단하고 타입 안전한 방식으로 데이터베이스 작업을 처리할 수 있도록 도와줍니다. Prisma는 스키마 정의, 데이터베이스 마이그레이션, 데이터 쿼리 및 관리에 초점을 맞춘 풀스택 개발자 도구입니다.prisma 의 컨셉 및 장점객체 관점: 관계형 데이터를 매핑하는 대신 객체 지향적으로 처리.함수형 쿼리: 복잡한 모델 객체 대신 함수 기반 쿼리 사용.단일 진실 소스: 데이터베이스와 애플리케이션 모델의 단일화된 관리.건강한 제약 조건:.. 2025. 1. 11. Next.js 환경에서 express, MSW 를 활용한 mock 서버 설명MSW(Mock Service Worker) 는 API 요청을 가로채서 원하는 응답을 반환할 수 있도록 돕는 API Mocking 라이브러리로써 주로 테스트 환경이나 로컬 개발 환경에서 사용합니다.장점- 프론트엔드 중심 개발 : 백엔드가 준비되지 않은 상태에서도 프론트엔드 개발을 진행할 수 있습니다.- 테스트 안정성 : 네트워크 상태나 외부 API의 영향을 받지 않고 테스트를 수행할 수 있습니다. - 유연성 : 브라우저와 Node.js 환경 모두에서 동작합니다.MSW 의 컨셉과 개념API 요청과 응답의 흐름을 가상으로 재현하여, 실제 API가 없이 안정적이고 일관된 개발 및 테스트 환경을 제공하기 다음과 같은 방식과 개념을 사용하고 있습니다.1. 요청 중심(Request-centric)MSW는 클라이.. 2025. 1. 5. 이전 1 2 3 4 5 ··· 18 다음
