코드 땜장이

  지난 시간에 깃헙을 통하여 내가 만든 어플리케이션을 업데이트 하는 방법을 보았습니다. 하지만 해당 레파지토리가 public이여야 한다는 한계가 있었습니다.  private 레파지토리인 경우에 사용 할 수 있는 함수가  setFeedURL  이 함수 입니다. 어떤 url에서 버전 확인및 업데이트용 파일을 가져 올 것인지에 대해 설정이 가능 합니다. GitHub 사용하기!  우리는 배포용 서버로 아직 gitHub을 사용 할 수 있습니다. 하지만 private 레파지토리를 그대로 이용 하기에는, github access token을 발급하여야 합니다. 하지만 특정 레파지토리를 제한 할 수 없으면 release만을 위한 옵션을 설정 하기가 애매합니다.  또한 해당 토큰을 유실 또는 노출에 대해서 대처하기에는 꽤나 리스크가 큽니다. 따라서 이 예제 에서는 배포 전용의 public 레파지토리를 만들것을 추천 드립니다.  위 처럼 release 전용이며 public에 전혀 의미없는 커밋을 만들어서 지난 시간에 하였듯이 release들을 만들어 주면 됩니다.  그리고 나면 일렉트론 프로젝트의 index.js를 수정해줍니다. 생략 .... const menu = Menu. buildFromTemplate (templates) Menu. setApplicationMenu (menu) autoUpdater . autoDownload = false autoUpdater .setFeedURL({ provider: 'github', repo: 'my-electron-app-release-only', owner: 'sejinjja' }) 생략 .... autoUpdater.setFeedURL({     provider: 'github',     repo: ${repository},     owner: ${owner}, })  위처럼 변경 해주...

 지난 시간까지 만든 프로그램을 업데이트를 하기 위하여 사용자가 매번 패치 파일을 다운로드 받게 할 수는 없습니다.  electron-updater를 사용하여 사용자가 딱히 신경 쓰지 않아도 업데이트가 되도록 해보겠습니다. 기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다. 업데이트를 위한 모듈 추가 npm i electron-updater --save npm i electron-log --save electron-updater는 업데이트를 위하여 사용되는 모듈입니다. electron-log는 로그를 파일로 관리 하기 위함 입니다. 업데이트중에는 콘솔을 사용 할 수 없기에 파일에 남겨서 확인하는 것을 추천합니다. 빌드를 위한 일렉트론 설정! 일렉트론 프로젝트의 index.js를 수정하자 변경점의 색상을 변경 하였습니다. const {app , BrowserWindow , Menu } = require( 'electron' ) const path = require( 'path' ) const {autoUpdater} = require('electron-updater') const log = require('electron-log') const createWindow = ( devMode ) => { const win = new BrowserWindow({ width : 800 , height : 600 , webPreferences : { preload : path. join (__dirname , 'preload.js' ) } }) if ( devMode ) { win.loadURL( 'http://localhost:8080' ) } else { win.loadFile( 'dist_web/index.html' ) } win.webContents.openDev...

 지난 시간까지 만든 프로그램을 매번 node를 통하여 실행하게 만들 수는 없다. 다른 유저들에게 배포용도라면 더욱더! 그래서 이번 시간에는 electron-builder를 사용하여 설치를 할 수 있는 파일을 만들 수 있게 할 것이다. 기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다. 빌드를 위한 일렉트론 설정! npm i electron-builder --save-dev npm i cross-env --save-dev 일단 위의 명령어를 사용하여 필요한 노드 패키지들을 설치하자! 위의 패키지들을 간단하게 설명하면 electron-builder는 말그대로 electron 프레임워크로 만들어진 프로그램을 빌드해주는 역할을 해주는 패키지이다. cross-env는 환경 변수를 수정해주는 역할을 해준다. 이게 왜 필요한 이유는 아래에 코드를 보면서 설명 하겠다. package.json을 아래와 같이 빨간색으로 표현 된 부분을 추가해주자. { "name" : "my-electron-app" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "start" : " cross-env NODE_ENV=dev electron ." , "dist": "electron-builder" } , "keywords" : [] , "author" : "" , "license" : "ISC" , "devDependencies" : { "cross-env": ...

Vue 개발환경 준비  일단 이 포스트에서는 2.6.14버전을 사용 할 것입니다. 아래를 그대로 진행 해보도록 하자 npm install -g vue-cli vue init webpack my-project 위의 옵션은 입맛대로 하면 되긴 하다. cd my-project npm i && npm run dev Electron 개발환경 준비 index.js const { app , BrowserWindow} = require( 'electron' ) const path = require( 'path' ) const createWindow = () => { const win = new BrowserWindow({ width : 800 , height : 600 }) win.loadURL('http://localhost:8080') } app . whenReady (). then (() => { createWindow () }) win.loadFile('index.html') => win.loadURL('http://localhost:8080') 위 처럼 코드를 바꾸고 npm run start를 해봅시다 자 위와 같이 나왔다면 성공 입니다. 개발환경은 이제 설정이 끝났습니다. Electron api 개발 자 이제 프런트엔드에서 사용 할 수 있는 api를 개발을 해봅시다. 간단하게 파일 읽고 쓰기 를 해보도록 합시다. index.js를 아래와 같이 셋팅 합니다. 해당 window가 로드 될 때 미리 로드될 스크립트를 지정 하는 것입니다. const { app , BrowserWindow} = require( 'electron' ) const path = require( 'path' ) const createWindow = () => { const win = new BrowserWindow({ wi...

 Electron 이란?  html, css, javascript로 데스크톱 앱을 만드는 프레임워크이다.  즉 웹 개발자들이 응용플로그램도 개발 할 수 있게 해주는 프레임워크이며 출시된지는 꽤 오래 되었으나, 개발 공부를 시작한지 얼마 안되었거나, 관련 업무가 없었다면 아직 모를 수 있는 부분이다.  물론 예전에는 nwjs라는 툴을 사용 했었지만 업데이트나 인스톨쉴드를 따로 구비해서 배포 했어야 하는 불편함이 있기도 했다.  맥, 윈도우, 리눅스를 지원하는 서비스를 만들 예정이라면 고려해볼 대상이다. Electron으로 만들어진 어플리케이션 뭐 Electron으로 만들어진 어플리케이션이 위의 어플리케이션이 끝은 아니지만, Electron사이트 홈에 소개 되어질 정도로 유명한 서비스들이기에 소개 해보았다. 시작하기! 당연 노드는 설치 되어있다고 생각 하고 진행하겠다. cmd창이나 terminal에 아래의 명령어를 입력 합시다. mkdir my-electron-app && cd my-electron-app npm init -y npm install --save-dev electron  이제 저기에 있는 package.json을 수정해보자. { "name" : "my-electron-app" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "start": "electron ." } , "keywords" : [] , "author" : "" , "license" : "ISC" , "devDependencies" : ...

https://github.com/pmndrs/zustand  react 앱의 상태관리는 꽤나 여러가지 중에서 선택 할 수 있다.  잠깐 나열해 보자면 지난 번에 사용 했던, conext를 사용 한 방식이나 Redux, MobX, Recoil같은 라이브러리류들이 있을 수 있다.  이번에는 zustand 라이브러리를 이용해보았는데, 사용 법은 context를 이용한 방식보다는 편하게 느껴지는 것이 있다. 특히나 context를 사용 하기 위하여 tag를 사용하지 않아도 된다는 것이 context와의 큰 차이점으로 보인다.  일반적으로 context로 상태관리를 하는데에 있어서 reducer를 이용하는데, 그런 방식으로 상태 변경을 구현 하는 것보다는 좀 더 자유로운 느낌을 받았다.  항상 그러했듯이 아래의 코드와 위의 코드를 비교해보고 직접 판단해보길 바란다.

 기본적인 학습 예제는 끝났다고 판단이 되었다. 이번화부터는 간단하게 예제 파일들을 작성 해볼 것이다.  어떤 프로젝트를 하던지 날짜를 입력 받는 행위는 언제든지 하는 것 같다.  따라서 데이트피커를 작성 해보았다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  slot을 다루는 방식에서 꽤나 react와 vue에서 지원하는 방식이 꽤나 큰 차이를 보인다. slot-scope를 지원하기 위해서는 react에서는 children을 함수로써 다루어야 하는 방식 등... 꽤나 불편하다. 이 스타일은 부모입장에서 slot-scope를 사용 할 여부가 없더라고 하더라도 자식이 slot-scope를 지원하기 위하여 함수를 받게끔 되어있다면? 이는 부모 입장에서 꽤 불편한 방식이라고 볼 수 있다.  또한 이름있는 슬롯을 제공하기위해서 이름 없는 children과 이름있는 children의 방식의 차이가 있어서 별로 이다. 기본적인 children만 제공하는 것으로는 태그처럼 다루어도 되나 이름있는 chlildren을 제공하기 위해서는 값처럼 다루어야 하기 때문이다. ( 물론 jsx에서는 태그는 값이다. )  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다. 아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 포스팅을 작성하면서 사용한 코드이다.  React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.  다른 프레임워크들에 비해 react는 꽤나 불편한 편이다. class를 바인딩 하기위해서는 className에 문자열로 바인딩 해야 하기 때문이다. 다른 프레임워크는 Object 혹은 array로 여러 조건들을 처리 할 수 있기 때문이다.  실제로 프로젝트를 진행 한다면 Object혹은 Array를 문자열로 변경 해주는 함수를 제작하여 사용해야 할 것 같다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 포스팅을 작성하면서 사용한 코드이다.  React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.  context, useReducer를 이용하여 vue의 store를 모사해보았다. context를 사용 할때 마다 내가 정의한 context와 useContext를 import해야 되는 것을 꽤나 불편함을 느꼇다.  하지만 그 외에 mutation정의나 action정의에 대해서는 일반적인 함수를 구현 하듯이 처리하면 되어서 그 점은 좀 편할 수 도 있다고 생각 되었다. 무슨 말이냐면, vue, svelte와 같이 store를 사용 하기 위하여 더 특별한 구조를 학습 하지 않아도 된다는 뜻이다.  react를 점점 사용 할 수록 느끼는 점은 코드작성에 편의는 없지만, 학습에 대해서는 크게 러닝커브가 없는 것처럼 보이기도하다. => 코드가 일관적이다.  store를 정의 하는 것 조차도 컴포넌트 하나 custom hook하나 만들어 내는 느낌이다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.  리액트 hook을 이용하여 라이프 사이클을 한번 훑어 보았다.  라이프사이클의 핸들링은 useEffect의 두번째 인자값에 따라 결정이 되고, 대략 아래와 유사하다. useEffect ( function updated () { return function beforeUpdated () {} } ) useEffect ( function mounted () { return function beforeUnmount () {} } , [])  svelte와 마찬가지로 라이프사이클 핸들러 함수의 Vue vs Svelte 간단하게 문법만 비교해보기 5 ( 라이프사이클 )  리턴함수를 이용하여 반대 상황에서의 처리가 가능한것은 좋다고 생각 된다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.   아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 시맨틱 슈거의 부재  이건 전에도 언급 된 내용이지만... 또 한번 말해보자면 select multiple인 경우에 문제가... 크다. 아래의 코드만잠깐 보고 넘어가도록 하자. < select multiple value = {flavours} onChange = {onChangeFlavours} > { menu . map ((flavour) => { return ( < option key = {flavour} value = {flavour} > {flavour} </ option > ); } )} </ select > const [flavours, setFlavours] = useState ([ " Mint choc chip " ]); function onChangeFlavours (event) { const newFlavours = []; const options = event . target . options ; for ( let i = 0 ; i < options .length; i++) { const option = options[i]; if ( option . selected ) { newFlavours . push ( option . value ); } } setFlavours (newFlavours);...

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 1. 시맨틱 슈거의 부재  vue를 공부해본 사람이라면 v-model이라는 키워드를 들어보았을 것이다. v-model="foo"은 :value="foo" @input="foo = $event" 이와 같이 풀어 쓸수 있다는 것도 알 것이다. react의 바인딩에는 v-model과 같은 시멘틱 슈거가 존재하지 않는다.    무슨말이냐 하면 아래와 같은 코드를 사용해야 한다는 것이다. <input type="text" value={foo} onChange={(event) => setFoo(event.target.value)}> 2. 데이터 타입 - numeric  아래의 코드를 보자. setA를 호출 할 때에 event.target.value를 숫자로 형변환 시키는 것을 볼수 있다.   당연하게도 html의 사용자 입력 가능한 값들은 숫자라고 하더라도 문자열이라는 것을 알 것이다. vue의 경우에는 .number라는 키워드를 이용할 수 있지만... react는 처리가 아래처럼 해야 할것 같다. < input type = " number " value = {a} onChange = {(event) => setA ( + event . target . value )} min = " 0 " max = " 10 " /> 3. 데이터 타입 - reference < select value = {selected} onChan...

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 느낌점은 아래와 같다.  오늘은 svelte가 이벤트를 핸들링 하는 방식중에 눈에 띄는점이 두가지가 보였다. 1. react에서 자식이 이벤트를 발생 시키는 방법은 없다. 부모가 자식에게 함수를 props로 전달하는 것을 자식이 적절한 순간에 실행 시켜주는 것으로 자식이 부모의 리스너를 해소 시켜 줄 수 있다. 코드는 아래와 같다. vue에서는 아래와 같은 코드를 좀 안좋게 보는 경향이 있고, 아래처럼 하지 않아도 된다. 위와 같은 방식을 사용 할 때에 자식 컴포넌트에 이벤트 리스너를 기본값을 생성 하여 함수를 전달 받지 않았을 때의 처리가 필수 처럼 보인다.  자 그러면 뷰에서는 어떻게 해야 할까요?   2. 아쉬운 점은 once키워드에 대한 부재이다. 한번만 실행 시키고 싶은 경우 addEventlistner의 once옵션을 이용 할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener 참 불편한 코드이다... 한번만 실행 되는 함수일 뿐인데...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.