Reyna.log

해시(Hash)

Mon, 19 Dec 2022 03:05:23 GMT

해시(Hash)

해시는 key-value를 쌍으로 데이터를 저장하는 자료구조이다. Space-Time trade off(시간-공간)의 대표적인 알고리즘에 속한다.

Space-Time trade off(시간-공간) 기존의 배열과 다른 별도의 리스트 공간을 만들어 빠른 알고리즘을 구현하는 방법. 즉 시간을 빠르게 하기 위해서 많은 공간을 사용하는 알고리즘이다. 기수 정렬, 해시, B-tree 등이 이 방식을 사용한다.

key 값이 배열의 인덱스로 저장되기 때문에 검색과 저장이 빠르게 일어나게 된다. 특정 데이터가 저장되는 인덱스가 그 데이터만의 고유한 위치이기 때문에 삽입 시 다른 데이터의 사이에 끼어들거나 삭제 시 다른 데이터로 채울 필요가 없으므로 삽입과 삭제 시 데이터의 이동이 없도록 만들어진 구조이다.

해시의 사용 용도

해시는 주로 해시 테이블, 암호화, 데이터 축약 등에 사용된다.

해시 테이블

해시테이블은 데이터를 입력받아 해시함수를 사용하여 주소를 만들고 그 주소에 데이터를 담는 방식으로 작동한다.

해시 함수

해시 테이블을 만들 때 인덱스로 사용할 고유한 숫자값을 만드는 함수.

해시 함수를 구하는 방법

1. 나눗셈법(division method)

숫자로 된 키를 해시 테이블의 크기 m으로 나눈 나머지를 해시값으로 변환하는 방법 간단하면서 빠른 연산이 장점이다.

주소 = 입력값 % 테이블 크기

일반적으로 나눗셈법으로 해시 함수를 구현할 때 테이블의 크기를 소수(Prime Number)로 정하는 것이 좋다고 알려져 있다.

2. 자릿수 접기(digit folding)

나눗셈법은 충돌을 일으킬 가능성이 높기 때문에 충돌이 일어날 가능성을 줄인 자릿수 접기 방법을 사용하기도 한다. 자릿수 접기는 종이를 접듯이 숫자를 일정한 크기 이하의 수로 만드는 방법이다.

7891242 = 7+8+9+1+2+4+2 78+91+24+2 = 195

위와 같이 각 자릿수를 더해 해시 값을 만드는 방법을 말한다. 문자열의 경우 각 요소를 아스키코드로 바꾸고 이 값들을 각각 더해서 접으면 문자열을 해시 테이블 내의 주소로 바꿀 수 있다.

충돌

해시 함수가 서로 다른 입력값에 대해 동일한 해시 테이블 주소를 반환하는 것을 말한다. 충돌을 해결하는 방법에는 크게 두 가지가 있다.

해시 함수에서 충돌 처리 방법

1. 개별 체이닝

해당 인덱스에 값이 있으면 그 뒤에 중첩해서 연결시키는 방법이다. 개별 체이닝을 사용하면 테이블의 길이보다 더 많은 데이터를 저장할 수 있다.

체이닝의 경우 최악의 경우 한 버킷에 모든 데이터가 들어 있어 시간복잡도가 O(n)이 될 수 있다.

2. 선형 탐색

해시 함수가 반환한 주소에 이미 다른 데이터가 있을 때, 자리가 있으면 데이터를 다음 주소로 이동하며 비어 있는 주소에 입력하는 방식이다. 만약 모든 주소에 데이터가 있을 경우 해시 테이블을 늘리는 리사이징을 진행한 후에 다시 입력한다. 선형 탐색법은 최대 테이블의 길이만큼만 저장할 수 있다.

해시의 시간 복잡도

데이터를 검색할 때 key와 value가 한 쌍으로 존재하고, key 값이 배열의 인덱스로 변환되기 때문에 검색과 저장의 평균적인 시간 복잡도가 O(1)이 된다.

자바스크립트에서 해시 테이블 구현하기

해시 함수 생성


function hashStringToInt(s, tableSize) { 
  let hash = 17;

  for (let i = 0; i < s.length; i++) {
    hash = (13 * hash * s.charCodeAt(i)) % tableSize;
  }
  return hash;
}

키로 들어온 문자열(s)를 반복문을 돌면서 하나씩 charCode로 변환한다.
hash에 17을 할당한 것은 효율적인 키 분산을 위해서이다.

charCodeAt() 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt

해시 테이블 생성


class HashTable {
  table = new Array(71);

//key, value를 받아 테이블에 넣어주는 메서드
  setItem = (key, value) => {
    //해시 함수가 반환하는 해시 값이 인덱스가 된다.
    const idx = hashStringToInt(key, this.table.length);
    //해당 인덱스에 할당
    this.table[idx] = value;
  };

//key를 받아 해당하는 값을 불러오는 메서드
  getItem = (key) => {
    const idx = hashStringToInt(key, this.table.length);
    return this.table[idx];
  };
}

const myTable = new HashTable();
myTable.setItem('firstName', 'k');
myTable.getItem('firstName');

console.log(myTable.getItem('firstName')); //k

해시 맵

Map 객체

키와 값의 쌍으로 이루어진 데이터 구조

객체와의 차이점

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size()

Map 객체는 이터러블이므로 for...of 문으로 순회가 가능하다.

Map을 사용하여 해시맵 구현

//생성
const hashMap = new Map();

//요소 취득
hashMap.set('1',700);
hashMap.set('2',[1,2,3]);

console.log(hashMap); //Map(2) {'1' => 700, '2' => Array(3)}

//값 얻기
hashMap.get('1');

//요소 존재 여부 확인
hashMap.has('1'); //boolean

//요소 탐색
for (let [key,value] of hashMap) {
  console.log(key + ' = ' + value)
}


//요소 삭제
hashMap.delete('1'); //boolean

//요소 일괄 삭제
hashMap.clear(); //undefined 반환

참고 https://dbehdrhs.tistory.com/70 https://ratsgo.github.io/data%20structure&algorithm/2017/10/25/hash/ https://www.geeksforgeeks.org/hashing-data-structure/ https://eunjinii.tistory.com/87

[프로그래머스] 타겟 넘버 (javascript)

Thu, 15 Dec 2022 13:59:39 GMT

🤔 문제

n개의 음이 아닌 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만드는 방법의 수 구하기

제한사항

주어지는 숫자의 개수는 2개 이상 20개 이하입니다. 각 숫자는 1 이상 50 이하인 자연수입니다. 타겟 넘버는 1 이상 1000 이하인 자연수입니다.

입출력 예시

numbers	target	return
[1,1,1,1,1]	3	5
[4,1,2,1]	4	2

의사코드

타겟과 일치하는 배열의 개수를 담을 변수를 선언한다.

