Jveloper

Tree BFselect(너비 우선 탐색)

Jveloper — Tue, 31 Dec 2019 14:46:06 +0900

루트 노드(혹은 다른 임의의 노드)에서 시작해서 인접한 노드를 먼저 탐색하는 방법

Tree {
  value: 0,
  children: [
    Tree { value: 1, children: [Array] },
    Tree { value: 2, children: [Array] }
  ]
} // 들어오는 형태

1. 시작 정점으로부터 가까운 정점을 먼저 방문하고 멀리 떨어져 있는 정점을 나중에 방문하는 순회 방법

2. 즉, 깊게 탐색하기 전에 넓게 탐색하는 것

3. 두 노드 사이의 최단 경로 혹은 임의의 경로를 찾고 싶을때 이 방법을 선택함

Tree.prototype.BFSelect = function(filter) {
  let result = [];
  let queue = [];
  let nextNode;

  queue.push({
    depth: 0,
    node: this
  });

  while (queue.length > 0) {
    nextNode = queue.shift();

    if (nextNode.node.children.length > 0) {
      for (let i = 0; i < nextNode.node.children.length; i++) {
        queue.push({
          depth: nextNode.depth + 1,
          node: nextNode.node.children[i]
        });
      }
    }

    if (filter(nextNode.node.value, nextNode.depth)) {
      result.push(nextNode.node.value);
    }
  }

  return result;
};

너비 우선 탐색의 특징

BFS는 재귀적으로 동작하지 않는다
이 알고리즘을 구현할 때 가장 큰 차이점은 그래프 탐색의 경우 어떤 노드를 방문했었는지 여부를 반드시 검사해야한다
이를 검사하지 않을 경우 무한 루프에 빠질 위험이 있다
BFS는 방문한 노드들을 차례로 저장한 후 꺼낼 수 있는 자료구조인 큐를 사용한다
즉, 선입선출(FIFO) 원칙으로 탐색한다

너비 우선 탐색 과정

깊이가 1인 모든 노드를 방문하고 나서 그 다음에는 깊이가 2인 모든 노드를,
그 다음에는 깊이가 3인 모든 노드를 방문하는 식으로 계속 방문하다가 더 이상 방문할 곳이 없으면 탐색을 마친다

Tree DFselect(깊이 우선 탐색)

Jveloper — Thu, 26 Dec 2019 18:06:15 +0900

루트 노드(혹은 다른 임의의 노드)에서 시작해서 다음 분기(branch)로 넘어가기 전에 해당 분기를 완벽하게 탐색하는 방법

미로를 탐색할 때 한 방향으로 갈 수 있을 때까지 계속 가다가 더 이상 갈 수 없게 되면 다시 가장 가까운 갈림길로 돌아와서 이곳으로부터 다른 방향으로 다시 탐색을 진행하는 방법과 유사함
깊이 우선 탐색(DFS)이 너비 우선 탐색(BFS)보다 좀 더 간단하다
검색 속도 자체는 너비 우선 탐색(BFS)에 비해서 느림

Tree {
  value: 1,
  children: [
    Tree { value: 2, children: [Array] },
    Tree { value: 3, children: [Array] }
  ]
}
// 들어오는 형태

2 3

4 5 6 7

1. filter(callback)으로 노드의 값을 넣어서 true인 것만 result로 push

2. 모든 탐색이 완료되면 result를 push

3. depth를 확인하는 filter도 존재

4. recursion을 호출할 때 depth를 1씩 증가시켜준다.

Tree.prototype.DFSelect = function(filter) {
  let result = [];
  
  let recur = function(node, depth) {
    if (filter(node.value, depth)) {
      result.push(node.value);
    }
    if (node.children.length > 0) {
      for (let i = 0; i < node.children.length; i++) {
        recur(node.children[i], depth + 1);
      }
    }
  };
  recur(this, 0);
  
  return result;
};

깊이 우선 탐색의 특징

