Wilkyway

안녕하세요,

리액트를 한번 배워볼까 해서 동영상을 따라 시도해보고 있는데, 처음 MongoDB 연결하는 부분부터 막히네요.

예전에는 사용자만 생성해도 test Database가 만들어졌던 것 같은데, 최근 방법이 바뀌었나봅니다. 방법은..

1. clusters->collections 메뉴로 이동하여 create database 를 클릭해줍니다.

2. Database이름: test, Database Collections: devices 으로 생성해줍니다.

3. 그리고 소스를 실행해서 확인합니다.

const express = require('express')
const app = express()
const port = 5000


const mongoose = require('mongoose')
mongoose.connect('mongodb+srv://john:asdf1234@cluster0.juisc.mongodb.net/test?retryWrites=true&w=majority',{
    useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false
}).then(() => console.log('MongoDB Connected...'))
.catch(err => console.log(err))



app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

1. electron-builder 설치 

npm install electron-builder --dev-save

2. package.json파일 수정

"scripts" 부분에 "deploy"를 추가하고,

"build" 부분을 추가합니다.

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "deploy":"electron-builder --windows nsis:ia32"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^9.0.5",
    "electron-builder": "^22.7.0",
    "electron-packager": "^15.0.0"
  },
  "build":{
    "productName": "HelloElectron",
    "appId": "com.electron.hello",
    "asar": true,
    "protocols": {
      "name": "helloElectron",
      "schemes": [
        "helloelectron"
      ]
    },
    "win": {
      "target": [
        "zip",
        "nsis"
      ],
      "icon": "./resources/installer/Icon.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "directories": {
      "buildResources": "./resources/installer/",
      "output": "./dist/",
      "app": "."
    }
  }
}

3. 배포파일 생성

npm run deploy

4. 결과

하위의 dist 폴더에 설치파일이 생성되며, 설치 후 생성되는 패키지가 win-ia32-unpacked에 함께 생성됩니다. 해당 폴더로 가 보면 실행파일이 함께 생성된 것을 확인할 수 있습니다.

1. Electron-packager 설치

npm install electron-packager --save-dev

2. package.json파일 수정

- "scripts" 내부의 "build" 부분을 추가해 줍니다. phonebook이라고 되어있는 부분이 실행앱 이름이 됩니다.

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-packager . phonebook"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^9.0.5",
    "electron-packager": "^15.0.0"
  }
}

3. 빌드 실행

npm run build

4. 현재 프로젝트 내부에 위에서 입력한 앱 이름과 현재 시스템명이 조합된 폴더가 하나 생성되고,

그 내부에 실행파일이 위치하게 됩니다. 배포할 때에는 이 폴더를 통째로 Zip파일로 만들어 배포하거나, windows installer를 이용해 배포프로그램을 만듭니다. 

const { Client } = require('pg');

const client = new Client({
    host : 'localhost',
    database: 'postgres',
    user: 'postgres',    
    password: 'asdf4416',
    port: 5432,
});

client.connect();

client.query('SELECT * FROM member', (err, res) =>{
    if(err){
        console.log(err);
    }else{
        console.log(res);
    }
});

import wx
import wx.grid as gridlib
import os
import psycopg2
import pandas as pd


