짧은코딩

기존 input의 문제점

map 함수 리액트에서 map 함수를 써주게되면 key를 줘야한다. ary.map((item, index) => return {item} ); 나는 보통 이렇게 map 함수의 index를 key 값으로 줬다. 하지만 이는 anti-pattern 중 하나이다. 이렇게 index를 key 값으로 주면 안되는 경우는 ary 배열 중 한 값이 지워지거나, 순서가 달라질때, 중간에 값이 추가되는 경우가 대표적이다. 다만 배열의 값이 절대 바뀔 일이 없다면 key 값을 index로 줘도 상관없다. ary.map((item, index) => return {item} ); 따라서 이런 경우에는 위 코드처럼 고유 id를 만들어서 key 값으로 주는 것이 좋다.

코드 function solution(m, arr) { let answer = Number.MAX_SAFE_INTEGER; let n = arr.length; function DFS(L, sum) { if (sum > m) return; if (L >= answer) return; if (sum === m) { answer = Math.min(answer, L); } else { for (let i = 0; i < n; i++) { DFS(L + 1, sum + arr[i]); } } } DFS(0, 0); return answer; } 풀이 이 문제는 DFS(L, sum)으로 해서 풀어야한다. 여기서 L은 동전의 개수이고 sum은 값의 합이다. 위 사진처럼 가지를 뻗어 가면서 돌아가도록 해야한다. 그러..

인덱스 인덱스의 필요성 인덱스는 데이터를 빠르게 찾을 수 있는 장치이다. ex) 인덱스를 활용해 책 안에 찾고자 하는 항목을 빠르게 찾을 수 있다. B-트리 인덱스는 보통 B-트리 자료구조로 이루어져 있다. 트리 탐색은 노드 -> 브랜치 노드 -> 리프 노드를 거쳐서 내려온다. 찾는 값인 57보다 같어나 클 때까지를 기반으로 탐색하다가 리프 노드에 도착해서 57이 가리키는 데이터 포인트를 통해 값을 반환한다. 인덱스가 효율적인 이유와 대수확장성 인덱스가 효율적인 이유는 균형 잡힌 트리 구조와 트리 깊이의 대수확장성 때문이다. -대수 확장성 대수확장성은 트리 깊이가 리프 노드 수에 비해 매우 느리게 성장하는 것을 의미한다. 트리의 깊이가 1개씩 증가하면 최대 인덱스 항목의 수는 4배씩 증가한다. 이 말은 ..

autosize 공식 페이지 https://www.npmjs.com/package/autosize autosize Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.. Latest version: 5.0.2, last published: a month ago. Start using autosize in your project by running `npm i autosize`. There are 541 other projects in the npm regi www.npmjs.com autosize는 DT라서 TypeScript에서는 TD까지 같이 설치해야된다. 설명 autosize는 texta..

-입력 3 -출력 코드 function solution(n) { let answer = []; let ch = Array.from({ length: n + 1 }, (i) => 0 + i); function DFS(v) { if (v === n + 1) { let temp = ""; for (let i = 1; i 0) answer.push(temp.trim()); } else { ch[v] = 1; DFS(v + 1); ch[v] = 0; DFS(v + 1); } } DFS(1); return answer; } 문제 설명 이 문제는 위 사진처럼 1부터 시작해서 그 숫자가 포함되었는지 안..

멀티 프로세싱 멀티 프로세싱은 여러 개의 프로세스를 통해 동시에 두 가지 이상의 일을 수행하는 것을 말한다. 장점으로는 병렬 처리가 가능하며 특정 프로세스의 메모리, 프로세스에 문제가 생겨도 다른 프로세스를 이용할 수 있어서 신뢰성이 높다. 웹 브라우저 웹 브라우저는 멀티 프로세스 구조를 가지고 있다. 1. 브라우저 프로세스: 주소 표시줄, 북마크 막대, 뒤로 가기, 앞으로 가기 버튼 등 + 네트워크 요청, 파일 접근 등 권한을 담당한다. 2. 렌더러 프로세스: 웹 사이트에서 보이는 모든 부분을 제어한다. 3. 플러그인 프로세스: 웹 사이트의 플러그인을 제어한다. 4. GPU 프로세스: GPU를 사용하여 화면을 그리는 부분을 제어한다. -플러그인이란? 웹 브라우저의 일부 기능들을 쉽게 설치하여 사용하게 ..

코드 function solution(c, stable) { let answer; stable.sort((a, b) => a - b); let lt = 1, rt = stable.slice(-1)[0]; while (lt = ep + mid) { count++; ep = stable[i]; } } if (count >= c) { answer = mid; lt = mid + 1; } else rt = mid - 1; } return answer; } 풀이 방법 이 문제도 이분검색으로 풀어야하는 문제이다. -lt, rt의 정의 두 말 사이의 거리는 [1, 가장 큰 마구간의 좌표]이다. 배열에서 가장 작은 값이 100이어도 다음 숫자는 101부터 올 수 있기 때문에 두 말 사이의 최소값은 1이다. 따라서 lt..

코드 function count(songs, mid) { let album = 1, sum = 0; for (let x of songs) { if (sum + x > mid) { album++; sum = x; } else sum += x; } return album; } function solution(m, songs) { let answer; let lt = Math.max(...songs), rt = songs.reduce((a, b) => a + b, 0); while (lt

HTTP/2 HTTP/2는 HPPT/1.x보다 지연 시간은 줄고 응답 시간을 더 빠르게 할 수 있다. 멀티플렉싱, 헤더 압축, 서버 푸시, 요청의 우선순위 처리를 지원하는 프로토콜이다. 멀티플렉싱 멀티플렉싱은 여러 개의 스트림을 사용해 송수신한다. 만약 특정 스트림의 패킷이 손실되어도 해당 스트림에만 영향을 미치고 다른 스트림은 잘 동작한다. 사진처럼 병렬적인 스트림을 사용하여 데이터를 송수신한다. 또한 스트림 안의 데이터들도 쪼개져있어서 독립된 프레임으로 조각되어 송수신하고 다시 조립하며 데이터를 주고받는다. -스트림(stream) 시간이 지남에 따라 사용할 수 있는 데이터 흐름 -HOL Blocking 해결 HTTP/1.x에서는 앞에 큰 데이터가 오래 걸리면 HOL Blocking이 발생한다. 하지만..