자기 자신을 호출하는 순환 알고리즘의 형태를 지님
이 알고리즘을 구현할 때 가장 큰 차이점은 그래프 탐색의 경우 어떤 노드를 방문했었는지 여부를 반드시 검사해야한다는 것
(이를 검사하지 않을 경우 무한루프에 빠질 위험이 있음)

함께 자라기 애자일로 가는 길 / 김창준 지음

Jveloper — Tue, 24 Dec 2019 12:17:54 +0900

읽는중......

CodeStates Alum Night 행사

Jveloper — Mon, 23 Dec 2019 12:53:26 +0900

2019.12.20

스파크플러스 선릉점에서 CodeStates 졸업생들을 대상으로 진행된 연말파티 겸 개발자분들과 소통 할 수 있는 Alum Night 행사에 다녀왔습니다.

CodeStates Alum Night 행사 현장

19시 - 20시는 저녁식사를 함께하는 시간이었는데요,

식사를하면서 같이 공부했던 동기분들과 대화를 나누고 다른기수분들과도 친해질 수 있는 기회가 되었습니다.

행사에서 발표해주신 당근마켓 김재현 대표님, 보이저엑스 오현수 개발자님

20시 - 21시는 개발자 두분의 발표가 있었습니다.

당근마켓 김재현 대표님은 지금의 당근마켓이 만들어지기까지의 과정을 주제로 발표해주셨고,

보이저엑스 오현수 개발자님은 내가 하게될 일, 나는 어떤일을 하고싶은가? 를 주제로 발표해주셨습니다.

후에 사업을 목표로 하고있고, 아직 취업을 하지못한 저에게 딱 필요한 유익한정보를 주제로 발표해주셔서 도움이 많이 되었던 시간이 되었습니다.

ㅐCodeStates Alum Night 행사에 참여하신 졸업생분들

21시 - 21시 30분은 오로지 소통할 수 있는 시간이 되었습니다.

행사에 입장할때 스티커를 받았었는데요,
다른 기수분들 스티커를 두개를 더 받아와야 추첨의 기회가 주어졌습니다.

참여한 다른 기수의 졸업생분들과도 소통할 수 있도록 코드스테이츠 관계자분들이 신경써주셨다는 느낌을 받았습니다.

21시30분 - 22시는 추첨을 하고 상품을 받는 시간으로 진행되었습니다.

스티커는 다 모았는데 아쉽게도 상품은 받지 못해서 사진이 없습니다ㅠㅠ

마지막으로 의미있는 시간 만들어주신 CodeStates 관계자분들에게 감사의 말씀 드립니다.

UI/UX 디자인이란?

Jveloper — Mon, 16 Dec 2019 14:53:19 +0900

UI(User Interface) 디자인

사용자와 모바일 앱(또는 웹) 사이의 인터페이스 즉, 레이아웃과 구조, 색상과 모양 등 시각적인 것

사용자가 제품을 어떤 방식으로 이용하도록 만드느냐를 디자인하는것입니다. 즉, 겉으로 시각화되는 작업이라고 보면 됩니다.

사용자가 실제로 마주하게 될 디자인, 레이아웃 등을 아우르는 개념입니다.

디자인의 구성요소인 폰트, 칼라, 줄간격 등 상세한 요소가 포함됩니다.

선물의 포장

UX(User Experience) 디자인

모바일 앱(또는 웹)에 무엇이 담겨야 할지 전반적으로 구상하고 정보를 수집하여 설계하는 모든 단계

쉽게 말해 사용자 경험을 의미합니다.

통계자료 및 데이터를 기반으로 앱을 사용하는 사용자들의 특성을 분석하여 상황과 시점에 맞게 변화해야 합니다.

사용자가 어떤 제품, 시스템, 서비스 등을 직접적 혹은 간접적으로 이용하면서 느끼는 반응, 행동들과 같은 경험을 총체적으로 설계하는것이 UX 디자인입니다.

선물의 내용물

