JavaScript – GIS Developer

사람이 처리할 수 있는 데이터의 양에는 한계가 있고, 컴퓨터는 이러한 한계를 가진 인간을 보조해주고 인간이 쉽고 빠르게 정보를 파악해 주는 기능을 제공합니다. 검색 결과 등과 같은 정보를 정렬하지 않고 사용자에게 제공할 경우 사용자는 자신이 찾고자 하는 데이터를 찾아 헤매게 됩니다. 하지만 정렬된 데이터라면 빠르게 데이터를 찾을 수 있습니다.

검색 결과를 담기에 적당한 자료 구조는 배열입니다. 특히 Javascript에서는요. 이러한 배열을 정렬하는 코드를 정리해 둡니다.

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    return a - b;
});

var numbers = [4, 2, 5, 1, 3];

numbers.sort(function(a, b) {

return a - b;

});

위의 코드는 배열에 담긴 요소들을 정렬한 결과로 원래의 배열을 변경합니다.

아래는 배열에 담긴 데이터가 Key-Value를 가지는 Object 항목으로 구성된 경우에 대한 정렬 예입니다.

var items = [
    { name: 'Edward', value: 21 },
    { name: 'Sharpe', value: 37 },
    { name: 'And', value: 45 },
    { name: 'The', value: -12 },
    { name: 'Magnetic' },
    { name: 'Zeros', value: 37 }
];

items.sort(function(a, b) {
    var nameA = a.name;
    var nameB = b.name;

    if (nameA < nameB) {
        return -1;
    }

    if (nameA > nameB) {
        return 1;
    }

    return 0;
});

var items = [

{ name: 'Edward', value: 21 },

{ name: 'Sharpe', value: 37 },

{ name: 'And', value: 45 },

{ name: 'The', value: -12 },

{ name: 'Magnetic' },

{ name: 'Zeros', value: 37 }

];

items.sort(function(a, b) {

var nameA = a.name;

var nameB = b.name;

if (nameA < nameB) {

return -1;

}

if (nameA > nameB) {

return 1;

}

return 0;

});

정렬 못지 않게 중요한 것이 필터링(Filtering)입니다. 검색 결과 중 내가 보고자 하는 데이터만을 보고, 아닌 것은 보여주지 않는 것이죠. 정렬과 필터링 기능은 기본적인 기능이지만, 제법 많은 프로그램에서 놓치고 있는 기능이기도 합니다.

웹의 CSS를 이용해 가로에 대한 가운데 정렬은 그럭저럭 쉽게 지정할 수 있지만, 세로 정렬은 왠지 트릭같은 방식으로 지정하는 느낌을 받는다. 그렇다보니, 세로 정렬이 필요한 레이아웃을 구성할때마다 고충이 생기는데.. 이럴때 flex라는 비교적 최신의 CSS 방식을 활용해 이러한 고충을 제거하고자 이 글을 정리한다. 사실 flex 방식은 그 내용이 제법 방대하다. 하지만 체계적인지라 여러번 살펴보면 충분이 이해하고 실제 업무에 활용할 수 있다.

일단 앞서 언급한 가로와 세로에 대한 가운데 정렬을 위한 flex 방식을 이 글을 통해 간단이 언급해 둔다. 가운데 정렬이 필요할때마다 flex를 사용하다보면.. flex의 그밖의 요소들이 하나씩 접근하게 될 것이기 때문이다. 기술이란 그 필요에 의해 사용되고, 자연스럽게 사용되어질때 사용자가 보다 쉽게 이해할 수 있기 때문이다.

아래의 dom 구성에 대한 코드가 있다.

<div class="container">
    <div class="item">DIP2K</div>
    <div class="item">김형준</div>
</div>

</div>

.container 안에 .item 항목을 가로와 세로로 가운데 정렬하고자 한다면 아래와 같은 스타일을 지정하면 된다.

<style>
    .container {
        border: 1px dotted red;
        width: 100%;
        height: 500px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item:first-child {
        border: 1px dotted blue;
    }

    .item:last-child {
        border: 1px dotted green;
    }
</style>

<style>

.container {

border: 1px dotted red;

width: 100%;

height: 500px;

display: flex;

justify-content: center;

align-items: center;

}

.item:first-child {

border: 1px dotted blue;

}

.item:last-child {

border: 1px dotted green;

}

</style>

실제 결과는 아래와 화면처럼 가로와 세로에 대해 가운데로 정렬된 것을 볼 수 있다.

DIP2K

김형준

DIV 요소는 display가 block이다. 그러나 flex의 내부의 항목으로 들어가게 되면 inline-block으로 변경된다는 점을 알 수 있다. 끝으로 이 글을 작성하기 위해 읽었던 문서는 “flexbox의 기본 개념”이다.

카테고리: JavaScript

Javascript의 배열(Array)의 정렬(Sort)

웹에서의 레이아웃을 위한 구세주, Flex