크래프톤정글

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

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 연결로 화상 연결 / 음성 연결을 위한 별도의 서버가 존재하지 않음- ..

useState자신의 상태 또는 props가 변경되면 Rerendering(리렌더링)useState는 상태 유지값과 그 값을 갱신하는 함수를 반환setState 함수는 새 state를 받아서 컴포넌트 리렌더링 큐에 등록컴포넌트는 다음 렌더링 시에 useState를 통해 가장 최근에 갱신된 state를 적용// state : 상태 유지값// setState : 새로운 state를 받아서 리렌더링 큐에 저장(렌더링 될 때 가장 최근 state 적용)const [state, setState] = useState(initialState); useRefDOM(Document Object Model)이나 React Element에 접근하고자 할 때 사용useRef는 .current 프로퍼티로 전달된 인자(initi..

사용방법1. html 파일에 로 선언2. css로 너비(width), 높이(height) 설정3. 나머지는 Javascript에서 처리    - context(ctx)은 canvas에서 붓 역할(2d, webGL)    - canvas의 사이즈를 설정(css와 동일하게)기본적인 함수// 사각형(fill 또는 stroke를 하기 전에는 보이지 않음)rect(x좌표, y좌표, 너비, 높이);// 색이 채워진 사각형fillRect(x좌표, y좌표, 너비, 높이);// 색을 채움fill();// 선을 그림stroke();// 새로운 경로 시작(이전 경로와 별개의 경로로 나뉨 / 스타일 등이 다르게 각각 적용)beginPath();// 채우기, 선 색상 변경fillStyle = "색상";strokeStyle = ..

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

🔥 CS 개념 복습 자료구조    OS프로세스와 쓰레드 란?프로세스(Process)- 메모리에 로드되어 실행되고 있는 프로그램의 독립적인 개체- 기본적으로 최소 1개의 쓰레드를 가짐- 각각 독립된 메모리 영역(Code, Data, Stack, Heap)을 할당받음- 스케줄링의 대상이 되는 작업(task) -> 실제로는 쓰레드 단위로 스케줄링쓰레드(Thread)- 프로세스 내에서 실행되는 흐름의 단위- 각각 Stack만 따로 할당, Code, Data, Heap영역은 공유동시성과 병렬성 이란?동시성(Concurrency)- 하나의 코어가 타임 슬라이스를 통해 동시에 실행되는 것처럼 보이게 하는 기술- 여러 작업(쓰레드)의 문맥을 빠르게 전환해 동시에 처리하듯 보이게 하는 것- I/O 작업이 많은 웹서버 ..