힙(Heap)

Jveloper — Mon, 16 Dec 2019 12:37:38 +0900

우선순위 큐를 위하여 만들어진 자료구조

우선순위 큐 : 우선순위의 개념을 큐에 도입한 자료구조

데이터들이 우선순위를 가지고 있고 우선순위가 높은 데이터가 먼저 나간다.

우선순위 큐는 배열, 연결리스트, 힙으로 구현이 가능하다.
이 중에서 힙으로 구현하는것이 가장 효율적이다.

자료구조 '힙(Heap)'이란?

완전 이진 트리의 일종으로 우선순위 큐를 위하여 만들어진 자료구조이다.
여러 개의 값들 중에서 최댓값이나 최솟값을 빠르게 찾아내도록 만들어진 자료구조이다.
힙은 일종의 반정렬 상태(느슨한 정렬 상태)를 유지한다.
- 큰 값이 상위 레벨에 있고 작은 값이 하위 레벨에 있다는 정도
- 간단히 말하면 부모 노드의 키 값이 자식 노드의 키 값보다 항상 큰(작은) 이진 트리를 말한다.
힙 트리에서는 중복된 값을 허용한다.(이진 탐색 트리에서는 중복된 값을 허용하지 않는다.)

힙(Heap)의 구현

힙을 저장하는 표준적인 자료구조는 배열이다.
구현을 쉽게 하기 위하여 배열의 첫 번째 인덱스인 0은 사용되지 않는다.
특정 위치의 노드 번호는 새로운 노드가 추가되어도 변하지 않는다.
(예를 들어 루트 노드의 오른쪽 노드의 번호는 항상 3이다)

힙(Heap)의 삽입

힙에 새로운 요소가 들어오면, 일단 새로운 노드를 힙의 마지막 노드에 이어서 삽입한다.
새로운 노드를 부모 노드들과 교환해서 힙의 성질을 만족시킨다.

힙(Heap)의 삭제

최대 힙에서 최댓값은 루트 노드이므로 루트 노드가 삭제된다.
- 최대 힙에서 삭제 연산은 최댓값을 가진 요소를 삭제하는 것이다
삭제된 루트 노드에는 힙의 마지막 노드를 가져온다.
힙을 재구성한다.

React

Jveloper — Sun, 15 Dec 2019 19:03:27 +0900

비교적 짧은 러닝커브

React는 Library로 기본적인 Javascript(ES6)와 Html에 대해 이해하고 있다면 홈페이지에 나와있는 튜토리얼을 통해 시작할 수 있습니다.

재사용성, 유지보수에 용이한 구성요소 보유

React는 Component 구조로 이루어져 재사용성과 유지보수에 있어서 뛰어납니다.

Virtual DOM을 통한 rendering

React는 Virtual DOM을 통해 변화를 가상DOM에 먼저 적용하고 render 시켜 연산을 줄여줍니다.

Component

- React에서 Component는 데이터(ex: Props, State)를 입력받아 DOM Node를 출력하는 함수의 역할을 합니다.

- Component는 UI를 구성하는 개별적인 뷰 단위입니다.

- Application은 이런 Component들이 모여 마치 블록을 조립해 완성본을 만드는것과 같습니다.

- 각 Component들은 Application의 다른 부분 또는 다른 Application에서 쉽게 재사용이 가능합니다.

(Application의 구성요소를 작은 단위로 나누어서 관리를 하게되면 유지보수, 재사용 모두 용이합니다.)

JSX

const element = <h1>Hello, world!</h1>;

JSX(Javascript XML)는 React를 위해 태어난 새로운 자바스크립트 문법의 확장입니다.

JSX는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있습니다.

React는 작성한 코드를 컴파일하는 과정이 필요합니다.(Babel을 사용)

이런 과정을 거쳐 가면서도 우리가 JSX를 사용하는 이유는 우리에게 친숙한 구문을 사용하여 구성요소의 렌더링 구조를 지정하는 방법을 제공합니다.

