과거의 내가 미래의 나에게
자료구조 정의 및 map과 set 본문
시작은 vue의 반응형 원리를 공부하기 위함이었다. vue의 반응형 코드가 어떤식으로 구현되어있는지 공식문서와 영상을 시청하다가 map, set, weakmap, weakset 같은 것을 쓰는 것을 보았다. 몰랐던 것은 아닌데 따로 공부한 적은 없으니 잘 알지 못했고 그에 따라 거의 사용하지 않았던 것이다. 내 작업사항에는 데이터 가공이 상당 수가 있음을 상기하고 반응형보다는 먼저 위와 같은 자료구조를 공부할 필요성을 느껴서 오늘은 자료구조에 대해서 전반적으로 살펴보았다.
자료구조란?
사실 map, set 이런 애들이 자료구조라는 것도 이번에 처음 알았다. 자료구조와 알고리즘. 많이 들어봤고 프로그래머로써 필수지식이라고는 하는데 솔직히 잘 와닿지 않아 등한시하였던 것 같다. 그러나 이번을 계기로 이것저것 찾아봤는데 자료구조라는 것이 무엇이고 왜 필요한지 갑자기(정말로 갑자기!) 이해가 되었고 실감이 났다.
먼저 자료구조란 무엇이냐, "컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장을 의미한다" 라고 백과에 서술되어있다. 풀어쓰자면 데이터를 어떻게 구성하고 정리할 것인지에 대한 방법인 것이다.
자료구조에 대해 검색해봤더니 글마다 뭔가 정의가 다 다르고 정의하는 방법도 다름을 느꼈다. 다들 어떤 방식으로 정리하였는가에 대해 알기 위해 계속 거슬러오르며 검색하였고 아래에 내 나름대로 정리해보았다.
1. 자료형
먼저 자료형이 있다. 자료형은 string, number, boolean 같은 것으로 데이터를 종류별로 나눈 것으로 변수가 가질 수 있는 값의 종류이다. (자료형에 관련된 글을 보면서 정의된 것이 달라 의문이 들었지만 언어마다 정의된 자료형이 다르기 때문인 것을 알고 난 정말 언어는 js만 알고 살았구나 싶었다.)
2. 추상적 자료형(Abstract Data Type)
그리고 추상적 자료형(Abstract Data Type)이란 것이 있다. 말그대로 추상적인 개념일 뿐 실제 자료형이라 할 수는 없는데, 그 예시로 집합, 리스트, 스택, 큐, 트리, 그래프가 있다. 스택으로 예를 들면, 스택이라는 추상적 자료형은 박스에 데이터를 넣는 순서대로 쌓이고 빼낼 때는 제일 위에 있는 데이터를 빼내는 규칙을 가지고 있으며, 다만 이 스택이 어떤식으로 구현 되었는지는 추상적 자료형에는 알 바가 아니다. 기능 구현은 명세하지 않고 데이터의 형태를 선언하며 기능을 정의할 뿐이다.
3. 자료구조
이제 자료구조에 대해 설명할 수 있다. 자료구조는 추상적 자료형을 구체적으로 구현하는 방법을 제공해주는 것이라 할 수 있다. ADT가 데이터 구조의 청사진을 제공하면 자료구조는 이를 구현하는 것이라 할 수 있다.
프로그래밍 언어마다 자료구조에 대한 지원은 다르며 구현하는 방법에 대해서도 다르게 생각할 수 있으므로 내가 주로 사용하는 언어가 지원하는 자료구조에 대해 파악해보는 것은 필수라 할 수 있겠다(내가 오늘 글을 쓰는 이유!!)
백과의 자료구조 정의를 다시 보면 자료의 조직, 관리, 저장이라 하는데, 결국 위의 자료형이건 ADT건 전부 자료의 조직, 관리, 저장을 위한 방법론인 것이 아닌가 싶다. 분류에 따라 달라지니 내가 자료구조라고 검색했을 때 자료구조에 대한 정의가 다 다르다 느껴졌던 것이고. 정의되기에 따라 다른 것이 아닐까? 현재 이 글은 구글링으로 작성하는 것이라 다소 정확성이 떨어진다 생각이 드니 나중에 자료구조에 관련된 책을 구매해서 읽어봐야겠다. 이번에 읽으면 좀 색다른 느낌으로 다가올 것 같다!
JS 내장 자료구조, MAP, SET
언어마다 기본적으로 내장되어있는 자료구조는 다르다. 또한 언어마다 데이터 구조가 조금씩 다르기에 자료구조를 표현하는 방식도 조금씩 다른 것으로 알고 있다.
여기서는 JS만이 지원하는 내장 자료구조인 map, set에 대해서 알아보려 한다.
1. MAP
map은 key-value 구조로써 객체와 그 형태를 같이 한다. map은 객체에 비해 key의 형태 제한이 없다는 점에서 유용하게 쓰이며 또 반복과 크기를 알 수 있는 내장 메서드가 존재하기에 좀 더 편리하게 사용할 수 있으며 키의 순서가 보장된다는 특징도 가지고 있다. 아래에 특징을 정리했다.
* key-value 구조로 이루어져있다.
* key에는 다양한 자료형을 넣을 수 있다(객체는 문자열만 가능하다)
* key의 중복은 허용되지 않는다.
* 삽입된 순서를 유지하며 index나 key로 값에 접근할 수 있다.
new Map() // map 자료구조 생성
map.set(key, value) // key를 이용해 value를 저장
map.get(key) // key에 해당하는 값을 반환. key가 존재하지 않으면 undefined를 반환
map.has(key) // key가 존재하면 true, 존재하지 않으면 false를 반환
map.delete(key) // key에 해당하는 값을 삭제
map.clear() // map 안의 모든 요소를 제거
map.size // 요소의 개수를 반환
// map <-> object
Object.entries // 객체를 map으로 바꾼다
Object.fromEntries // map을 객체로 바꾼다
2. SET
set은 value로만 이루어져 있는 것으로 배열과 유사하다 할 수 있으나 key와 value가 동일하게 설정되어있다. 배열과 달리 값은 중복될 수 없으면 중복될 경우 뒤의 중복된 것이 삭제된다. set 역시 내장 메서드가 존재하기에 좀 더 편리하게 사용할 수 있다. 아래에 특징을 정리했다.
* value들로 이루어져있다.
* 값의 중복을 허용하지 않는다.
* index가 존재하지 않는다.
new Set(iterable) // set을 생성
set.add(value) // 값을 추가하고 set 자신을 반환
set.delete(value) // 값을 제거. 호출 시점에 set 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.
set.has(value) // set 내에 값이 존재하면 true, 아니면 false를 반환
set.clear() // set을 비움
set.size // set에 몇 개의 값이 있는지 세줌
마무리
프론트엔드 개발자로써 자료구조 공부 필수임? 하는 질문에 대해 솔직히 굳이?라는 답이 나오곤 했다. 왜냐하면 지금까지 개발하면서 자료구조를 몰라서 힘들었던 적은 없었으니깐 말이다. 심지어 자료구조는 개발자로써 기초지식이라길래 억지로라도 공부하려했지만 완전 실무와 동 떨어진 느낌이 나서 몇 번이나 접었던 기억도 있다.
게다가 JS를 주로 다루는 웹 프론트개발자 특성상, 데이터 구조를 섬세하게 고려하여 작업할 정도로 데이터를 다루는 작업도 드물고 무엇보다 JS에서 지원하는 자료구조도 별로 없다.
그러나 자료구조를 알고 개발에 임하는 것과 모르고 임하는 것은 꽤나 차이를 만든다고 생각한다. 자료구조는 말했듯이 기초지식이다. 개발자라면 통용되는 지식이라는 것이다. 이는 프론트에서 필수로 쓰이는 각종 프레임워크에 이곳저곳에 녹아있고 또한 자주 쓰는 라이브러리에도 이러한 지식은 분명 녹아있을 것이다. 내가 쓰는 것이 어떠한 구조를 가지고 있는지, 왜 사람들이 이것을 편하게 사용하는지 알아야지 내가 발전할 수 있다. 또한 프론트도 결국 데이터를 다루는 개발자이다.
참고 문서
- [번역] 현실 세계 프런트엔드에서 사용되는 자바스크립트 자료구조: 리액트 코드 예시와 함께 - https://velog.io/@eunbinn/javascript-data-structures
- 추상적 자료형, 자료구조, 알고리즘의 차이 - https://baileyworld.tistory.com/16