[개발 공부 43일차] JS 자료구조 | 예문 & 용도

 

코드를 작성하는 데 있어서 어려움을 느끼는 이유를 좀 더 곰곰이 생각하다가 자료구조에 대해서 더 명확하게 알고, 또 정리해 두는 게 필요하겠다 싶어서 오늘은 포함해 이번 주말까지는 자바스크립트 자료구조에 대해서 공부할 생각이다.

 

 

< 목차 >
1. JavaScript 주요 자료구조
2. 각 자료구조의 예문 & 용도
3. 금일 소감

 

 

1. JavaScript 주요 자료구조

 

1) 배열(Array)

: 연속적인 메모리 공간에 동일한 타입의 데이터를 순서대로 저장

• 인덱스를 사용해 데이터에 접근 가능
• 다양한 메서드(push, pop, shift, unshift, slice, splice 등)를 통해 배열 조작 가능

 

 

2) 객체(Object)

: 키(key)와 값(value)의 쌍으로 데이터를 저장

• 유연한 데이터 구조를 제공하여 다양한 타입의 데이터를 하나의 객체 내에 저장 가능
• * 객체 리터럴 방식으로 생성하거나, new Object()를 통해 생성 가능

 

 

* 객체 리터럴 방식

: 객체를 생성하는 가장 간단하고 직관적인 방법 중 하나
중괄호 {}를 사용하여 객체를 직접 선언하고, 그 안에 속성 이름과 값의 쌍을 쉼표로 구분하여 나열함으로써 객체를 초기화한다. 이 방식은 객체를 생성하고 초기화하는 과정을 한 번에 수행할 수 있어 매우 편리하다.

다른 객체 생성 방식(예: 생성자 함수나 클래스)에 비해 코드가 간결하고 이해하기 쉽다는 장점이 있다. 또한, JSON(JavaScript Object Notation) 형식과 매우 유사하여 데이터를 표현하고 교환할 때 자주 사용한다.

 

▼   객체 리터럴 방식의 기본 구조

let 객체이름 = {
    속성명1: 값1,
    속성명2: 값2,
    속성명3: 값3,
    // ...
    메서드명: function() {
        // 메서드 내용
    }
};

 

▼  [예문] 사람을 나타내는 객체를 만들고자 할 때

let person = {
    name: 'John Doe',
    age: 30,
    greet: function() {
        console.log('Hello, my name is ' + this.name + '!');
    }
};

// 객체의 속성에 접근하고 메서드를 호출
console.log(person.name); // 출력: John Doe
person.greet(); // 출력: Hello, my name is John Doe!

 

 

 

3) 집합(Set)

: 중복을 허용하지 않는 값의 집합

add, delete, has 등의 메서드를 통해 집합을 조작할 수 있다. 순회 가능하며, forEach와 같은 메서드를 사용할 수 있다.

 

 

4) 맵(Map)

: 키와 값을 쌍으로 가지는 컬렉션

객체와 유사하지만, 키로 모든 값(객체 포함)을 사용할 수 있다는 점이 다르다. set, get, has, delete 등의 메서드로 데이터를 조작할 수 있다.

 

 

5) 스택(Stack)과 큐(Queue)

 

: 스택은 LIFO(Last In First Out) 방식으로, 마지막에 들어온 요소가 먼저 나가는 구조다.

큐는 FIFO(First In First Out) 방식으로, 처음에 들어온 요소가 먼저 나가는 구조다. 자바스크립트에서는 배열 메서드를 활용하여 스택과 큐를 구현할 수 있다.

 

 

6) 연결 리스트(Linked List)

: 각 노드가 데이터와 다음 노드를 가리키는 참조로 구성된 선형 데이터 구조

자바스크립트에서는 객체와 참조를 사용하여 직접 구현해야 한다.

 

 

7) 그래프(Graph)와 트리(Tree)

: 노드(또는 정점)와 노드를 연결하는 간선으로 구성된다. 트리는 계층적인 구조를 가진 그래프의 한 종류로, 부모-자식 관계의 노드로 구성된다. 자바스크립트에서는 객체와 배열을 사용하여 직접 구현할 수 있다.

 

 

이러한 자료구조들은 각각 특정 알고리즘 문제 해결이나 애플리케이션 개발 시 요구되는 데이터 관리를 위해 선택적으로 사용된다. 자바스크립트는 다양한 내장 메서드와 유연한 데이터 타입을 제공하여, 개발자가 효율적으로 자료구조를 구현하고 활용할 수 있는 환경을 제공한다.

 

 

 

2. 각 자료구조의 예문 & 용도

 

1) 배열(Array)

[용도] 순서가 있는 데이터 '목록'을 다룰 때 사용
ex. 사용자 목록, 상품 목록 등을 처리할 때 유용

 

▼  예문

let fruits = ["apple", "banana", "cherry"];
fruits.push("orange"); // 배열 끝에 추가
console.log(fruits); // ["apple", "banana", "cherry", "orange"]

 

2) 객체(Object)

[용도] 복합 데이터를 모델링할 때 사용
ex. 사용자의 상세 정보, 상품의 속성 등을 표현할 때 사용

 

▼  예문

let person = {
  name: "John",
  age: 30,
  city: "New York"
};
console.log(person.name); // John

3) 집합(Set)

[용도] 중복 없는 값의 컬렉션을 관리할 때 사용
ex. 유니크한 아이템 목록, 방문자 추적 등에 활용

 

▼  예문

let numbers = new Set([1, 2, 3, 4, 4]);
numbers.add(5);
console.log(numbers); // Set {1, 2, 3, 4, 5}

 

 

4) 맵(Map)