즉 우리에게 한눈에 이해하기 쉬운 개발 환경을 제공합니다.

Virtual DOM

React 컴포넌트는 render 를 다시 호출하여 새로운 결과값을 return 합니다.
그렇지만 return값은 바로 DOM에 반영되지 않습니다.

바로 브라우저에 render되지 않습니다.

이 과정에서 React는 return값을 가지고 Virtual DOM을 생성하고 이전 브라우저에 보여지고 있는 DOM과 비교하여 변경된 부분을 확인하고 변경된 부분만 우리에게 보여지는 DOM에 적용합니다.

Component

React 컴포넌트를 작성할 때 컴포넌트 이름은 대문자로 시작해야 합니다.

Class vs Functional

Functional

React에서 컴포넌트를 정의하는 가장 간단한 방법은 Javascript의 함수 형식으로 정의하는 것입니다.

state 나 lifecycle이 없는 일반 Javascript 함수이므로 읽기 및 테스트 하기가 수월합니다.

기본적으로는 state, lifecycle등의 기능을 사용할 수 없습니다.

(위 기능들을 Functional 에서 사용할 수 있는 Hook이 존재합니다.)

Class

React.Component에 대한 상속을 작성해야합니다.

(컴포넌트에 React.Component의 기능에 대한 액세스 권한을 제공합니다.)

또한 Class의 경우 "render()" 메소드가 필수적으로 필요하며 render 후 HTML을 리턴합니다.

"Constructor"는 class에서 state나 props를 사용하기 위해 필요한 생성자입니다.

(메소드를 바인딩하거나 state를 바꾸는 작업이 없다면, 해당 React 컴포넌트에는 구현하지 않아도 됩니다.)

"super(props)"는 부모 클래스 생성자를 가리킵니다.

(리액트에서는 React.Component)

Props를 상속받아서 class에서도 사용할 수 있게 도와줍니다.

(constructor에서 super 호출 전에 this를 사용하지 못하게 되어있습니다.)

States

해당 Component에서 동적인 데이터를 관리하는 경우

state를 직접 변경하지 않을 것

-> state를 직접 변경하면 리액트가 이를 감지고 다시 렌더링 하지 않으므로 setState를 이용해야합니다.

state를 유일하게 할당할 수 있는곳은 constructor이다.

리액트가 "여러 setState() 호출" 을 만나면 각 setState() 호출에 전달 된 모든 객체를 추출하여 배치작업을 수행하고,

이를 머지(merge)하여 단일 객체를 형성한 다음 단일 객체를 사용하여 setState()를 수행합니다.

Props

Props는 상위 Component에서 하위 Component로 전달되는 데이터입니다.

또한 불변한 속성을 가지고 있습니다.(동일한 입력이 주어지면 항상 동일한 출력을 렌더링합니다.)

Life cycle

컴포넌트의 수명을 나타내며 페이지에 렌더링 되기 전 준비과정에서 시작해서 페이지에서 사라질 때 끝납니다.

이 생명주기 시점을 이용하여 우리는 다양한 이벤트를 원하는 상황에 맞게 활용할 수 있습니다.

Sort Algorithm 정리

Jveloper — Sun, 15 Dec 2019 17:55:15 +0900

O(N^2) Sort

버블 정렬(Bubble Sort)

시간복잡도는 거의 모든 상황에서 최악의 성능을 보여준다.

만들기 쉽고 직관적일 뿐 되도록이면 쓰지 말아야 할 정렬.

단 예외적으로 이미 정렬된 자료는 1번만 돌면 되기 때문에 최선의 성능을 보여준다.

공간복잡도는 단 하나의 배열에서만 진행하므로 O(N)이다.

선택 정렬(Selection Sort)

버블 정렬이 비교하고 바로 바꿔 넣는걸 반복한다면, 선택 정렬은 모든 요소를 훑어서 가장 작은 요소를 골라내는 방식을 n번 반복한다.