class MyFrame(wx.Frame):
    def __init__(self):

        #--------  1. GUI 초기화
        wx.Frame.__init__(self, parent=None, title="DB to Table")
        self.SetSize(1020, 600)
        self.mainPanel = wx.Panel(self)
        self.vtBoxSizer = wx.BoxSizer(wx.VERTICAL)  # 전체 레이아웃
        self.vhBoxSizer = wx.BoxSizer(wx.HORIZONTAL)  # 전체 레이아웃

        self.query_txt = wx.TextCtrl(self.mainPanel, -1, size=(400, 25))
        self.submit = wx.Button(self.mainPanel, -1, "Search")
        self.submit.Bind(wx.EVT_BUTTON, self.onSearch)

        # -------- 2. DB 연결
        self.conn = psycopg2.connect("host = localhost dbname=postgres user=postgres password=asdf4416 port=5432")
        self.cursor = self.conn.cursor()

        #--------- 3. Table Grid생성
        self.dataGrid = gridlib.Grid(self.mainPanel, wx.EXPAND)
        self.dataGrid.CreateGrid(50, 20)
        #self.dataGrid.AutoSize()
        #self.dataGrid.AutoSizeColumn(2, setAsMin=True)

        #--------- 5. GUI Show
        self.vhBoxSizer.Add(self.query_txt)
        self.vhBoxSizer.Add(self.submit)
        self.vtBoxSizer.Add(self.vhBoxSizer, 1, wx.EXPAND | wx.ALL)
        self.vtBoxSizer.Add(self.dataGrid, 1, wx.EXPAND|wx.ALL)
        self.mainPanel.SetSizer(self.vtBoxSizer)

    def onSearch(self, e):
        query = self.query_txt.GetValue()
        self.cursor.execute(query)
        result = self.cursor.fetchall()

        # ----------4. 결과를 dataframe으로 저장
        df = pd.DataFrame(result)
        for a in range(0, len(df.columns),1):
            print(df.columns[a])
            self.dataGrid.SetColLabelValue(a, str(df.columns[a]))

        for i in range(0, len(df), 1):  # 열 사이즈 참조
            for j in range(0, len(df.columns), 1):  # 행 사이즈 참조
                self.dataGrid.SetCellValue(i, j, str(df.loc[i][j]))
                # 셀 값 참조. 칼럼에 따라 숫자와 문자열이 혼재하지만 SetCellValue 의 세번째 인자가 문자열을 받아들임


if __name__ == "__main__":
    app = wx.App()
    frm = MyFrame()
    frm.Show()
    app.MainLoop()

쉽게 레이아웃을 구성할 수 있는 GridBagSizer 예제입니다.

import wx

class MyFrame(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, parent=None, title="GridBagSizer Example")
        sizer = wx.GridBagSizer(9, 9)
        #GridBagSizer.add(아이템, 가상그리드 위치(행, 열), 크기(높이, 넓이), 정렬상수, 여백)
        sizer.Add(wx.Button(self, -1, "Button"), (0, 0), wx.DefaultSpan, wx.ALL, 0)
        sizer.Add(wx.Button(self, -1, "Button"), (1, 1), (1, 1), wx.EXPAND)
        sizer.Add(wx.Button(self, -1, "Button"), (2, 2), (3, 3), wx.EXPAND)
        sizer.Add(wx.Button(self, -1, "Button"), (3, 0), (1, 1), wx.EXPAND)
        sizer.Add(wx.Button(self, -1, "Button"), (4, 0), (1, 1), wx.EXPAND)
        sizer.Add(wx.Button(self, -1, "Button"), (5, 2), (3, 3), wx.EXPAND)
        #sizer.AddGrowableRow(5)
        #sizer.AddGrowableCol(6)

        #Frmae에 GridBagSizer세팅
        self.SetSizerAndFit(sizer)
        self.Centre()

if __name__ == "__main__":
    app = wx.App()
    frm = MyFrame()
    frm.Show()
    app.MainLoop()

이런 데이터가 CSV파일로 저장되어 있다고 할 때,

1. 인코딩이 부분이 없을 경우 에러가 발생 가능합니다. 우리나라에서 작성하였다면 아래와 같이 코드를 추가하던지,

아니면 CSV의 인코딩을 수정해서 저장하던지 해야 에러가 발생하지 않습니다..

2. pandas를 이용해서 필터링 할 때에는 df['칼럼']='조건' 으로만 해서는 True/False만 표시하기 때문에,

df 안에서 해당 조건을 표시하면(아래 코드 확인) True/False를 기준으로 인덱싱 된 결과를 볼 수 있습니다.

3. head와 tail은 기본적으로 앞/뒤 5개의 데이터를 보여주지만,

내부에 숫자를 넣으면 해당 갯수만큼 출력해줍니다.

import pandas as pd


df = pd.read_csv('test.csv', encoding='euc-kr')

print(df.head(2))
print('\n')
print(df[df['이름']=='맹구'])

