Redis를 명령어 암기 말고 '관찰'로 배우기 — 브라우저 놀이터를 만들었다

Redis를 공부할 때 명령어 목록을 외우는 건 금방 잊어버립니다. SET, HSET, ZADD... 이름은 알겠는데 "그래서 언제 뭘 써야 하는데?"가 안 잡히죠. 그래서 명령을 직접 쳐보고 키 공간이 어떻게 변하는지 눈으로 보면서 배우는 놀이터를 만들었습니다.

원래는 Docker로 Redis를 띄우고 파이썬으로 명령을 날려 동작을 관찰하는 개인 학습 프로젝트였는데, 이걸 누구나 바로 만져볼 수 있게 브라우저로 옮겼습니다.

실제 Redis는 웹에 못 올린다 — 그래서 시뮬레이터

먼저 정직하게 말하면, 데모 페이지의 Redis는 진짜 Redis가 아닙니다. Redis는 메모리에 상태를 들고 계속 떠 있는 서버라, 정적으로 배포되는 이 블로그에 그대로 올릴 수가 없습니다(같은 이유로 화상회의는 별도 서버가 필요하죠).

대신 Redis의 동작을 브라우저 안에서 흉내 내는 작은 시뮬레이터를 TypeScript로 짰습니다. 키-값 저장소를 Map으로, 각 자료구조를 그에 맞는 자바스크립트 구조(해시는 Map, 셋은 Set, 정렬 셋은 점수 Map)로 표현하고, 명령을 파싱해 그 위에서 실행합니다. 원본 프로젝트가 "학습 대상을 큰 SDK 뒤에 숨기지 않으려고" 프로토콜을 직접 구현했던 정신을 이어받은 셈입니다. 실제 서버의 능동적 만료 같은 세부는 다르지만, 개념을 잡기엔 충분합니다.

다섯 가지 질문

놀이터는 원본 학습 프로젝트가 던지던 다섯 개의 실전 질문을 그대로 담았습니다.

1. 어떤 자료구조가 어떤 문제에 맞나

"자료구조 투어" 버튼을 누르면 문자열, 해시, 리스트, 셋, 정렬 셋이 차례로 만들어집니다. 세션 값은 문자열, 객체의 필드 몇 개는 JSON 직렬화 없이 해시, 순서 있는 작업 큐는 리스트, 중복 없는 멤버십은 셋, 순위가 필요하면 정렬 셋 — 오른쪽 패널에서 같은 데이터가 구조마다 어떻게 보이는지 비교됩니다.

2. TTL이 바꾸는 것

SET session:demo active EX 3처럼 만료 시간을 주면, 오른쪽 패널의 TTL 숫자가 실제로 3, 2, 1로 줄어듭니다. 시간이 지나면 키가 사라지고, 없는 키의 TTL은 -1(만료 없음)이 아니라 -2(키 자체가 없음)를 반환합니다 — 이 둘의 차이가 은근히 헷갈리는 지점이라 직접 보게 만들었습니다.

3. 캐시-어사이드 vs 라이트스루

이게 개인적으로 제일 만족스러운 부분입니다. "캐시-어사이드 vs 라이트스루" 버튼을 누르면 오른쪽에 가짜 DB의 읽기/쓰기 횟수 카운터가 같이 뜹니다.

• 캐시-어사이드: 캐시에 없으면 DB를 읽고(카운터 +1) 그 값을 캐시에 넣습니다. 그래서 첫 읽기는 DB까지 가지만, 두 번째 읽기는 캐시에서 바로 나와 DB 카운터가 안 오릅니다. "캐시가 왜 DB 부하를 줄이는가"가 숫자로 보입니다.
• 라이트스루: 쓸 때 DB와 캐시를 함께 갱신해서, 캐시가 항상 최신을 유지합니다.

글로 열 번 읽는 것보다 카운터가 안 오르는 걸 한 번 보는 게 빠릅니다.

4. Streams가 Pub/Sub과 다른 점

Pub/Sub은 그 순간 듣고 있지 않으면 메시지가 사라지지만, Streams는 이벤트를 로그로 보존해서 나중에 들어온 소비자도 과거 이벤트를 읽을 수 있습니다. 이 개념은 글에서 설명하고, 시뮬레이터에서는 자료구조 위주로 다뤘습니다.

5. Lua는 왜 원자적인가

레이트 리밋을 예로 들면, "카운트 증가 → 처음이면 만료 설정 → 임계값 초과 검사"가 한 번에 실행돼야 합니다. 중간에 다른 요청이 끼어들면 제한이 새니까요. "Lua 레이트리밋" 버튼은 이 세 단계가 서버에서 원자적으로 도는 흐름을 단계별 로그로 보여줍니다.

만들면서 챙긴 것

• 타입 안전: 문자열 키에 HGET을 쓰면 실제 Redis처럼 WRONGTYPE 에러를 냅니다. 아무거나 다 되는 장난감이 아니라, 자료구조별 제약을 그대로 배우게 하려고요.
• 순수 로직 분리: 시뮬레이터 엔진을 화면 코드와 완전히 분리해서, 표시와 무관하게 명령 동작만 따로 테스트했습니다. TTL 만료, 정렬 셋 순서, WRONGTYPE, 캐시 카운터까지 30여 개 케이스를 검증하고 나서 UI를 붙였습니다.
• 명령 히스토리: 위/아래 화살표로 이전 명령을 불러올 수 있습니다. 진짜 redis-cli처럼요.

직접 열어서 SET부터 쳐보세요. Redis 문서를 읽기 전에 손이 먼저 개념을 기억하게 됩니다.