본문 바로가기

항해7

WebRTC 코드로 적용해보기 지난 번엔 WebRTC에 대해 공부하여 정리했었다. WebRTC 정리한거 보기 이제는 프로젝트에 적용하기 전 타 네트워크 간 연결을 해보기 위해 코드를 작성해보았다. 상황 피어는 총 2명이라 가정한다. A가 먼저 방에 들어가고 그 다음 B가 들어간다. A가 룸에 들어갔을 때 벌어지는 일 async function handleWelcomeSubmit(event) { event.preventDefault(); const input = welcomeForm.querySelector('input'); //백엔드로 join_room 이벤트로 보내면 같은 이름의 이벤트로 받는다. //방에 들어가기 전에 내 장치 가져옴 await initMedia(); console.log('방에 들어간다'); socket.emit.. 2022. 6. 9.
WebRTC에 대한 이해 목차 : WebRTC란 뭘까? WebRTC 클래스 Signaling server RTCPeerConnection RTCPeerConnection plus servers 코드 분석 WebRTC 용어 정리 WebRTC란 뭘까?? : WebRTC(Web Real-Time Commnication)는 웹 어플리케이션 간에 프로그인 ( 별도의 소프트웨어) 의 도움 없이도 서로 통신할 수 있도록 설계된 API이다. 웹 브라우저 기반의 통신 방식으로 음성 통화, 영상 통화 P2P 파일 공유 등으로 활용할 수 있다. [출처 : 위키백과] 구성 요소 WebRTC의 주요 구성요소는 자바스크립트 API를 포함하고 있다. getUserMedia : 오디오와 비디오 미디어를 가지고 온다 ( 이용자의 마이크, 카메라에 접근하는 것.. 2022. 6. 9.
핸드폰 번호 하이픈형식으로 출력되는 문제 영상 2022. 3. 17.
알고리즘 3 1. 2개 뽑아서 더하기 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. numbers라는 배열에서 2개의 숫자를 뽑아서 더한 다음 모든 숫자를 중복없이 오름차순으로 담아 return하는 문제이다. 먼저 배열에서 2개씩 뽑아 서로 더하기 위해 이중 for문을 사용했고 그걸 sum이라는 배열안에다가 넣어주고 sort((a,b)+>a-b)로 오름차순으로 배치한다. 그리고 sum을 콘솔에 찍으면 [ 2, 3, 3, 4, 4, 5, 5, 5, 6, 7 ] 이렇게 나온다. 중복된 값이 있는 것을 볼 수 있다. 중복된 값을 없애기 위해서는 2가지 방.. 2022. 3. 17.
알고리즘 2 1. 나누어 떨어지는 숫자 배열 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 의식의 흐름 1. 배열에서 divisor로 나누어 떨어지는 애만 먼저 배열에 넣어준다. 2. 만약 그 배열에 아무것도 안들어갔다면 그 길이는 0일 것이고 이걸 기점으로 if문이나 삼항연산자를 통해 풀어준다. filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환을 해준다. 2. 내적 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solut.. 2022. 3. 14.
알고리즘 문제 1. 자바스크립트로 직사각형 별찍기 repeat함수 : string.repeat(count)형식으로 반복하고 싶은 문자열에 반복할 개수를 repeat()안에 넣으면 된다. 2. 가운데 글자 가져오기 문제: 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. substr()함수는 문자열을 잘라주는 함수이다. 두개의 파라미터를 받는데 substr(시작하는 인덱스, 개수,길이) 를 받는다. 그래서 문자열 s의 길이를 반으로 나누고 올려서 1을 빼면 가운데 인덱스가 나오고 짝수이냐 홀 수 있냐에 따라서 길이를 정해준다. 3. 없는 숫자 더하기 0~9까지의 정수 배열 numbers에서 없는 숫자를 찾아 더하는 문제이다. 우선 0부터 .. 2022. 3. 14.
항해 1주차 회고록 항해 1주차 항해 첫 주차에는 4일 동안 팀원들끼리 미니 프로젝트를 만드는 것이었다. 우리 조는 주식을 가상으로 매수, 매도하는 프로젝트를 만들기로 정하였고 기능을 중심으로 분담을 하였다. 프로젝트 이름은 Gazuaaa로 주식이 올라가기를 바라는 마음으로 이렇게 이름을 지었다. 거기서 나는 회원가입 기능을 담당했다. 회원가입 기능을 구현할 때 많이 사용되는 것이 쿠키/세션방식이다. 하지만 여기서는 JWT 방식으로 로그인과 회원가입을 구현하였다. 세션방식과 JWT 방식의 차이! Stateless stateless란 이전 요청들과 독립적으로 다루어 진다는 뜻이다. 즉 요청끼리 연결이 없다. 그래서 요청이 끝나면 내가 누군지 잊어버린다. 이러한 문제를 해결하기 위한 방법이 세션과 토큰이다. ※ 쿠키: (세션i.. 2022. 3. 13.

티스토리툴바