diff --git a/imgs/쿠키란.png b/imgs/cookie.png similarity index 100% rename from imgs/쿠키란.png rename to imgs/cookie.png diff --git a/imgs/데이터베이스.png b/imgs/database.png similarity index 100% rename from imgs/데이터베이스.png rename to imgs/database.png diff --git a/imgs/프론트엔드와 백엔드.png b/imgs/frontend_backend.png similarity index 100% rename from imgs/프론트엔드와 백엔드.png rename to imgs/frontend_backend.png diff --git a/imgs/http와프로토콜.png b/imgs/http_protocol.png similarity index 100% rename from imgs/http와프로토콜.png rename to imgs/http_protocol.png diff --git a/imgs/nextjs디렉터리구조.png b/imgs/nextjs_directory_structure.png similarity index 100% rename from imgs/nextjs디렉터리구조.png rename to imgs/nextjs_directory_structure.png diff --git a/imgs/웹서버 프로그램.png b/imgs/web_server_program.png similarity index 100% rename from imgs/웹서버 프로그램.png rename to imgs/web_server_program.png diff --git a/script.js b/script.js index a61a641..7ca1dce 100644 --- a/script.js +++ b/script.js @@ -4,7 +4,7 @@ const nodes = [ type: "root", title: "웹 개발", subtitle: "클릭해서 펼치기", - image: "imgs/프론트엔드와 백엔드.png", + image: "imgs/frontend_backend.png", category: "전체 개요", focus: "웹 개발이 프론트엔드, 백엔드, 통신, 데이터 흐름으로 나뉘는 큰 그림을 봅니다.", x: 1020, @@ -28,7 +28,7 @@ const nodes = [ type: "category", title: "프론트엔드", subtitle: "UI를 만드는 도구", - image: "imgs/프론트엔드와 백엔드.png", + image: "imgs/frontend_backend.png", category: "프론트엔드", focus: "사용자가 보는 화면과 백엔드가 만나는 경계를 먼저 파악합니다.", x: 1360, @@ -52,7 +52,7 @@ const nodes = [ type: "category", title: "백엔드·데이터", subtitle: "서버와 저장소", - image: "imgs/데이터베이스.png", + image: "imgs/database.png", category: "백엔드·데이터", focus: "서버가 요청을 처리하고 데이터를 저장·조회하는 큰 흐름을 봅니다.", x: 1020, @@ -149,7 +149,7 @@ const nodes = [ type: "term", title: "프론트엔드와 백엔드", subtitle: "프론트엔드", - image: "imgs/프론트엔드와 백엔드.png", + image: "imgs/frontend_backend.png", category: "프론트엔드", focus: "화면 담당 영역과 서버 담당 영역이 어디서 만나는지 확인합니다.", x: 1530, @@ -173,7 +173,7 @@ const nodes = [ type: "term", title: "쿠키", subtitle: "통신", - image: "imgs/쿠키란.png", + image: "imgs/cookie.png", category: "통신", focus: "브라우저에 저장되는 작은 데이터가 세션과 추적에 쓰이는 방식을 익힙니다.", x: 1600, @@ -197,7 +197,7 @@ const nodes = [ type: "term", title: "HTTP 프로토콜", subtitle: "통신", - image: "imgs/http와프로토콜.png", + image: "imgs/http_protocol.png", category: "통신", focus: "웹에서 클라이언트와 서버가 약속된 방식으로 통신하는 규칙입니다.", x: 1190, @@ -221,7 +221,7 @@ const nodes = [ type: "term", title: "웹서버 프로그램", subtitle: "백엔드·데이터", - image: "imgs/웹서버 프로그램.png", + image: "imgs/web_server_program.png", category: "백엔드·데이터", focus: "요청을 받아 정적 파일이나 애플리케이션 응답을 돌려주는 서버 역할입니다.", x: 760, @@ -233,7 +233,7 @@ const nodes = [ type: "term", title: "데이터베이스", subtitle: "백엔드·데이터", - image: "imgs/데이터베이스.png", + image: "imgs/database.png", category: "백엔드·데이터", focus: "애플리케이션 데이터가 테이블, 문서, 키-값 등으로 저장되는 방식을 봅니다.", x: 880, @@ -281,7 +281,7 @@ const nodes = [ type: "term", title: "Next.js 디렉터리 구조", subtitle: "프레임워크·도구", - image: "imgs/nextjs디렉터리구조.png", + image: "imgs/nextjs_directory_structure.png", category: "프레임워크·도구", focus: "app, page, layout, component, public 같은 폴더의 역할을 익힙니다.", x: 420,