지운's 개발일기

이번 포스팅에서는 클라이언트 코드 부분을 보도록한다. 본격적인 포스팅에 앞서 약을 약간 팔자면 이번 프로젝트를 하면서 기술적인 목표를 몇가지 잡은게 있는데 아래와 같다. Web frontend 공부 electron 공부 react 공부 react-native 공부 각각의 단계에서 지금 과정은 1~2번이다. 굳이 react를 Web frontend 공부에서 분리한 이유는 부족한 Web frontend의 기초를 다지며 facebook이 거쳐온...

이전 포스팅에서는 socket.io와 mongoose를 활용헌 웹소켓 API를 작성하는 방법을 간단히 봤다. 이번 글에서는 이전에 설명하지 않은 코드 부분을 마저 본다. 클라이언트측 코드는 다음 포스팅부터 보도록 하겠다. 일단 이전 코드를 전부 설명하기보단 2개의 api중 한가지만 보도록한다. findPUBG_User API 'use strict'; function findPUBG_User(socket, jwt, instance, secretKey) { socket.on('find-pubg-user',(message)=>{ const path = '/players';...

이전 포스팅에서는 Electron 의 BrowserWindow 에 대해서 주로 봤다. 이번 포스팅에서는 아직 작업중인 채팅 서버에 대해서 포스팅을 적는다. 앞에서 이야기 했듯이 서버쪽 DB는 MongoDB 를 이용하고 있다. MongoDB의 native API 를 wrapping 해놓은 ODM 인 mongoose란 것이 있다. 이를 이용하면 RDB 를 이용할때와 같이 스키마 형태로 Document 를 설계하는데 도움을...

Electron 에서 renderer process 가 화면을 로드할 때 BrowserWindow 클래스를 이용한다. BrowserWindow 는 EventEmitter 이므로 각종 화면에 관련한 각종 이벤트를 발생시킬 수 있다. 생성은 new 예약어를 사용하여 생성한다. 생성에 필요한 옵션은 다음과 같다. options(optional) width : Integer 값이며 화면의 폭이며 pixel 단위이고 기본 폭은 800 pixel 이다. height : Integer...

Electron 은 Javascript, HTML, CSS, Node Js runtime 를 이용한 데스크탑용 크로스플랫폼 개발 프레임워크이자 runtime 이다. 장점은 다른 웹기반 크로스플랫폼 개발에 같은 화면을 사용할 수 있다. Electron 을 이용하여 개발된 Application 들은 App-list에서 확인할 수 있다. Electron Application Architecture 기본적인 구조에 대해서 보면 main process 와 renderer process 가 존재하는데...