ulgerang/web_mindmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Linux basics mindmap

Browse Source
This commit is contained in:
user
2026-05-12 13:09:36 +09:00
parent 2c46c020e5
commit a0e8ae2adc
10 changed files with 719 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

539
script.js
View File

@@ -1,4 +1,4 @@
const nodes = [
const webNodes = [
{
id: "root",
type: "root",
@@ -485,11 +485,517 @@ const nodes = [
},
];
const linuxNodes = [
{
id: "root",
type: "root",
title: "리눅스",
subtitle: "클릭해서 펼치기",
image: "imgs/linux_overview.svg",
category: "전체 개요",
focus: "리눅스를 터미널, 파일 시스템, 권한, 프로세스, 패키지, 네트워크 흐름으로 나누어 봅니다.",
x: 1020,
y: 700,
children: ["linux-basics", "linux-shell", "linux-filesystem", "linux-permissions", "linux-processes", "linux-packages-network"],
},
{
id: "linux-basics",
parent: "root",
type: "category",
title: "기초 개념",
subtitle: "운영체제와 도움말",
image: "imgs/linux_overview.svg",
category: "기초 개념",
focus: "리눅스가 커널, 배포판, 셸, 패키지 저장소로 구성된 운영체제 생태계라는 큰 그림을 봅니다.",
x: 1020,
y: 420,
children: ["linux-kernel", "linux-distro", "linux-terminal", "linux-man-pages", "linux-sudo-basics"],
},
{
id: "linux-shell",
parent: "root",
type: "category",
title: "셸 명령어",
subtitle: "명령 실행과 조합",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "셸은 명령어, 옵션, 인자, 파이프, 리다이렉트를 조합해 작업을 자동화하는 인터페이스입니다.",
x: 1360,
y: 560,
children: ["linux-command-shape", "linux-pwd-ls-cd", "linux-file-ops", "linux-pipes", "linux-grep-find", "linux-history", "linux-env-path"],
},
{
id: "linux-filesystem",
parent: "root",
type: "category",
title: "파일 시스템",
subtitle: "경로와 디렉터리",
image: "imgs/linux_filesystem.svg",
category: "파일 시스템",
focus: "리눅스는 모든 경로가 루트(/)에서 시작하고, 설정·로그·사용자 파일이 관례적인 위치에 놓입니다.",
x: 1320,
y: 900,
children: ["linux-root-path", "linux-home-etc-var", "linux-hidden-files", "linux-mounts", "linux-links"],
},
{
id: "linux-permissions",
parent: "root",
type: "category",
title: "권한",
subtitle: "사용자와 접근 제어",
image: "imgs/linux_permissions.svg",
category: "권한",
focus: "사용자, 그룹, 읽기/쓰기/실행 권한을 이해하면 파일 접근과 관리자 작업을 안전하게 다룰 수 있습니다.",
x: 1020,
y: 1030,
children: ["linux-users-groups", "linux-rwx", "linux-chmod-chown", "linux-sudo", "linux-ssh-keys"],
},
{
id: "linux-processes",
parent: "root",
type: "category",
title: "프로세스",
subtitle: "실행 중인 작업",
image: "imgs/linux_processes.svg",
category: "프로세스",
focus: "프로세스와 서비스 상태를 보고, 필요하면 종료하거나 로그를 확인하고, 예약 실행까지 연결합니다.",
x: 660,
y: 900,
children: ["linux-ps-top", "linux-kill", "linux-systemd", "linux-logs", "linux-cron"],
},
{
id: "linux-packages-network",
parent: "root",
type: "category",
title: "패키지·네트워크",
subtitle: "설치와 원격 접속",
image: "imgs/linux_network_packages.svg",
category: "패키지·네트워크",
focus: "패키지 관리자로 도구를 설치하고, 네트워크 명령과 SSH로 서버 상태를 확인합니다.",
x: 660,
y: 560,
children: ["linux-apt-dnf", "linux-update-upgrade", "linux-ping-ss", "linux-curl-wget", "linux-ssh", "linux-firewall"],
},
{
id: "linux-kernel",
parent: "linux-basics",
type: "term",
title: "커널",
subtitle: "기초 개념",
image: "imgs/linux_overview.svg",
category: "기초 개념",
focus: "커널은 CPU, 메모리, 파일, 네트워크 같은 하드웨어 자원을 프로그램이 안전하게 쓰도록 중재합니다.",
x: 650,
y: 170,
},
{
id: "linux-distro",
parent: "linux-basics",
type: "term",
title: "배포판",
subtitle: "기초 개념",
image: "imgs/linux_overview.svg",
category: "기초 개념",
focus: "Ubuntu, Debian, Fedora 같은 배포판은 커널 위에 기본 도구, 패키지 저장소, 설정 방식을 묶어 제공합니다.",
x: 720,
y: 330,
},
{
id: "linux-terminal",
parent: "linux-basics",
type: "term",
title: "터미널",
subtitle: "기초 개념",
image: "imgs/linux_shell.svg",
category: "기초 개념",
focus: "터미널은 셸을 통해 명령을 입력하고 결과를 확인하는 창입니다.",
x: 1020,
y: 240,
},
{
id: "linux-man-pages",
parent: "linux-basics",
type: "term",
title: "man · --help",
subtitle: "기초 개념",
image: "imgs/linux_shell.svg",
category: "기초 개념",
focus: "명령어가 헷갈릴 때는 man, --help, tldr 같은 도움말로 옵션과 사용 예를 먼저 확인합니다.",
x: 1320,
y: 330,
},
{
id: "linux-sudo-basics",
parent: "linux-basics",
type: "term",
title: "관리자 작업",
subtitle: "기초 개념",
image: "imgs/linux_permissions.svg",
category: "기초 개념",
focus: "시스템 설정, 패키지 설치, 서비스 제어처럼 영향 범위가 큰 작업은 관리자 권한이 필요합니다.",
x: 1290,
y: 150,
},
{
id: "linux-command-shape",
parent: "linux-shell",
type: "term",
title: "명령어 구조",
subtitle: "셸 명령어",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "대부분의 명령은 command --option argument 형태이며, 옵션은 동작 방식을 바꾸고 인자는 대상을 지정합니다.",
x: 1530,
y: 380,
},
{
id: "linux-pwd-ls-cd",
parent: "linux-shell",
type: "term",
title: "pwd · ls · cd",
subtitle: "셸 명령어",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "pwd로 현재 위치를 보고, ls로 목록을 확인하고, cd로 디렉터리를 이동합니다.",
x: 1640,
y: 560,
},
{
id: "linux-file-ops",
parent: "linux-shell",
type: "term",
title: "cp · mv · rm",
subtitle: "셸 명령어",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "cp는 복사, mv는 이동/이름 변경, rm은 삭제입니다. 삭제 명령은 되돌리기 어렵기 때문에 대상 경로를 먼저 확인합니다.",
x: 1720,
y: 410,
},
{
id: "linux-pipes",
parent: "linux-shell",
type: "term",
title: "파이프 · 리다이렉트",
subtitle: "셸 명령어",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "파이프(|)는 한 명령의 출력을 다음 명령으로 넘기고, > 또는 >>는 출력을 파일에 저장합니다.",
x: 1530,
y: 740,
},
{
id: "linux-grep-find",
parent: "linux-shell",
type: "term",
title: "grep · find",
subtitle: "셸 명령어",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "grep은 텍스트 안에서 패턴을 찾고, find는 파일 시스템에서 조건에 맞는 파일과 디렉터리를 찾습니다.",
x: 1740,
y: 760,
},
{
id: "linux-history",
parent: "linux-shell",
type: "term",
title: "history",
subtitle: "셸 명령어",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "history와 방향키, Ctrl+R 검색을 쓰면 이전 명령을 빠르게 재사용할 수 있습니다.",
x: 1780,
y: 620,
},
{
id: "linux-env-path",
parent: "linux-shell",
type: "term",
title: "환경 변수 · PATH",
subtitle: "셸 명령어",
image: "imgs/linux_shell.svg",
category: "셸 명령어",
focus: "환경 변수는 현재 셸과 프로그램에 전달되는 설정이고, PATH는 명령어 실행 파일을 찾는 디렉터리 목록입니다.",
x: 1470,
y: 240,
},
{
id: "linux-root-path",
parent: "linux-filesystem",
type: "term",
title: "루트 경로 /",
subtitle: "파일 시스템",
image: "imgs/linux_filesystem.svg",
category: "파일 시스템",
focus: "리눅스의 모든 절대 경로는 루트(/)에서 시작합니다.",
x: 1510,
y: 810,
},
{
id: "linux-home-etc-var",
parent: "linux-filesystem",
type: "term",
title: "/home · /etc · /var",
subtitle: "파일 시스템",
image: "imgs/linux_filesystem.svg",
category: "파일 시스템",
focus: "/home은 사용자 파일, /etc는 시스템 설정, /var는 로그와 변하는 데이터를 주로 담습니다.",
x: 1600,
y: 940,
},
{
id: "linux-hidden-files",
parent: "linux-filesystem",
type: "term",
title: "숨김 파일",
subtitle: "파일 시스템",
image: "imgs/linux_filesystem.svg",
category: "파일 시스템",
focus: ".bashrc처럼 점(.)으로 시작하는 파일은 기본 목록에서 숨겨지며, 보통 사용자 설정을 담습니다.",
x: 1460,
y: 1080,
},
{
id: "linux-mounts",
parent: "linux-filesystem",
type: "term",
title: "mount",
subtitle: "파일 시스템",
image: "imgs/linux_filesystem.svg",
category: "파일 시스템",
focus: "디스크, USB, 네트워크 저장소는 특정 디렉터리에 마운트되어 파일 시스템 일부처럼 보입니다.",
x: 1190,
y: 1160,
},
{
id: "linux-links",
parent: "linux-filesystem",
type: "term",
title: "심볼릭 링크",
subtitle: "파일 시스템",
image: "imgs/linux_filesystem.svg",
category: "파일 시스템",
focus: "심볼릭 링크는 다른 파일이나 디렉터리를 가리키는 바로가기이며 ln -s로 만듭니다.",
x: 1740,
y: 1040,
},
{
id: "linux-users-groups",
parent: "linux-permissions",
type: "term",
title: "사용자 · 그룹",
subtitle: "권한",
image: "imgs/linux_permissions.svg",
category: "권한",
focus: "리눅스는 사용자와 그룹 단위로 파일 접근, 서비스 실행, 관리자 작업 가능 여부를 나눕니다.",
x: 760,
y: 1010,
},
{
id: "linux-rwx",
parent: "linux-permissions",
type: "term",
title: "rwx 권한",
subtitle: "권한",
image: "imgs/linux_permissions.svg",
category: "권한",
focus: "r은 읽기, w는 쓰기, x는 실행 권한입니다. 디렉터리의 x는 내부로 들어갈 수 있는 권한에 가깝습니다.",
x: 880,
y: 1280,
},
{
id: "linux-chmod-chown",
parent: "linux-permissions",
type: "term",
title: "chmod · chown",
subtitle: "권한",
image: "imgs/linux_permissions.svg",
category: "권한",
focus: "chmod는 권한 비트를 바꾸고, chown은 파일의 소유자나 그룹을 바꿉니다.",
x: 1180,
y: 1300,
},
{
id: "linux-sudo",
parent: "linux-permissions",
type: "term",
title: "sudo",
subtitle: "권한",
image: "imgs/linux_permissions.svg",
category: "권한",
focus: "sudo는 허용된 사용자가 한 명령을 관리자 권한으로 실행하게 해 줍니다.",
x: 810,
y: 1500,
},
{
id: "linux-ssh-keys",
parent: "linux-permissions",
type: "term",
title: "SSH Key 권한",
subtitle: "권한",
image: "imgs/linux_permissions.svg",
category: "권한",
focus: "개인 키는 너무 열려 있으면 SSH가 거부할 수 있으므로 보통 chmod 600처럼 제한적으로 둡니다.",
x: 1420,
y: 1210,
},
{
id: "linux-ps-top",
parent: "linux-processes",
type: "term",
title: "ps · top",
subtitle: "프로세스",
image: "imgs/linux_processes.svg",
category: "프로세스",
focus: "ps는 프로세스 목록을 출력하고, top/htop은 CPU와 메모리 사용량을 실시간으로 보여 줍니다.",
x: 390,
y: 820,
},
{
id: "linux-kill",
parent: "linux-processes",
type: "term",
title: "kill",
subtitle: "프로세스",
image: "imgs/linux_processes.svg",
category: "프로세스",
focus: "kill은 프로세스에 종료 신호를 보내며, 강제 종료 전에 정상 종료 신호를 먼저 고려합니다.",
x: 420,
y: 1080,
},
{
id: "linux-systemd",
parent: "linux-processes",
type: "term",
title: "systemd · service",
subtitle: "프로세스",
image: "imgs/linux_processes.svg",
category: "프로세스",
focus: "systemctl로 서비스를 시작, 중지, 재시작, 자동 실행 설정할 수 있습니다.",
x: 260,
y: 940,
},
{
id: "linux-logs",
parent: "linux-processes",
type: "term",
title: "로그",
subtitle: "프로세스",
image: "imgs/linux_processes.svg",
category: "프로세스",
focus: "journalctl과 /var/log는 서비스 오류와 시스템 이벤트를 추적하는 첫 번째 단서입니다.",
x: 200,
y: 1190,
},
{
id: "linux-cron",
parent: "linux-processes",
type: "term",
title: "cron",
subtitle: "프로세스",
image: "imgs/linux_processes.svg",
category: "프로세스",
focus: "cron은 정해진 시간에 백업, 정리, 점검 스크립트를 반복 실행할 때 사용합니다.",
x: 610,
y: 1190,
},
{
id: "linux-apt-dnf",
parent: "linux-packages-network",
type: "term",
title: "apt · dnf",
subtitle: "패키지·네트워크",
image: "imgs/linux_network_packages.svg",
category: "패키지·네트워크",
focus: "apt는 Debian/Ubuntu 계열, dnf는 Fedora/RHEL 계열에서 패키지를 설치하고 제거하는 대표 도구입니다.",
x: 560,
y: 310,
},
{
id: "linux-update-upgrade",
parent: "linux-packages-network",
type: "term",
title: "update · upgrade",
subtitle: "패키지·네트워크",
image: "imgs/linux_network_packages.svg",
category: "패키지·네트워크",
focus: "update는 패키지 목록을 새로 받고, upgrade는 설치된 패키지를 새 버전으로 올립니다.",
x: 390,
y: 470,
},
{
id: "linux-ping-ss",
parent: "linux-packages-network",
type: "term",
title: "ping · ss",
subtitle: "패키지·네트워크",
image: "imgs/linux_network_packages.svg",
category: "패키지·네트워크",
focus: "ping은 연결 가능성을 확인하고, ss는 열린 포트와 소켓 상태를 확인합니다.",
x: 780,
y: 420,
},
{
id: "linux-curl-wget",
parent: "linux-packages-network",
type: "term",
title: "curl · wget",
subtitle: "패키지·네트워크",
image: "imgs/linux_network_packages.svg",
category: "패키지·네트워크",
focus: "curl은 HTTP 요청과 응답 확인에 강하고, wget은 파일 다운로드에 자주 쓰입니다.",
x: 350,
y: 650,
},
{
id: "linux-ssh",
parent: "linux-packages-network",
type: "term",
title: "ssh",
subtitle: "패키지·네트워크",
image: "imgs/linux_network_packages.svg",
category: "패키지·네트워크",
focus: "ssh는 원격 서버의 셸에 안전하게 접속하는 기본 도구입니다.",
x: 780,
y: 660,
},
{
id: "linux-firewall",
parent: "linux-packages-network",
type: "term",
title: "방화벽",
subtitle: "패키지·네트워크",
image: "imgs/linux_network_packages.svg",
category: "패키지·네트워크",
focus: "ufw, firewalld, iptables 같은 도구로 외부에서 접근 가능한 포트와 규칙을 제한합니다.",
x: 480,
y: 210,
},
];
const maps = {
web: {
eyebrow: "Web Learning Map",
title: "웹 개발 용어 마인드맵",
ariaLabel: "접을 수 있는 웹 개발 용어 지도",
nodes: webNodes,
},
linux: {
eyebrow: "Linux Learning Map",
title: "리눅스 기초 마인드맵",
ariaLabel: "접을 수 있는 리눅스 기초 개념 지도",
nodes: linuxNodes,
},
};
const viewport = document.querySelector("#viewport");
const world = document.querySelector("#world");
const nodeLayer = document.querySelector("#nodeLayer");
const connectorLayer = document.querySelector("#connectorLayer");
const visibleCount = document.querySelector("#visibleCount");
const pageTitle = document.querySelector("#page-title");
const mapEyebrow = document.querySelector("#mapEyebrow");
const lightbox = document.querySelector("#lightbox");
const lightboxImage = document.querySelector("#lightboxImage");
const lightboxCaption = document.querySelector("#lightboxCaption");
@@ -502,7 +1008,9 @@ const zoomOutButton = document.querySelector("#zoomOut");
const zoomResetButton = document.querySelector("#zoomReset");
const fullscreenToggle = document.querySelector("#fullscreenToggle");
const nodeMap = new Map(nodes.map((node) => [node.id, node]));
let activeMapId = "web";
let nodes = maps[activeMapId].nodes;
let nodeMap = new Map(nodes.map((node) => [node.id, node]));
const expanded = new Set();
let pan = { x: window.innerWidth / 2 - 1136, y: window.innerHeight / 2 - 764 };
let activePointer = null;
@@ -526,6 +1034,29 @@ function setWorldTransform() {
world.style.transform = `translate(${pan.x}px, ${pan.y}px)`;
}
function syncMapChrome() {
const activeMap = maps[activeMapId];
pageTitle.textContent = activeMap.title;
mapEyebrow.textContent = activeMap.eyebrow;
nodeLayer.setAttribute("aria-label", activeMap.ariaLabel);
for (const button of document.querySelectorAll(".map-tab")) {
const isSelected = button.dataset.map === activeMapId;
button.classList.toggle("is-selected", isSelected);
button.setAttribute("aria-pressed", String(isSelected));
}
}
function switchMap(mapId) {
if (!maps[mapId] || mapId === activeMapId) return;
activeMapId = mapId;
nodes = maps[activeMapId].nodes;
nodeMap = new Map(nodes.map((node) => [node.id, node]));
expanded.clear();
syncMapChrome();
resetView();
render();
}
function render() {
const visible = new Set(visibleNodeIds());
nodeLayer.innerHTML = "";
@@ -820,6 +1351,9 @@ window.addEventListener("pointerup", onPointerUp);
window.addEventListener("pointercancel", onPointerUp);
document.querySelector("#resetView").addEventListener("click", resetView);
document.querySelector("#foldAll").addEventListener("click", foldAll);
for (const button of document.querySelectorAll(".map-tab")) {
button.addEventListener("click", () => switchMap(button.dataset.map));
}
document.querySelector(".lightbox-backdrop").addEventListener("click", closeLightbox);
document.querySelector("#closeLightbox").addEventListener("click", closeLightbox);
zoomInButton.addEventListener("click", () => setZoom(zoomState.scale + 0.25));
@@ -843,4 +1377,5 @@ document.addEventListener("keydown", (event) => {
window.addEventListener("resize", resetView);
setWorldTransform();
syncMapChrome();
render();