TIL : 정렬 알고리즘, display:table 속성

Today, What I learned?

알고리즘 꾸준히 쌓아가기 💪 ... 를 계속하며 오늘은 세 가지의 정렬 알고리즘에 대해 js로 구현해보았다.

추가적으로 네이버 메인페이지 코드를 분석하다가 알게 된 display: table에 대해서 정리해본다.

 

 

정렬 알고리즘

정렬 알고리즘은 모든 요소가 정렬되어야 하고, 그 안에서 각 요소별로 순차적으로 비교되기 때문에 이중 for문을 이용한다.

따라서 시간 복잡도는 모두 O(n^2)를 가진다.

 

버블 정렬

버블 정렬은 모든 요소들을 대상으로, 인접한 두 값을 비교해서 왼쪽의 값이 더 크다면 자리를 바꾸는 과정을 반복해서 정렬하는 방식이다.

아래 이미지를 참고하면 이해가 좀 더 편하다!

버블정렬이 진행되는 과정

 

js로 구현하기

function bubble_sort(arr) {
  let answer = [...arr];

  for (let i = 0; i < answer.length; i++) {
    for (let j = 0; j < answer.length - i; j++) {
      if (answer[j] > answer[j + 1]) {
        [answer[j + 1], answer[j]] = [answer[j], answer[j + 1]];
      }
    }
  }

  return answer;
}

두 번째 for문은 마지막 인덱스 전까지만 돌아야 하기 때문에 (마지막 인덱스 다음 값은 없으니!) answer.length-i 만큼 돈다.
두 수를 비교하며 앞의 요소가 뒤의 요소보다 크다면 두 값을 교환한다.

 

 

선택 정렬

선택 정렬은 주어진 데이터를 순회하며 가장 작은 값부터 차례대로 선택해서 나열하는 방식이다.

정렬되지 않은 데이터 중에서 가장 작은 값을 선택해서, 선택 값과 정렬되지 않은 데이터 중 첫 번째 원소와 교환한다.

선택 정렬

js로 구현하기

function selection_sort(arr) {
  let answer = [...arr];

  for (let i = 0; i < answer.length; i++) {
    let target = i;

    for (let j = i + 1; j < answer.length; j++) {
      if (answer[j] < answer[target]) {
        target = j;
      }
    }

    [answer[i], answer[target]] = [answer[target], answer[i]];
  }

  return answer;
}

나의 경우에는 선택값을 인덱스로 찾았다.
다음 값이 선택값보다 작은 경우, 인덱스를 해당 인덱스로 교체해서 값들이 교환되도록 했다.

 

 

삽입 정렬

삽입 정렬은 우선 데이터를 정렬된 부분과 정렬되지 않은 부분으로 구별한다.

정렬되지 않은 부분에서 첫 번째 데이터를 뽑아서 정렬 데이터 중 뽑은 데이터가 있어야 할 제자리를 찾아 넣는 과정을 반복한다.

삽입정렬 진행 과정

이 알고리즘은 입력이 거의 정렬된 경우, 다른 정렬 알고리즘보다 빠르게 수행되기 때문에 O(n)의 시간 복잡도를 가질 수도 있다.

필요할 때만 위치를 바꾸기 때문에 효율적이라고도 볼 수 있지만, 삽입될 위치를 찾기 위해 한 번에 한 자리씩만 이동하기 때문에 데이터가 여러 번 이동해야 한다는 단점이 있다.

 

 

js로 구현하기

function insertion_sort(arr) {
  let answer = [...arr];

  // i+1부터 앞의 수보다 작다면? j=0까지 돌아가며 맞는 자리로 교체
  for (let i = 1; i < answer.length; i++) {
    let target = i;

    for (let j = i; j >= 0; j--) {
      if (answer[target] < answer[j]) {
        [answer[target], answer[j]] = [answer[j], answer[target]];
        target--;
      }
    }
  }

  return answer;
}

선택정렬과 비슷하게 이번에도 인덱스를 이용했다.
선택 값에서 거꾸로 돌아가며 자기 자리에 해당하는 인덱스를 찾아서 값을 교환하는 방식!

 

 

 

display: table

css의 display 속성 값으로는 대표적으로 block, inline-block, none, flex, grid.. 같은 것들이 있는데,

표처럼 표현할 수 있는 속성 값들도 있다.

 

이것을 알게 되었을 때, table 태그도 이미 있는데 display 속성 값에 table 관련 속성들이 많은 이유가 뭔지??... 🤔 하는 의문이 들었는데,

이 속성은 말 그대로 css 속성이기 때문에, 표 같은 레이아웃을 구성하고 싶을 때 사용한다는 것이다!..

 

생각보다 종류가 더 많았지만 대략적으로 이 정도만 알아도 괜찮겠다 싶다.

• table :  <table> 태그처럼 사용
• table-cell : display:table 이 선언된 부모 요소 아래에 <td> 태그처럼 사용.
• table-row : display:table 이 선언된 부모 요소 아래에 <tr> 태그처럼 사용.

(왼) table-cell 지정시, (오) table-row 지정시

table-cell 지정시에는 같은 너비로 가로 정렬되는 것을, table-row 지정시에는 같은 세로 높이로 세로 정렬되는 것을 볼 수 있다.

 

 

어떻게 쓰이나?

대표적으로 네이버 메인 페이지에서 gnb 탭의 더보기를 누르면 나오는 드롭다운 메뉴가 있다.

네이버에서 제공하는 모든 서비스를 볼 수 있는 메뉴인데, 전체가 display:table 로 지정이 되어있다.

 

그리고 하단 자식 요소들은 table-cell 이라는 속성을 갖고 있어서 자연스럽게 가로 정렬되며 동일한 너비들을 갖는다.

동일한 너비를 가진다는 것만으로도 이 속성을 이렇게 많은 키워드가 있는 드롭다운 메뉴에서 써볼 이유가 충분하지 않을까!..

 

호환성은 어떤지?

 

Can I use 에서 찾아본 호환성...

나름 최근의 IE에서도 지원을 해주는!... 생각보다 괜찮은 호환성을 가지고 있다. 🙌

 

 

 

 

팀원들과 모레 깃 협업 연습을 하기로 했다.
깃에 더 익숙해져보자~ 🙌