Electron\uc740 \ub370\uc2a4\ud06c\ud0d1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, JavaScript, HTML, CSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, \uc804\ud1b5\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c, Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub3c4 \ucca0\uc800\ud55c \ud14c\uc2a4\ud2b8\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 Electron\uc5d0\uc11c\uc758 \ud14c\uc2a4\ud305 \ubc29\ubc95\uacfc \uc8fc\uc694 \ub2e8\uc704 \ud14c\uc2a4\ud2b8 \ubc0f \ud1b5\ud569 \ud14c\uc2a4\ud2b8 \ub3c4\uad6c\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ud14c\uc2a4\ud2b8\ub294 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \uacfc\uc815\uc5d0\uc11c \ud544\uc218\uc801\uc778 \ubd80\ubd84\uc785\ub2c8\ub2e4. \uadf8\uac83\uc740 \ud504\ub85c\uadf8\ub7a8\uc758 \uc2e0\ub8b0\uc131\uc744 \ubcf4\uc7a5\ud558\uace0 \ubc84\uadf8\ub97c \uc0ac\uc804\uc5d0 \ubc1c\uacac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \ud2b9\ud788, Electron\uacfc \uac19\uc740 \ubcf5\uc7a1\ud55c \ud658\uacbd\uc5d0\uc11c \ub2e4\uc591\ud55c \ud50c\ub7ab\ud3fc \uac04\uc758 \ud638\ud658\uc131\uacfc UI\uc758 \uc77c\uad00\uc131\uc744 \uc720\uc9c0\ud558\uae30 \uc704\ud574\uc11c\ub294 \ucca0\uc800\ud55c \ud14c\uc2a4\ud305\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
\ud14c\uc2a4\ud2b8\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \ub450 \uac00\uc9c0 \uc8fc\uc694 \uc720\ud615\uc73c\ub85c \ub098\ub269\ub2c8\ub2e4.<\/p>\n
\ub2e8\uc704 \ud14c\uc2a4\ud2b8\ub97c \uc704\ud55c \ub3c4\uad6c\ub294 \ub2e4\uc591\ud558\uc9c0\ub9cc, Electron \uac1c\ubc1c\uc5d0 \uc801\ud569\ud55c \uba87 \uac00\uc9c0 \uc8fc\uc694 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
Mocha\ub294 \uac00\uc7a5 \uc77c\ubc18\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \ube44\ub3d9\uae30 \ud14c\uc2a4\ud2b8\ub97c \uc9c0\uc6d0\ud558\uace0, \uc720\uc5f0\ud55c \uad6c\uc870\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 Mocha\ub97c \uc0ac\uc6a9\ud558\ub294 \uac04\ub2e8\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n
const assert = require('assert');\n\ndescribe('Array', function() {\n describe('#indexOf()', function() {\n it('should return -1 when the value is not present', function() {\n assert.equal([-1, 0, 1].indexOf(2), -1);\n });\n });\n});<\/code><\/pre>\n3.2. Jest<\/h3>\n
Jest\ub294 Facebook\uc5d0\uc11c \uac1c\ubc1c\ud55c JavaScript \ud14c\uc2a4\ud305 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uac04\ub2e8\ud55c \uc124\uc815\uc73c\ub85c \ube60\ub974\uac8c \ud14c\uc2a4\ud2b8\ub97c \uc2dc\uc791\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4. Jest\ub294 \uc2a4\ub0c5\uc0f7 \ud14c\uc2a4\ud2b8 \ubc0f \ubaa8\uc758 \uae30\ub2a5\uc744 \uc9c0\uc6d0\ud558\uc5ec, \ud14c\uc2a4\ud2b8 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\ub294 \ub370 \ub354\uc6b1 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n
test('adds 1 + 2 to equal 3', () => {\n expect(1 + 2).toBe(3);\n});<\/code><\/pre>\n3.3. Jasmine<\/h3>\n
Jasmine\uc740 Behavior-Driven Development(BDD)\ub97c \uc704\ud55c \ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc0ac\uc6a9\ud558\uae30 \uc26c\uc6b0\uba74\uc11c\ub3c4 \uac15\ub825\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. Jest\uc758 \ub0b4\ubd80\uc5d0 Jasmine\uc774 \uc0ac\uc6a9\ub418\uae30\ub3c4 \ud558\uba70, \ub3c5\ub9bd\uc801\uc73c\ub85c\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
describe('A suite', function() {\n it('contains spec with an expectation', function() {\n expect(true).toBe(true);\n });\n});<\/code><\/pre>\n4. \ud1b5\ud569 \ud14c\uc2a4\ud2b8 \ub3c4\uad6c \uc18c\uac1c<\/h2>\n
\ud1b5\ud569 \ud14c\uc2a4\ud2b8\ub97c \uc218\ud589\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ub3c4\uad6c\ub4e4\uc774 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
4.1. Spectron<\/h3>\n
Spectron\uc740 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud14c\uc2a4\ud2b8\ud558\uae30 \uc704\ud574 \ub9cc\ub4e4\uc5b4\uc9c4 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. Mocha\uc640 Chai\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uba70, UI \ud14c\uc2a4\ud2b8\uc5d0 \ucd5c\uc801\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. Spectron\uc744 \ud1b5\ud574 \uc2e4\uc81c Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc0c1\ud638\uc791\uc6a9\ud558\uba74\uc11c \ud14c\uc2a4\ud2b8\ub97c \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
const Application = require('spectron').Application;\nconst assert = require('assert');\n\nconst app = new Application({\n path: '\/path\/to\/electron\/app'\n});\n\ndescribe('Electron App', function() {\n this.timeout(5000);\n beforeEach(() => app.start());\n afterEach(() => app.stop());\n\n it('should display the correct title', () => {\n return app.client.getTitle().then((title) => {\n assert.equal(title, 'My Electron App');\n });\n });\n});<\/code><\/pre>\n4.2. Cypress<\/h3>\n
Cypress\ub294 \ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc704\ud55c \uc5d4\ub4dc \ud22c \uc5d4\ub4dc \ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc6f9 \ud398\uc774\uc9c0\ub97c \ud14c\uc2a4\ud2b8\ud558\ub294 \ub370\uc5d0\ub3c4 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Cypress\ub294 \uac1c\ubc1c \uc2dc \uc989\uac01\uc801\uc778 \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud558\ubbc0\ub85c, UI \uc0c1\ud638\uc791\uc6a9\uc744 \ub514\ubc84\uae45\ud558\uae30\uc5d0 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n
describe('My Electron App', () => {\n it('should display correct content', () => {\n cy.visit('http:\/\/localhost:3000');\n cy.contains('Welcome to My Electron App');\n });\n});<\/code><\/pre>\n4.3. Puppeteer<\/h3>\n
Puppeteer\ub294 Chrome \ube0c\ub77c\uc6b0\uc800\ub97c \uc790\ub3d9\ud654\ud560 \uc218 \uc788\ub294 Node.js \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 UI \ub3d9\uc791\uc744 \uc790\ub3d9\ud654\ud558\uace0 \uccb4\ud06c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
const puppeteer = require('puppeteer');\n\n(async () => {\n const browser = await puppeteer.launch({\n executablePath: '\/path\/to\/electron',\n });\n const page = await browser.newPage();\n await page.goto('http:\/\/localhost:3000');\n\n const title = await page.title();\n console.log(title); \/\/ 'My Electron App'\n\n await browser.close();\n})();<\/code><\/pre>\n5. \ud14c\uc2a4\ud2b8 \uc2e4\ud589 \ubc0f CI\/CD \ud1b5\ud569<\/h2>\n
\ud14c\uc2a4\ud2b8 \ub3c4\uad6c\ub97c \uc124\uc815\ud55c \ud6c4, \uc790\ub3d9\ud654\ub41c \ud14c\uc2a4\ud2b8\ub97c CI\/CD \ud30c\uc774\ud504\ub77c\uc778\uc5d0 \ud1b5\ud569\ud558\uc5ec \ubc30\ud3ec \uc804\uc5d0 \ud56d\uc0c1 \ud14c\uc2a4\ud2b8\uac00 \uc2e4\ud589\ub418\ub3c4\ub85d \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. GitHub Actions, Travis CI, CircleCI \ub4f1 \ub2e4\uc591\ud55c CI \ub3c4\uad6c\ub97c \ud1b5\ud574 \uc774\ub97c \uc190\uc27d\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
5.1. GitHub Actions \uc608\uc81c<\/h3>\nname: CI\n\non:\n push:\n branches: [ main ]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout code\n uses: actions\/checkout@v2\n\n - name: Setup Node.js\n uses: actions\/setup-node@v2\n with:\n node-version: '14'\n\n - name: Install dependencies\n run: npm install\n\n - name: Run tests\n run: npm test<\/code><\/pre>\n6. \uacb0\ub860<\/h2>\n
\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ud14c\uc2a4\ud305\ud558\ub294 \ubc29\ubc95\uacfc \ub2e8\uc704 \ud14c\uc2a4\ud2b8 \ubc0f \ud1b5\ud569 \ud14c\uc2a4\ud2b8 \ub3c4\uad6c\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. Mocha, Jest, Spectron\uacfc \uac19\uc740 \ub2e4\uc591\ud55c \ub3c4\uad6c\ub97c \ud65c\uc6a9\ud558\uc5ec, \uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud14c\uc2a4\ud305\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud488\uc9c8\uc744 \ubcf4\uc7a5\ud558\uace0, \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \ub370 \ud544\uc218\uc801\uc778 \uc694\uc18c\uc784\uc744 \uc78a\uc9c0 \ub9d0\uc544\uc57c \ud569\ub2c8\ub2e4. \uc55e\uc73c\ub85c Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c, \ub2e4\uac01\uc801\uc778 \ud14c\uc2a4\ud305 \uae30\ubc95\uc744 \uc801\uc6a9\ud558\uc5ec \ub354\uc6b1 \uc548\uc815\uc801\uc778 \uc18c\ud504\ud2b8\uc6e8\uc5b4\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \ub178\ub825\ud569\uc2dc\ub2e4.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"