본문 바로가기

전체 글

(252)
BOJ) 연속 합 - 파이썬 https://www.acmicpc.net/problem/1912  해당 문제의 알고리즘 분류는 DP가 된다. 우선 가장 먼저 생각해 보아야할 것이 브루트 포스 알고리즘이다. n의 수 만큼 반복하며 각각의 모든 연속된 합 중 최대값을 구하는 방법이다. 하지만 해당 방법으로는 해당 문제의 최대 입력 값을 기준으로 100,000^2 시간 복잡도를 가지며 당연하게 시간초과가 나오고 만다. 그럼 가장 먼저 생각나는 것이 DP이다.DP중 캐싱을 통한 방법으로 풀어보았다.n = int(input())arr = list(map(int, input().split()))for i in range(1, n): arr[i] = max(arr[i], arr[i] + arr[i-1])print(arr) 우선 정답 코드이다..
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)]..
BOJ) 평범한 배낭 https://www.acmicpc.net/problem/12865 12865번: 평범한 배낭 첫 줄에 물품의 수 N(1 ≤ N ≤ 100)과 준서가 버틸 수 있는 무게 K(1 ≤ K ≤ 100,000)가 주어진다. 두 번째 줄부터 N개의 줄에 거쳐 각 물건의 무게 W(1 ≤ W ≤ 100,000)와 해당 물건의 가치 V(0 ≤ V ≤ 1,000) www.acmicpc.net 오랜만에 알고리즘 문제를 풀다 처음 마주친 "냅색 알고리즘"을 이용해 풀어야하는 문제이다. 그리디 알고리즘을 생각했으나 조금만 생각해보면 그리디는 최적의 해를 구할 수 없게된다. 우선 냅색 알고리즘은 물건을 쪼개어 부분적으로 담을 수 있는 경우를 고려하거나 또는 각 물건을 선택하거나 선택하지 않았을 때를 고려하는 경우 사용할 수 있..
파이선) 어두운 건 무서워 - BOJ (2D Array prefix sum, and 블로그의 방향성) https://www.acmicpc.net/problem/16507 r, c, q = map(int, input().split()) arr = [] for _ in range(r): arr.append(list(map(int, input().split()))) dp = [[0 for _ in range(c+1)] for _ in range(r+1)] # print(dp) for i in range(1, r+1): for j in range(1, c+1): dp[i][j] = -dp[i-1][j-1] + dp[i][j-1] + dp[i-1][j] + arr[i-1][j-1] for _ in range(q): r1, c1, r2, c2 = map(int, input().split()) num = dp[r2]..
백준) 이건 꼭 풀어야 해! - BOJ https://www.acmicpc.net/problem/17390 17390번: 이건 꼭 풀어야 해! [2, 5, 1, 2, 3]을 비내림차순으로 정렬하면 [1, 2, 2, 3, 5]이다. www.acmicpc.net import sys input = sys.stdin.readline n, q = map(int, input().split()) arr = [0]+list(map(int, input().split())) arr.sort() dp = [] for i in arr: if not dp: dp.append(i) else: dp.append(dp[-1] + i) # print(dp) answer = [] for _ in range(q): l, r = map(int, input().split()) r..
파이썬) 두 배열의 합 - BOJ https://www.acmicpc.net/problem/2143 2143번: 두 배열의 합 첫째 줄에 T(-1,000,000,000 ≤ T ≤ 1,000,000,000)가 주어진다. 다음 줄에는 n(1 ≤ n ≤ 1,000)이 주어지고, 그 다음 줄에 n개의 정수로 A[1], …, A[n]이 주어진다. 다음 줄에는 m(1 ≤ m ≤ 1,000)이 주어지고, 그 www.acmicpc.net 문제가 원하는바는 다음과 같다. 첫번째 배열 arr1 i부터 ,j까지의 합과 arr2의 k,l까지의 합이 t인 개수를 구하는 문제이다. 이 문제는 어떻게 풀어나가면 좋을까 단순히 생각해보자 arr1의 0번째부터. 0번째, 0번째부터 1번째 ... 1부터 1까지, 1부터 2까지 .... n부터 n까지 arr2의 0 - ..
파이썬) 좋다 - BOJ https://www.acmicpc.net/problem/1253 1253번: 좋다 첫째 줄에는 수의 개수 N(1 ≤ N ≤ 2,000), 두 번째 줄에는 i번째 수를 나타내는 Ai가 N개 주어진다. (|Ai| ≤ 1,000,000,000, Ai는 정수) www.acmicpc.net 문제는 arr[i]가 arr에 있는 수들 중 두개의 수의 합으로 만들어 질수있다면 arr[i]는 "좋다"라고 한다 arr에 있는 "좋다"의 갯수를 구하는 문제이다. 애초에 문제 설명부터 투포인터를 사용하세요.라고 설명이 되어있는 듯하다. 그러나 |Ai| ≤ 1,000,000,000, Ai는 정수)라고 되어있는 조건문 때문에 처음에 투포인터를 생각했다가 이분탐색으로 생각을 돌렸다. 나는 투 포인터로 풀었기 때문에 투 포인터로 ..
자바스크립트,react) video스트림 켜기(끈 상태) 비디오 스트림이란 자바스크립트에서 말하는 비디오 스트림이란 웹 브라우저에서 비디오 데이터를 스트리밍하는데 사용되는 개념이다. 일반적으로 웹캠이나 마이크로폰(마이크)과 같은 미디어 장치에서 생성된 미디어 데이터를 실시간으로 전송하거나(with P2P) 원격 서버에서 비디오 데이터를 다운로드하고 재생하는데 사용됩니다. navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(function(stream) { // 비디오 스트림이 준비되면 처리 // stream 객체를 비디오 요소나 오디오 요소의 srcObject에 할당하여 재생 가능 videoElement.srcObject = stream; }) .catch(function(error)..