[Korean FE Article] 현실 세계 프런트엔드에서 사용되는 자바스크립트 자료구조: 리액트 코드 예시와 함께
소개
프런트엔드 자바스크립트 개발자로서 자료구조 공부는 필요한가요? 프런트엔드를 개발하며 얼마나 자료구조를 사용하고 계신가요? 이 글에서는 첫 번째 질문에 대한 간단한 답변과 함께 실무에서 사용할 수 있는 예시를 통해 프런트엔드에서 사용되는 자바스크립트 자료구조에 대해 이야기하고 있습니다 :)
개인적으로는 객체와 배열에 익숙해 순간 놓치고 있었던 자료구조들을 다시 한번 상기하면서 구현 아이디어를 얻기도 했는데요, 가벼운 글이지만 다시 한번 리마인드 할 수 있는 글이 되면 좋겠습니다.
tl;dr
프런트엔드 개발에 있어 자료구조를 찾아보기 힘든 것은 사실입니다. 그러나 코드를 엉망으로 만드는 대부분의 경우는 잘못된 자료구조를 선택했기 때문입니다.
Map
키-값 저장소로 제일 흔하게 사용되는 자료구조 입니다.
두 데이터 셋이 서로를 참조할 때 Map을 사용할 수 있습니다.
Set
키를 갖는 집합입니다.
사용자가 선택한 항목을 추적하는 데에 Set을 사용할 수 있습니다.
Stack
사용자 인터렉션 기록을 추적하여 실행 취소 기능을 구현하고자 할 때 Stack을 사용할 수 있습니다.
Queue
계속해서 위에 쌓이는 알림을 표시할 때 Queue를 사용할 수 있습니다.
Tree
중첩된 메뉴, 중첩된 댓글과 같이 중첩된 형태를 표현할 때 Tree를 사용할 수 있습니다.