diff --git a/README.ko-KR.md b/README.ko-KR.md index 98adb13..501ae49 100644 --- a/README.ko-KR.md +++ b/README.ko-KR.md @@ -34,9 +34,9 @@ - ⚡️ Pinia 스토어를 활용한 글로벌 상태 관리 - ⚡️ GitHub 커뮤니티와 공식 문서를 통한 프로젝트 기술지원 -## [문서 (설치 및 시작하기)](https://vutron.cdget.com/installation-and-build/getting-started) +## [문서 (설치 및 시작하기)](https://vutron.cdget.com/ko/installation-and-build/getting-started) -자세한 설치 방법이나 기본적인 템플릿 사용 방법에 대한 전체 문서를 참고하려면 다음 문서 페이지를 방문하세요: https://vutron.cdget.com/installation-and-build/getting-started +자세한 설치 방법이나 기본적인 템플릿 사용 방법에 대한 전체 문서를 참고하려면 다음 문서 페이지를 방문하세요: https://vutron.cdget.com/ko/installation-and-build/getting-started ## 기여 diff --git a/docs/package-lock.json b/docs/package-lock.json index c31bc5b..fdc19f2 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "vitepress": "^1.3.2", + "vitepress-i18n": "^1.0.1", "vitepress-sidebar": "^1.24.1", "vue": "^3.4.36" }, @@ -1675,6 +1676,14 @@ } } }, + "node_modules/vitepress-i18n": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vitepress-i18n/-/vitepress-i18n-1.0.1.tgz", + "integrity": "sha512-b7NbvTaLRIkYUkbDQPOzP4bwtUDIuZCRykhhyWSjcbNmzb/uoUoLFb0bpeFbD4Gkv7jZ5ELnYdtrMoBaHq7IuQ==", + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/vitepress-sidebar": { "version": "1.24.1", "resolved": "https://registry.npmjs.org/vitepress-sidebar/-/vitepress-sidebar-1.24.1.tgz", diff --git a/docs/package.json b/docs/package.json index 56b3cf1..f228d7d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "vitepress": "^1.3.2", + "vitepress-i18n": "^1.0.1", "vitepress-sidebar": "^1.24.1", "vue": "^3.4.36" } diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts index 06a2215..460ef37 100644 --- a/docs/src/.vitepress/config.mts +++ b/docs/src/.vitepress/config.mts @@ -1,37 +1,95 @@ import { generateSidebar } from 'vitepress-sidebar' -import { name, description, repository } from '../../../package.json' +import { name, repository, homepage } from '../../../package.json' import { defineConfig } from 'vitepress' +import { generateI18nLocale, generateI18nSearch } from 'vitepress-i18n' const capitalizeFirst = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1) +const defaultLocale: string = 'en' +const editLinkPattern = 'https://github.com/jooy2/vutron/edit/master/docs/:path' + +const defineSupportLocales = [ + { label: defaultLocale, translateLocale: defaultLocale }, + { label: 'ko', translateLocale: 'ko' } +] export default defineConfig({ title: capitalizeFirst(name), - description, + lastUpdated: true, outDir: '../dist', head: [ ['link', { rel: 'icon', href: '/logo.png' }], ['link', { rel: 'shortcut icon', href: '/favicon.ico' }] ], cleanUrls: true, + metaChunk: true, + rewrites: { + 'en/:rest*': ':rest*' + }, + sitemap: { + hostname: homepage + }, themeConfig: { logo: { src: '/icon.png', width: 24, height: 24 }, - search: { + search: generateI18nSearch({ + defineLocales: defineSupportLocales, + rootLocale: defaultLocale, provider: 'local' - }, - sidebar: generateSidebar({ - documentRootPath: 'src', - collapsed: false, - useTitleFromFileHeading: true, - useTitleFromFrontmatter: true, - sortMenusByFrontmatterOrder: true, - hyphenToSpace: true, - capitalizeEachWords: true, - manualSortFileNameByPriority: [ - 'installation-and-build', - 'project-structures', - 'electron-how-to' - ] }), + sidebar: generateSidebar([ + ...[defaultLocale, 'ko'].map((lang) => { + return { + collapsed: false, + useTitleFromFileHeading: true, + useTitleFromFrontmatter: true, + sortMenusByFrontmatterOrder: true, + hyphenToSpace: true, + capitalizeEachWords: true, + manualSortFileNameByPriority: [ + 'installation-and-build', + 'project-structures', + 'electron-how-to' + ], + documentRootPath: `/src/${lang}`, + resolvePath: defaultLocale === lang ? '/' : `/${lang}/`, + ...(defaultLocale === lang ? {} : { basePath: `/${lang}/` }) + } + }) + ]), socialLinks: [{ icon: 'github', link: repository.url.replace('.git', '') }] - } + }, + locales: generateI18nLocale({ + defineLocales: defineSupportLocales, + rootLocale: defaultLocale, + editLinkPattern: editLinkPattern, + label: { + en: 'English', + ko: '한국어' + }, + lang: { + en: 'en-US', + ko: 'ko-KR' + }, + description: { + en: 'Vutron is a preconfigured template for developing Electron cross-platform desktop apps. It uses Vue 3 and allows you to build a fast development environment with little effort.', + ko: 'Vutron은 Electron 크로스 플랫폼 데스크톱 앱 개발을 위해 미리 구성된 템플릿입니다. Vue 3을 사용하며 적은 노력으로 빠른 개발 환경을 구축할 수 있습니다.' + }, + themeConfig: { + en: { + nav: [ + { + text: 'Getting Started', + link: '/installation-and-build/getting-started' + } + ] + }, + ko: { + nav: [ + { + text: '시작하기', + link: '/ko/installation-and-build/getting-started' + } + ] + } + } + }) }) diff --git a/docs/src/electron-how-to/main-and-renderer-process.md b/docs/src/en/electron-how-to/main-and-renderer-process.md similarity index 100% rename from docs/src/electron-how-to/main-and-renderer-process.md rename to docs/src/en/electron-how-to/main-and-renderer-process.md diff --git a/docs/src/electron-how-to/preload-script.md b/docs/src/en/electron-how-to/preload-script.md similarity index 100% rename from docs/src/electron-how-to/preload-script.md rename to docs/src/en/electron-how-to/preload-script.md diff --git a/docs/src/index.md b/docs/src/en/index.md similarity index 100% rename from docs/src/index.md rename to docs/src/en/index.md diff --git a/docs/src/installation-and-build/automated-testing.md b/docs/src/en/installation-and-build/automated-testing.md similarity index 100% rename from docs/src/installation-and-build/automated-testing.md rename to docs/src/en/installation-and-build/automated-testing.md diff --git a/docs/src/installation-and-build/build-configuration.md b/docs/src/en/installation-and-build/build-configuration.md similarity index 100% rename from docs/src/installation-and-build/build-configuration.md rename to docs/src/en/installation-and-build/build-configuration.md diff --git a/docs/src/installation-and-build/getting-started.md b/docs/src/en/installation-and-build/getting-started.md similarity index 100% rename from docs/src/installation-and-build/getting-started.md rename to docs/src/en/installation-and-build/getting-started.md diff --git a/docs/src/installation-and-build/install-local-documentation.md b/docs/src/en/installation-and-build/install-local-documentation.md similarity index 100% rename from docs/src/installation-and-build/install-local-documentation.md rename to docs/src/en/installation-and-build/install-local-documentation.md diff --git a/docs/src/installation-and-build/npm-scripts.md b/docs/src/en/installation-and-build/npm-scripts.md similarity index 100% rename from docs/src/installation-and-build/npm-scripts.md rename to docs/src/en/installation-and-build/npm-scripts.md diff --git a/docs/src/other-projects.md b/docs/src/en/other-projects.md similarity index 100% rename from docs/src/other-projects.md rename to docs/src/en/other-projects.md diff --git a/docs/src/project-structures/pre-configured-components.md b/docs/src/en/project-structures/pre-configured-components.md similarity index 100% rename from docs/src/project-structures/pre-configured-components.md rename to docs/src/en/project-structures/pre-configured-components.md diff --git a/docs/src/project-structures/project-structure.md b/docs/src/en/project-structures/project-structure.md similarity index 100% rename from docs/src/project-structures/project-structure.md rename to docs/src/en/project-structures/project-structure.md diff --git a/docs/src/ko/electron-how-to/main-and-renderer-process.md b/docs/src/ko/electron-how-to/main-and-renderer-process.md new file mode 100644 index 0000000..3eee80d --- /dev/null +++ b/docs/src/ko/electron-how-to/main-and-renderer-process.md @@ -0,0 +1,25 @@ +# 메인과 렌더러 프로세스 + +**Vutron** 애플리케이션은 메인(Main) 프로세스와 렌더러(Renderer) 프로세스로 코드가 나뉩니다. + +**Main**은 `src/main`의 코드로 주로 Electron이 처리하는 프로세스 코드입니다. **렌더러**는 `src/renderer`의 코드로 주로 Vue와 같은 프론트엔드 렌더링 프로세스를 위한 코드입니다. + +일반적으로 **Node.js** 스크립트는 렌더러 프로세스에서 실행할 수 없습니다. 예를 들어 Node.js에서 사용하는 API를 포함하는 모듈이나 `path` 또는 `net`, `os` 또는 `crypto`와 같은 **Node.js**의 네이티브 모듈이 있습니다. + +사전 로드 스크립트는 렌더러가 로드되기 전에 실행됩니다. 이는 보안상의 이유로 렌더러 영역에서 Node.js 스크립트의 실행을 분리하고 격리하기 위해 메인 프로세스에 대한 브릿지를 생성합니다. + +안전한 스크립트 실행을 위해 메인 프로세스에서 노드 스크립트를 실행하고 렌더러는 메시징을 통해 실행 결과를 수신하는 것이 좋습니다. 이는 **IPC 통신**을 통해 구현할 수 있습니다. + +이에 대한 자세한 내용은 다음 문서를 참조하세요: https://www.electronjs.org/docs/latest/tutorial/ipc + +### 렌더러에서 Node.js를 실행하는 방법은 무엇인가요? + +보안 문제를 건너뛰고 렌더러에서 Node.js 스크립트를 사용하려면 `vite.config.ts` 파일에서 `nodeIntegration`을 `true`로 설정해야 합니다. + +```javascript +rendererPlugin({ + nodeIntegration: true +}) +``` + +이에 대한 자세한 내용은 다음 문서를 참조하세요: https://github.com/electron-vite/vite-plugin-electron-renderer diff --git a/docs/src/ko/electron-how-to/preload-script.md b/docs/src/ko/electron-how-to/preload-script.md new file mode 100644 index 0000000..1597d8c --- /dev/null +++ b/docs/src/ko/electron-how-to/preload-script.md @@ -0,0 +1,24 @@ +# 프리로드 스크립트 + +Electron.js의 프리로드 스크립트는 메인 프로세스와 렌더러 프로세스 간의 통신을 위해 설계된 보안 영역입니다. 일반적으로 **[IPC 통신](https://www.electronjs.org/docs/latest/tutorial/ipc)**에 사용됩니다. + +자세한 내용은 다음 문서를 참고하세요: https://www.electronjs.org/docs/latest/tutorial/tutorial-preload + +최신 버전의 Electron과의 호환성 및 보안을 위해 이전 버전의 `electron/remote` 모듈은 사용하지 않는 것이 좋습니다. 시스템 이벤트나 노드 스크립트를 활용하려면 렌더러가 아닌 메인 프로세스에서 사용하는 것이 좋습니다. + +Vutron의 프리로드 스크립트는 `src/preload` 폴더에 있습니다. 새 IPC 통신 채널을 생성하려면 다음 변수에 채널 이름을 추가하여 통신을 허용하도록 화이트리스트에 추가합니다. + +- `mainAvailChannels`: 메인에서 렌더러로 이벤트를 전송합니다. (`window.mainApi.send('channelName')`) +- `rendererAvailChannels`: 렌더러에서 메인으로 이벤트를 전송합니다. (`mainWindow.webContents.send('channelName')`) + +렌더러에서 메인으로 이벤트를 전송할 때는 `ipcRenderer.send` 대신 `window.mainApi` 객체에 액세스합니다. `mainApi`는 Vutron 템플릿에서 설정한 이름이며 변경할 수 있습니다. + +다음은 mainApi에서 지원되는 함수입니다: + +- `send`: 메인으로 이벤트를 보냅니다. +- `on`: 메인에서 보낸 이벤트를 수신할 리스너입니다. +- `once`: 메인에서 보낸 이벤트를 수신할 리스너입니다. (하나의 호출만 처리) +- `off`: 이벤트 리스너를 제거합니다. +- `invoke`: 메인에 이벤트를 보내고 비동기적으로 데이터를 수신할 수 있는 함수입니다. + +이를 변경하고 수정하려면 `src/preload/index.ts`에서 `exposeInMainWorld`를 수정해야 합니다. diff --git a/docs/src/ko/index.md b/docs/src/ko/index.md new file mode 100644 index 0000000..6e080b5 --- /dev/null +++ b/docs/src/ko/index.md @@ -0,0 +1,32 @@ +--- +layout: home + +title: Vutron +titleTemplate: Vite + Vue 3 + Electron용 빠른 시작 템플릿 + +hero: + name: Vutron + text: Vite + Vue 3 + Electron용 빠른 시작 템플릿 + tagline: Vutron은 Electron 크로스 플랫폼 데스크톱 앱 개발을 위해 미리 구성된 템플릿입니다. Vue 3을 사용하며 적은 노력으로 빠른 개발 환경을 구축할 수 있습니다. + actions: + - theme: brand + text: 시작하기 + link: /ko/installation-and-build/getting-started + - theme: alt + text: GitHub + link: https://github.com/jooy2/vutron + image: + src: /icon.png + alt: Vue + +features: + - icon: + title: 강력한 웹 애플리케이션 개발 템플릿 + details: Vutron은 크로스 플랫폼, 다국어, 레이아웃 및 테마, 스타일 프레임워크를 지원합니다. + - icon: + title: 핫 리로드를 통한 빠른 개발 + details: 개발자를 위한 최대 기능 지원으로 초기 프로젝트 설정 시간을 단축하세요. + - icon: + title: 안정적인 유지 관리 지원 + details: 실제 사용 사례도 많고 기술 지원도 신속하게 제공합니다. +--- diff --git a/docs/src/ko/installation-and-build/automated-testing.md b/docs/src/ko/installation-and-build/automated-testing.md new file mode 100644 index 0000000..62fae7e --- /dev/null +++ b/docs/src/ko/installation-and-build/automated-testing.md @@ -0,0 +1,23 @@ +--- +order: 4 +--- + +# 자동화 테스트 + +**Vutron**에는 자동화된 테스트가 포함되어 있습니다. 테스트 프레임워크는 Microsoft의 **[Playwright](https://playwright.dev)** 모듈을 사용합니다. + +**Playwright**는 웹 애플리케이션 테스트에 최적화되어 있으며 **Electron** 프레임워크를 완벽하게 지원합니다. 설치가 간단하고, 별도의 설정 없이 바로 테스트를 시작할 수 있으며, 크로스 플랫폼을 지원합니다. 여기에서 **Playwright**에 대해 자세히 알아보세요: https://github.com/microsoft/playwright + +이 템플릿에는 템플릿 메인 화면에 대한 매우 간단한 실행 및 동작 테스트만 구현되어 있습니다. 고급 테스트는 애플리케이션의 범위에 따라 달라집니다. + +현재 테스트 사양 파일은 `tests` 디렉터리에, 테스트 결과 파일은 `tests/results`에 있습니다. (기본 제공 테스트 사양 파일은 별도의 결과 파일을 생성하지 않습니다.) + +Playwright 설정은 프로젝트 루트에 있는 `playwright.config.ts`이며, 이에 대한 자세한 내용은 다음 문서를 참조하세요: https://playwright.dev/docs/test-configuration + +모든 구성이 완료되면 다음 명령어로 테스트를 실행할 수 있습니다. + +```shell +$ npm run test +``` + +테스트를 실행하기 전에 빌드 디렉터리(`dist`)를 비우고 테스트용 패키지를 컴파일합니다. diff --git a/docs/src/ko/installation-and-build/build-configuration.md b/docs/src/ko/installation-and-build/build-configuration.md new file mode 100644 index 0000000..112c185 --- /dev/null +++ b/docs/src/ko/installation-and-build/build-configuration.md @@ -0,0 +1,84 @@ +--- +order: 2 +--- + +# 빌드 구성 + +모듈 설치가 완료되면 아래 명령어를 사용하여 플랫폼 패키지를 간단하게 빌드할 수 있습니다. + +```shell +# For Windows (.exe, .appx) +$ npm run build:win + +# For macOS (.dmg) +$ npm run build:mac + +# For Linux (.rpm, .deb, .snap) +$ npm run build:linux + +# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description +$ npm run build:all +``` + +빌드된 패키지는 `release/{version}` 위치에서 찾을 수 있습니다. + +자세한 내용은 다음 문서를 참조하세요: https://webpack.electron.build/dependency-management#installing-native-node-modules + +## 멀티플랫폼 빌드를 하려면 어떻게 해야 하나요? + +각 OS에 대한 패키지를 만들려면 동일한 OS에서 빌드해야 합니다. 예를 들어 macOS용 패키지는 macOS 컴퓨터에서 빌드해야 합니다. + +하지만 하나의 OS에서 Windows, macOS, Linux용 패키지를 한 번에 빌드할 수 있습니다. 하지만 이를 위해서는 약간의 준비가 필요할 수 있습니다. + +하나의 플랫폼에서 여러 플랫폼을 동시에 구축하려는 경우 **macOS**를 권장합니다. 몇 가지 간단한 설정만으로 구성할 수 있기 때문입니다. + +다음 명령어를 사용하여 한 번에 여러 플랫폼 빌드를 수행할 수 있습니다. 또는 위의 개별 빌드 명령어를 통해 원하는 OS에 대해서만 빌드를 수행할 수도 있습니다. + +```shell +$ npm run build:all +``` + +Linux 빌드에는 `multipass` 구성이 필요할 수 있습니다. 다음 링크를 통해 `multipass`에 대해 자세히 알아보세요: https://multipass.run + +멀티플랫폼 빌드에 대해 자세히 알아보려면 다음 문서를 참조하세요: https://electron.build/multi-platform-build + +## 개발 파일을 제외하여 번들 크기 줄이기 + +빌드 시점에 필요하지 않은 파일은 `buildAssets/builder/config.ts`의 파일 속성에 파일 패턴을 추가하여 제외할 수 있습니다. 이렇게 하면 번들 용량을 절약할 수 있습니다. + +아래는 불필요한 `node_modules` 파일 패턴으로 번들을 추가로 절약할 수 있는 예시입니다. 프로젝트에 따라 아래 규칙을 사용하면 문제가 발생할 수 있으므로 사용 전에 검토하시기 바랍니다. + +```json +[ + "!**/.*", + "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*", + "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}", + "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}", + "!**/node_modules/**/node-v*-x64{,/**/*}", + "!**/node_modules/bluebird/js/browser{,/**/*}", + "!**/node_modules/bluebird/js/browser{,/**/*}", + "!**/node_modules/source-map/dist{,/**/*}", + "!**/node_modules/lodash/fp{,/**/*}", + "!**/node_modules/async/!(dist|package.json)", + "!**/node_modules/async/internal{,/**/*}", + "!**/node_modules/ajv/dist{,/**/*}", + "!**/node_modules/ajv/scripts{,/**/*}", + "!**/node_modules/node-pre-gyp/!(lib|package.json)", + "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)", + "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)", + "!**/node_modules/source-map-support/browser-source-map-support.js", + "!**/node_modules/json-schema/!(package.json|lib)" +] +``` + +## 네이티브 노드 모듈을 사용하는 프로젝트의 빌드 설정 + +**네이티브 노드 모듈**을 사용하는 프로젝트의 경우, `package.json`에 다음 스크립트를 추가하세요: 종속성을 설치할 때 `electron-builder`가 리빌드가 필요한 모듈을 처리합니다. + +```json +{ + "scripts": { + "postinstall": "electron-builder install-app-deps" + } +} +``` diff --git a/docs/src/ko/installation-and-build/getting-started.md b/docs/src/ko/installation-and-build/getting-started.md new file mode 100644 index 0000000..2631180 --- /dev/null +++ b/docs/src/ko/installation-and-build/getting-started.md @@ -0,0 +1,58 @@ +--- +order: 1 +--- + +# 시작하기 + +## 프로젝트 복제하기 + +### 방법 1: `npm init` (권장) + +npm 명령만으로 리포지토리를 쉽게 복제할 수 있습니다. + +```shell +$ npm init vutron +``` + +위의 방법은 프로젝트에 불필요한 문서와 '.github' 관련 파일을 만들지 않습니다. + +### 방법 2: 템플릿 사용 + +**[이 템플릿 사용](https://github.com/jooy2/vutron/generate)** 버튼을 클릭하면 나만의 프로젝트를 즉시 만들 수 있습니다. + +이 방법을 사용하면 GitHub에 리포지토리가 즉시 생성되지만 프로젝트를 로컬에 복제해야 사용할 수 있습니다. + +### 방법 3: 리포지토리 복제 + +아래 명령어를 사용하여 이 리포지토리를 복제합니다. 이 방법은 Vutron 리포지토리에 직접 기여하는 경우에 적합합니다. + +```shell +$ git clone https://github.com/jooy2/vutron +``` + +## 설치하기 + +프로젝트를 복제한 후 터미널에서 다음 명령을 실행합니다: + +```shell +# via npm +$ npm i + +# via yarn (https://yarnpkg.com) +$ yarn install + +# via pnpm (https://pnpm.io) +$ pnpm i +``` + +## 개발 환경에서 실행 + +개발 환경의 애플리케이션은 **[Vite](https://vitejs.dev)** 환경에서 실행됩니다. + +```shell +$ npm run dev +``` + +명령줄 명령을 실행한 후에도 애플리케이션이 나타나지 않는다면 다른 앱에서 기본 포트를 사용하고 있는지 확인해야 할 수 있습니다. + +Vite는 기본적으로 포트 `5173`을 사용합니다. diff --git a/docs/src/ko/installation-and-build/install-local-documentation.md b/docs/src/ko/installation-and-build/install-local-documentation.md new file mode 100644 index 0000000..0898c44 --- /dev/null +++ b/docs/src/ko/installation-and-build/install-local-documentation.md @@ -0,0 +1,36 @@ +--- +order: 5 +--- + +# 로컬 문서 관리 + +`Vutron`의 문서는 `VitePress` 뷰어를 통해 로컬 환경에서 볼 수 있습니다. + +이 함수는 전체 프로젝트가 복제된 경우에만 작동합니다. `npm init vutron`으로 프로젝트를 생성한 경우 `docs` 폴더는 포함되지 않습니다. + +## Installation + +아래 지침의 모든 작업은 `docs` 폴더에서 수행해야 합니다. + +```shell +$ cd docs +``` + +다음 명령을 사용하여 관련 패키지를 설치합니다: + +```shell +# via npm +$ npm i + +# via yarn (https://yarnpkg.com) +$ yarn install + +# via pnpm (https://pnpm.io) +$ pnpm i +``` + +아래 명령을 통해 문서가 호스팅되는 로컬 서버를 실행할 수 있습니다. + +```shell +$ npm run dev +``` diff --git a/docs/src/ko/installation-and-build/npm-scripts.md b/docs/src/ko/installation-and-build/npm-scripts.md new file mode 100644 index 0000000..851d960 --- /dev/null +++ b/docs/src/ko/installation-and-build/npm-scripts.md @@ -0,0 +1,39 @@ +--- +title: NPM Scripts +order: 3 +--- + +# Npm 스크립트 + +> $ npm run %SCRIPT_NAME% + +## 일반 + +| Script Name | Description | +| --- | --- | +| `dev` | Start Electron as a development environment | +| `dev:debug` | Start Electron as a development environment (with vite debug) | +| `dev:debug:force` | Start Electron as a development environment (with vite debug + clean vite cache) | +| `build:pre` | Commands commonly run at build time. This script does not need to be run separately. | +| `build` | Build the package for the current operating system. | +| `build:all` | Build a specified package for the entire operating system (Requires cross-platform build configuration) | +| `build:dir` | `electron-builder` directory build | +| `build:mac` | Build preconfigured packages for macOS | +| `build:linux` | Build preconfigured packages for Linux | +| `build:win` | Build preconfigured packages for Windows | +| `lint` | ESLint code inspection. It does not modify the code. | +| `lint:fix` | ESLint code inspection. Use auto-fix to fix your code. | +| `format` | Prettier code inspection. It does not modify the code. | +| `format:fix` | Prettier code inspection. Use auto-fix to fix your code. | +| `test` | Build a package for testing and run tests against the test specification file. | +| `test:linux` | Build a package for testing and run tests against the test specification file. (for linux ci only) | + +## 문서용 + +프로젝트 문서에 기여하는 경우에만 사용됩니다. `docs` 디렉토리 위치에서 실행해야 합니다. + +| Script Name | Description | +| ----------- | ------------------------------------------------------------------ | +| `dev` | Start the local document server. (For development) | +| `build` | Build a local document server. Used only for GitHub page builders. | +| `serve` | Start the local document server. | diff --git a/docs/src/ko/other-projects.md b/docs/src/ko/other-projects.md new file mode 100644 index 0000000..06382c4 --- /dev/null +++ b/docs/src/ko/other-projects.md @@ -0,0 +1,15 @@ +# 기타 프로젝트 + +## React로 만든 전자 템플릿을 찾고 계신가요? + +Vite + React + Material-UI + Electron으로 구성된 'Retron' 프로젝트도 확인해 보세요. + +https://github.com/jooy2/retron + +## (사용 중단) Webpack 5 컴파일러로 `Vutron`을 찾고 계신가요? + +Vite 컴파일러를 사용하여 프로젝트 및 번들 크기를 줄이고 개발 환경과 빌드 속도를 개선한다는 목표를 달성했습니다. + +Webpack 5 컴파일러를 사용하는 기존 **Vutron**은 아래 리포지토리로 분리되었으며 곧 지원이 종료될 예정입니다. + +https://github.com/jooy2/vutron-webpack diff --git a/docs/src/ko/project-structures/pre-configured-components.md b/docs/src/ko/project-structures/pre-configured-components.md new file mode 100644 index 0000000..b50e29a --- /dev/null +++ b/docs/src/ko/project-structures/pre-configured-components.md @@ -0,0 +1,32 @@ +--- +order: 2 +--- + +# 사전 구성된 구성 요소 + +## 웹 앱 프레임워크 + +- [Vite](https://vitejs.dev) +- [Electron](https://www.electronjs.org) +- [Electron Builder](https://www.electron.build) + +## 개발 도움말 도구 + +- [TypeScript](https://www.typescriptlang.org) +- [ESLint](https://eslint.org) +- [Prettier](https://prettier.io) + +## 프론트엔드 프레임워크 (Vue) + +- [Vue](https://vuejs.org) +- [Vue-i18n](https://kazupon.github.io/vue-i18n) +- [Vue-router](https://router.vuejs.org) +- [Pinia](https://pinia.vuejs.org) + +## 디자인 프레임워크 + +- [Vuetify](https://vuetifyjs.com) + +## 테스트 + +- [Playwright](https://playwright.dev) diff --git a/docs/src/ko/project-structures/project-structure.md b/docs/src/ko/project-structures/project-structure.md new file mode 100644 index 0000000..f3ace10 --- /dev/null +++ b/docs/src/ko/project-structures/project-structure.md @@ -0,0 +1,73 @@ +--- +order: 1 +--- + +# 프로젝트 구조 + +``` +/ +├─ .github - GitHub 파일들 (Vutron 프로젝트 기여에만 사용) +│ └─ ISSUE_TEMPLATE/ +│ └─ resources/ - README.md 등에 사용되는 GitHub 리소스 +│ └─ workflows/ - GitHub 워크플로우 정의 +│ └─ dependabot.yml +│ └─ FUNDING.yml +├─ .vscode - Visual Studio Code IDE에서 사용하는 일반적인 프로젝트 구성 파일 +├─ buildAssets/ - Electron 빌드에 사용되는 패키지 리소스(아이콘, 로고 등) 파일 +│ └─ builder/ +│ │ │ └─ config.ts - `electron-builder` 동적 구성 파일 +│ └─ icons/ +├─ dist/ - 패키지 빌드에 사용되는 출력 디렉토리 +├─ docs/ - 프로젝트 문서(선택적으로 활성화) +│ └─ .vitepress/ +│ │ │ └─ config.mts - 문서 호스팅에 사용되는 VitePress 구성 파일 +│ └─ public/ - VitePress 문서 페이지의 루트 리소스 디렉토리 +├─ node_modules/ +├─ src/ +│ ├─ main/ - 메인(Electron) 프로세스 소스 코드 +│ │ ├─ utils/ - 메인 프로세스 유틸리티 +│ │ │ └─ Constants.ts - 메인 글로벌 정의 +│ │ │ └─ Menus.ts - 메인 글로벌 메뉴 정의 +│ │ └─ index.ts - 메인 프로세스 진입점 +│ │ └─ IPCs.ts - 메인 프로세스 IPC 핸들러 정의 +│ │ └─ MainRunner.ts - 메인 프로세스 메인 윈도우 프로세스 +│ ├─ preload/ - 프리로드 (Electron-Vue 커뮤니케이션 브릿지) 프로세스 +│ │ └─ index.ts +│ ├─ renderer/ - 렌더러 (Vue) 프로세스 소스 코드 +│ │ ├─ components/ - Vue 컴포넌트 콜렉션 +│ │ │ └─ layout/ - 레이아웃 컴포넌트 +│ │ ├─ locales/ - Vue i18n 언어 리소스 파일 +│ │ ├─ plugins/ - Vue 플러그인 정의 +│ │ ├─ public/ - Vue 정적 리소스 +│ │ │ └─ images/ +│ │ ├─ router/ - Vue 라우팅 정의 +│ │ ├─ screens/ - Vue 화면 컴포넌트 +│ │ │ └─ ErrorScreen.vue - 렌더링 프로세스 및 라우팅 오류 발생 시 표시되는 화면 +│ │ │ └─ MainScreen.vue +│ │ │ └─ SecondScreen.vue - 샘플 화면 +│ │ ├─ store/ - Pinia 스토어 (글로벌 상태 관리) 정의 +│ │ ├─ utils/ - 렌더러 프로세스 유틸리티 +│ │ ├─ App.vue - Vue 앱 루트 컴포넌트 +│ │ ├─ index.html - Electron 렌더러 프로세스에 의해 로드된 루트 정적 인덱스 +│ └─ └─ main.ts - 렌더러 프로세스 엔트리 포인트Renderer process entry point +├─ tests/ - 애플리케이션 테스트 구성 +│ ├─ results/ - PlayWright 테스트 결과 파일 및 스크린샷 저장 위치 +│ ├─ specs/ - PlayWright 테스트 사양 파일 +│ ├─ fixtures.ts - 공통 실행 API 테스트 +│ └─ testUtil.ts - 테스트 유틸리티 +├─ .editorconfig - IDE용 에디터 권장 구성 파일 +├─ .eslintignore - ESLint에서 무시할 파일 목록 +├─ .eslintrc.json - ESLint 규칙 구성 +├─ .gitignore - Git에 업로드하지 않을 파일 목록 +├─ .prettierignore - Prettier 파일 서식을 비활성화할 파일 목록 +├─ .prettierrc - Prettier 규칙 설정 +├─ CODE_OF_CONDUCT.md - GitHub에서만 사용되는 파일 +├─ LICENSE - 프로젝트 라이선스 파일 +├─ package.json - Node.js 패키지 구성 +├─ package-lock.json +├─ playwright.config.ts - Playwright 테스트 규칙 구성 +├─ tsconfig.json - TypeScript 설정 +├─ tsconfig.node.json - TypeScript 설정 +├─ vite.config.mts - Vite 컴파일러 빌드 설정 +└─ README.md - GitHub에서만 사용되는 파일 +```