버블 정렬과 비슷하지만 보다 개선된 알고리즘이라고 할 수 있다.

어떻게 정렬되어있건 일관성있게 n(n-1)/2에 비례하는 시간이 걸린다는 특징이 있고, 버블 정렬보다 일반적으로 2배정도 빠르다.

공간복잡도는 역시 단 하나의 배열에서만 진행하므로 O(N)이다.

삽입 정렬(Insertion Sort)

모든 요소에 대해 앞에서부터 차례대로 이미 정렬된 배열과 비교하여 정렬된 배열 내 자신의 위치를 찾아 삽입함으로서 정렬을 완성.

평균적으로 O(N^2)중에서 빠른편이나 자료구조에 따라선 밀어내는데 오랜 시간이 걸린다.

하지만 이미 정렬되어 있는 자료구조에 자료를 하나씩 삽입/제거하는 경우, 오버헤드가 매우 적기 때문에 이름처럼 최선의 알고리즘이 된다.

O(NlogN) Sort

합병 정렬(Merge Sort)

합병 정렬은 퀵 정렬보다 느리고 데이터 크기만한 메모리가 더 필요하므로 공간복잡도도 크다.

하지만 합병 정렬의 최대의 장점은 정렬 시 같은 값이라도 기존 데이터의 순서를 유지한다는 점이다.

이러한 정렬을 Stable Sort 라고도 한다.

힙 정렬(Heap Sort)

기본적인 알고리즘은 선택 정렬과 동일하다.

하지만 힙 정렬의 경우 최소값, 최대값을 찾을때 배열을 순회하는게 아니라 만들어둔 힙을 사용하므로,

찾는데엔 O(logN) 그러므로 정렬에는 총 O(NlogN)의 시간복잡도를 갖게된다.

힙 정렬은 추가적인 메모리를 전혀 필요로 하지 않는다. 또한 최악의 경우 O(N^2)의 성능을 내는 퀵 정렬과는 다르게 항상 일정한 성능을 발휘하므로 최소한의 알고리즘만 정의할 경우 힙정렬이 가장 안정적인 성능을 갖는다.

Q1) 힙 정렬이 퀵 정렬보다 좋은 점은?

Q2) 그럼에도 퀵 정렬이 일반적인 경우에 더 빠른 이유는?

퀵 정렬(Quick Sort)

평균적인 상황에서 최고의 성능을 나타낸다.

컴퓨터로 가장 많이 구현된 정렬 알고리즘 중 하나이며, 거의 모든 언어에서 제공하는 정렬 함수에서 퀵 정렬 혹은 퀵 정렬의 변형 알고리즘을 사용한다.

방식은 먼저 적절한 원소 하나를 기준(피벗, pivot point)으로 삼아 그보다 작은것을 앞으로 빼내고 그 뒤에 피벗을 옮겨 피벗보다 작은 것, 큰 것으로 나눈다.

합병 정렬과는 다르게 unstable sort 이므로 동일 값을 갖는 원소의 순서가 변할 수 있다.

최악의 경우엔 시간복잡도가 O(N^2)가 되는데 피벗을 최솟값이나 최댓값을 계속해서 잡게되는 경우가 그렇다.

퀵 정렬의 경우 피벗을 어떤 값을 잡느냐에 따라 효율이 천차만별로 달라지므로 피벗고르는것이 가장 중요하다.

Q1) 그렇다면 피벗을 잡는 방법으로는 어떤것들이 있을까?

정렬 알고리즘 시간복잡도 비교

구현이 간단하지만 비효율적인 방법
- 삽입 정렬(Insertion Sort), 선택 정렬(Selection Sort), 버블 정렬(Bubble Sort)
복잡하지만 효율적인 방법
- 퀵 정렬(Quick Sort), 힙 정렬(Heap Sort), 합병 정렬(Merge Sort)

힙 정렬(Heap Sort Algorithm)

Jveloper — Sun, 15 Dec 2019 17:33:44 +0900

