자바스크립트
[React] 크롬 확장 프로그램 개발 배경 지식 및 튜토리얼
[React] 크롬 확장 프로그램 개발 배경 지식 및 튜토리얼
2024.05.28크롬 확장기능 주요 기능사용자 인터페이스 사용자화 : 브라우저 툴바에 버튼 추가, 사용자 정의 팝업/오버레이 생성 등콘텐츠 스크립트 : 웹페이지에 직접 스크립트를 삽입하여 DOM 조작 가능백그라운드 스크립트 : 브라우저를 사용하는 동안 지속적으로 실행돼서 필요한 기능 제공API 접근 : 북마크/탭/윈도우 관리, 히스토리 조작 등 브라우저의 다양한 영역 접근 가능🔍 탭 이동, capture, zoom 등 다양한 방식으로 제어 가능메시징 시스템 : 확장 기능의 다른 컴포넌트 혹은 웹페이지와 메시지 교환 가능웹 요청 조작 : 네트워크 요청 가로채기, 광고 차단, 프라이버시 보호, 웹 트래픽 관리 등🔍 chrome.webRequest API로 http 요청을 가로채거나 request header 수정 가능사..
[Algorithm] 자바스크립트 Map으로 구현하는 LRU Cache 알고리즘
[Algorithm] 자바스크립트 Map으로 구현하는 LRU Cache 알고리즘
2024.05.28LRU 캐시 특징캐시(Cache)는 데이터나 연산 결과를 일시적으로 저장하는 것을 가리킨다. 자주 사용하는 데이터나 연산 결과를 메모리 영역에 보관해서 동일한 정보를 요청받았을 때 더 빠른 속도로 제공할 수 있다. LRU 캐시는 대표적인 캐시 알고리즘 중 하나로 제한된 저장 공간을 관리하기 위해 가장 오래전에 사용한 데이터를 제거하는 알고리즘이다. LRU는 Least Recently Used의 약자로 사용한지 가장 오래된 정도로 해석할 수 있다. LRU 캐시에선 조회/쓰기시 해당 값을 가장 최근에 사용한 것으로 처리하는게 핵심이다. 자바스크립트 Map 등을 이용해서 구현할 땐 값이 뒤에 위치할 수록 가장 최근에 사용한 것으로 표시한다. 조회 : 캐시에 값이 존재하면 해당 값을 캐시 마지막(최신)으로 이동..
[Algorithm] 최소 힙(Heap)으로 우선순위 큐 구현하기
[Algorithm] 최소 힙(Heap)으로 우선순위 큐 구현하기
2024.05.28힙의 특징최단 경로를 찾을 때 널리 사용하는 다익스트라 알고리즘은, 탐색 큐의 자료구조가 전체 성능에 결정적인 영향을 미친다. 때문에 추가/삭제를 빠르게 수행할 수 있는 우선순위 큐를 주로 사용한다. 우선순위 큐는 일반 큐와 비슷하지만, 각 요소가 우선순위를 가지고 있으며, 우선순위가 높은 요소가 먼저 출력된다는 점이 다르다. 우선순위 큐는 크게 배열, 연결리스트, 힙 이렇게 세 가지 방법으로 구현할 수 있다. 그중 완전 이진 트리 구조를 갖는 힙으로 구현하면 추가/제거의 효율성이 크게 향상된다. 구현 방법삽입삭제순서 없는 배열O(1)O(n)순서 없는 연결리스트O(1)O(n)정렬된 배열O(n)O(1)정렬된 연결리스트O(n)O(1)힙O(log n)O(log n) 이진 트리는 각 부모 노드가 왼쪽/오른쪽 최..
[Algorithm] 유클리드 알고리즘 / 소인수분해로 최소공배수 최대공약수 계산하기
[Algorithm] 유클리드 알고리즘 / 소인수분해로 최소공배수 최대공약수 계산하기
2024.05.26N개의 최소공배수프로그래머스 레벨 2의 12953번 문제는 N개의 최소공배수를 구하는 문제다. 최소공배수는 입력된 두 수의 배수 중 공통이 되는 가장 작은 숫자를 의미한다. 예를들어 2와 7의 최소공배수는 14가 된다. 주어진 배열(arr)에서 가장 큰 수의 배수를 나머지 요소와 나눴을 때 모두 0이 되는 수를 찾는 방법으로 풀었지만, 매번 큰 수를 제외한 배열의 모든 숫자를 하나씩 나눠봐야 하기 때문에 효율적이지 않다. 배열 정렬을 제외하고 배열 길이가 n, while문의 반복 횟수가 x이라고 했을 때 시간복잡도는 $O(n \cdot x)$가 된다.function solution(arr) { const sortedArray = arr.sort((a, b) => b - a); const [bigges..
[Algorithm] 땅따먹기 알고리즘 / 동적 계획법
[Algorithm] 땅따먹기 알고리즘 / 동적 계획법
2024.05.25동적 계획법동적 계획법(Dynamic Programming, DP)은 복잡한 문제를 더 작은 하위 문제로 분할하고, 그 결과를 저장하면서 큰 문제를 해결하는 방법이다. 이를 통해 문제의 연산 시간을 효과적으로 줄일 수 있다. 동적 계획법을 적용하기 위해선 다음 두 가지 조건을 만족해야 한다. 피보나치 수열이 아래 두 조건을 만족하는 대표적인 예. 최적 하위 구조 Optimal Substructure작은 하위 문제의 최적 해를 조합하여 전체 문제의 최적 해를 얻을 수 있다.하위 문제 중첩 Overlapping Subproblem동일한 하위 문제가 반복적으로 발생한다. 동적 계획법은 중복 계산 방지를 위해 메모이제이션 혹은 타뷸레이션 기법을 사용한다. 메모이제이션은 재귀 호출을 사용하여 필요한 문제만 계산하..
[JS] split() 메서드에서 빈 문자열이 생기는 원리
[JS] split() 메서드에서 빈 문자열이 생기는 원리
2024.05.24str.split(separator, limit?) 메서드는 구분자(separator)를 기준으로 문자열을 분리할 때 사용하한다. 사용법도 간단하고 개발하면서 가장 많이 사용하는 메서드 중 하나다. 하지만 split()을 사용하다보면 의도치 않게 '' 빈 문자열이 생기는 상황이 종종 발생한다. split() 메서드는 문자열 시작 지점부터 구분자를 탐색하면서 그 사이에 어떤 문자열이 존재하는지 확인한다. 만약 구분자를 제외하고 다른 문자열이 없으면 빈 문자열을 반환한다. 정리하면 아래 3가지 상황에 부합할 때마다 빈 문자열이 발생한다. 구분자가 문자열 처음에 위치할 때구분자가 문자열 마지막에 위치할 때구분자 두 개가 연속으로 나타날 때'?apple'.split('?'); // ['', 'apple']'??..
[React] Proxy를 활용한 Custom Lazy Import
[React] Proxy를 활용한 Custom Lazy Import
2024.05.24React.lazy()React에서 코드 분할을 목적으로(Chunk 분리) 컴포넌트를 Dynamic Import 할 때 React.lazy() 함수를 사용한다. 컴포넌트가 필요한 시점에만 로드되기 때문에, 로딩 중 표시할 컴포넌트나 메시지는 를 활용하여 설정한다. 여러 개의 lazy 컴포넌트를 묶어서 fallback을 한 번에 표시할 수도 있다. 또한, React.lazy()로 불러오려는 컴포넌트는 기본적으로 default export를 사용해서 내보내야 한다.// Child.tsxexport default function Child() { /* ... */ }// Parent.tsximport { Suspense } from 'react';// 컴포넌트 바디에서 호출하면 정상 작동하지 않으므로 주의co..
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
2024.05.24Intro프론트엔드 영역에선 .jsx, .tsx, .vue 등의 확장자를 가진 파일을 사용하지만 브라우저는 이를 이해하지 못한다. 때문에 이러한 파일들은 모두 .js 파일로 변환해야 한다. 모든 파일을 하나의 .js 파일로 만들 수 있지만 이 방식은 성능에 부정적인 영향을 줄 수 있으므로 권장되지 않는다. 대신 여러 .js 파일(chunks)로 변환한 뒤 필요한 순간에만 로드(지연 로딩)하는게 성능에 더 유리하다. 특히 초기 로딩 시간을 줄일 때 유용하다. Vite, Webpack 같은 번들러는 보통 index, vendor 두 개의 메인 chunk를 생성한다. 참고로 Vite 2.9 버전부턴 Production 종속성 모듈이 index chunk에 포함된다.index : App.tsx와 같은 어플리케이..
[JS] 자바스크립트 ES2023 불변성 배열 메서드 톺아보기
[JS] 자바스크립트 ES2023 불변성 배열 메서드 톺아보기
2024.05.23Mutable / ImmutableArray.sort(), Array.reverse(), Array.splice() 같은 배열 메서드는 원본 배열을 변경한다. 객체(배열) 자체를 변경하면 예상하지 못한 사이드 이펙트가 발생할 수 있다. 아래 코드에서 reversed는 결과적으로 regions 배열을 가리키고 있다. 즉, regions reversed 이 둘은 동일하다.const regions = ['Seoul', 'Shanghai', 'Tokyo'];const reversed = regions.reverse();console.log(regions); // ['Tokyo', 'Shanghai', 'Seoul']console.log(reversed); // ['Tokyo', 'Shanghai', 'Seoul..
[JS] 영어 축약어 관련 유틸리티 함수 모음
[JS] 영어 축약어 관련 유틸리티 함수 모음
2024.05.22참고 내용영어에서 Contraction(축약/단축형)과 Abbreviation(약어/축약어)는 다른 개념이다. Contraction: 두 단어를 하나로 줄이기 위해 일부 문자를 생략하고 아포스트로피로 대체한 형태 e.g. I will → I'll, do not → don'tAbbreviation: 단어나 구의 일부 문자만을 사용하여 줄인 형태. 아포스트로피를 사용하지 않는다 e.g. United States → U.S., Doctor → Dr. 축약은 분리 기준에서 제외하는 정규식단어 문자가 아닌 문자열 기준으로 분리// 단어 문자가 아닌 문자열과 일치const NonWordCharPattern = /(\W)/g;const sentence = "I'll make coffee and I've done m..
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
2024.05.22목표아래 DOM 구조에서 가장 안쪽 요소부터 시작해 부모 요소로 갈 수록 중첩 레벨이 1씩 늘어나고, class에 대응하는 dataset에 중첩 레벨 값을 할당해야 한다. 예를들어 class가 "clause" 이고, 해당 요소의 중첩 레벨이 2라면 data-clause-lv="2" 속성을 할당한다. Hello ; 만약 자식 요소가 2개 이상일 땐 자식 요소들중 중첩 레벨이 가장 높은 값 + 1이 부모 요소의 중첩 레벨이 된다. 아래 예시를 기준으로 1번째 자식의 중첩 레벨(data-word-lv="1") 보다, 2번째 자식의 중첩 레벨(data-phrase-lv="2")이 더 높으므로, 부모 요소의 중첩레벨은 3이 된다(data-clause-lv="3"). ..
[Algorithm] 데이터 추가, 삭제, 정렬로 보는 BFS / DFS 탐색 알고리즘
[Algorithm] 데이터 추가, 삭제, 정렬로 보는 BFS / DFS 탐색 알고리즘
2024.05.21예시 데이터단어 혹은 문장부호(' 아포스트로피 제외)를 기준으로 분리한 토큰 인덱스 정보가 담기는 Part 객체가 있다. 이 Part 객체는 child 배열을 가지며, child 배열의 각 요소인 Part는 부모 Part의 토큰 인덱스 범위 내의 인덱스를 가진다. 예를들어 부모 Part의 토큰 인덱스 범위가 2~13이라면 자식 Part의 토큰 인덱스는 3~13(3~13, 4~13, ...) 혹은 2~12(2~12, 2~11, ...) 범위를 가진다.[ // parts 배열 { id: 0, // part begin: 2, end: 13, kc: [{ id: 'kc-1', /* ... */ }], child: [ // parts 배열 { id: 1, // ..