썸네일 [알고리즘] 삽입 정렬 [Insertion Sort] [알고리즘] 삽입 정렬 [Insertion Sort]삽입 정렬은 카드 게임을 할 때 손에 든 카드를 정렬하는 방식과 유사한 간단한 정렬 알고리즘입니다.이 알고리즘은 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입하는 방식으로 작동합니다.   삽입 정렬의 작동 방식두 번째 원소부터 시작합니다.현재 원소를 이전의 원소들과 비교합니다.현재 원소보다 큰 원소를 만나면, 그 원소를 오른쪽으로 이동시킵니다.작은 원소를 만나거나 배열의 시작에 도달하면, 현재 원소를 그 위치에 삽입합니다.이 과정을 배열의 마지막 원소까지 반복합니다.    예시 1배열 [5, 2, 4, 6, 1, 3]을 오름차순으로 정렬 1단계: [5, 2, 4, 6, 1, 3] (2를 5 앞으로 이..
썸네일 [알고리즘] 선택 정렬 [Selection Sort] [알고리즘] 선택 정렬 [Selection Sort]선택 정렬은 간단하면서도 직관적인 정렬 알고리즘입니다.이 알고리즘의 기본 아이디어는 배열을 순회하면서 가장 작은 (또는 가장 큰) 원소를 찾아 적절한 위치에 놓는 것입니다. 버블 정렬이 큰 값을 배열 끝에 위치시키는 것과 다르게선택 정렬은 작은 값을 한 번에 하나씩 위치에 배열합니다.선택 정렬이 잠재적으로 버블 정렬보다 나은 시나리오는 스왑 수를 최소화하는 경우입니다.버블 정렬은 매번 스왑해서 순서를 바꾸지만 선택 정렬은 각 루프가 끝날 때 한번 바꿉니다.메모리나 스왑수를 고려하는 경우라면 선택정렬이 좋을 수도 있습니다.  작동방식정렬되지 않은 배열에서 가장 작은 원소를 찾습니다.이 원소를 정렬되지 않은 부분의 첫 번째 원소와 교환합니다.정렬된 부분을 ..
썸네일 [알고리즘] 버블 정렬 [Bubble Sort] [알고리즘] 버블 정렬 [Bubble Sort]버블 정렬은 가장 단순한 정렬 알고리즘 중 하나로, 인접한 두 원소를 비교하여 필요시 위치를 교환하는 방식으로 동작합니다.이 과정을 배열이 정렬될 때까지 반복합니다.   동작 원리배열의 첫 번째 원소부터 시작하여 인접한 원소와 비교합니다.현재 원소가 다음 원소보다 크다면 두 원소의 위치를 교환합니다.배열의 끝까지 이 과정을 반복하면 가장 큰 원소가 배열의 끝으로 "버블링"됩니다.이 전체 과정을 배열이 완전히 정렬될 때까지 반복합니다.   예시function bubbleSort(arr){ var noSwaps; for(var i = arr.length; i > 0; i--){ noSwaps = true; for(var j = 0; j arr[j..
썸네일 [알고리즘] 이진 검색 [Binary Search] [알고리즘] 이진 검색 [Binary Search]이진 검색(Binary Search)은 정렬된 배열에서 특정 값을 효율적으로 찾기 위한 알고리즘입니다.이 알고리즘은 다음과 같은 단계를 따릅니다   주의이진 검색은 분류된 배열을 대상으로만 작동함으로 데이터가 분류되어있어야 한다.낮은 수에서 큰 수로, 알파벳 순으로 등등 순서가 있어야 한다.    기본 개념분할 정복 (divide and conquer)배열을 중간을 기준으로 나누고, 그 중간의 죄측 절반 / 우측 절반에 있을지 확인     이진 검색 방법중간 값 확인배열의 중간 값을 확인합니다.  비교찾고자 하는 값과 중간 값을 비교합니다.찾고자 하는 값이 중간 값보다 작으면, 배열의 왼쪽 절반을 탐색합니다.찾고자 하는 값이 중간 값보다 크면, 배열의 오..
썸네일 [알고리즘] 핼퍼 메소드 재귀 (Helper Method Recursion) [알고리즘] 핼퍼 메소드 재귀 (Helper Method Recursion)Helper Method Recursion은 재귀를 사용할 때 주로 활용되는 패턴 중 하나입니다.이 패턴은 재귀 함수를 쉽게 관리하고, 필요한 추가 변수를 전달하기 위해 사용됩니다.기본 아이디어는 메인 함수가 헬퍼 함수를 호출하고, 이 헬퍼 함수가 실제 재귀 로직을 수행하는 것입니다.이 방식은 특히 초기 매개변수 설정이나 결과 축적이 필요한 경우 유용합니다. 일종의 결과를 컴파일할 때 흔히 사용되는 패턴.결과는 보통 배열이나, 배열과 비슷한 다른 형태 데이터 구조    기본모양function outer(input) { var outerScopedVariable = []; function helper(helperInpu..
썸네일 [알고리즘] 재귀 (Recursion) [알고리즘] 재귀 (Recursion)재귀(Recursion)는 알고리즘과 프로그래밍에서 많이 사용되는 중요한 개념 중 하나입니다.재귀란 함수가 자기 자신을 호출하는 프로그래밍 기법을 말합니다.이를 통해 복잡한 문제를 간결하고 우아하게 해결할 수 있습니다.이번 블로그 포스트에서는 재귀의 기본 개념과 함께, 재귀를 사용하여 문제를 해결하는 방법을 설명하겠습니다.   개념재귀 함수는 자기 자신을 호출하는 함수입니다.재귀를 효과적으로 사용하기 위해서는 두 가지 중요한 요소가 필요합니다 기저 조건(Base Case)재귀 호출을 멈추기 위한 조건입니다.기저 조건이 없으면 함수는 무한히 자신을 호출하게 되어 프로그램이 종료되지 않습니다. 재귀 단계(Recursive Step)문제를 더 작은 하위 문제로 분해하고, ..
썸네일 [React] 혹시 리액트 렌더링 과정을 아시나요? [React] 혹시 리액트 렌더링 과정을 아시나요? 리액트의 첫 렌더링첫 렌더링때 데이터들을 초기화 합니다 (state, props) 초기화된 값을 반영한 jsx를 반환합니다.반환한 jsx를 참조해서 Virtual Dom을 만듭니다.버츄얼 돔을 참고해서 실제 돔을 만듭니다.실제 돔을 브라우저에 삽입합니다.LayoutEffect 실행됩니다.이후에 브라우저는 변경을 감지해서 브라우저 렌더링을 진행하게 됩니다.버츄얼 돔을 통해 만들어진 실제돔 + cssom을 가지고 렌더트리를 만듭니다.각 요소에 대한 위치, 크기를 잡는 Layout 작업을 합니다.스타일을 적용하는 Paint 작업을 합니다.레이아웃이 여러개 있는 경우 각 레이어를 합쳐 최종화면을 만드는 Composite 작업을 합니다.UseEffect 실행됩니..
썸네일 [알고리즘] 기준점 간 이동 배열 패턴 (Sliding Window) [알고리즘] 기준점 간 이동 배열 패턴 (Sliding Window)슬라이딩 윈도우(Sliding Window) 알고리즘은 배열이나 리스트와 같은 데이터 구조에서 연속적인 서브 배열(subarray) 또는 서브 리스트(sublist) 문제를 해결하는 데 사용되는 최적화 기법입니다.이 알고리즘을 사용하면 불필요한 계산을 줄이고 효율적으로 문제를 해결할 수 있습니다. 슬라이딩 윈도우 알고리즘은 고정된 크기의 "윈도우"(부분 배열)를 사용하여 배열을 반복적으로 순회하면서 윈도우의 시작점과 끝점을 이동시키는 방식입니다.윈도우를 오른쪽으로 한 칸씩 슬라이드하면서, 새로운 요소를 추가하고 이전 요소를 제거하는 방식으로 문제를 해결합니다.  문제 [ 고정 크기 윈도우 ]임의의 숫자 배열와 숫자 k가 주어졌을 때, 연..
썸네일 [알고리즘] 다중 포인터 패턴: 고유값 세기 (countUniqueValues) [알고리즘] 다중 포인터 패턴: 고유값 세기 (countUniqueValues)https://y-chyachya.tistory.com/142위의 내용과 같이 다중 포인터나 투 포인터 패턴을 사용해서 해결할 수 있습니다.다만 위와 다른것은 처음과 끝에서 가운데로 이동하는게 아닙니다.그래도 마찬가지로 두개의 포인터를 사용한다는 것이 관건입니다.조건에 따라 두 포인터가 특정 방향으로 이동하도록하고 정해진 배열의 개수를 반환합니다.  countUniqueValues([1, 1, 1, 1, 2, 2,]); // 2countUniqueValues([]) // 0countUniqueValues([1, 2, 3, 4, 5, 6, 6, 6, 8]) // 7    힌트위의 설명에 덧붙이자면루프를 돌면서 1부터 j는 루프대..
썸네일 [알고리즘] 다중 포인터 패턴 (Multiple Pointers) [알고리즘] 다중 포인터 패턴 (Multiple Pointers) 이 패턴은 인덱스나 위치를 나타내는 포인터나 값을 설정한 다음, 특정 조건에 따라 중간 지점에서 시작하거나 끝 지점을 향해 이동하는 것을 의미합니다.결국, 배열이나 문자열 같은 선형 구조나, 이중 연결 리스트 또는 단일 연결 리스트 같은 구조를 다루는 방법입니다.핵심은 한 쌍의 값이나 조건을 만족시키는 것을 찾는다는 개념입니다.대부분의 경우, 한 쌍의 값을 찾게 됩니다.  문제 오름차순으로 정렬된 배열이 주어집니다.이 배열에서 합계가 0인 첫 번째 쌍을 찾아야 합니다즉, 배열에서 두 숫자를 찾아 그 합이 0이 되도록 하는 쌍을 찾는 함수입니다.sumZero([-3, -2, -1, 0, 1, 2, 3]); // [-3, 3]sumZero([..
썸네일 로컬스토리지, 세션스토리지, 쿠키에 대한 100점짜리 답변? 로컬스토리지, 세션스토리지, 쿠키에 대한 100점짜리 설명웹 애플리케이션에서 데이터를 클라이언트 측에 저장하는 방식에는 여러 가지가 있습니다.주요 방식으로는 로컬스토리지(LocalStorage), 세션스토리지(SessionStorage), 쿠키(Cookies)가 있습니다.이들 각각은 저장 용량, 유효 기간, 보안 및 사용 사례에 따라 다르게 사용됩니다.   1. 로컬스토리지 (LocalStorage) 로컬스토리지는 웹 브라우저에 데이터를 영구적으로 저장하는 방법입니다.데이터는 브라우저가 닫히거나 컴퓨터가 재부팅된 후에도 유지됩니다. 특징영구 저장: 사용자가 명시적으로 삭제하지 않는 한 데이터는 유지됩니다.용량: 대개 5MB 이상 (브라우저마다 차이가 있음).범위: 동일한 출처(origin) 내에서만 접근..
썸네일 [DNS] 브라우저가 URL로 IP주소(실제주소)를 얻는 방법? [DNS] 브라우저가 URL로 IP주소(실제주소)를 얻는 방법?DNS(Domain Name System)는 URL을 해당 IP 주소로 변환하는 역할을 합니다.이 과정에서 DNS 쿼리는 루트 도메인부터 검색을 시작하여 최종 IP 주소를 얻기까지 여러 단계를 거칩니다.다음은 DNS 쿼리의 과정을 단계별로 설명한 것입니다:   DNS 쿼리 과정 (IP요청 과정)1. DNS Resolver:사용자가 브라우저에 URL(예: www.example.com)을 입력하면, 이 요청은 먼저 사용자의 로컬 DNS Resolver(일반적으로 ISP에서 제공)를 통해 시작됩니다.  2. Root Name Server로컬 DNS Resolver는 루트 네임 서버에 쿼리를 보냅니다.루트 네임 서버는 전 세계적으로 13개의 논리적 ..