분류 전체보기 (252) 썸네일형 리스트형 React) mediasoup을 이용한 SFU 작년 WebRTCPeerConnection을 이용한 P2P 토폴로지 방식의 화상채팅을 구현했었다.동작방식과 각각의 파라미터를 이해하는데 별 어려움이 없었고 올해, 내가 재직했었던 회사의 정부과제 프로젝트에서도 P2P방식의 화상채팅 기능을 사용했었다.그러나 P2P방식의 문제점은 사용자 수가 늘어갈 수록 한 사람당 감당해야 할 peerConnection의 수가 기하급수적으로 증가한다는 것이었고,시험인증에서 응답속도 부문은 탈락하게 되었다. 때문에 개인 프로젝트로 P2P방식이 아닌 SFU방식으로 webRTC를 구현해보고자 한다. LibrariesSFU를 구현하게 도와줄 라이브러리는 많다. Medooze와 Kurento 등이 있지만 mediasoup을 선택한 이유는 간단하다.mediasoup의 공식문서가 가장 .. JS) 논리적 AND OR 포스팅을 하게된 계기 import React, { useEffect, useState } from "react"; const Example = () => { const [data, setData] = useState(null); function getData() { return new Promise((reso) => { setTimeout(() => { const obj = { id: 1, name: "홍길동", firstName: "홍", }; reso(obj); }, 2000); }); } useEffect(() => { (async () => { const data = await getData(); setData(data); })(); }, []); return ( 오늘 일기 ....일기장 내 이름.. JS) remove() 와 removeChild() 발단 바닐라 자바스크립트로 이것저것 만지던 중, 이벤트 위임으로 todo-list를 만들어보자 생각이 들었다. 그러던 중 예상치 못한 동작이 발생했다. 전개 Enter const form = document.getElementById("form"); const wrapper = document.getElementById("todo-lists"); function handleTodo(e) { e.preventDefault() const btn = e.target.closest("button"); if (!btn) return; //버튼을 누른게 아님 const todo = e.currentTarget; // submit의 const todo if (btn.innerText === "remove") { wr.. Zutand 라이브러리 파해치기 최근 리덕스에서 Zustand으로 관심이 옮겨가고있다. 우선 리덕스라는 라이브러리는 잘 알 것이다. 리액트를 사용하는 개발자라면 누구나 한 번씩은 리덕스를 경험해 봤을 것이다. 리덕스를 사용하는데는 여러 이유가 있겠지만 아마 많은 개발자들은 "상태관리"를 더 원활히 수행하기 위해 사용할 것이다. 그러나 리덕스를 사용해보면 알겠지만 어쩌면 배보다 배꼽이 더 크다고 느낄지도 모른다. 고작 전역상태 "하나"를 만드는데 액션,리듀서,스토어를 생성해야하고 추후에 추가될 경우에 대비해 이를 파일로 나누어 정리한다. 등등의 파일을 말이다. 그러다보면 자연스레 리덕스의 역할을 하면서 완전히 쉬운 라이브러리가 떠오르기 마련이다. 그것이 바로 zustand이다. 이 zustand는 출시된지 꽤 된 라이브러리이지만, 회사에.. 번역)새 아키텍쳐를 소개합니다 - FSD 소개 프론트엔드 개발자는 종종 애플리케이션 아키텍쳐와 관련된 문제에 직면합니다. 쉽게 확장할 수 있고 애플리케이션 모듈 간의 느슨한 결합과 높은 응집성을 제공할 수 있는 아키텍쳐를 사용해야 합니다. 이 기사에서는 Feature-Sliced Design 아키텍쳐에 대해 설명합니다. 내 생각에는 이 방법론이 사용 가능한 옵션 중 최고입니다. 또한 FSD의 개념과 이 아키텍쳐 방법론이 해결하는 문제를 살펴봅시다. 먼저 레이어(layer), 슬라이스(slice), 세그먼트(sgment)라는 세 가지 개념을 구별해 보겠습니다. 레이어 레이어는 최상위 디렉터리이자 애플리케이션 분해의 첫 번째 수준입니다. 레이어 수는 최대 7개로 제한되어 있으며 표준화되어 있지만 일부는 선택 사항입니다. (준희 - 실제로 FSD 공.. 리액트 19가 또 나오네 2024년 연말에 리액트 19가 나올 예정이다. 블로그 useMemo, useCallback, memo는 리액트에서 불필요한 리렌더링 최적화를 진행하는데 없어서는 안될 훅이다. 그런데 이번 19버전에서는 이 훅들이 사라질 예정이라고 한다. (정확히는 deprecated) 이제 리액트에서 이부분을 알아서 최적화해주는 것으로 바뀐다고 한다. 때문에 리액트 사용자들은 해당 훅들을 사용하여 최적화하는 시간에 다른 생산적인(비즈니스 로직 등)에 집중할 수있다. 두번째로 forwardRef가 없어진다고 한다. const ChildComponent = React.forwardRef( ({ data,ref }: dataTypes, ref) => { return ( // ... ); } ); 기존 forwardRef로 .. CS) 웹 브라우저에 URL을 입력하면.(GSLB, CDN) 해당 내용은 이미 수많은 블로그와 유튜브에 많이 나와있는 내용이다. 이미 나 또한 이 내용을 알고 있었지만, 최근 같은 팀원분께서 위 내용을 질문했고 나는 어버버거리며 질문에 대한 답을 말하지 못하였다. 즉 머릿속으로는 알고 있지만 정리되지는 않아 입으로 말할 수 없는 것이다. 이는 결코 "알고있다"라고 말할 수가 없다. 때문에 다시 한 번 내용을 복습하려 한다. IP주소 우선 국민 포털사이트 네이버로 접속하는 상황을 가정한다.(사용자의 OS는 Window이다) 브라우저는 네이버의 웹서버에 접속하기 위해 네이버의 IP주소를 알아야한다. 그렇기에 1차적으로 DNS서버에 네이버의 IP주소를 얻어온다. 브라우저는 라우터를 통해 DNS서버에 접속하며 네이버의 IP주소를 받아온다. 하지만 반드시 ISP의 DNS서.. BOJ) 안녕 https://www.acmicpc.net/problem/1535 1535번: 안녕 첫째 줄에 사람의 수 N(≤ 20)이 들어온다. 둘째 줄에는 각각의 사람에게 인사를 할 때, 잃는 체력이 1번 사람부터 순서대로 들어오고, 셋째 줄에는 각각의 사람에게 인사를 할 때, 얻는 기쁨이 1번 www.acmicpc.net 이 문제 또한 어제 풀었던 냅색 알고리즘 문제이다. import sys input = sys.stdin.readline n = int(input()) arr = [0]+list(map(int, input().split())) happy = [0] + list(map(int, input().split())) dp = [[0 for _ in range(101)] for _ in range(n+1)].. 이전 1 2 3 4 5 6 ··· 32 다음
