diff --git a/index.html b/index.html index dc418ce..97f9ef6 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,6 @@ }}); - -
+
@@ -635,9 +51,9 @@
diff --git a/public/docs/get-started/docker-concepts/the-basics/what-is-docker-compose.md b/public/docs/get-started/docker-concepts/the-basics/what-is-docker-compose.md index 4911745..fe04a51 100644 --- a/public/docs/get-started/docker-concepts/the-basics/what-is-docker-compose.md +++ b/public/docs/get-started/docker-concepts/the-basics/what-is-docker-compose.md @@ -20,7 +20,7 @@ Docker Compose를 사용하면, 모든 컨테이너와 그 구성들을 단일 Y Compose는 선언적 도구라는 것을 이해하는 것이 중요합니다. 여러분들은 단순히 정의하고 실행하면 됩니다. 모든 것을 처음부터 다시 만들 필요는 없습니다. 변경 사항을 있는 경우, `docker compose up` 명령을 다시 실행하면 Compose가 파일의 변경 사항을 조정하고 지능적으로 적용합니다. -> ### Dockerfile vs Compose file +> **Dockerfile vs Compose file** > > Dockerfile은 컨테이너 이미지를 빌드하는 지침을 제공하고, Compose 파일은 실행 중인 컨테이너를 정의합니다. 꽤 자주, Compose 파일은 특정 서비스에 사용할 이미지를 빌드하기 위해 Dockerfile을 참조합니다. @@ -96,7 +96,7 @@ Docker Compose를 사용하여 이 애플리케이션을 시작했기 때문에 ✔ Network todo-list-app_default Removed 0.1s ``` - > ### Volume persistence(볼륨 유지) + > **Volume persistence(볼륨 유지)** > > 기본적으로 볼륨은 Compose 스택을 종료할 때 자동으로 제거되지 않습니다. 스택을 다시 시작할 때 데이터를 다시 원할 수 있기 때문입니다. > @@ -108,7 +108,7 @@ Docker Compose를 사용하여 이 애플리케이션을 시작했기 때문에 2. 또는 Docker Desktop GUI를 사용하여 애플리케이션 스택을 선택하고 **Delete** 버튼을 선택하여 컨테이너를 제거할 수 있습니다. - > ### Using the GUI for Compose stacks(GUI를 사용한 Compose 스택) + > **Using the GUI for Compose stacks(GUI를 사용한 Compose 스택)** > > GUI에서 Compose 앱의 컨테이너를 제거하면 컨테이너만 제거됩니다. 네트워크와 볼륨을 제거하려면 수동으로 제거해야 합니다. diff --git a/public/docs/guides.md b/public/docs/guides.md new file mode 100644 index 0000000..bbee4db --- /dev/null +++ b/public/docs/guides.md @@ -0,0 +1,7 @@ +# Docker guides + +Docker를 사용하여 개발 워크플로를 최적화하는 방법과 특정 언어, 프레임워크 또는 기술과 함께 사용하는 방법을 알아보려면 가이드 모음을 살펴보세요. + +원하는 가이드를 찾을 수 없나요? [docker/docs](https://github.com/docker/docs/issues/new/choose) 저장소에 이슈를 등록하여 알려주세요. + +추천 가이드 \ No newline at end of file diff --git a/public/imgs/logo/docker-logo-blue.svg b/public/imgs/logo/docker-logo-blue.svg deleted file mode 100644 index 4518f0b..0000000 --- a/public/imgs/logo/docker-logo-blue.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/imgs/logo/docker-logo-white.svg b/public/imgs/logo/docker-logo-white.svg deleted file mode 100644 index b1f9dff..0000000 --- a/public/imgs/logo/docker-logo-white.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/imgs/logo/docker-mark-blue.svg b/public/imgs/logo/docker-mark-blue.svg deleted file mode 100644 index eba6cc4..0000000 --- a/public/imgs/logo/docker-mark-blue.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/public/imgs/logo/docker-mark-white.svg b/public/imgs/logo/docker-mark-white.svg deleted file mode 100644 index fc59e9d..0000000 --- a/public/imgs/logo/docker-mark-white.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/data/breadcrumb.json b/src/data/breadcrumb.json index 9a98a1c..7be7f23 100644 --- a/src/data/breadcrumb.json +++ b/src/data/breadcrumb.json @@ -1,156 +1,179 @@ { - "segments": { - "get-started": { - "name": "시작하기", - "linkable": true - }, - "get-docker": { - "name": "Docker 설치", - "linkable": true - }, - "docker-overview": { - "name": "Docker 개요", - "linkable": true - }, - "introduction": { - "name": "소개", - "linkable": true - }, - "build-and-push-first-image": { - "name": "첫 번째 이미지 빌드 및 푸시", - "linkable": true - }, - "develop-with-containers": { - "name": "컨테이너로 개발", - "linkable": true - }, - "get-docker-desktop": { - "name": "Docker Desktop 설치", - "linkable": true - }, - "whats-next": { - "name": "다음 단계", - "linkable": true - }, - "docker-concepts": { - "name": "Docker 개념", - "linkable": false - }, - "the-basics": { - "name": "기본 사항", - "linkable": false - }, - "what-is-a-container": { - "name": "컨테이너란?", - "linkable": true - }, - "what-is-a-registry": { - "name": "레지스트리란?", - "linkable": true - }, - "what-is-an-image": { - "name": "이미지란?", - "linkable": true - }, - "what-is-docker-compose": { - "name": "Docker Compose란?", - "linkable": true - }, - "building-images": { - "name": "이미지 빌드", - "linkable": false - }, - "understanding-image-layers": { - "name": "이미지 레이어 이해", - "linkable": true - }, - "writing-a-dockerfile": { - "name": "Dockerfile 작성", - "linkable": true - }, - "build-tag-and-publish-an-image": { - "name": "이미지 빌드, 태그, 게시", - "linkable": true - }, - "using-the-build-cache": { - "name": "빌드 캐시 사용", - "linkable": true - }, - "multi-stage-builds": { - "name": "멀티 스테이지 빌드", - "linkable": true - }, - "running-containers": { - "name": "컨테이너 실행", - "linkable": false - }, - "multi-container-applications": { - "name": "멀티 컨테이너 애플리케이션", - "linkable": true - }, - "overriding-container-defaults": { - "name": "컨테이너 기본값 재정의", - "linkable": true - }, - "persisting-container-data": { - "name": "컨테이너 데이터 유지", - "linkable": true - }, - "publishing-ports": { - "name": "포트 게시", - "linkable": true - }, - "sharing-local-files": { - "name": "로컬 파일 공유", - "linkable": true - }, - "docker-workshop": { - "name": "Docker 워크샵", - "linkable": true - }, - "resources": { - "name": "리소스", - "linkable": true - }, - "workshop": { - "name": "워크샵", - "linkable": false - }, - "02_our_app": { - "name": "애플리케이션 컨테이너화", - "linkable": true - }, - "03_updating_app": { - "name": "애플리케이션 업데이트", - "linkable": true - }, - "04_sharing_app": { - "name": "애플리케이션 공유", - "linkable": true - }, - "05_persisting_data": { - "name": "데이터베이스 유지", - "linkable": true - }, - "06_bind_mounts": { - "name": "바인드 마운트 사용", - "linkable": true - }, - "07_multi_container": { - "name": "멀티 컨테이너 애플리케이션", - "linkable": true - }, - "08_using_compose": { - "name": "Docker Compose 사용", - "linkable": true - }, - "09_image_best": { - "name": "이미지 빌드 모범 사례", - "linkable": true - }, - "10_what_next": { - "name": "Docker 워크숍 이후 단계", - "linkable": true + "get-started": { + "name": "시작하기", + "linkable": true, + "children": { + "get-docker": { + "name": "Docker 설치", + "linkable": true + }, + "docker-overview": { + "name": "Docker 개요", + "linkable": true + }, + "introduction": { + "name": "소개", + "linkable": true, + "children": { + "get-docker-desktop": { + "name": "Docker Desktop 설치", + "linkable": true + }, + "develop-with-containers": { + "name": "컨테이너로 개발", + "linkable": true + }, + "build-and-push-first-image": { + "name": "첫 번째 이미지 빌드 및 푸시", + "linkable": true + }, + "whats-next": { + "name": "다음 단계", + "linkable": true + } + } + }, + "docker-concepts": { + "name": "Docker 개념", + "linkable": false, + "children": { + "the-basics": { + "name": "기본 사항", + "linkable": false, + "children": { + "what-is-a-container": { + "name": "컨테이너란?", + "linkable": true + }, + "what-is-an-image": { + "name": "이미지란?", + "linkable": true + }, + "what-is-a-registry": { + "name": "레지스트리란?", + "linkable": true + }, + "what-is-docker-compose": { + "name": "Docker Compose란?", + "linkable": true + } + } + }, + "building-images": { + "name": "이미지 빌드", + "linkable": false, + "children": { + "understanding-image-layers": { + "name": "이미지 레이어 이해", + "linkable": true + }, + "writing-a-dockerfile": { + "name": "Dockerfile 작성", + "linkable": true + }, + "build-tag-and-publish-an-image": { + "name": "이미지 빌드, 태그, 게시", + "linkable": true + }, + "using-the-build-cache": { + "name": "빌드 캐시 사용", + "linkable": true + }, + "multi-stage-builds": { + "name": "멀티 스테이지 빌드", + "linkable": true + } + } + }, + "running-containers": { + "name": "컨테이너 실행", + "linkable": false, + "children": { + "publishing-ports": { + "name": "포트 게시", + "linkable": true + }, + "overriding-container-defaults": { + "name": "컨테이너 기본값 재정의", + "linkable": true + }, + "persisting-container-data": { + "name": "컨테이너 데이터 유지", + "linkable": true + }, + "sharing-local-files": { + "name": "로컬 파일 공유", + "linkable": true + }, + "multi-container-applications": { + "name": "멀티 컨테이너 애플리케이션", + "linkable": true + } + } + } + } + }, + "workshop": { + "name": "워크샵", + "linkable": false, + "children": { + "02_our_app": { + "name": "애플리케이션 컨테이너화", + "linkable": true + }, + "03_updating_app": { + "name": "애플리케이션 업데이트", + "linkable": true + }, + "04_sharing_app": { + "name": "애플리케이션 공유", + "linkable": true + }, + "05_persisting_data": { + "name": "데이터베이스 유지", + "linkable": true + }, + "06_bind_mounts": { + "name": "바인드 마운트 사용", + "linkable": true + }, + "07_multi_container": { + "name": "멀티 컨테이너 애플리케이션", + "linkable": true + }, + "08_using_compose": { + "name": "Docker Compose 사용", + "linkable": true + }, + "09_image_best": { + "name": "이미지 빌드 모범 사례", + "linkable": true + }, + "10_what_next": { + "name": "Docker 워크숍 이후 단계", + "linkable": true + } + } + }, + "resources": { + "name": "리소스", + "linkable": true + } } + }, + "guides": { + "name": "가이드", + "linkable": true, + "children": {} + }, + "reference": { + "name": "참조", + "linkable": true, + "children": {} + }, + "manuals": { + "name": "매뉴얼", + "linkable": true, + "children": {} } } diff --git a/src/data/nav/get-started.json b/src/data/nav/get-started.json new file mode 100644 index 0000000..e6d04c1 --- /dev/null +++ b/src/data/nav/get-started.json @@ -0,0 +1,186 @@ +{ + "get-docker": { + "name": "Get Docker", + "docs_path": "/docs/get-started/get-docker", + "href_path": "#/get-started/get-docker" + }, + "docker-overview": { + "name": "What is Docker?", + "docs_path": "/docs/get-started/docker-overview", + "href_path": "#/get-started/docker-overview" + }, + "introduction": { + "name": "Introduction", + "docs_path": "/docs/get-started/introduction", + "href_path": "#/get-started/introduction", + "children": { + "get-docker-desktop": { + "name": "Get Docker Desktop", + "docs_path": "/docs/get-started/introduction/get-docker-desktop", + "href_path": "#/get-started/introduction/get-docker-desktop" + }, + "develop-with-containers": { + "name": "Develop with containers", + "docs_path": "/docs/get-started/introduction/develop-with-containers", + "href_path": "#/get-started/introduction/develop-with-containers" + }, + "build-and-push-first-image": { + "name": "Build and push your first image", + "docs_path": "/docs/get-started/introduction/build-and-push-first-image", + "href_path": "#/get-started/introduction/build-and-push-first-image" + }, + "whats-next": { + "name": "What's next", + "docs_path": "/docs/get-started/introduction/whats-next", + "href_path": "#/get-started/introduction/whats-next" + } + } + }, + "docker-concepts": { + "name": "Docker concepts", + "children": { + "the-basics": { + "name": "The basics", + "children": { + "what-is-a-container": { + "name": "What is a container?", + "docs_path": "/docs/get-started/docker-concepts/the-basics/what-is-a-container", + "href_path": "#/get-started/docker-concepts/the-basics/what-is-a-container" + }, + "what-is-an-image": { + "name": "What is an image?", + "docs_path": "/docs/get-started/docker-concepts/the-basics/what-is-an-image", + "href_path": "#/get-started/docker-concepts/the-basics/what-is-an-image" + }, + "what-is-a-registry": { + "name": "What is a registry?", + "docs_path": "/docs/get-started/docker-concepts/the-basics/what-is-a-registry", + "href_path": "#/get-started/docker-concepts/the-basics/what-is-a-registry" + }, + "what-is-docker-compose": { + "name": "What is Docker Compose?", + "docs_path": "/docs/get-started/docker-concepts/the-basics/what-is-docker-compose", + "href_path": "#/get-started/docker-concepts/the-basics/what-is-docker-compose" + } + } + }, + "building-images": { + "name": "Building images", + "children": { + "understanding-image-layers": { + "name": "Understanding the image layers", + "docs_path": "/docs/get-started/docker-concepts/building-images/understanding-image-layers", + "href_path": "#/get-started/docker-concepts/building-images/understanding-image-layers" + }, + "writing-a-dockerfile": { + "name": "Writing a Dockerfile", + "docs_path": "/docs/get-started/docker-concepts/building-images/writing-a-dockerfile", + "href_path": "#/get-started/docker-concepts/building-images/writing-a-dockerfile" + }, + "build-tag-and-publish-an-image": { + "name": "Build, tag, and publish an image", + "docs_path": "/docs/get-started/docker-concepts/building-images/build-tag-and-publish-an-image", + "href_path": "#/get-started/docker-concepts/building-images/build-tag-and-publish-an-image" + }, + "using-the-build-cache": { + "name": "Using the build cache", + "docs_path": "/docs/get-started/docker-concepts/building-images/using-the-build-cache", + "href_path": "#/get-started/docker-concepts/building-images/using-the-build-cache" + }, + "multi-stage-builds": { + "name": "Multi-stage builds", + "docs_path": "/docs/get-started/docker-concepts/building-images/multi-stage-builds", + "href_path": "#/get-started/docker-concepts/building-images/multi-stage-builds" + } + } + }, + "running-containers": { + "name": "Running containers", + "children": { + "publishing-ports": { + "name": "Publishing and exposing ports", + "docs_path": "/docs/get-started/docker-concepts/running-containers/publishing-ports", + "href_path": "#/get-started/docker-concepts/running-containers/publishing-ports" + }, + "overriding-container-defaults": { + "name": "Overriding container defaults", + "docs_path": "/docs/get-started/docker-concepts/running-containers/overriding-container-defaults", + "href_path": "#/get-started/docker-concepts/running-containers/overriding-container-defaults" + }, + "persisting-container-data": { + "name": "Persisting container data", + "docs_path": "/docs/get-started/docker-concepts/running-containers/persisting-container-data", + "href_path": "#/get-started/docker-concepts/running-containers/persisting-container-data" + }, + "sharing-local-files": { + "name": "Sharing local files with containers", + "docs_path": "/docs/get-started/docker-concepts/running-containers/sharing-local-files", + "href_path": "#/get-started/docker-concepts/running-containers/sharing-local-files" + }, + "multi-container-applications": { + "name": "Multi-container applications", + "docs_path": "/docs/get-started/docker-concepts/running-containers/multi-container-applications", + "href_path": "#/get-started/docker-concepts/running-containers/multi-container-applications" + } + } + } + } + }, + "workshop": { + "name": "Docker workshop", + "docs_path": "/docs/get-started/workshop", + "href_path": "#/get-started/docker-workshop", + "children": { + "02_our_app": { + "name": "Part 1: Containerize an application", + "docs_path": "/docs/get-started/workshop/02_our_app", + "href_path": "#/get-started/workshop/02_our_app" + }, + "03_updating_app": { + "name": "Part 2: Update the application", + "docs_path": "/docs/get-started/workshop/03_updating_app", + "href_path": "#/get-started/workshop/03_updating_app" + }, + "04_sharing_app": { + "name": "Part 3: Share the application", + "docs_path": "/docs/get-started/workshop/04_sharing_app", + "href_path": "#/get-started/workshop/04_sharing_app" + }, + "05_persisting_data": { + "name": "Part 4: Persist the DB", + "docs_path": "/docs/get-started/workshop/05_persisting_data", + "href_path": "#/get-started/workshop/05_persisting_data" + }, + "06_bind_mounts": { + "name": "Part 5: Use bind mounts", + "docs_path": "/docs/get-started/workshop/06_bind_mounts", + "href_path": "#/get-started/workshop/06_bind_mounts" + }, + "07_multi_container": { + "name": "Part 6: Multi-container apps", + "docs_path": "/docs/get-started/workshop/07_multi_container", + "href_path": "#/get-started/workshop/07_multi_container" + }, + "08_using_compose": { + "name": "Part 7: Use Docker Compose", + "docs_path": "/docs/get-started/workshop/08_using_compose", + "href_path": "#/get-started/workshop/08_using_compose" + }, + "09_image_best": { + "name": "Part 8: Image-building best practices", + "docs_path": "/docs/get-started/workshop/09_image_best", + "href_path": "#/get-started/workshop/09_image_best" + }, + "10_what_next": { + "name": "Part 9: What next?", + "docs_path": "/docs/get-started/workshop/10_what_next", + "href_path": "#/get-started/workshop/10_what_next" + } + } + }, + "resources": { + "name": "Educational resources", + "docs_path": "/docs/get-started/resources", + "href_path": "#/get-started/resources" + } +} diff --git a/src/data/nav/guides.json b/src/data/nav/guides.json new file mode 100644 index 0000000..5e6c232 --- /dev/null +++ b/src/data/nav/guides.json @@ -0,0 +1,28 @@ +{ + "Tags": [ + "Administration", + "AI", + "App development", + "Cloud services", + "Data science", + "Databases", + "Deployment", + "DevOps", + "Distributed systems", + "Frameworks", + "Networking", + "Product demo" + ], + "Languages": [ + "C#", + "C++", + "Go", + "Java", + "JavaScript", + "PHP", + "Python", + "R", + "Ruby", + "Rust" + ] +} diff --git a/src/scripts/breadcrumb.ts b/src/scripts/breadcrumb.ts index 2c2bb7f..b098813 100644 --- a/src/scripts/breadcrumb.ts +++ b/src/scripts/breadcrumb.ts @@ -1,31 +1,59 @@ import translations from '../data/breadcrumb.json'; +/** + * Breadcrumb 아이템의 세그먼트 데이터 구조 + * - name: 세그먼트 이름 + * - linkable: 링크 가능 여부 + * - children: 하위 세그먼트들 (선택적) + */ interface SegmentData { name: string; linkable: boolean; + children?: Record; } - -interface BreadcrumbItem extends SegmentData { +/** + * Breadcrumb 아이템 구조 + */ +interface BreadcrumbItem { + name: string; path: string; + linkable: boolean; } +/** + * 최상위 레벨의 키-값 구조 + */ interface TranslationData { - segments: Record; + [key: string]: SegmentData; } /** * 경로 세그먼트를 번역하고 링크 가능 여부를 확인합니다. - * @param segment 번역할 세그먼트 - * @returns 세그먼트 데이터 또는 기본값 + * 계층적 구조를 고려하여 현재 경로에서 세그먼트를 찾습니다. + * @param segments 전체 경로 세그먼트 배열 + * @param currentIndex 현재 처리 중인 세그먼트의 인덱스(깊이를 알기 위함) + * @returns 해당 세그먼트 데이터 또는 null (데이터가 없는 경우) */ -function getSegmentData(segment: string): SegmentData { +function getSegmentData( + segments: string[], + currentIndex: number +): SegmentData | null { const translationData = translations as TranslationData; - return ( - translationData.segments[segment] || { - name: segment, - linkable: false, + let current = translationData[segments[0]]; + + if (!current) { + return null; + } + + for (let i = 1; i <= currentIndex; i++) { + if (current.children && current.children[segments[i]]) { + current = current.children[segments[i]]; + } else { + return null; } - ); + } + + return current; } /** @@ -35,27 +63,27 @@ function generateBreadcrumbItems(): BreadcrumbItem[] { const hash = window.location.hash.slice(1); // # 제거 if (!hash || hash === '/') { - return [{ name: '홈', path: '#/', linkable: true }]; + return [{ name: '홈', path: '/', linkable: true }]; } const pathSegments = hash.split('/').filter((segment) => segment !== ''); const breadcrumbItems: BreadcrumbItem[] = [ - { name: '홈', path: '#/', linkable: true }, + { name: '홈', path: '/', linkable: true }, ]; let currentPath = ''; - - pathSegments.forEach((segment) => { + pathSegments.forEach((segment, index) => { + const segmentData = getSegmentData(pathSegments, index); currentPath += `/${segment}`; - // 세그먼트 데이터 가져오기 (이름과 링크 가능 여부) - const segmentData = getSegmentData(segment); - - breadcrumbItems.push({ - name: segmentData.name, - path: `#${currentPath}`, - linkable: segmentData.linkable, - }); + // translations 데이터에 없는 세그먼트는 breadcrumb에 추가하지 않음 + if (segmentData) { + breadcrumbItems.push({ + name: segmentData.name, + path: `#${currentPath}`, + linkable: segmentData.linkable, + }); + } }); return breadcrumbItems; @@ -70,21 +98,17 @@ function createBreadcrumbElement(items: BreadcrumbItem[]): HTMLElement { breadcrumbNav.className = 'pb-3 flex min-w-0 items-center gap-2 text-gray-400 dark:text-gray-300'; - // HTML 문자열로 breadcrumb 구조 생성 const breadcrumbHTML = items .map((item, index) => { const isLast = index === items.length - 1; if (isLast) { - // 현재 페이지는 span으로 표시 return `${item.name}`; } if (!item.linkable) { - // linkable이 false인 경우 span으로 표시 (링크 없음) return `${item.name} / `; } else { - // 링크 가능한 이전 페이지들은 링크로 표시 + 구분자 return `${item.name} / `; } }) @@ -110,13 +134,10 @@ function removePreviousBreadcrumb(): void { export function initializeBreadcrumb(): void { const contentDiv = document.getElementById('content')!; - // 기존 breadcrumb 제거 removePreviousBreadcrumb(); - // 새 breadcrumb 생성 const breadcrumbItems = generateBreadcrumbItems(); const breadcrumbElement = createBreadcrumbElement(breadcrumbItems); - // div#content의 첫 번째 자식으로 추가 contentDiv.insertBefore(breadcrumbElement, contentDiv.firstChild); } diff --git a/src/scripts/components/header-component.ts b/src/scripts/components/header-component.ts index 1252b9a..b8b66ea 100644 --- a/src/scripts/components/header-component.ts +++ b/src/scripts/components/header-component.ts @@ -29,12 +29,9 @@ class HeaderComponent extends HTMLElement {
- Docker Korea home page +

+ Docker KO +