dfs 함수를 만든다

함수는 깊이를 나타내는 인덱스와 합계를 입력받아, 만약 배열의 길이와 인덱스가 같으면 (제일 끝까지 내려갔으면) 합계와 타겟이 일치하는지 비교한다. 만약 합계와 타겟이 일치하면 1번에서 선언한 변수에 1을 더해준다.

일치하지 않으면 그냥 리턴한다.

재귀함수를 사용하여 인덱스를 1씩 내려가면서 배열[인덱스] 만큼의 숫자를 더해준다. 재귀를 돌다가 깊이가 배열의 길이와 일치하면 리턴한다.

리턴된 경우 그 다음줄로 내려가 배열[인덱스]만큼의 숫자를 빼준다. 이때 깊이가 다시 일치하면 아예 리턴, 일치하지 않으면 다시 5번으로 돌아가 더해준다.

재귀가 모두 끝나면 1번의 변수를 리턴한다.

제출한 답


function solution(numbers, target) {
    let count = 0;

    dfs(0,0);

    function dfs(index, sum) {
       if (index === numbers.length) {  //여기서 index는 깊이를 의미. length와 깊이가 같아질 때까지 계속 내려감
         if (sum === target) {
            count++;
         }

         return;
       }

        dfs(index + 1 ,sum + numbers[index]); // 5까지 내려갔다가 리턴되면서 아래 코드 실행
        dfs(index + 1, sum - numbers[index]); // 다시 내려감
    }

    return count;
    }

solution([1,1,1,1], 2) 인 경우, 이런 식으로 전개가 될 것이다.

[2022.12.14] 자료구조(Data Structure)

Wed, 14 Dec 2022 07:04:20 GMT

자료구조란?

여러 데이터의 묶음을 저장하고 사용하는 방법을 정의한 것을 말한다.

데이터는 문자, 소리, 숫자, 그림 등 실생활을 구성하고 있는 모든 값으로, 분석하고 정리해서 활용하지 않으면 무의미하다. 데이터를 정리할 때는 데이터의 특징을 잘 파악해서 체계적으로 정리한 후에 저장해두어야 활용하기 유리하다.

자료구조의 특징

자료구조의 특징으로는 효율성, 추상화, 재사용성 등이 있다.

효율성

상황과 목적에 맞게 적절한 자료구조를 선택함으로써 효율적인 데이터 관리가 가능해짐

추상화

복잡한 자료, 모듈, 시스템으로부터 중요한 개념만을 추려낸다.

재사용성

자료구조를 사용해 데이터를 처리할 경우 해당 자료구조의 인터페이스만 이용하여 데이터를 처리하도록 함으로써, 모듈화가 가능해진다.

자료구조의 종류

자료구조는 단순구조, 파일구조, 선형구조, 비선형구조로 나뉜다. 이 중에 자주 쓰이는 선형 구조와 비선형구조를 더 자세히 들여다보면, 선형구조에는 배열, 스택, 큐, 연결 리스트 등이 있고, 비선형구조에는 트리와 그래프가 있다.

자주 등장하는 자료구조

Stack, Queue, Tree, Graph

자료구조를 알아두면 좋은 점

자료구조는 특정 상황에 놓인 문제를 해결하는 데에 특화되어 있다. 따라서 자료구조를 다양하게 알아두면 다양한 상황에서 어떤 자료구조를 사용해야 할지, 어떻게 적용해야 할지 알 수 있고, 적합한 자료구조를 빠르고 정확하게 적용해서 문제 해결을 할 수 있다.

💡 자료 구조를 시각적으로 나타낸 사이트 https://visualgo.net/en

BFS와 DFS

Tue, 13 Dec 2022 12:53:27 GMT

BFS와 DFS는 트리나 그래프 등의 비선형 구조를 무차별 탐색할 때 사용한다. 여기서 무차별 탐색이란 가능한 경우의 수를 전부 시도한다는 의미이다. 거리, 지도 탐색 등에 많이 사용된다.

BFS (Breadth-First Search) 넓이 우선 검색

BFS는 넓이 우선 검색으로, 같은 depth를 모두 확인한 후에 내려가서 다시 검색한다.자식 노드를 전부 방문하고 그 뒤에 후손 노드를 방문하는 식이다. 큐를 이용해서 구현한다.

const  BFS = (graph, start) => {
        const visited = []; //방문한 노드
          const queue = []; //탐색 예정 노드

          queue.push(start);

          while(queue.length !==0){
              const node = queue.shift(); // 선입선출
              if(!visited.includes(node)){
                visited.push(node);
                queue.push(...graph[node]);
            }
        }
      return visited;
    }

DFS (Depth-First Search) 깊이 우선 검색

DFS는 깊이 우선 검색으로, 자식 노드를 끝까지 탐색한 후에 다시 되돌아가서 그 옆 노드를 검색한다. 스택을 이용해서 구현하며, 재귀를 사용하면 더 간단하게 구현 가능하다.

    const  DFS = (graph, start) => {
        const visited = []; //방문한 노드
          const stack = []; //탐색 예정 노드

          stack.push(start);

          while(stack.length !==0){
              const node = stack.pop(); // 후입선출
              if(!visited.includes(node)){
                visited.push(node);
                stack.push(...graph[node].reverse());
            }
        }
      return visited;
    }

힙 정렬 (Heap Sort)

Wed, 07 Dec 2022 08:11:04 GMT

Heap

힙은 완전 이진 트리의 일종으로 최댓값, 최솟값을 쉽게 추출할 수 있고, 중복값을 허용한다는 특징을 가진다.

힙 정렬을 이해하기 위해서는 먼저 이진 트리와 완전 이진 트리에 대해 알아야 한다.

이진 트리

컴퓨터가 데이터를 표현할 때 데이터를 각 노드에 담은 뒤 노드를 두 개씩 이어붙이는 구조를 말하며, 모든 노드의 자식 노드가 2개 이하이다. (데이터의 구조가 나무와 닮았다고 해서 트리 구조라고 부른다.)

완전 이진 트리

데이터가 왼쪽부터 빽빽하게 들어가는 이진 트리를 말한다.

힙 생성 알고리즘

힙 정렬을 수행하기 위해서는 힙 생성 알고리즘(Heapify Algorithm)을 사용한다. 힙 생성 알고리즘은 특정한 '하나의 노드'에 대해 수행하는 것으로, 하나의 노드를 제외하고 최대 힙이 구성되어 있는 상태라고 가정한다. 특정 노드 때문에 힙이 붕괴되어 있다면, 그 노드의 자식 값 중에서 큰 값을 자기 자신으로 바꾼다. 이 과정을 자식이 없을 때까지 반복한다.

위 이미지의 경우 부모 노드인 5보다 자식 노드인 7이 커서 힙에 붕괴가 일어났으므로 둘을 바꿔준다.

