전체 글204 [WEB] MediaDevices와 MediaStream을 통해 알아보는 웹 실시간 미디어 처리 방식 1. MediaDevices 란?navigator.mediaDevices 를 통해 웹에서 카메라, 마이크, 화면 공유와 같은 미디어 입력 장치에 접근하여, 해당 장치에서 제공하는 미디어 스트림을 가져올 수 있습니다.※ Navigator 객체는 웹 브라우저의 정보를 제공하는 인터페이스로 window.navigator 읽기 전용 속성으로 접근할 수 있습니다.1.1 이벤트■ devicechange새로운 미디어 장치가 연결되거나 기존 장치가 제거될 때 발생하는 이벤트입니다. ondevicechange 속성으로도 사용할 수 있습니다.// `addEventListener`를 사용하는 방식 (권장)navigator.mediaDevices.addEventListener('devicechange', event => {.. 2025. 3. 31. react-router v7 Framework Mode 라우트 방식 설명Next.js를 주로 써오다 React도 배우려 하면서 기존의 라우팅 방식이 찜찜하여 React Router를 찾아보게 되었습니다. 놀랍게도, Next.js처럼 폴더 기반 라우트 구조, SSR, CSR 지원, 코드 스플리팅 등의 유용한 기능을 제공하는 Framework Mode가 도입되었음을 알게 되었습니다.이전의 라우팅 방식도 여전히 지원되지만, 충분히 도입할 만한 장점이 있어 마이그레이션을 고려할 만하다고 판단하여 React Router의 기본 개념, 주요 기능을 정리하였습니다.⚠️ 계속해서 버전이 업데이트되고 있어 내용이 변경될 수 있으므로 공식 문서 참고를 권장합니다. 또한, 여러 기능들이 제공되지만 추후 변경될 가능성이 있어 자세한 내용은 서술하지 않습니다.React Router v7 Fra.. 2025. 3. 30. Socket.IO 기본 사용법 Socket.IO 기본 사용법Socket.IO는 웹소켓을 기반으로 한 실시간 양방향 통신 라이브러리입니다. 클라이언트와 서버 간의 이벤트 기반 통신을 제공합니다.1. 설치서버 (Node.js):npm install socket.io클라이언트 (브라우저):npm install socket.io-client2. 서버 설정// Express와 함께 사용하는 기본적인 설정const express = require('express');const http = require('http');const { Server } = require('socket.io');const app = express();const httpServer = http.createServer(app);const io = new Server(htt.. 2025. 3. 28. 웹 소켓(WebSocket) 이해 설명웹 소켓(WebSocket)은 클라이언트와 서버 간의 양방향(Full-Duplex) 통신을 가능하게 하는 프로토콜입니다. HTTP 기반의 요청-응답 방식과 달리, 한 번 연결되면 클라이언트와 서버가 실시간으로 데이터를 주고받을 수 있는 지속적인 연결을 유지합니다. 웹 소켓의 특징1. 풀 듀플렉스(Full-Duplex) 통신클라이언트와 서버가 동시에 데이터를 주고받을 수 있음HTTP는 클라이언트가 요청하면 서버가 응답하는 단방향 구조지만, WebSocket은 서버가 클라이언트에게 실시간으로 데이터를 보낼 수 있음2. 연결 유지(Persistent Connection)HTTP는 요청마다 새로운 연결을 생성하지만, WebSocket은 연결을 유지하면서 데이터를 주고받음이를 통해 지연시간(Latency)을.. 2025. 3. 23. [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. 이전 1 2 3 4 ··· 17 다음