[용도] 키-값 쌍을 이용해 데이터를 관리할 때 사용
ex. 사용자 ID와 사용자 정보를 매핑할 때 유용

 

▼  예문

let capitals = new Map();
capitals.set("USA", "Washington D.C.");
capitals.set("France", "Paris");
console.log(capitals.get("USA")); // Washington D.C.

 

 

 

5) 스택(Stack)과 큐(Queue)

[용도] 스택은 함수 호출 스택, 식의 평가 등에 사용된다. 큐는 작업 스케줄링, 이벤트 처리 등에 사용된다.

 

▼  예문

(1) 스택(Stack)

let stack = [];
stack.push(1); // 추가
stack.push(2);
console.log(stack.pop()); // 2, 제거 및 반환

 

(2) 큐(Queue)

let queue = [];
queue.push(1); // 추가
queue.push(2);
console.log(queue.shift()); // 1, 제거 및 반환

 

6) 연결 리스트(Linked List)

[용도] 데이터의 '삽입과 삭제가 빈번히 발생'하는 경우 유용
ex. 메모리 관리, 다항식 연산 등에 사용

 

▼  예문

class ListNode {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

let head = new ListNode(1);
head.next = new ListNode(2);

 

 

 

7) 그래프(Graph)와 트리(Tree)

[용도] 네트워크 모델링, 경로 탐색(예: GPS 네비게이션) 등에 사용

 

▼  예문

(1) 그래프(Graph)

class Graph {
  constructor() {
    this.edges = {};
  }

  addVertex(vertex) {
    this.edges[vertex] = [];
  }

  addEdge(vertex1, vertex2) {
    this.edges[vertex1].push(vertex2);
    this.edges[vertex2].push(vertex1); // 무방향 그래프의 경우
  }
}

 

 

(2) 트리(Tree)

class TreeNode {
  constructor(data) {
    this.data = data;
    this.children = [];
  }

  addChild(child) {
    this.children.push(child);
  }
}

 

 

 

3. 금일 소감

자바스크립트 챕터에서 자료구조에 대해 되게 자세히 다뤄주셨는데, 휘발된 것 50%, 그때 당시 너무 어려워서 분명 들었는데 뇌에 스치듯 지나간 효과 50%로 인해 다시 한번 정리 중이다. 코드를 짬에 있어서 어떤 구현적 요구사항이 있을 때 가장 먼저 해야 하는 것은 어떤 것을 만들어야 하는지 알고 그에 적합한 자료구조를 짜는 것이다.

 

그런데 나는 어떤 챌린지 타임어택 때도 그렇고, 그전부터 아예 코드를 짜는 것 자체가 어려웠다. '이게 대체 어떤 원인에서 기인하는 것일까' 깊게 생각하다가 자료구조부터 정확하고 명확하게 알아야겠다는 결론이 도출되었다. 자료구조를 채택하는 방식에 대한 개념과 기초 지식이 부족해서 그런 것 같다. 물론 이게 원인의 전부 다는 아니지만 일단 이것부터 시작하는 게 맞다 싶다.

 

오늘을 포함해 이번 주말까지는 자료구조와 논리 체계에 대해 깊게 파고 들을 생각이다.

 

 

이번 주 화요일에 팀원 중 한 분이 좋은 일로 팀을 떠나셨지만 나는 한두 번도 아니고 이번 팀까지 3명이서 하게 되어 요즘 심적으로 좀 힘들다. 이 과정을 시작한 첫 팀부터 지금까지 다른 팀은 4~5명이서 하는 것을 지금까지 쭉 2~3명이서 하고 있으려니 어려운 것이다. 지금까지 대학생활에서도, 대외활동, 아르바이트 등 항상 팀원들의 무책임함과 협력 의욕 부족으로 나 혼자 한 적도 많았고, 지금처럼 적은 인원으로 팀플레이를 마친 적이 대다수였지만.. 특히 지금 과정처럼 나조차도 처음 해보는 거고 모두를 커버할 수 있는 능력이 안 될 때는 역시 힘들다고 느끼는 것 같다.

 

당연히 "너만 힘들어?" 하면 할 말 없어지고, 물론 나만 이런 건 아니겠지만 말이다. 그리고 주위 동기들에게 다른 팀은 어떤가 하고 물어보면 다들 잘 협력해주고 기획이든 발표든 다 함께 하고 있다는 것을 한 번도 빠짐없이 똑같이 들었는데, 그럴 때마다 허무함과 씁쓸함이 느껴졌다.

 

정말 근 2달 동안 거의 매일을 밤새우다시피하고 잘하려고 누구보다 열심히 했는데 매번 팀 프로젝트 기한마다 부족한 인원과 참여 안 하는 팀원으로 인해 그만큼 더 하다 보니 코드를 생각하고 작성하거나 내 것에만 몰입할 수 있는 시간을 내기 어려웠다. 그러다 보니 공부해야 할 분량도 하염없이 미뤄져서 '밤새우는 게 일상이었지만 그 기한 동안 난 뭘 한 거지? 프로젝트 결과는 엉망이고, 코딩 실력도 진전이 없고'가 돼버렸다.

 

계속 의욕이 떨어졌다. '성과 없는 열정과 의욕'이라는 생각의 색이 짙어져서 그 결과는 번아웃으로 오는 것 같다. 팀 프로젝트마다 가까스로 하고, 인원과 기한은 적으니 늘 급급해서 코드를 예문 보고 작성하거나 Chat GPT를 이용하거나 다른 팀 동기들에게 코드를 물어봐가며 해결했다. 그러니 프로그래밍 실력이 늘지 않는 것은 당연했다.

 

하지만 환경 탓만 할 수도, 이렇게 한탄만 할 수는 없으니 기운 차리고 계속 열심히 해야 한다.