힙 생성 알고리즘의 시간 복잡도는 O(log N)이다.

** 힙의 종류**

최대 힙(max heap) 부모 노드의 키 값이 자식 노드의 키 값보다 크거나 같은 완전 이진 트리
최소 힙(min heap) 부모 노드의 키 값이 자식 노드의 키 값보다 작거나 같은 완전 이진 트리

힙 정렬 과정

기본적으로 완전 이진 트리를 표현하는 방법은 다음과 같이 그대로 배열에 담는 것이다.

이 상태에서 힙 생성 알고리즘을 실행하면 힙 구조가 될 때까지 알고리즘이 실행된다.

힙 구조가 만들어지면 가장 큰 값인 루트 노드의 값과, 배열의 마지막 값을 교환한다. 가장 큰 값은 배열의 맨 뒤로 가서 정렬이 완료된 것이므로 제외하고, 나머지 배열로 다시 힙 생성 알고리즘을 수행한다. (만약 최소 힙을 구현하려면 반대로 가장 작은 값이 위에 오도록 한다) 이 과정을 모든 값이 정렬될 때까지 반복하면 정렬이 끝나게 된다. 힙 정렬은 힙 생성 알고리즘의 시간 복잡도인 logN이 전체 원소의 개수 n만큼 반복되므로 O(nlogn)의 시간 복잡도를 가진다.

힙 정렬 구현

전체 트리 구조를 힙 구조로 바꾼다

크기를 줄여가며 반복적으로 힙을 구성한다.(이때 루트 노드와 마지막 노드를 바꾼다)

부모 노드와 자식 노드의 관계 부모의 인덱스 = (자식 인덱스) /2 왼쪽 노드의 인덱스 = 부모 인덱스 * 2 오른쪽 노드의 인덱스 = 부모 인덱스 * 2 + 1

function heapSort(arr) {
  //1. 전체 트리 구조를 최대 힙 구조로 바꾼다
  for (let i = 1; i < arr.length; i++) {
    let c = i;
    do {
      let root = Math.floor((c - 1) / 2);
      if (arr[root] < arr[c]) {
        //자식 노드가 부모 노드보다 크면
        [arr[root], arr[c]] = [arr[c], arr[root]]; //swap
      }
      c = root; //자식이 부모로 이동
    } while (c >= 0);
  }
  //2. 크기를 줄여가며 반복적으로 힙을 구성한다
  for (let i = arr.length - 1; i >= 0; i--) {
    //루트 노드와 가장 마지막 노드를 swap
    [arr[0], arr[i]] = [arr[i], arr[0]];
    let root = 0;
    let c = 1;
    do {
      c = Math.floor(2 * root + 1); //c는 루트의 자식
      //자식 중에 더 큰 값을 찾는다.
      if (arr[c] < arr[c + 1] && c < i - 1) {
        //c가 범위를 벗어나지 않도록 방지
        c++; //오른쪽 값이 더 크면 c를 오른쪽으로 이동(왼쪽 오른쪽 중 더 큰 값이 c가 되도록 함)
      }
      //루트보다 자식이 크면 교환
      if (arr[root] < arr[c] && c < i) {
        [arr[root], arr[c]] = [arr[c], arr[root]];
      }
      root = c; //c를 루트로 이동시킨다.
    } while (c < i);
  }
  return arr;
}

console.log(heapSort([1, 18, 397, 5123, 321, 2135, 534]));

참고 https://github.com/gyoogle/tech-interview-for-developer/blob/master/Computer%20Science/Data%20Structure/Heap.md https://www.youtube.com/watch?v=iyl9bfp_8ag

퀵 정렬(Quick Sort)

Tue, 06 Dec 2022 13:23:53 GMT

퀵 정렬(Quick Sort)이란?

기준값(pivot)을 선정해 해당 값보다 작은 데이터와 큰 데이터로 분류하는 것을 반복해 정렬하는 알고리즘이다.

퀵 정렬 과정

데이터를 분할하는 pivot을 설정한다. 이 경우 pivot의 위치는 임의로 설정해도 된다.
pivot을 기준으로 데이터를 2개의 집합으로 분리한다.

이때 pivot의 왼쪽에는pivot보다 작은 수, 오른쪽에는 큰 수를 놓는다.

분리 집합에서 다시 pivot 을 선정한다.
분리 집합이 1개 이하가 될 때까지 위의 과정을 반복한다.

퀵 정렬의 시간 복잡도

평균적인 시간 복잡도는 O(nlogn)이고, 최악의 경우 O(n^2)이다.

코드

function quickSort(arr) {

  //base case
  if(arr.length < 2) return arr;

  const pivot = [arr[0]]
  const left = [];
  const right = [];

   for (let i = 1; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else if (arr[i] > pivot) {
      right.push(arr[i]);
    } else {
      pivot.push(arr[i]);
    }
  }
return quickSort(left).concat(pivot, quickSort(right));
}

합병 정렬(merge sort)

Tue, 06 Dec 2022 12:43:50 GMT

합병 정렬이란?

분할 정복 방식을 사용해 데이터를 분할하고, 분할한 배열을 정렬하며 합치는 알고리즘

*분할 정복법(Divide and Conquer)? *

주어진 문제를 작은 사례로 나누고(Divide), 각각의 문제들을 해결해서 정복(Conquer)하는 방법이다. 이때 작은 사례가 문제를 해결할 만큼 충분히 작지 않으면 재귀를 사용하여 다시 나누고 정복하는 과정을 반복한다.
정복이라는 단어가 사용되는 게 특이해서 검색해보았는데 나폴레옹이 아우스터리츠 전투에서 오스트리아와 러시아 연합군을 물리치기 위해 중앙으로 들어가 적을 둘로 갈라놓고 개별적으로 싸워 이긴 사례에서 따왔다고 한다..

합병 정렬의 과정

분할 : 입력 받은 배열을 반으로 나눈다.
정복 : 나누어진 배열이 충분히 작아질 때까지 재귀 호출하여 나누고, 정렬한다.
결합 : 정렬된 배열들을 하나의 배열에 병합한다.
합병 정렬의 특징

적은 시간 복잡도를 가진다.
동일한 값에 대해 기존의 순서가 유지되는 안정 정렬이다.
추가적인 리스트를 필요로 하므로 메모리를 차지한다.

합병 정렬의 시간 복잡도

O(nlogn)의 시간 복잡도를 가지고 있다.

의사코드

function merge(left,right) {

  빈 배열을 선언한다

  left, right에 값이 존재하는 동안 반복문을 돌린다
  만약 left의 첫 번째 인덱스와 right의 첫 번째 인덱스를 비교해서
  작은 수를 빈 배열에 넣는다

  만약 left나 right 중 하나에만 값이 존재할 경우
  배열의 마지막에 그 값을 넣어준다

  배열을 리턴해준다(이 값이 mergeSort의 리턴값이 될 것이다)
}

