크래프톤

우리가 기획한 프로젝트에는 타이머(게이지바)가 있는데, 소켓 통신을 이용했더니 게임 화면을 내리거나 다른 탭을 이용하는 경우 다른 사용자들과 시간이 맞지 않는 경우가 있었다.아래와 같은 이유로 발생한 것으로 추측된다.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..

WebRTC(Web Real-Time Communication) 정의브라우저 간 플로그인의 도움 없이 서로 통신할 수 있도록 설계된 APIP2P(Peer to Peer) 화상회의, 음성 채팅, 화상 채팅, 데이터 교환 등  통신 원리WebRTC는 P2P 통신에 최적화* P2P란?    - Peer to Peer의 줄임말로 중앙 서버를 거치지 않고 클라이언트 간 직접 통신하는 방식 시그널링(Signaling)- WebRTC를 연결하기 위해서는 Caller와 Callee가 정보를 주고 받는 과정- 정보를 주고 받기 위해서 중간 역할을 하는 시그널링 서버가 필요시그널링 서버(Signaling Server)- WebRTC는 기본적으로 P2P 연결로 화상 연결 / 음성 연결을 위한 별도의 서버가 존재하지 않음- ..

🔥 CS 개념 복습 자료구조Call by value,Call by reference차이점?Call by Value- 함수에 값을 전달할 때 값을 복사하여 전달하는 방식- 원본 데이터를 보호할 수 있는 장점- 큰 데이터를 복사하는 경우 성능 저하- 깊은 복사(deep copy)를 통해 불변성을 유지 -> 객체의 중첩된 속성까지 모두 복사해 새로운 객체 생성- 불변성(Immutable)을 지향 -> 완벽한 불변성은 아님    - 객체의 경우: 자바스크립트와 같은 언어에서는 객체를 Call By Value로 전달하지만, 실제로는 객체의 참조 값(메모리 주소)이 복사됩니다. 따라서 함수 내부에서 객체의 속성을 변경하면 원본 객체에도 영향을 미칩니다.    - 원시 값의 경우: 숫자, 문자열, 불리언 등의 원시..