분류 전체보기

Material UI(MUI)는 Google의 Material Design을 구현하는 오픈소스 React UI 구성 라이브러리이다.현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나이다. 패키지 설치Material UI는 core, system, utils, icons 등 여러 개의 패키지로 구성되어 있다.핵심적인 기능을 담고있는 @material-ui/core$ npm i @material-ui/core  - React 18과 Material-UI v4 호환 문제 : Material-UI v4는 React 18과 호환되지 않아, v5로 업그레이드$ npm install @mui/material @emotion/react @emotion/styled 폰트 불러오기Material U..

Webpack이란?Webpack = 모듈 번들링(Module Bundling)이라고 한다.(* 모듈 번들링 : html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식)-> 필요한 여러 개의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것 왜 Webpack을 사용하는가?과거에는 페이지마다 새로운 html을 요청해서 출력하는 방식(Multiple Page Application)이었지만,최근에는 하나의 html 페이지에 여러 개의 자바스크립트 파일들이 포함되는 방식(Single Page Application)을 사용한다.-> 연관된 자바스크립트 파일들을 하나의 파일로 묶어 관리하기 편해짐파일을 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸림-> 여..

우리가 기획한 프로젝트에는 타이머(게이지바)가 있는데, 소켓 통신을 이용했더니 게임 화면을 내리거나 다른 탭을 이용하는 경우 다른 사용자들과 시간이 맞지 않는 경우가 있었다.아래와 같은 이유로 발생한 것으로 추측된다.1. 클라이언트 측 시간 동기화- 네트워크 지연 : 웹소켓을 통해 서버와 클라이언트 간에 시간 정보를 주고받을 때 네트워크 지연이 발생할 수 있습니다. 이로 인해 각 클라이언트가 받는 시간 정보에 약간의 차이가 발생할 수 있습니다.- 클라이언트 시스템 시간 : 각 클라이언트의 시스템 시간이 정확하게 동기화되어 있지 않을 수 있습니다. 이는 운영체제 설정, 하드웨어 성능 등 다양한 요인에 의해 발생할 수 있습니다.2. 클라이언트 측 타이머 처리JavaScript 타이머 : 웹 브라우저에서 타이..

나만의 무기 만들기 'Wouldyouguess?' 프로젝트에서 우리는 React 상태를 Zustand라는 라이브러리를 통해 관리를 하기로 결정했다.상태(State)는 무엇인가?React에서 상태(State)는 component 안에서 관리되는 것자식 컴포넌트 간의 직접적인 데이터 전달이 불가능자식 컴포넌트 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받음자식이 많아진다면 상태관리가 매우 복잡해짐상태를 관리하는 상위(부모) 컴포넌트에서 계속 데이터를 내려받아야 함(Props drilling 이슈)* Props drilling Issue장점1. 명시적인 값의 사용 : 각 컴포넌트에서 어떤 프로퍼티를 받아 사용하는지를 확인할 수 있어 코드의 의도를 명확하게 파악 가능2. 값 추적..

Game 1에서 필요한 주요 기능인 Laser pen을 구현하기 위해 Laser-pen github을 참고했다.* Laser pen- 아래의 이미지와 같이 마우스 커서를 통해 부드럽게 레이저 포인터와 같이 그림을 그릴 수 있도록 하는 것이다.- 이것을 응용해 그림이나 글자를 그리면 일정시간 뒤에 자연스럽게 사라지도록 하는 펜을 구현하고자 했다. * 하나의 캔버스에서 그림을 그리는 사람의 펜과 그림을 그리지 않는 사람의 레이저펜을 구분하고자 시도했지만, 기술적으로 부족해서 그런지 실패했다. 대안으로 메모리를 좀 더 소모하더라도 기능을 완성할 수 있도록 캔버스를 두 개를 사용해 각각의 역할마다 z-index를 조절해 기능을 완성(이가 없으면 .. 잇몸으로..)

[WebRTC] OpenViduLivekit 기반의 중계 서버를 애플리케이션에 쉽게 추가할 수 있도록 하는 WebRTC 프레임워크LiveKit- 확장 가능하고 유연한 WebRTC SFU (Selective Forwarding Unit) 기반의 오픈 소스 미디어 서버- 실시간 비디오, 오디오 및 데이터 통신을 위한 도구를 제공- 개발자가 WebRTC 애플리케이션을 쉽게 구축할 수 있도록 지원특징1. WebRTC 미디어 서버    - WebRTC 세션에서 비디오 및 오디어 스트림을 처리하고 라우팅하는 역할2. 클라이언트 API 세트    - 다양한 언어 지원 : Java, Javascript, Node.js 등 다양한 언어를 위한 클라이언트 API 제공    - 미디어 파이프라인 제어 : 미디어 파이프라인은..

WebRTC 구현 및 궁금증📝 서버 세팅import http from "http"; // HTTP 서버 생성을 위한 Node.js 기본 모듈import SocketIO from "socket.io"; // 실시간 양방향 통신 라이브러리import express from "express"; // Node.js 웹 프레임워크// Express 애플리케이션 생성const app = express();// 템플릿 엔진 (Pug) 설정app.set("view engine", "pug"); // Express에게 Pug를 템플릿 엔진으로 사용하도록 설정app.set("views", __dirname + "/views"); // Pug 템플릿 파일이 있는 디렉토리 지정// 정적 파일 제공 (public 디렉토리)a..