자료구조 '힙(Heap)'

완전 이진 트리의 일종으로 우선순위 큐를 위하여 만들어진 자료구조
최댓값, 최솟값을 쉽게 추출할 수 있는 자료구조
자료구조 '힙(Heap)' 자세히 알아보기

힙 정렬(Heap Sort) 알고리즘의 개념 요약

최대 힙 트리나 최소 힙 트리를 구성해 정렬하는 방법
내림차순 정렬을 위해서는 최대 힙을 구성하고, 오름차순 정렬을 위해서는 최소 힙을 구성하면 된다.

정렬해야 할 n개의 요소들로 최대 힙(완전 이진 트리 형태)을 만든다.
- 내림차순을 기준으로 정렬
그 다음으로 한 번에 하나씩 요소를 힙에서 꺼내서 배열의 뒤부터 저장하면 된다.
삭제되는 요소들(최댓값부터 삭제)은 값이 감소되는 순서로 정렬되게 된다.

내림차순 정렬을 위한 최대 힙의 구현

힙(Heap)은 1차원 배열로 쉽게 구현될 수 있다.
정렬해야 할 n개의 요소들을 1차원 배열에 기억한 후 최대 힙 삽입을 통해 차례대로 삽입한다.
최대 힙으로 구성된 배열에서 최댓값부터 삭제한다.

힙 정렬(Heap Sort) 알고리즘의 특징

시간 복잡도가 좋은편
힙 정렬이 가장 유용한 경우는 전체 자료를 정렬하는것이 아니라 가장 큰 값 몇개만 필요할때이다.

원소들을 전부 힙에 삽입한다.
그리고 힙의 루트에 있는 값은 남은 수 들 중에서 최소값(최대힙이라면 최댓값)을 가지므로 루트를 출력하고 힙에서 제거한다.

이를 힙이 빌 때까지 반복한다.

기본적인 알고리즘은 선택 정렬과 동일하다.
하지만 힙 정렬의 경우 최소값, 최대값을 찾을때 배열을 순회하는게 아니라 만들어둔 힙을 사용하므로,
찾는데엔 O(logN) 그러므로 정렬에는 총 O(NlogN)의 시간복잡도를 갖게 된다.

힙 정렬은 추가적인 메모리를 전혀 필요로 하지 않는다.

또한 최악의 경우 O(N^2)의 성능을 내는 퀵 정렬과는 다르게 항상 일정한 성능을 발휘하므로 최소한의 알고리즘만 정의할 경우 힙정렬이 가장 안정적인 성능을 갖는다.

선택 정렬(Selection Sort Algorithm)

Jveloper — Sun, 15 Dec 2019 16:21:47 +0900

선택 정렬은 이름에 맞게 현재 위치에 들어갈 값을 찾아 정렬하는 배열이다. 현재 위치에 저장 될 값의 크기가 작냐, 크냐에 따라 최소 선택 정렬(Min-Selection Sort)과 최대 선택 정렬(Max-Selection Sort)로 구분 할 수 있다.

최소 선택 정렬은 오름차순으로 정렬될 것이고, 최대 선택 정렬은 내림차순으로 정렬될 것이다.

1. 정렬 되지 않은 인덱스의 맨 앞에서 부터, 이를 포함한 그 이후의 배열값 중 가장 작은 값을 찾아간다.

(정렬되지 않은 인덱스의 맨 앞은, 초기 입력에서는 배열의 시작위치일 것이다.)

2. 가장 작은 값을 찾으면, 그 값을 현재 인덱스의 값과 바꿔준다.

3. 다음 인덱스에서 위 과정을 반복해준다.

이 정렬 알고리즘은 n-1개, n-2개... 1개씩 비교를 반복한다.

배열이 어떻게 되어있던지간에 전체 비교를 진행하므로 시간복잡도는 O(N^2)이다.

공간복잡도는 단 하나의 배열에서만 진행하므로 O(N)이다.