function mergeSort(arr) {

  //base case 
  만약 배열의 길이가 1보다 작으면 바로 리턴한다.

  //recursive case
  중간값을 구한다(나누어떨어지지 않으면 내림) Math.floor(arr.length/2)
  중간값을 기준으로 left와 right로 나눈다.
  left와 right를 각각 mergeSort로 재귀호출한다. 만약 배열의 길이가 1보다 작으면  리턴될 것이다
  리턴 값을 merge 함수로 병합한다.
}

코드

function merge(left, right) {
  const sorted = [];
  while(left.length && right.length){
   if(left[0] < right[0]){
    sorted.push(left.shift()); //left[0]이 작을 때 
   } else {
    sorted.push(right.shift()); //right[0]이 작을 때
   }
 }
  return [...sorted,...left,...right];

}

function mergeSort(arr) {
  //base case 
  if(arr.length <= 1) return arr;

  //recursive case
  const mid = Math.floor(arr.length /2);
  const left = arr.slice(0, mid);
  const right = arr.slice(mid);

  return merge(mergeSort(left),mergeSort(right));
}

left나 right 중에 남은 숫자는 마지막에 붙는다.

```

[React] 카드 슬라이더 만들기(1)

Sat, 03 Dec 2022 01:32:20 GMT

저번 주와 마찬가지로 javascript로 만들어진 카드 슬라이더를 리액트로 클론해보았다. 오늘은 navigation 기능까지 구현했다.

참고
https://wsss.tistory.com/1582

Swiper API https://swiperjs.com/react

!codesandbox[swiperreul-sayonghan-kadeu-seulraideo-yeonseub-6986mq?fontsize=14&hidenavigation=1&theme=dark]

1. Swiper 라이브러리 설치

우선 Swiper라는 라이브러리를 사용할 것이므로 설치해주어야 한다.

npm i swiper

2. import

Swiper.jsx라는 컴포넌트를 만들어 Swiper와 SwiperSlide를 가져왔다.

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css'; //css는 이렇게 가져온다.

3. 기본 틀 만들기

컴포넌트의 리턴 값으로 Swiper와 SwiperSlide를 넣어주었다. 이렇게 하면 화면에는 Slide 1이 떠있고, 슬라이드를 밀면 순서대로 2, 3으로 변한다. 3에서 오른쪽으로 밀어도 1로 되돌아가지는 않았다.

   
      Slide 1
      Slide 2
      Slide 3

4. 기본 CSS 설정

앱의 배경은 기본 CSS를 사용하고, SwiperContainer 부터는 styled-conponents를 사용해서 작성했다.

//styles.css
* {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}

.App {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;

  background: linear-gradient(
    45deg,
    rgb(153, 205, 227) 30%,
    rgb(139, 163, 209) 40%,
    rgb(123, 122, 191),
    rgb(104, 82, 173),
    rgb(81, 39, 155) 60%
  );
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 32px;
}
//배경 이미지 위치가 계속 바뀌는 애니메이션
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

leaner-gradient https://www.notion.so/leaner-gradient-b4762372a40140ca9753e5ebecfc8bf8

색상 추천 사이트 http://khroma.co/generator/ 마음에 드는 색을 선택하면 추천해준다! https://webgradients.com/ gradient 사이트

const StyledSwiperContainer = styled.div`
  /* width: 100%;
  height: 100%; */
  background: linear-gradient(
    270deg,
    rgba(247, 249, 255, 1) 0%,
    rgba(242, 246, 255, 1) 100%
  );
  position: relative;
  max-width: 420px;
  max-height: 420px;
  border-radius: 10px;
`;

const StyledSwiper = styled(Swiper)`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
  position: relative;
`;

//styeld-components를 적용해서 리턴 값도 바뀌었다.
 
      
        Slide 1
        Slide 2
        Slide 3

5. SliderItem Component 만들기

하나의 슬라이드를 나타내기 위한 컴포넌트를 만들었다. 슬라이드마다 이미지와 제목이 다르므로 상위 컴포넌트인 SwiperContainer에서 props로 title과 src를 받아왔다. 지금은 내용을 동일하게 설정했지만, 내용도 바꾸려면 받아와야 한다.

//SliderItem.jsx
const Slideritem = ({ title, src }) => {
  return (
    
      
        
      
      
        {title}
        
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore
        
      
    
  );
};

export default Slideritem;

각 요소마다 css도 적용해주었다.

//SliderItem.jsx
const SliderItemContainer = styled.div`
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: grab;
`;

const SliderItemContent = styled.div`
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.4s;
`;

const SliderImageWrapper = styled.div`
  height: 300px;
  width: 100%;
  overflow: hidden;

  > img {
    width: 100%;
    height: 100%;

    /* cover : 대체 콘텐츠의 가로세로비 유지 & 요소 콘텐츠박스를 가득 채움 */
    object-fit: cover;
    transition: 0.2s;
  }
`;

const Title = styled.h1`
  margin: 0;
  font-weight: bold;
  font-size: 24px;
  /* 행간조절 */
  line-height: 32px;
  color: #26384e;
  transform: translateY(20px);
  transition: all 0.4s ease;
  transition-delay: 0.2s;
  overflow: hidden;
  max-width: 100%;
  /* ellipsis '...' */
  text-overflow: ellipsis;
  /* 공백처리 방법. nowrap은 줄바꿈은 1개의 공백으로 바꾸고, 자동 줄바꿈은 지원하지 않음 */
  white-space: nowrap;

  /* 가로 520px까지 작게 */
  @media screen and (max-width: 520px) {
    & {
      font-size: 16px;
      line-height: 24px;
    }
  }
`;

const Content = styled.p`
  font-size: 16px;
  line-height: 24px;
  color: #889db8;
  transform: translateY(20px);
  transition: all 0.4s ease;
  transition-delay: 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  @media screen and (max-width: 520px) {
    & {
      font-size: 14px;
      line-height: 20px;
    }
  }
