Step-by-Step

마무리 하니 즐겁네요! 📝프로젝트 과정📝 [1] Introduction - 기본 설정 [2] WebSocket 통신 - 메세지 및 이벤트 [3] Chat 기능 구현 및 소켓에 Nickname 부여 [4] Socket.IO 사용 - Room 생성 및 닉네임, 메세지 출력 [5] Video 및 Audio 출력하기 [6] 스트림 데이터 전송 P2P [7] 채팅 구현하기 + 인원 수 조절 📝프로젝트 결과📝

사실 이건 별거 없고,, 그냥 CSS만 열심히 검색했다ㅋㅋㅋ 이벤트 리스너 구현 chatForm.addEventListener("submit", handleChatSubmit); function handleChatSubmit(event){ event.preventDefault(); const input = chatForm.querySelector("input"); message = input.value; socket.emit("chat", message, roomName); addMessage("나 : " +message); input.value=""; } 상대에게도 보내주고, 내 채팅창에도 표시한다. socket 메세지 전송 wsServer.on("connection", socket => { /* Me..

우선 같은 Room 내 접속한 Peer간 비디오 및 오디오 전송을 구현해야 한다. (나중에 채팅도 작성할 것임) https://webrtc.org/getting-started/peer-connections?hl=ko 피어 연결 시작하기 | WebRTC Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 피어 연결 시작하기 피어 연 webrtc.org ※ P2P 통신 구성은 다음과 같다. 1. ICE Candidate - 정보 교환을 통해 상대 Peer의 네트워크 정보인 ICE(Interactive Connectivity Establishment) Can..

전부 App.js 내용이다. 나의 UI 정보이기 때문! 전역변수 Stream 설정 let myStream; 들어가고 싶은 Room 이름을 추가하고 클릭 /* Enter Room 클릭 */ welcomeForm.addEventListener("submit", handleWelcomeSubmit); /* Enter Room 클릭 이벤트 처리 */ async function handleWelcomeSubmit(event){ event.preventDefault(); const input = welcomeForm.querySelector("input"); /* emit으로 보내지 않고, join 전에 실행 */ await initCall(); /* UI Header 변경해줌 */ const header = do..

https://www.acmicpc.net/problem/21611 21611번: 마법사 상어와 블리자드 마법사 상어는 파이어볼, 토네이도, 파이어스톰, 물복사버그, 비바라기 마법을 할 수 있다. 오늘 새로 배운 마법은 블리자드이고, 크기가 N×N인 격자에서 연습하려고 한다. N은 항상 홀수이고, ( www.acmicpc.net 온풍기 풀고 이거 푸니까 살거같다.. ㅋㅋ ㅠ 우선 달팽이 규칙 솔직히 이건 까먹어도 바로 그 자리에서 찾아낼 수 있는 쉬운 규칙이다. 방법 d, s로 파괴할거 파괴 (이거는 ans에 담지 않는다) 달팽이 규칙으로 map의 숫자들 전부 Queue에 넣기 Queue 1개씩 뽑아서 연속된 숫자 개수 >= 4 인 경우 폭파시킴 폭파시킨 개수는 HashMap 에 넣고 최종 ans에 숫자..

https://www.acmicpc.net/problem/23289 23289번: 온풍기 안녕! 유난히 추운 날씨가 예상되는 이번 겨울을 대비하기 위해 구사과는 온풍기를 설치하려고 한다. 온풍기의 성능을 테스트하기 위해 구사과는 집을 크기가 R×C인 격자판으로 나타냈고, 1×1 크기 www.acmicpc.net 정말정말정말 생각해야하는 부분이 많다. 이 문제 ㅠㅠ.. 내 하루.. 과정 1. 집에 있는 모든 온풍기에서 바람이 한 번 나옴 - 온풍기 방향으로 온도 5 생성 - 5에서 온풍기랑 같은 방향으로 봤을때, 정면과 왼쪽대각선 및 오른쪽 대각선으로 온도 4 생성 - 위 과정을 1까지 반복 (단, 칸막이에 따라 온도가 높여지지 않을 수 있음) 2. 온도가 조절됨 - 두 칸의 온도 차이가 있을 경우 큰 쪽..

https://leetcode.com/problems/minimum-score-of-a-path-between-two-cities/ Minimum Score of a Path Between Two Cities - LeetCode Can you solve this real interview question? Minimum Score of a Path Between Two Cities - You are given a positive integer n representing n cities numbered from 1 to n. You are also given a 2D array roads where roads[i] = [ai, bi, distancei] indicates that leetcode.com 흔..

https://leetcode.com/problems/construct-binary-tree-from-inorder-and-postorder-traversal/description/ Construct Binary Tree from Inorder and Postorder Traversal - LeetCode Can you solve this real interview question? Construct Binary Tree from Inorder and Postorder Traversal - Given two integer arrays inorder and postorder where inorder is the inorder traversal of a binary tree and postorder is t..

https://leetcode.com/problems/check-completeness-of-a-binary-tree/ Check Completeness of a Binary Tree - LeetCode Can you solve this real interview question? Check Completeness of a Binary Tree - Given the root of a binary tree, determine if it is a complete binary tree. In a complete binary tree [http://en.wikipedia.org/wiki/Binary_tree#Types_of_binary_trees], every leetcode.com ※ 경우에 따라 체크해야 할..

https://leetcode.com/problems/merge-k-sorted-lists/ Merge k Sorted Lists - LeetCode Can you solve this real interview question? Merge k Sorted Lists - You are given an array of k linked-lists lists, each linked-list is sorted in ascending order. Merge all the linked-lists into one sorted linked-list and return it. Example 1: Input: lis leetcode.com LinkedList 값 받아오면서 null값만 적절히 체크해주면 금방 풀리는 문제 L..