Vue.js 3 의 기본적인 사용법을 설명합니다. Vue2 에서 Options API를 통해 개발했다면, Vue3 에서는 Composion API로 개발을 하게 됩니다. 보통, Composion API로 만들게 되면, Setup() 함수에 구현을 하는데요, 여기서는 Setup()함수를 사용하지 않습니다. 대신, script 태그 선언시에 setup 옵션을 추가합니다. 이렇게 하면 코드를 더욱 간결하게 작성할 수 있습니다.
// electron/electron.js
const path = require('path');
const { app, BrowserWindow } = require('electron');
const isDev = process.env.IS_DEV == "true" ? true : false;
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
},
});
// and load the index.html of the app.
// win.loadFile("index.html");
mainWindow.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../dist/index.html')}`
);
// Open the DevTools.
if (isDev) {
mainWindow.webContents.openDevTools();
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
});
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Step 6. electron/preload.js 파일 생성
// electron/preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
Step 7. 개발모드 실행 및 빌드
# Run yarn electron:dev to work with electron in development mode.
> yarn electron:dev
# Run yarn app:build to build your electron app.
> yarn app:build
이제 생성한 프로젝트의 구조에 대해 간단하게 알아볼 시간입니다. 먼저, VSCode 의 왼쪽에서 프로젝트 폴더를 봅시다. 이렇게 생겼어요.
node_modules 폴더가 먼저 보이네요. 이 폴더에는 내가 설치한 node 모듈들이 있는 장소입니다. 처음 용량이 거의 160MB로 꽤 큽니다. package.json 에 필요한 패키지 목록을 가지고 있어서, node_modules 폴더가 없더라도, 다시 만들수가 있습니다. 그래서, git에는 저장하지 않도록 설정되어 있어요.
public 폴더의 index.html 도 봅시다. 여기에서 눈여겨 볼 곳은 app 으로 id를 설정한 부분입니다. 이 곳에 우리가 작성한 코드들이 자동으로 들어가게 되는데요. 자동으로 관리되는 부분이므로, index.html 파일을 직접 건드리지 않는 것이 좋습니다.
이제 가장 중요한 src 폴더를 보겠습니다. 이 밑에는 main.js, App.vue, assets 폴더, components 폴더가 있네요. main.js 는 프로그램의 진입점이 될 것입니다. App 컴포넌트를 호출해서, 위에서 보았던 app 에 마운트를 합니다. 이 파일도 거의 수정할 일이 없지만, 간혹 전역으로 적용되어야 할 js 파일이나 css 파일을 import하는 경우가 있습니다. 이미 지난 시간에 Bootstrap 을 위해서 추가했었지요.
그리고, App.vue 는 메인 컴포넌트입니다. Vue는 컴포넌트 기반의 프론트엔드 프레임워크 입니다. Vue 뿐만 아니라, React, Svelte 등도 컴포넌트 기반입니다. 하나의 페이지도 컴포넌트이고 페이지를 구성하는 다양한 영역도 컴포넌트로 구성할 수 있습니다. Vue에서 컴포넌트는 ~.vue 라는 확장명으로 만들어집니다. 파일 하나가 컴포넌트입니다. React의 경우는 클래스 기반, 함수 기반의 컴포넌트여서, 한 개의 파일에 여러개의 컴포넌트를 만들 수 있다는 점에서 차이가 있습니다. 컴포넌트를 만들어 놓으면 재사용하기에 좋습니다.
assets 폴더에는 이미지를 넣어서 사용하면 됩니다. 그리고, components 에는 폴더명처럼 재사용할 수 있는 컴포넌트를 작성해서 넣으시면 되겠습니다.
여기에서는 기본으로 만들어주지 않았지만, 보통 views 또는 pages라는 폴더도 만들어 주게 됩니다. 말 그대로 페이지를 표현하는 컴포넌트를 작성하는 폴더입니다. 우리는 views 폴더를 만들어두겠습니다.