`;

SwiperContainer에서 불러온 후 map 함수를 이용해서 SwiperSlide 컴포넌트 안에 Slideritem이 나타날 수 있도록 만들었다. 그리고 items라는 변수를 선언해서 제목과 이미지를 할당하고 Slideritem으로 내려주었다.

//SwiperContainer;jsx
const items = [
  {
    title: "Postcards From Italy",
    src:
      "https://images.unsplash.com/photo-1498307833015-e7b400441eb8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2600&q=80"
  },
  {
    title: "Bunker",
    src:
      "https://images.unsplash.com/photo-1491900177661-4e1cd2d7cce2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
  },
  {
    title: "Small Mountain",
    src:
      "https://images.unsplash.com/photo-1482192505345-5655af888cc4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2600&q=80"
  }
];

//return 
 {items.map((item, idx) => {
              return (
                
                  
                
              );
            })}

레퍼런스에는 슬라이드 방법이 세 가지로 구현되어 있었다.

Navigation
Pagination
Mouse Wheel 모두 모듈을 사용한 것으로 import 해와야 한다.

Swiper 공식 문서 https://swiperjs.com/swiper-api#navigation 참고 https://joyful-development.tistory.com/35 https://velog.io/@sohee-k/React-TypeScript-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-Swiper-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0image-slider-library

(swiper는 8.4.5 버전을 사용했다)

공식문서에는 Navigation 사용 방법이 아래와 같이 나와있다.

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next', //className을 적어주었다
    prevEl: '.swiper-button-prev',
  },
});

하지만 className을 사용하는 방법은 렌더링되는 컴포넌트에서 잘 작동하지 않아서 useRef를 사용했다.

//SwiperContainer.jsx
import SwipeCore, { Navigation } from "swiper";
import "swiper/css/navigation";

//컴포넌트 안에서 Navigation을 불러온다. 
SwipeCore.use([Navigation]);

const prevRef = useRef(null);
  const nextRef = useRef(null);

  const [swiperSetting, setSwiperSetting] = useState(null);

  useEffect(() => {
    if (!swiperSetting) {
      const settings = {
        navigation: {
          prevEl: prevRef.current, 
          nextEl: nextRef.current 
        },
        onBeforeInit: (swiper) => {
          // 초기설정
          swiper.params.navigation.prevEl = prevRef.current;
          swiper.params.navigation.nextEl = nextRef.current;
        }
      };
      setSwiperSetting(settings);
    }
  }, [swiperSetting]);

`useEffect`를 사용한 이유

prevRef와 nextRef에 저장되는 값 때문이다. 만약 settings를 그냥 선언하면 초깃값에 null이 들어간 채로 settings가 선언될 수 있다. 따라서 useEffect를 사용해서 컴포넌트를 렌더링할 때 settings가 선언되어야 값이 잘 들어갈 것이다.

return

//SwiperContainer.jsx

🤔

className="swiper-button-prev" 를 사용하지 않았는데 제거하면 위치가 바뀐다.. 아직 이유를 못 찾았다.
레퍼런스에는 StyledNavigations의 top이 100%로 설정되어 있는데 똑같이 설정하면 화면 밑으로 나간다..
버튼 위치가 오른쪽으로 가지 않았다.
제일 앞 페이지인 경우 맨 뒤로 이동하도록(반대도) 구현이 덜 되었다.
className에 'swiper-slide-active'를 설정하면 css를 적용할 수 있다는데 리액트 컴포넌트에서는 지원하지 않는다고 한다..

css

const StyledNavigations = styled.div`
  position: absolute;
  display: flex;
  top: 55%;
  justify-content: flex-end;
  width: 100%;
  padding-top: 8px;

  > button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    color: #fff;
    position: relative;
    margin-left: 4px;

    /* 마우스 올리면 밑줄 생성 */
    &:before {
      content: "";
      position: absolute;
      background-color: #fff;
      height: 1px;
      width: 0;
      left: 0;
      /* top: 50%;
      transform: translatey(-50%); */
      bottom: -1px;
      transition: 0.2s;
    }

    &:hover:before {
      width: 100%;
    }
    //너비가 520px이하가 되면 보이지 않는다.
    @media screen and (max-width: 520px) {
      &:hover:before,
      &:hover:before {
        display: none;
      }
    }

    /* < >모양 없애기 */
    ::after {
      display: none;
    }
  }
