크래프톤 정글

나만의 무기 만들기 '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 제공    - 미디어 파이프라인 제어 : 미디어 파이프라인은..

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 = ..

Argument Passing 프로세스 함수 load()명령어 라인(Command Line)으로 입력받은 파일명과 인자들을 USER STACK에 PUSH하고 레지스터에 argv, argc를 지정 uintptr_t phys_base = if_->rsp;// 기존에 만들었던 Stack을 사용(오른쪽 인자부터 유저스택에 넣기 위해서 사용)Stack stack;int lenArr[100] = {0};int idx = 0;int args_count = 1;int stack_size;char *addr_list[20];// 파일명 넣기push(&stack, file_name);// 인자 넣기for (token = strtok_r(NULL, " ", &saveptr); token; token = strtok_r(NU..

트라이(Trie) 문자열에서의 검색을 빠르게 해주는 자료구조 장점 M개의 문자로 구성된 문자열을 추가와 탐색하는 시간 복잡도는 O(M) 문자열을 빠르게 탐색할 수 있음 단점 필요한 메모리의 크기가 너무 큼 모두 소문자로만 이루어졌다고 해도, 26개의 공간이 필요 플로이드 와샬(Floyd-Warshall) 모든 지점에서 다른 모든 지점까지의 최단 경로를 모두 구해야 하는 알고리즘(방향, 음수 상관없음 / 싸이클이 발생하면 안됨) 단계마다 ‘거쳐 가는 노드’를 기준으로 알고리즘 수행 2차원 테이블에 최단 거리 정보를 저장 DP 알고리즘에 해당 시간 복잡도는 O(N^3) 노드의 개수가 N개 일 때, N번의 단계를 수행하며, 단계마다 O(N^2)의 연산을 통해 '현재 노드를 거쳐 가는 모든 경로'를 고려한다. ..