import wx
import wx.grid as gridlib
import os


class MyFrame(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, parent=None, title="FlexGridSizer Example")
        self.SetSize(1020, 600)

        self.mainPanel = wx.Panel(self)
        self.vtBoxSizer = wx.BoxSizer(wx.HORIZONTAL)  # 전체 레이아웃
        self.fgridSizer1 = wx.FlexGridSizer(rows=2, cols=1, hgap=5, vgap=5)  # 좌측 레이아웃
        self.fgridSizer2 = wx.FlexGridSizer(rows=2, cols=1, hgap=5, vgap=5)  # 중앙 레이아웃
        self.hrboxSizer = wx.BoxSizer(wx.HORIZONTAL)                         # 중앙 상단세부 레이아웃

        # 좌측: 1번 소스 드라이브, 2번 소스 트리
        self.SrcDir = wx.GenericDirCtrl(self.mainPanel, -1,
                                        size=(250, 450),
                                        dir='C:/',
                                        style=wx.DIRCTRL_SHOW_FILTERS |
                                              wx.DIRCTRL_3D_INTERNAL |
                                              wx.DIRCTRL_MULTIPLE)
        self.Bind(wx.EVT_TREE_SEL_CHANGED, self.OnSelect)
        self.SrcList = wx.TextCtrl(self.mainPanel, style=wx.TE_MULTILINE)

        self.fgridSizer1.Add(self.SrcDir, 1, wx.EXPAND)
        self.fgridSizer1.Add(self.SrcList, 1, wx.EXPAND)

        # 중앙 찾기 옵션 / search / save / 리스트 뷰

        self.radio1 = wx.RadioButton(self.mainPanel, -1, "파일명")
        self.radio2 = wx.RadioButton(self.mainPanel, -1, "자료명")
        self.radio3 = wx.RadioButton(self.mainPanel, -1, "자료세부")
        self.findButton = wx.Button(self.mainPanel, -1, "search")
        self.saveButton = wx.Button(self.mainPanel, -1, "save")
        self.hrboxSizer.Add(self.radio1, 1, wx.EXPAND)
        self.hrboxSizer.Add(self.radio2, 1, wx.EXPAND)
        self.hrboxSizer.Add(self.radio3, 1, wx.EXPAND)
        self.hrboxSizer.Add(self.findButton, 1, wx.EXPAND)
        self.hrboxSizer.Add(self.saveButton, 1, wx.EXPAND)

        self.Bind(wx.EVT_BUTTON, self.OnSearch, self.findButton)

        self.dataGrid = gridlib.Grid(self.mainPanel, wx.EXPAND)
        self.dataGrid.CreateGrid(50, 6)

        self.fgridSizer2.Add(self.hrboxSizer, 1, wx.ALIGN_CENTRE_HORIZONTAL|wx.EXPAND)
        self.fgridSizer2.Add(self.dataGrid, 1, wx.EXPAND|wx.ALL)


        # 좌/중/우 결합
        self.vtBoxSizer.Add(self.fgridSizer1, 0, wx.RIGHT | wx.EXPAND)
        self.vtBoxSizer.Add((20,20))
        self.vtBoxSizer.Add(self.fgridSizer2, 1, wx.EXPAND)

        # 사이즈 변경 조절
        self.fgridSizer1.AddGrowableRow(1)
        self.fgridSizer1.AddGrowableCol(0)
        self.fgridSizer2.AddGrowableRow(1)
        self.fgridSizer2.AddGrowableCol(0)

        self.mainPanel.SetSizer(self.vtBoxSizer)

    def OnSelect(self, e):
        items = os.listdir(self.SrcDir.GetPath())

        self.SrcList.Clear()

        for item in items:
            self.SrcList.AppendText(item + '\n')

    def OnSearch(self, e):
        if self.radio1.Value == True:
            print(self.dataGrid.GetNumberRows())
            #for i in range(0, 10, 1):
            #    print(self.dataGrid.GetCellValue(i, 0))


if __name__ == "__main__":
    app = wx.App()
    frm = MyFrame()
    frm.Show()
    app.MainLoop()