`;

버블 정렬(bubble sort)

Wed, 30 Nov 2022 11:24:14 GMT

버블 정렬

버블 정렬은 두 인접한 데이터의 크기를 비교해 정렬하는 방법이다.

버블 정렬 과정

비교 연산이 필요한 루프 범위 설정
인접한 데이터 값을 비교
swap 조건에 부합하면 swap
반복문이 끝날 때까지 2~3번 반복
정렬 영역을 설정한다. 다음 루프에서 이 영역은 제외
비교 대상이 없을 때까지 반복

만약 특정 루프의 전체 영역에서 swap이 일어나지 않았다면 바로 종료한다.

function bubbleSort(arr) {
      let swapped;
  for (let i=0; iarr[j+1]){ //뒤의 요소가 앞의 요소보다 작으면 
          [arr[j],arr[j+1]] = [arr[j+1],arr[j]] //swap
          swapped = true; //swap이 한 번이라도 일어났다면 true가 된다.
        }

    }
    if(!swapped) return arr;
  }
  return arr; //모든 정렬이 끝난 배열 반환
}

삽입 정렬(Insertion Sort)

Wed, 30 Nov 2022 11:01:18 GMT

삽입 정렬이란?

삽입 정렬은 이미 정렬된 데이터 범위에 아직 정렬이 안 된 데이터를 적절한 위치에 삽입시켜 정렬하는 알고리즘이다.

삽입 정렬은 시간 복잡도가 O(n^2)이지만 구현이 쉽다.

삽입 정렬의 과정

현재 인덱스에 있는 데이터를 선택
현재 선택한 데이터가 정렬된 데이터 범위 중에서 삽입될 위치를 탐색
삽입 위치와 현재 선택한 데이터를 swap 해주고 index++
전체 데이터의 크기만큼 인덱스가 커질 때까지(선택할 데이터가 없을 때까지) 반복

function insertSort(arr) {
  for (let i = 1; i < arr.length; i++) { // [5,4,3,2,1]
    let insert_point = i - 1; //0
    let insert_value = arr[i]; //4

    while (insert_point >= 0 && arr[insert_point] > insert_value) { //0  5>4
      arr[insert_point + 1] = arr[insert_point]; //arr[1]=arr[0] //[5,5,3,2,1]
      insert_point--; //-1
    }
    arr[insert_point + 1] = insert_value; //arr[0]=4 [4,5,3,2,1]
  }
  return arr;
}

insert_value에 arr[i]를 담아두었다가 삽입할 위치를 탐색한 후에 넣어준다.

선택 정렬(selection sort)

Tue, 29 Nov 2022 12:48:21 GMT

선택 정렬이란?

대상 데이터에서 최솟값 (혹은 최댓값)을 찾고, 남은 정렬의 가장 앞에 있는 데이터와 교환하는 알고리즘을 가진 정렬이다.

선택 정렬은 구현 방법이 복잡하고, 시간 복잡도도 O(n^2)로 비효율적이기 때문에 자주 사용하지는 않는다.

선택 정렬의 과정

남은 정렬 부분에서 최솟값(혹은 최댓값)을 찾는다.
남은 정렬에서 가장 앞에 있는 데이터와 선택된 데이터를 교체한다.
가장 앞에 있는 데이터의 위치를 변경해서(index++) 남은 정렬 부분의 범위를 줄이다.
전체 데이터 크기만큼 인덱스가 커질 때까지 (남은 정렬 부분이 없어질 때까지) 반복한다. (이때 마지막 요소는 자동 정렬되므로 반복 횟수는 n-1이다.)

이를 코드로 구현하면 다음과 같다.

  1. arr의 길이-1 만큼 반복문을 돌린다.
  2. 최솟값의 인덱스를 담을 변수를 선언하여 i를 할당한다.
  3. j를 i+1 ~ 리스트 길이만큼 반복문을 돌린다. 
  4. 만약 arr[j]가 arr[minIdx]보다 작다면 최솟값 인덱스에 j를 저장한다.
  5. 만약 최솟값 인덱스가 다른 값(j)으로 바뀌었다면 arr[i]와 arr[j]를 swap 해준다

function selectionSort(arr) { 
  for (let i=0; i



예제   https://www.acmicpc.net/problem/1427



[2022.11.26] ::before, ::after
Sat, 26 Nov 2022 13:27:39 GMT
::before
선택한 요소 앞에 가상 콘텐츠 삽입
::after
선택한 요소 뒤에 가상 콘텐츠 삽입
content
before와 after를 쓸 때 같이 사용하는 익명 대체 요소로, HTML에는 존재하지 않고 CSS에만 존재하는 가짜 요소이다. 따라서 javascript로 제어하기는 어렵다. 

  &:before,
  &:after {
    content: "";
    position: absolute;
  }




[React] sidebar 만들기
Sat, 26 Nov 2022 06:42:39 GMT

참고
https://wsss.tistory.com/124


메뉴 버튼을 클릭하면 버튼 모양이 X로 바뀌고 왼쪽에서 메뉴가 튕겨져 나오는 사이드바를 클론해보았다. 
HTML, CSS, JS로 구현되어 있는 코드를 React와 styled-component로 바꾸면서 Bar와 Menu를 컴포넌트로 만들어 분리했고, 상태는 App에서 관리하여 Close 버튼을 클릭하면 Active로 상태를 변경하여 버튼 모양이 바뀌고 사이드바가 나올 수 있도록 만들었다.  
!codesandbox[keulrighamyeon-saideu-menyu-jelri-seutailro-naogi-nebigeisyeon-wluujq?fontsize=14&hidenavigation=1&theme=dark]

webkit은 벤더프리픽스 중에 하나로, 해당 기능이 포함되지 않은 이전 버전의 웹 브라우저에서도 사용할 수 있도록 붙이는 접미사이다. 
주요 웹 브라우저가 사용하는 벤더 프리픽스는 다음과 같다. 


webkit-transform  (크롬, 사파리)
moz-transform     (파이어폭스)
ms-transform       (익스플로러)
o-transform         (오페라)

https://velog.io/@sena-22/2022.11.26-before-after



[프로그래머스] 올바른 괄호 (javascript)
Thu, 24 Nov 2022 15:22:33 GMT
🤔 문제
주어진 문자열이 올바른 괄호로 이루어져있는지 여부를 리턴

올바른 괄호란?


열림 괄호('(')가 없이 닫힌 괄호(')')가 나오면 올바르지 않은 괄호
열린 괄호는 반드시 짝지어서 닫혀야 함

제한사항
문자열 s의 길이 : 100,000 이하의 자연수
문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다.
입출력 예시



입력
출력



"()()"
true


")()("
false


의사코드


만약 배열의 첫번째 요소가 닫힘 괄호이면 => false 리턴
open,close 변수 선언(초기값 0)
주어진 문자열의 길이만큼 반복문을 돌리면서
배열의 i 번째 요소가 열림 괄호이면 open에 1을 더해주고,
아니라면 close에 1을 더해준다
만약 open의 개수보다 close의 개수가 많다면 열리지 않았는데 닫힌 것이므로 false를 리턴한다
반복이 끝나고 open과 close가 같다면 true 리턴, 아니라면 false를 리턴한다. 


제출한 답
function solution(s){  
     if (s[0] === ')') return false;

        let open = 0;
        let close = 0;

    for (let i=0; i

다른 풀이

변수를 count 하나만 선언하고 ( 일때 더해주고 )일때 빼주는 풀이도 있다. 이 경우 중간에 count가 음수가 될 경우 false를 리턴해주는 방식으로 풀면 된다.




[프로그래머스] 같은 숫자는 싫어 (javascript)
Thu, 24 Nov 2022 15:08:42 GMT
🤔 문제
주어진 배열에서 연속으로 나오는 숫자를 하나만 남기고 제거하고 남은 수들을 리턴하는 함수 만들기
제한사항
배열 arr의 크기 : 1,000,000 이하의 자연수
배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수
입출력 예시



입력
출력



[1,1,3,3,0,1,1]
[1,3,0,1]


[4,4,4,3,3]
[4,3]


의사코드



빈 배열을 선언해준다.
주어진 배열을 순회하면서 => for 문 사용
배열의 i번째 수와 i+1번째 수를 비교해서 같지 않은 경우에만 빈 배열에 push 해준다.
새로운 배열을 리턴한다.

제출한 답
function solution(arr)
{
  let answer = [];

  for (let i=0; i

다른 풀이
function solution(arr)
{
    return arr.filter((val,index) => val != arr[index+1]);
}



Stack과 Queue
Tue, 22 Nov 2022 14:14:52 GMT
Stack

입력과 출력이 하나의 방향에서 일어나는 후입선출(LIFO)로 이루어지는 자료구조를 말한다. 즉 가장 최근에 넣은 데이터가 가장 먼저 나온다. 
Stack에 데이터를 넣는 것을 PUSH, 데이터를 꺼내는 것을 POP이라고 한다.
데이터는 하나씩만 넣고 뺄 수 있다.




https://www.tutorialspoint.com/data_structures_algorithms/stack_algorithm.htm

Stack Overflow와 Stack Underflow


Stack Overflow : 스택이 가득 차 있는데 데이터를 넣으려고 할 때 발생한다. 
Stack Underflow : 빈 스택에서 데이터를 꺼내려고 하는 경우에 발생한다. 
큐에서도 같은 경우 오버플로와 언더플로가 발생한다.

Stack의 활용 예시

스택의 특징인  후입선출(LIFO)을 활용하여 여러 분야에서 활용할 수 있다. 

웹 브라우저 방문기록 (뒤로 가기) : 가장 나중에 열린 페이지부터 다시 보여준다.
역순 문자열 만들기 : 가장 나중에 입력된 문자부터 출력한다.
실행 취소 (undo) : 가장 나중에 실행된 것부터 실행을 취소한다.
깊이 우선 탐색(DFS) : 후보 중에 가장 늦게 추가된 것부터 탐색하는 방법
백트래킹 종류의 코딩 테스트


💡 백트래킹(backtracking)이란? : 해를 찾는 도중 해가 아니어서 막히면, 되돌아가서 다시 해를 찾아가는 기법

예제

💡 https://www.acmicpc.net/problem/1874 스택으로 수열 만들기

Queue

입력과 출력이 반대 방향에서 일어나는 선입선출(FIFO)로 이루어지는 자료구조를 말한다. 
Queue에 데이터를 넣는 것을 enqueue, 데이터를 꺼내는 것을 dequeue라고 한다.
스택과 마찬가지로 데이터는 하나씩만 넣고 뺄 수 있다. 

Queue의 활용 예시

Queue는 주로 데이터가 입력된 시간 순서대로 처리해야 할 필요가 있는 상황에 이용한다.

우선순위가 같은 작업 예약 (프린터의 인쇄 대기열)
선입선출이 필요한 대기열 : 은행 업무, 티켓 카운터, 콜센터 고객 대기시간…
너비 우선 탐색(BFS, Breadth-First Search) 구현 : 후보 정점 중에 가장 먼저 후보에 추가된 것부터 선택한다.
캐시 구현, 버퍼,  실시간 비디오 스트리밍: 스트리밍에서 다운로드 된 데이터가 비디오를 재생하기에 충분하지 않으면 큐에 순서대로 모아 두었다가 충분한 양이 되면 비디오를 복원해서 재생함

예제

💡 https://www.acmicpc.net/problem/2164 카드2

Queue는 자바스크립트의 내장 메서드인 shift()로도 비슷한 기능을 수행할 수 있다. shift() 메서드는 배열의 가장 앞의 원소부터 제거하기 때문이다. 하지만 이 경우 나머지 배열의 원소들을 매번 한 칸씩 앞으로 당겨주는 재정렬을 수행하기 때문에 O(n)의 시간 복잡도를 가지게 되어 위 예제같은 경우에는 적합하지 않다. 따라서 JS의 Class를 이용하여 Linked List를 활용한Queue를 구현하여야 한다. 
참고

https://velog.io/@longroadhome/%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-JS%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94-.%ED%81%90-Queue
(JS로 구현하는 큐 (Queue)
https://ghost4551.tistory.com/133 (Queue 구현 및 시간 복잡도)




시간복잡도(Time Complexity)
Tue, 22 Nov 2022 13:26:21 GMT
🧐 시간복잡도란?
알고리즘의 실행 시간을 표현하는 것을 말한다. 
여기서 실행 시간이란 통상적으로 쓰이는 시분초 개념이 아니라, 함수나 알고리즘 수행에 필요한 스텝 수를 의미한다. (실행 환경마다 성능이 다르기 때문에 시간을 초(seconds)나 밀리초(milliseconds)로 표현하면 편차가 커질 수 있기 때문이라고 한다.)
시간 복잡도는 보통 점근 표기법으로 표현한다. 

점근적  분석(asymptotic analysis)
임의의 함수가 N → ♾️ 일 때 어떤 단순한 형태에 근접해지는지 분석하는 것을 의미한다(점근이란 점점 가까워진다는 의미이다)
쉽게 생각하면 입력의 크기가 충분히 큰 경우에 대한 분석을 의미한다. 크기가 작은 문제에서는 비효율적인 알고리즘을 사용해도 무방하기 때문이다. 


*점근 표기법(asymptotic notation) * 
점근적 분석을 통해 실행시간을 단순하게 표현한 표기법




시간 복잡도를 표현하는 점근 표기법은 크게 세 종류로 나눌 수 있다.
🔸 점근 표기법의 유형
Big-Ω 표기법
최선일 때의 연산 횟수를 나타내며, 점근적 하한선(Asymptotic lower bound)을 의미한다. 
Big Θ-표기법
보통일 때의 연산 횟수를 나타낸다. 점근적 상한과 하한의 교집합(Asymptotic tighter bound)이라고 한다. 
Big-O 표기법
최악일 때의 연산 횟수를 나타낸 것으로, 점근적 상한선(Asymptotic upper bound)을 의미한다. 최소한 보장되는 성능을 표기하기 때문에 일반적으로 많이 사용하며, 다양한 케이스가 존재하는 코딩 테스트에서도 Big-O 표기법을 기준으로 실행 시간을 계산하는 것이 좋다.
🔸 Big-O 표기법의 특징

상수, 계수는 제외한다.


for문이 1개일 때와 3개일 때 연산 횟수는 N과 3N으로 3배 차이가 나지만 코딩 테스트에서 상수를 무시하기 때문에 시간 복잡도는 O(n)이다.


가장 많이 중첩된 반복문의 수행 횟수가 시간 복잡도의 기준이 된다.


이중 for문이 있을 경우 일반 for문이 10개가 있어도 이중 for문이 시간 복잡도의 기준이 되기 때문에 O($n^2$)이 된다.

🔸 Big-O 표기법의 종류

*실행 속도 *
O(1) < O(log N) < O(N) < O(N log N) < O(N^2) < O(2^N)
https://www.freecodecamp.org/news/big-o-cheat-sheet-time-complexity-chart/

1. O(1) (Best)

일정한 복잡도를 가지며 입력값이 증가해도 시간이 늘어나지 않는다
Stack의 push,pop, 배열의 인덱스를 찾을 때

2. O(log n) (Good)

로그 복잡도. O(1) 다음으로 빠른 시간 복잡도를 가진다(시간이 덜 걸린다는 의미..). 매번 입력값이 절반으로 줄어들 때 로그 복잡도를 가진다고 한다.
이진탐색트리

3. O(n) (Fair)

선형 복잡도. 입력값이 증가하면 시간도 같은 비율로 증가한다.
for 문

4. O(n log n) (Bad)

O(N)의 알고리즘과 O(log N)의 알고리즘이 중첩된 형태

퀵 / 병합 / 힙
5. O($n^2$) & O($2^n$) (Worst)

O($n^2$) : 2차 복잡도. 입력값이 증가하면서 시간이 n^2의 비율로 증가한다. (이중 for문)
O($2^n$) : 기하급수적 복잡도. (피보나치 수를 구하는 알고리즘)

데이터 크기에 따라 예상되는 시간 복잡도





데이터 크기 제한
예상되는시간 복잡도



n ≤ 1,000,000
O(n) or O (logn)


n ≤ 10,000
O(n^2)


n ≤ 500
O(n^3)





[2022.11.21] 브라우저의 렌더링 과정
Mon, 21 Nov 2022 11:09:00 GMT
🔸 브라우저란?
선택한 자원을 서버에게 요청하고, 전송받은 자원을 화면에 표시하여 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램을 말한다. 
쉽게 말하면 웹 서버와 통신해서 웹사이트의 다양한 컨텐츠를 볼 수 있도록 지원해주는 프로그램을 말한다.
여기서 자원이란 HTML, CSS, javascript 등을 말한다.
🔸 브라우저의 구조

사용자 인터페이스(UI)
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 말한다. 
브라우저 엔진(레이아웃 엔진)

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 

렌더링 엔진

요청한 콘텐츠를 표시. HTML, CSS 등을 파싱하여 화면에 그려준다.
보통 브라우저 엔진과 하나로 본다.

자바스크립트 해석기(엔진)
자바스크립트 코드를 해석하고 실행한다. 브라우저마다 엔진이 탑재되어 있다.
구글 크롬 V8 엔진의 구조

힙 메모리(Heap Memory)

동적 메모리 할당에 사용되는 자료구조
객체나 동적 메모리를 저장한다

콜 스택(Call Stack)

프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
자바스크립트는 싱글 스레드 기반의 언어이기 때문에 콜스택이 하나이다.
후입 선출 구조를 가진다.
콜 스택에 쌓이는 데이터 하나하나를 스택 프레임이라고 부른다.
콜 스택의 메모리 공간을 넘어버리면 스택 오버플로가 발생한다.
스택 추적
브라우저의 콘솔 로그에서 에러가 어디에서  발생되었는지 추적할 수 있다.



UI 백엔드

렌더링 엔진이 분석한 렌더 트리를 브라우저에 그리는 역할.
OS 사용자 인터페이스 체계를 사용한다.

자료 저장소
웹 스토리지의 특징

웹 브라우저가 직접 데이터를 저장할 수 있게 해준다
사용자 측에서 많은 정보를 안전하게 저장할 수 있게 해준다
데이터가 클라이언트에만 존재해서 트래픽 비용을 줄여준다
오리진마다 하나씩 존재한다


💡 origin : 도메인 + 프로토콜로  이루어진 식별자



웹 스토리지 종류

로컬 스토리지 : 보관 기한이 없는 데이터를 저장. 도메인만 같으면 전역으로 데이터 공유 가능
세션 스토리지 : 하나의 세션만을 위한 데이터 저장. 브라우저 탭이나 창을 닫으면  사라진다.

웹 스토리지 문법

window.localStorage : 만료 날짜가 없는 데이터를 저장할 때 사용
window.sessionStorage : 세션이 있는 데이터를 저장할 때 사용

//window 객체에 있는 Storage 객체를 통해 확인
//해당 객체가 존재하지 않으면 undefined 반환, 객체가 존재하면 function 반환

if(typeof(Storage) !== "undefined") {

    //web storage를 위한  코드

} else {

 //web storage를 지원하지 않는 브라우저를 위한 안내 부분

}
웹 스토리지를 활용한 기능

복구 및 백업 관련 기능에 주로 사용된다.
블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 내용 복구 & 백업
사용자가 입력 폼에 입력하던 중 페이지에서 벗어난 경우 복구 & 백업
현재 읽은 글의 히스토리 저장

🔸 브라우저의 렌더링
브라우저의 렌더링이란 HTML, CSS, Javascript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다. 
1. 사용자가 브라우저를 통해 웹 사이트에 접속한다.
브라우저 검색창에 주소를 치고 엔터를 누르면 먼저 입력한 텍스트가 검색어인지, url 주소인지 확인한다. 
만약 url 주소이면 브라우저 엔진이 네트워크 호출을 수행한다.
2. 네트워크를 호출한다.
2.1. DNS 서버에서 IP 주소를 찾는다. 
URL 주소 중에 도메인 네임을 검색해서 해당 도메인 네임에 해당하는 IP주소를 찾아준다. 
2.2. HTTP 통신
브라우저는 IP 주소로 HTTP 요청을 보낸다. 요청을 받은 서버는 해당 데이터를 사용하여 HTTP 응답 메시지를 생성하여 HTTP 응답을 보낸다.
3. 렌더링




렌더링 엔진이  HTML을 파싱하여 DOM 트리 생성
CSS 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리 생성
1, 2번을 결합하여 렌더 트리 구축
레이아웃 과정을 통해 어디에 배치할 지 결정
UI 백엔드에서 렌더트리를 화면에 그린다.(paint)

파싱(Parsing)
프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계

문서 파싱(document parsing)
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
렌더링 과정에서는 HTML 파일로 DOM 트리를 구축하고 CSS 파일로 CSSOM 트리를 만드는 것을 파싱한다고 표현한다.



DOM Tree

HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것
Document Object Model

CSSOM Tree

파싱 중 ,

데이터 크기 제한	예상되는시간 복잡도
n ≤ 1,000,000	O(n) or O (logn)
n ≤ 10,000	O(n^2)
n ≤ 500	O(n^3)

Reyna.log

해시(Hash)

해시(Hash)

해시의 사용 용도

해시 테이블

해시 함수

해시 함수를 구하는 방법

1. 나눗셈법(division method)

2. 자릿수 접기(digit folding)

충돌

해시 함수에서 충돌 처리 방법

1. 개별 체이닝

2. 선형 탐색

해시의 시간 복잡도

자바스크립트에서 해시 테이블 구현하기

해시 함수 생성

해시 테이블 생성

해시 맵

Map 객체

객체와의 차이점

Map을 사용하여 해시맵 구현

[프로그래머스] 타겟 넘버 (javascript)

🤔 문제

제한사항

입출력 예시

의사코드

제출한 답

[2022.12.14] 자료구조(Data Structure)

자료구조란?

자료구조의 특징

자료구조의 종류

자주 등장하는 자료구조

자료구조를 알아두면 좋은 점

BFS와 DFS

BFS (Breadth-First Search) 넓이 우선 검색

DFS (Depth-First Search) 깊이 우선 검색

힙 정렬 (Heap Sort)

Heap

이진 트리

완전 이진 트리

힙 생성 알고리즘

힙 정렬 과정

힙 정렬 구현

퀵 정렬(Quick Sort)

퀵 정렬(Quick Sort)이란?

퀵 정렬 과정

퀵 정렬의 시간 복잡도

코드

합병 정렬(merge sort)

합병 정렬이란?

합병 정렬의 과정

합병 정렬의 특징

합병 정렬의 시간 복잡도

의사코드

코드

[React] 카드 슬라이더 만들기(1)

1. Swiper 라이브러리 설치

2. import

3. 기본 틀 만들기

4. 기본 CSS 설정

5. SliderItem Component 만들기

6. Navigation 기능

useEffect를 사용한 이유

return

css

버블 정렬(bubble sort)

버블 정렬

삽입 정렬(Insertion Sort)

삽입 정렬이란?

선택 정렬(selection sort)

선택 정렬이란?

[2022.11.26] ::before, ::after

::before

::after

content

[React] sidebar 만들기

[프로그래머스] 올바른 괄호 (javascript)

🤔 문제

제한사항

입출력 예시

`useEffect`를 사용한 이유