본문 바로가기

전체 글

 (258)
리액트) 디스코드 클론 - 5 이번 포스팅부턴 본격적으로 주 기능들을 만들어보려 한다. 우선 디스코드의 주 기능들은 다음과 같다 채널 내 메세지 소통 채널 내 음성대화 채널 내 화상채팅 채널 내 스트리밍 등등 더 많은 기능이 있지만 우선 저 네개를 목표로 잡으려 한다. 우선 음성채팅부터 만들어보겠다. 오디오 기능을 만들기 위해선 우선 컴퓨터에 연결된 마이크를 가져와야한다. 그 기능을 담당하는 것이 바로 navigator.mediaDevices.getUserMedia()이다. (더 자세한 사항은 MND 홈페이지 참조) Room.js를 수정하자 import React, { useEffect, useRef } from "react"; import { io } from "socket.io-client"; import Peer from "pe..
파이썬) 스위치 켜고 끄기 - BOJ https://www.acmicpc.net/problem/1244 1244번: 스위치 켜고 끄기 첫째 줄에는 스위치 개수가 주어진다. 스위치 개수는 100 이하인 양의 정수이다. 둘째 줄에는 각 스위치의 상태가 주어진다. 켜져 있으면 1, 꺼져있으면 0이라고 표시하고 사이에 빈칸이 하나씩 www.acmicpc.net n = int(input()) arr = list(map(int, input().split())) arr = [-1] + arr m = int(input()) stu = [] def male(num): for i in range(1, n+1): if i % num == 0: if arr[i] == 1: arr[i] = 0 else: arr[i] = 1 def female(num): if ar..
리액트) 디스코드 클론 - 4 이번 포스팅에는 peer-to-peer 에 대해 알아볼 것이다. 소켓만 알면 되지 굳이 peer까지 알아야 돼? 라고 생각할 수 있다. 하지만 peer는 웬만한 웹소켓을 사용하는 기술에서는 필수요소이다. 우선 webRTC부터 살펴보자. MND에서는 webRTC를 다음과 같이 정의하고 있다. WebRTC (Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐만 아니라, 임이의 데이터도 교환할 수 있도록하는 기술입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 합니다. 이를 위하여 WebRTC는 상호 연관된 API와 ..
리액트) 디스코드 클론 - 3 저번 포스팅에선 클라이언트와 서버의 셋팅을 진행했었다. 이번에는 웹 소켓의 기본 사용법을 알아보자. 그 전에 우선 클라이언트의 전체적인 부분을 변경할 것이다. //App.js import React from "react"; import Home from "./Home"; import { Routes, BrowserRouter, Route } from "react-router-dom"; import Room from "./Room"; const App = () => { return ( ); }; export default App; //Home.js import React from "react"; import { useNavigate } from "react-router-dom"; import { v4 as..
리액트) 디스코드 클론 - 2 이전 글에서는 서버의 기본 세팅을 마련했다. 이제 소켓 연결에 대한 코드를 작성해보자. io.on("connection", (socket) => { console.log("connection!!!!"); }); 끝이다. 엥? 이라는 의문이 들 수도 있겠지만 단순한 클라이언트-서버간의 웹소켓 연결이라면 정말 이게 끝이다. 나는 클라이언트에서 피어를 생성하고 다른 이용자와 연결을 진행할 예정이기에 서버는 단순 중계기 같은 역할만 진행한다. 클라이언트 - 핸드폰, 서버 - 중계기 와 비슷하다가 생각하면 된다. 이제 클라이언트 쪽을 작성해보자. npm i socket.io-client peerjs react-router-dom uuid import React, { useEffect } from "react"; ..
리액트) 디스코드 클론 - 1 이 프로젝트를 시작하는 이유 프로젝트 진행 중 정말 오랜만에 웹소켓을 다루게 되었다. 프로젝트를 진행하며 웹소켓에 대해 자세히 공부하게 되었고 그를 이용해 다양한 기능을 구현하고 싶었다. 웹소켓이 뭔데? WebSocket은 클라이언트와 서버를 연결하고 실시간으로 통신 가능하도록 하는 첨단 기술이다. 이것의 장점은 HTTP에서 발생하는 것처럼 별도의 요청을 보내지 않고도 데이터를 수신할 수 있다는 점이다. WebSocket의 동작 클라이언트와 서버 간의 연결은 당사자 중 하나에 의해 종료되거나 시간 초과에 의해 닫힐 때까지 열린 상태로 유지된다. 클라이언트와 서버 간의 연결을 설정하기 위해서는 핸드셰이크를 수행한다. 연결이 설정된 이후로는 열린 상태로 유지되며 클라이언트 또는 서버 측에서 연결이 종료될 때..
파이썬) 등수 구하기 https://www.acmicpc.net/problem/1205 1205번: 등수 구하기 첫째 줄에 N, 태수의 새로운 점수, 그리고 P가 주어진다. P는 10보다 크거나 같고, 50보다 작거나 같은 정수, N은 0보다 크거나 같고, P보다 작거나 같은 정수이다. 그리고 모든 점수는 2,000,000,000보 www.acmicpc.net n, point, p = map(int, input().split()) if n point: person -= 1 rank += 1 if person
파이썬) 쿠키의 신체 측정 - BOJ https://www.acmicpc.net/problem/20125 n = int(input()) head = [] heart = [] left_arm = 0 right_arm = 0 mid = 0 left_leg = 0 right_leg = 0 for i in range(n): string = input() for j in range(len(string)): if string[j] == '*': if head == []: # 헤드를 발견하지 못햇다면 # 맨처음 *은 무조건 헤드임 head = [i, j] else: if heart == []: # 하트가 비엇다면 왼쪽팔이나 하트라는 뜻 if head[1] == j: # 헤드 바로 아래, 즉 하트라면 하트 위치 저장 heart = [i, j] else: ..
파이썬) 임스와 함께하는 미니게임 https://www.acmicpc.net/problem/25757 dic = {} user_input = input() n, m = user_input.split() n = int(n) for _ in range(n): s = input() if s not in dic: dic[s] = 1 cnt = 0 if m == 'Y': cnt = 1 elif m == 'F': cnt = 2 else: cnt = 3 arr = list(dic.keys()) print(len(arr) // cnt) 해당 문제는 셋 또는 딕셔너리를 사용하면 되는데, 나는 좀 더 익숙한 딕셔너리를 사용했다.
파이썬) 비밀번호 발음하기 - BOJ https://www.acmicpc.net/problem/4659 4659번: 비밀번호 발음하기 좋은 패스워드를 만드는것은 어려운 일이다. 대부분의 사용자들은 buddy처럼 발음하기 좋고 기억하기 쉬운 패스워드를 원하나, 이런 패스워드들은 보안의 문제가 발생한다. 어떤 사이트들은 xvtp www.acmicpc.net while True: st = input() if st == 'end': break q = [] aeiou = 'aeiou' others = 'bcdfghjkmnlpqrstvwxyz' is_aeiou = False is_accept = False for i in st: if i in aeiou: is_aeiou = True if len(q) == 0: q.append(i) else: f = ..
파이썬) 돌 게임 - BOJ https://www.acmicpc.net/problem/9655 9655번: 돌 게임 상근이가 게임을 이기면 SK를, 창영이가 게임을 이기면 CY을 출력한다. www.acmicpc.net n = int(input()) if n % 2 == 0: print("CY") else: print("SK") 사실 n이 4부터 8까지 혹은 그 이전까지만 생각해봐도 답은 금방 나온다 조금 단순하게 생각해보자 n이 4일때 상근이가 한개 또는 세개를 가져면 나머지는 3개 이하므로 상근이가 무조건 패배한다 반면 n이 5일땐 상근이가 하나만 가져가면 상근이가 이긴다. 즉, 먼저 가져가는 사람이 이긴다 n이 6일땐 상근이가 3개를 가져가면 3개가 남아 패배하고, 1개를 가져가면 이 5 이므로 5부터 먼저 가져 갈 창영이가 우..
파이썬) 단어 공부 -BOJ https://www.acmicpc.net/problem/1157 dic = {} # 'a'부터 'z'까지의 알파벳을 순회하며 딕셔너리에 키를 추가하고 값을 0으로 초기화합니다. for char in 'abcdefghijklmnopqrstuvwxyz': dic[char] = 0 st = input() # 소문자 st = st.lower() for s in st: dic[s] += 1 sorted_dict = dict(sorted(dic.items(), key=lambda item: item[1], reverse=True)) # 딕셔너리 첫번째의 키 값 얻기 first_key, first_value = list(sorted_dict.items())[0] # 두 번째 키와 밸류 얻기 second_key, s..
파이썬) 벌집 - BOJ https://www.acmicpc.net/problem/2292 2292번: 벌집 위의 그림과 같이 육각형으로 이루어진 벌집이 있다. 그림에서 보는 바와 같이 중앙의 방 1부터 시작해서 이웃하는 방에 돌아가면서 1씩 증가하는 번호를 주소로 매길 수 있다. 숫자 N이 주어졌 www.acmicpc.net 위의 그림과 같이 육각형으로 이루어진 벌집이 있다. 그림에서 보는 바와 같이 중앙의 방 1부터 시작해서 이웃하는 방에 돌아가면서 1씩 증가하는 번호를 주소로 매길 수 있다. 숫자 N이 주어졌을 때, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈 때 몇 개의 방을 지나가는지(시작과 끝을 포함하여)를 계산하는 프로그램을 작성하시오. 예를 들면, 13까지는 3개, 58까지는 5개를 지난다. 풀이 ..
파이썬) 삼각형과 세 변 - BOJ https://www.acmicpc.net/problem/5073 while True: a, b, c = map(int, input().split()) if a == b == c == 0: break # (sum(a,b,c) - max(a,b,c) - min(a,b,c))은 mid값 if sum([a, b, c]) - max([a, b, c])
파이썬) ZOAC 4 - BOJ https://www.acmicpc.net/problem/23971 23971번: ZOAC 4 i행 j열 자리를 (i, j)라고 할 때, (1,1)에 참가자가 앉은 경우 다른 참가자는 (1,2), (2,1), (2,2) 자리를 제외한 나머지 자리에 앉을 수 있다. (2,2)의 경우는 (1,1)과 행 번호 및 열 번호의 차가 1보다 크 www.acmicpc.net 이 문제는 프로그래머스 "거리두기 확인하기"와 상당히 비슷하다 https://school.programmers.co.kr/learn/courses/30/lessons/81302 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. pr..

티스토리툴바