VSCode로 Electron 시작하기 : Hello Electron

MTTW·2021년 2월 12일
electronnpmvscodevue.js데스크톱앱설치
1

혼자하는 Electron

목록 보기
1/2
post-thumbnail

📥 설치

1. node.js

Electron과 Vue/React 모두 NPM 모듈을 사용하기 때문에 node.js를 먼저 설치해준다. 여기에서 다운 받을 수 있다. LTS(Long Term Support)와 Current 버전 중 선택 가능한데 최신 버전은 어떤 에러가 튀어나올지 모르니 LTS를 선택했다.

NPM(Node Package Manager)은 Node의 모듈을 관리하는 패키지 매니저다. NPM은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 하다.

이후 설치 과정은 VSCode 콘솔에서 npm 명령어를 이용하기 때문에 설치한다.

중간에 체크박스가 하나 등장하는데 이건 노드에 필요한 툴들을 자동으로 설치할지 묻는 거다. 필요에 따라 설치하면 된다.
체크 안하면 3분만에 끝나고 체크하면 15분 정도 걸린다.

설치가 끝나고 VSCode 콘솔창을 켜서 설치를 확인해본다.

> npm -v		# npm version
> node -v		# node version


2. Vue.js & Electron

Electron을 시작하려고 보니 크게 React와 Vue 중에 하나를 쓰는 것 같았다. 차이를 뚜렷이 모르겠어서 찾아봤는데 굉장히 잘 설명해준 브런치 글이 있었다. https://brunch.co.kr/@jowlee/128 물론 100% 이해는 못했다. 이 외에도 서칭을 하며 비교한 결과 Vue로 해보기로 했다. 나중에 브런치에 올라온 예시처럼 React로 똑같은 앱을 만들며 공부해보기로 하자.

아무튼 Vue-cli와 Electron을 VSCode 콘솔창에서 전역으로 설치한다.

# global 모드로 설치한다
> npm install -g vue-cli
> npm install -g electron-forge

여기까지 설치가 끝난다

라고 생각했지만 vue 명령어를 쓰려하면 오류가 발생한다.

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 ~\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies
(https://go.microsoft.com/fwlink/?LinkID=13570)를 참조하십시오.

확인해보니 윈도우 환경에서만 발생하는 에러인듯하다. 위에서 나타난 URL에 들어가 확인해보니 윈도우의 PowerShell 실행 정책에 의한 오류다.
Windows PowerShell을 관리자 모드로 실행한다.

기본 실행정책은 클라이언트에 대해 제한된다. 실행정책을 RemoteSigned로 바꿔주면 vue 명령어 사용이 가능하다. 

> Set-ExecutionPolicy RemoteSigned
> Get-ExecutionPolicy 	 # 바뀐거 확인

여기까지 설치 진짜 끝✌

🥑 Vue Project

처음이니까 Vue와 Electron 프로젝트를 따로 만들어보고 합치려고 한다.
프로젝트 폴더를 들어가면 폴더 지정은 생략해도 되고 새로 만든다면 폴더 이름을 지정해준다.

> vue init webpack (프로젝트dir)
또는
> vue init webpack-simple (프로젝트dir)

헬로우 일렉트론 용도라서 webpack-simple를 사용했다. 실제로 개발할 때는 webpack을 쓰는 것이 좋다고 한다.(왤까)
프로젝트 폴더로 이동해서 npm 패킷을 설치해준다.

> npm install

잠시 후 질문이 엄청나게 등장한다. webpack-simple은 질문이 몇 개 없지만 webpack은 질문이 정말 많이 나와서 당황스러웠다. 다행히 어떤 브랜디 개발자님이 각 질문의 뜻을 잘 정리해주셨다. 여기에서 확인 가능하다.

질문에 모두 답하고 나면 Vue 프로젝트가 ✨쨘✨하고 생성된다.

일단 실행해보자.(두근두근)

> npm run dev

로컬에서 돌아가는 Vue 화면이 나타난다!

Vue를 build해서 Electron에 가져갈텐데 그 전에 path를 조금 수정한다.
webpack.config.js에서 아래 publicPath를 아래와 같이 고친다.

// /dist/ 를 ./dist/로 수정한다.
output: {
  path: path.resolve(__dirname, './dist/'),
  publicPath: './dist/',
  fildname: 'build.js'
},

이렇게 하고 빌드한다.

> npm run build

빌드 결과로 /dist 폴더가 생성된다. 일렉트론 프로젝트에 사용할테니 일단 다음으로 넘어간다.

🌌 Electron Project

Vue 프로젝트 폴더에서 나와서 Electron 프로젝트를 만들고 실행해본다.

> npm install -g electron-forge
> cd (프로젝트Dir)
> npm install

설치 끝! 실행 

> electron-forge start

잠시 기다리면 기본 Electron 앱이 나타나 인사한다.

이제 위에서 빌드했던 Vue의 /dist 폴더와 index.html 파일을 복사해서 Electron 프로젝트의 /src 폴더 안에 붙여넣는다.

다시 > electron-forge start로 실행한다.

앞에서 봤던 Vue 웹페이지의 구성 그대로 Electron 앱 안에서 볼 수 있다.
Vue랑 인사하는 기분이니까 조금만 수정해서 Electron과 인사하고 끝내자.

헬로👋

💡 소소한 팁

Electron 앱은 실행될 때마다 개발자 도구가 나타난다. Electron과 인사를 방해한다는 생각이 든다면 index.js 파일에서 아래 코드를 찾아서 주석 처리하자.

참고한 사이트

💬 주저리

첫 취준 기간인 지난 하반기에 회사별 개발 문화도 찾아보고 새로운 직무도 많이 접했다. 하반기 공채가 모두 끝나고 어디가 가장 가고 싶었을까 돌아보니 라인이었다. 지원 당시 직무를 찾아보다가 라인 공식 유튜브에서 직무별 소개 영상을 봤었고 그 때 데스크톱 클라이언트에 꽂혔다. '와 나 저 팀에서 개발해보고 싶다' 이런 느낌. 하지만 내가 해본 데스크톱 개발이라고는 3학기 때 MFC 뿐.. 경험은 없지만 열정이라도 보여줘야겠다고 생각했지만 1차 코테에서 시원하게 탈락

탈락 후에 직무 소개 영상을 다시 찾아봤다. 8번은 돌려본듯. 떨어졌지만 기회는 돌아오니까 관련 프로젝트라도 해야겠다 싶어서 찾아봤다. 데스크톱앱 프로젝트는 들어본적도 없어서 서칭해보니 Electron 크로스 플랫폼을 알게됐다. 이거다 싶어서 뭘해볼까 12월부터 계속 고민했다. Golang도 공부하고 싶고 연구도 해야해서 이도저도 못하고 바쁘게 두달을 보내다가 설 연휴에야 Electron을 시작해본다. 사실 javascript도 초보라서 걱정이지만 개발 공부는 박치기라고 했다. 일단 하다보면 궁금해서라도 공부하겠지. 화이팅✊

profile
MTTW
개발자가 되고 싶은 맽튜
다음 포스트

Electron-vue 프로젝트 생성

0개의 댓글