자바스크립트(60)
-
[JS] 깊이 우선 탐색
1. 깊이 우선 탐색 깊이 우선 탐색(DFS, Depth First Search)은 시작 정점에서 한 방향으로 갈 수 있는 가장 먼 경로까지 깊이 탐색해나가다가 더 이상 갈곳이 이 없으면 마지막에 만났던 갈림길 간선이 있는 정점으로 되돌아와서, 다른 방향의 간선으로 탐색을 계속함으로써 모든 정점을 방문하는 순회 방법이다. 저번에 트리에 대해 포스팅했을 때 전위, 중위, 후위 순회 방법 세 가지를 언급한 적이 있었다. 이 세 가지 방법이 깊이 우선 탐색에 해당된다. 깊이 우선 탐색은 마지막에 만났던 갈림길 간선의 정점으로 가장 먼저 되돌아가 다시 깊이 우선 탐색을 반복해야 하므로 스택을 사용한다. 2. 탐색 과정 그림을 이용해서 알고리즘이 어떻게 돌아가는지 설명해보도록 하겠다. 밑에 [그림1]은 빈 스택과..
2020.06.22 -
[JS] Array.fill([]) 함수와 Copy by Value, Reference
1. Array.fill([]) 자료구조 책을 보고 기수정렬을 프로그래밍할 때 였다. 기수 정렬 포스팅에서는 버킷이라는 객체를 만들때 오브젝트 자체를 생성했지만, 원래는 이 차원 배열을 만들려고 했었다. 하지만 그러지 못했다. 왜냐하면 Array.fill([]) 함수 때문이었다. 다음 프로그램을 보자. const arr = new Array(3).fill([]); arr[0].push(1); /* 이 함수의 출력은? */ console.log(arr); /* 정답 */ /* [ [1], [1], [1] ] */ 위 프로그램의 출력 결과는 무엇일까? 나는 arr의 첫 번째 원소 배열에만 1이라는 요소가 추가될 줄만 알았다. 하지만 결과는 아니었다. 모든 원소 배열에 1이 추가됐던 것이다. 내가 키워드를 잘..
2020.06.20 -
[JS] 기수 정렬
1. 기수 정렬 기수 정렬은 분배 방식의 정렬 방법으로 정렬할 원소의 키값에 해당하는 버킷에 원소를 분배하였다가 버킷의 순서대로 원소를 꺼내는 방법을 반복하는 배열이다. 기수 정렬은 원소의 키를 표현하는 값의 기수만큼의 버킷이 필요하고, 키 값의 길이만큼 기수 정렬을 반복한다. 숫자는 기본적으로 10진수로 표현되기 때문에, 키 값을 가진 원소들을 정렬할 때는 0부터 9까지 총 10 개의 버킷을 사용한다. 정렬의 반복 횟수는 입력 배열의 원소 중 최대 값의 길이 만큼이다. 예를 들어 [103, 3, 22]를 기수정렬을 이용하여 반복해야 할 때, 입력 배열 중에서는 103이 최댓값이므로, 기수 정렬의 반복횟수는 103의 길이인 3이 된다. 2. 동작 순서 길이가 5인 입력배열 [3, 55, 7, 17, 1]..
2020.06.20 -
[JS] 프로그래머스 - 점프와 순간이동
문제설명 OO 연구소는 한 번에 K 칸을 앞으로 점프하거나, (현재까지 온 거리) x 2 에 해당하는 위치로 순간이동을 할 수 있는 특수한 기능을 가진 아이언 슈트를 개발하여 판매하고 있습니다. 이 아이언 슈트는 건전지로 작동되는데, 순간이동을 하면 건전지 사용량이 줄지 않지만, 앞으로 K 칸을 점프하면 K 만큼의 건전지 사용량이 듭니다. 그러므로 아이언 슈트를 착용하고 이동할 때는 순간 이동을 하는 것이 더 효율적입니다. 아이언 슈트 구매자는 아이언 슈트를 착용하고 거리가 N 만큼 떨어져 있는 장소로 가려고 합니다. 단, 건전지 사용량을 줄이기 위해 점프로 이동하는 것은 최소로 하려고 합니다. 아이언 슈트 구매자가 이동하려는 거리 N이 주어졌을 때, 사용해야 하는 건전지 사용량의 최솟값을 return하..
2020.06.18 -
[JS] 계수 정렬
1. 계수 정렬 앞에서 포스팅한 것 중 제일 빠른 알고리즘을 고르자면 O(Nlog₂N)의 속도를 가지는 퀵 정렬, 병합 정렬, 힙 정렬이 있었다. 하지만 이번 포스팅에서는 이 세 개의 정렬보다 더 빠른 속도 O(N)의 속도를 가지는 계수 정렬에 대해서 포스팅하려고 한다. 단, 아래와 같은 조건이 주어졌을 경우다. 5 4 3 2 1 1 1 1 3 4 5 5 2 2 2 다음과 같은 5이하의 원소를 가진 배열의 원소들을 오름차순으로 정렬하시오 2 . 동작 순서 동작 순서는 다음과 같이 간단하다. 1에서 5까지의 원소의 개수를 카운팅한다. 카운팅한 개수만큼 원소들을 나열한다. 끝. 그림을 이용해서 설명을 해보도록 하겠다. 밑의 배열을 오름차순으로 정렬하려고 한다. 5 이하의 모든 자연수의 개수를 세기위해 5라는..
2020.06.17 -
[JS] 반응형 네비게이션 바 만들기
1. 완성본 [동영상] 완성본 2. HTML HTML 구조는 크게 어려운 것이 없다. The Nav Home About Work Projects 3. CSS 내가 어렵다고 생각한 것은 주석을 달아놨다. 엄청나게 어려운 것은 없다. * { margin: 0px; padding: 0px; box-sizing: border-box; } nav { display: flex; justify-content: space-around; align-items: center; /* 요소의 최소 너비 지정, height 속성 무시 vh단위는 브라우저 안쪽 높이(window.innerHeight)을 기준으로 설정된다. 하지만 태블릿이나, 모바일의 경우에는 뷰 포트에 따라 맞춰짐*/ min-height: 8vh; backgro..
2020.06.16