회고

서론Socket.io로 만든 실시간 음악 공유 서비스를 Render Free Tier에 배포했다. 그랬더니 방이 자꾸 사라졌다. 사용자는 가만히 있는데 방에서 튕겨나가고, 다시 들어가려고 보면 방 자체가 없었다.이 글에서는 원인을 찾는 과정과, 그 과정에서 알게 된 WebSocket·프록시의 동작 원리를 정리한다. 연결이 왜 끊겼는가 - 프록시와 idle 타이머끊긴 뒤 왜 방으로 못 돌아오는가 - socket.id와 상태connect와 reconnect의 차이1. 첫 가설 - spin-downRender Free Tier는 15분쯤 요청이 없으면 서버를 재운다. spin-down이라고 부르는, 무료 플랜의 알려진 단점이다 (Render 공식 문서 - Free instances). 그래서 처음엔 이걸 원..

이전글: 그래프(Graph) 서론지난 글에서 그래프의 개념, 종류, 용어, 그리고 인접 리스트와 인접 행렬의 차이까지 정리했다. 이번 글에서는 직접 손으로 코드를 쳐보면서 인접 리스트 기반의 무방향 그래프 클래스를 처음부터 끝까지 구현한다.다루는 메소드는 네 가지다:addVertex() — 정점 추가addEdge() — 간선 추가removeEdge() — 간선 제거removeVertex() — 정점 제거이 글에서는 무방향 그래프를 기준으로 작업한다.1단계: 기본 클래스 - 뼈대 만들기가장 먼저 Graph 클래스를 정의한다. 필요한 프로퍼티는 딱 하나, adjacencyList다.class Graph { constructor() { this.adjacencyList = {}; }}a..

서론해시 테이블, 트리, BST까지 배우고 나면 "노드들 사이의 관계"를 자유롭게 표현할 수 있는 자료구조가 필요해진다. 이때 등장하는 것이 그래프(Graph) 다.그래프는 SNS의 친구 관계, 구글 지도의 길찾기, 넷플릭스의 추천 엔진, 위키피디아의 문서 연결 등 현실 세계 어디에서나 쓰인다. "그래프"라고 하면 이차원 차트를 떠올릴 수 있지만, 여기서 말하는 그래프는 데이터 구조다. 차트와는 완전히 다르다.이 글에서는 그래프의 기본 개념, 종류와 용어, 실생활 적용, 그리고 인접 리스트(Adjacency List) 를 활용한 구현까지 다룬다.그래프(Graph)란?그래프는 노드(정점)와 그 사이의 연결(간선)을 모은 것이다.위키피디아의 정의를 보면 "유한하고 변할 수 있는 꼭지점의 집합으로 구성된 데이..

서론큐와 스택을 배우고, 트리와 BST를 배우고 나면 “키로 값을 바로 찾는” 자료구조가 필요해진다. 이때 마주치는 대표적인 구조가 해시 테이블(Hash Table) 이다.해시 테이블은 자바스크립트의 Object / Map, 파이썬의 dict, 자바의 HashMap 처럼 대부분 언어에 내장되어 있고, 많이 쓰이는 자료구조 중 하나다.해시 테이블의 강점은 단순하다:삽입(set) 빠름조회(get) 빠름삭제(remove) 빠름평균적으로 O(1) 에 가깝게 동작하는 게 핵심이다.이 글에서는 해시 테이블의 기본 개념부터 시작해, 해시 함수, 충돌(collision), 그리고 충돌 해결 방식 중 하나인 개별 체이닝(Separate Chaining) 으로 직접 구현까지 다룬다.해시 테이블(Hash Table)이란?해..

서론큐와 스택을 배우고, 트리와 이진 탐색 트리를 배운 다음으로 마주치게 되는 자료구조가 바로 이진 힙(Binary Heap)이다. 이진 힙은 트리 구조의 일종이지만, BST와는 다른 독특한 규칙을 가지고 있다.이진 힙은 우선순위 큐를 구현하는 데 가장 효율적인 자료구조로, 운영체제의 프로세스 스케줄링, 다익스트라 알고리즘, 힙 정렬 등 실무에서 많이 사용된다.이 글에서는 이진 힙의 기본 개념부터 시작해서 배열을 이용한 구현, 그리고 우선순위 큐까지 다뤄볼 것이다. 이진 힙(Binary Heap)이란?이진 힙은 완전 이진 트리의 일종으로, 부모와 자식 간에 특정한 대소 관계를 유지하는 자료구조다.이진 힙의 핵심 특징각 부모 노드는 최대 두 개의 자식 노드를 가진다 (이진 트리)완전 이진 트리(Comple..

Chrome DevTools의 sources 활용하기웹페이지와 직접 상호작용 할 수 있는 JS 특성 상, 자주 브라우저 콘솔을 사용할 일이 있다. 이렇듯 바로 움직임을 볼 수 있다는 점이 JS의 매력이라고 생각하지만, 이 때 매번 콘솔로 복붙하는 일이 정말 귀찮은 일이라고 생각한다. 이를 위해 Chrome DevTools의 sources 탭과 vscode를 사용한다면 이 때 소요되는 시간 비용이 훨씬 절감될 수 있다!Snippets 패널 열기F12 또는 Ctrl + Shift + I (Mac: Cmd + Option + I)로 개발자 도구 열기Sources 탭 클릭왼쪽 사이드바에서 Snippets 탭 선택 (안 보이면 >> 클릭)새 Snippet 만들기Snippets 패널에서 + New snippet ..