본문 바로가기
반응형

분류 전체보기374

React기초-4.state 오늘은 state에 대해서 알아보도록 하겠습니다. Props가 Component를 조작하기 위해 사용자에게 제공하는 속성이라고 하면, state는 외부(상위) 사용자가 모르는 component 내부적으로 사용하는 속성입니다. 아래는 state의 예시입니다. App.js(Old) import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Co.. 2020. 7. 25.
React기초-3.props 오늘은 props에 대해 알아보겠습니다. props는 사용자가 생성한 component의 속성(attribute)를 말합니다. 예를 들어 아래의 코드에서 사용자가 생성한 컴포넌트 내부에 title, sub과 같은 사용자 정의 속성을 부여할 경우 이것들을 props라고 합니다. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App exte.. 2020. 7. 25.
React기초-2.컴포넌트 제작 컴포넌트 제작으로부터 시작해보겠습니다. 강좌에 의하면 React의 가장 기초적인 기능이 HTML 문서가 장대해질 경우 component를 별도 구성함으로써 코드를 단순화/정리정돈하는 기능이라고 합니다. 이것 만으로도 뭔가 React를 사용하고 있다는 느낌이 드네요. 1. 우선 App.js에서 태그 사이의 내용을 지우고 아래의 내용으로 교체해 넣습니다. logo.svg파일을 임포트 하는 부분도 삭제해 줍니다. import React, { Component } from 'react'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Component { render(){ return ( {/*Subjct Component *.. 2020. 7. 25.
React기초-1.설치 및 환경설정 React로 이런거 한번 만들어보겠습니다. egoing님 강좌 따라하기입니다. 방송으로만 보면 기억에 안남아서 공부할 겸 남겨놓습니다. 기능은 1. 로딩시 또는 WEB을 클릭하면 welcome 화면 띄우기 2. 각 Subject(HTML / CSS / JavaScript)를 클릭하면 그에 따른 내용 변경하기 3. create Subject 4. update Subject 5. delete Subject 입니다. 1. 우선적으로 설치해야할 것은 1. Node 2. Visual Studio Code 3. create-react-app (npm install -g create-react-app : global 설치) 입니다. 2. Visual Studio Code에 필요한 부가기능은 1. reactjs cod.. 2020. 7. 25.
Github SSH 연결 사이트 OS별 SSH 연결 안내 사이트 1. Key 생성 https://docs.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent Generating a new SSH key and adding it to the ssh-agent - GitHub Docs Generating a new SSH key and adding it to the ssh-agent After you've checked for existing SSH keys, you can generate a new SSH key to use for authentication, then add it to the ssh-agen.. 2020. 7. 13.
mongoDB Atlas Test DB 만들기(React 강좌 중에서..) 안녕하세요, 리액트를 한번 배워볼까 해서 동영상을 따라 시도해보고 있는데, 처음 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') mongoos.. 2020. 7. 12.
electron 배포파일 만들기(electron-builder) 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-quic.. 2020. 7. 5.
electron 실행파일 만들기(electron-packager) 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/elec.. 2020. 7. 5.
Javascript postgresql 연동 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); } }); 2020. 6. 29.
wxPython Grid에 pandas dataframe 출력하기 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.. 2020. 6. 23.
wxpython GridBagSizer 예제 쉽게 레이아웃을 구성할 수 있는 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) siz.. 2020. 6. 21.
pandas CSV파일 읽기 - 인코딩 에러 이런 데이터가 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', encodin.. 2020. 6. 21.
wxpython 폴더 트리 컨트롤 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.. 2020. 6. 18.
wxpython 간단한 트리 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self, parent=None, title="TreeCtrl example") self.SetSize(420, 320) self.mainPanel = wx.Panel(self) self.expandButton = wx.Button(self.mainPanel, label = "Expand") self.tree = wx.TreeCtrl(self.mainPanel) root = self.tree.AddRoot('태조') self.tree.AppendItem(root, '방우') self.tree.AppendItem(root, '정종(방과)') self.tree.AppendItem.. 2020. 6. 17.
wxpython 폴더 트리 import wx class TestFrame(wx.Frame): def __init__(self, parent): wx.Frame.__init__(self, parent, -1, 'test', size=(500,700)) dir3 = wx.GenericDirCtrl(self, -1, dir='C:/Television', style=wx.DIRCTRL_SHOW_FILTERS | wx.DIRCTRL_3D_INTERNAL | wx.DIRCTRL_MULTIPLE, filter="Python files (*.py)|*.py") app = wx.App() frm = TestFrame(None) frm.Show() app.MainLoop() 2020. 6. 16.
wxpython 간단한 메뉴 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self, parent=None, title="Menu Example") self.menuBar = wx.MenuBar() fileMenu = wx.Menu() fileNewMenu = fileMenu.Append(wx.ID_ANY, "새 파일") fileOpenMenu = fileMenu.Append(wx.ID_ANY, "열기") fileMenu.AppendSeparator() fileExitMenu = fileMenu.Append(wx.ID_ANY, "끝내기") customMenu = wx.Menu() customHelloMenu = customMenu.Append(wx... 2020. 6. 16.
wxpython 간단한 프레임 예제(FlexGridSizer) import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self, parent=None, title="FlexGridSizer Example") self.SetSize(400, 370) self.mainPanel = wx.Panel(self) self.fgridSizer = wx.FlexGridSizer(rows=3, cols=2, hgap=5, vgap=5) self.staticName = wx.StaticText(self.mainPanel, label= "name :") self.staticEmail = wx.StaticText(self.mainPanel, label = "email :") self.staticPhone = w.. 2020. 6. 16.
wxpython 간단한 프레임 예제(BoxSizer) import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self, parent=None, title="BoxSizer Example") self.mainPanel = wx.Panel(self) self.upperPanel = wx.Panel(self.mainPanel) self.leftButton = wx.Button(self.upperPanel, label="Left") self.rightButton = wx.Button(self.upperPanel, label="Right") self.hzBoxSizer = wx.BoxSizer(wx.HORIZONTAL) self.hzBoxSizer.Add(self.leftButton) sel.. 2020. 6. 16.
wxpython 간단한 프레임 예제 간단한 윈도우 생성 후 마우스 버튼 클릭에 따라 색상 변하는 예제 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self, parent=None, title="Window Color") self.Bind(wx.EVT_LEFT_DOWN, self.OnMouseLButtonDown) self.Bind(wx.EVT_RIGHT_DOWN, self.OnMouseRButtonDown) def OnMouseLButtonDown(self, event): self.SetBackgroundColour(wx.Colour(0, 0, 255, 0)) self.Refresh() def OnMouseRButtonDown(self, event): s.. 2020. 6. 16.
Django - Database 입력/조회 폼 (폼 클래스 아님) 간단히 Database를 조회/입력할 수 있도록 Form 을 구성하겠습니다. 작동방식은, 최초 접근 시 아래와 같이 DB의 데이터를 보여줍니다. 텍스트 필드에 ID(1, 2, 3..)을 입력하면 해당하는 결과만 나타나게 합니다. 마지막으로, 아래의 데이터 입력폼에 데이터를 입력하면 데이터가 등록되면서, 다시 초기화면에서 전체 리스트를 출력합니다. 데이터베이스에는 Member 테이블이 있고, 인원을 몇명 넣어줄 예정입니다. 필드는 ID, Name, Email이 있습니다. 1. 프로젝트 구성 프로젝트 구성은 아래와 같습니다. Django 프로젝트 / 앱생성이나 기본 설정은 Django 시작하기 다른 포스트를 참조하시기 바랍니다. pip install django // 장고 설치 django-admin sta.. 2020. 6. 14.
Oracle 설치 후 계정 생성 및 테이블 생성 Oracle 설치 완료 후 최초 계정 생성 및 최초 테이블 생성하는 방법에 대해 알아보겠습니다. 우선 시작->Oracle_Client->SQLPLUS 를 클릭하여 실행합니다. 1. DBMS 접속하기 Oracle 설치시 SYSTEM계정의 비밀번호를 1234로 설정해 놓았다고 가정할 때 아래와 같이 입력합니다. > sqlplus Enter user-name: system Enter password: 1234 Connected to: Oracle Database 11g Express Edition Release ... 2. 사용자 계정 생성 > create user student identified by 1234; User created. 3. student 계정에 권한 주기 student계정에 직접 접속하려.. 2020. 5. 21.
Django - Oracle연동 (11g), inspectdb 사용법 아...힘든 하루네요. 회사에서 쓰는게 oracle 11g 2Release 32bit라서 이걸 모델로 집에서 django랑 연동 테스트 해보려고 삽질을 시작했는데... 오전 9:30분에 시작해서 지금, 오후 10:00에서야 드디어 완성했습니다. 그것도 완전한 완성이라고 볼 순 없고 부분적으로 모자란 부분이 있습니다. 오늘 최종적으로 성공한 각 프로그램/모듈의 버전은 아래와 같습니다. oracle 11g 2Release 64bit Python 3.6.1 64bit Django 1.11.22 cx_Oracle 6.3 32비트고 뭐고 왔다갔다 하느라 정신없어서..64비트로 우선 통일! 안되는 영어로 계속 뒤져보니까 요즘나오는 Django 3.0이나 2.X대 버전은 oracle 11g를 지원을 안한다고 합니다... 2020. 5. 21.
Django - IIS에서 static file 설정하기 회사에서 쓰는 windows server2012에서 장고를 실행하려고 알아본 내용을 남깁니다. 1. Static 파일을 위한 '가상 디렉터리 추가' (Django_ex)장고 사이트를 우클릭한 뒤 가상 디렉터리 추가를 클릭해줍니다. 2. 별칭과 실제 경로를 적어줍니다. 3. 핸들러 위치 조정: Django_ex(장고 사이트) -> 처리기 매핑 ->정렬된 목록보기 StaticFile을 가장 위로 옮겨줍니다. 아래쪽에 있는 핸들러는 위쪽 핸들러로부터 상속을 받기 때문에, 아래쪽에 있으면 제대로 작동이 안됩니다. (ps) 외부 포트연결이 설정이 안되어있을 경우 여전히 사이트가 접속 안될 수 있습니다. 포트가 제대로 개방되어있는지 확인하시기 바랍니다. (이전 포스트 참조^^) (끝) 2020. 5. 14.
Django - CSS적용하기 Django에 CSS를 적용하는 방법은 어렵지 않은데... 적용하려면 저같은 초보한테는 쉽지않네요. 우선 기록으로 남겨놓습니다. 1. mysite/setting.py의 STATIC정보를 수정/확인합니다. STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join('static'), ) 2. CSS파일 생성(style.css)하여 아래 경로에 위치시킵니다. mysite/static/css/style.css li a { color: green; } 3. HTML에 static file 로딩부분을 추가해줍니다. {% load static %} # 버전에 따라 staticfiles ~~끝~~ (ps) 각 앱별로 static파일을 정의해놓았을 경우, STATICFILE.. 2020. 5. 13.
Django - IIS 연동 (Windows Server2012) Windows server 2012 IIS환경에서 Django를 연동하는게 쉽지가 않아서 한번 정리해 놓습니다. Django로 직접 서버를 돌릴 수도 있으나, 보안 및 성능상의 문제로 인해 권하지 않는 방법이라고 합니다. 그래서 apache나 nginx등 웹서버와 연동해서 많이 사용하는데요... 저희 회사 환경이 Windows 서버라 IIS 와의 연동이 필요한 상황입니다. 1. pip install wfastcgi Django와 연동을 위해 wfastcgi를 설치합니다. 2. IIS FastCGI 설정 IIS에서 Django에 CGI요청을 전달하기 위해 설정을 해야합니다 1) FastCGI 설정 서버 관리자를 실행시키고, 왼쪽 탐색창에서 서버가 선택된 상태로 FastCGI설정을 클릭합니다. 2) 응용프로.. 2020. 5. 8.
Windows server2012 IIS 서버 특정 포트 개방- 외부에서 특정 포트 접속 안될때.. python-django니 golang이니 공부하다가 회사 테스트서버에서 연동해보려고 하니, 80번 포트 외에는 구동이 안되더군요. 이리저리 알아보니, 사용할 포트를 열어주어야 합니다. 그것도 모르고 한참을 또 삽질을 했네요. 1. 제어판-방화벽 설정으로 들어갑니다.2.고급설정으로 들어가서 인바운드 규칙을 클릭합니다. 3.화면 우측 작업 아래에 새 규칙을 클릭합니다. 메뉴가 나오면 포트를 고르고...4.TCP, 특정 로컬 포트 선택(예:8000..장고 기본설정) 5.연결허용6. Next7. 규칙 이름 및 설명을 적고 마침8.등록 완료확인 이상으로 IIS에서 특정 포트 오픈하는 방법에 대해 알아보았습니다. 끝~~~ 2020. 5. 8.
Django - 인터넷 안되는 로컬PC에 설치하기 Django 설치를 위해서는 whl 파일을 내려받아서 설치해야 하는데, https://pypi.org/사이트에서 파일들을 내려받아 설치할 수 있습니다. 우선 현재 시점으로 www.Django-3.0.6-py3-none-any.whl 버전을 설치하려고 하는데 아래와 같이 관련 패키지들을 추가 설치했습니다. 1. www.pytz-2020.1-py2.py3-none-any.whl 2. www.sqlparse-0.3.1-py2.py3-none-any.whl 3. www.asgiref-3.2.7-py2.py3-none-any.whl 한 폴더에 whl 파일들을 넣고 pip install xxx.whl 을 실행해주면 관련 패키지들이 설치됩니다. 그리고 최종적으로 Django 패키지를 설치하면 됩니다. 2020. 5. 7.
go웹앱을 NginX와 연동하기(windows) 아직 웹앱 / 웹서버 / API 이런 개념이 없긴 하지만, 회사의 웹 환경은 뭔가 기초가 되는 웹서버가 있고 앱들이 그 위에서 돌아가고 있기 때문에, 오늘은 go 웹앱과 nginx를 연동하는 방법에 대해 알아볼까 합니다. 1. go 앱 작성 아래와 같이 간단한 코드를 작성하고 빌드해서 exe파일을 만들어 줍니다. // main.go package main import ( "fmt" "net/http" ) func main() { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { fmt.Fprintf(w, "Hello World") }) http.HandleFunc("/greet/", func(w http.ResponseWriter, .. 2020. 4. 29.
golang gin 웹앱 heroku에 배포하기 오늘은 gin framework으로 만든 앱을 heroku에 배포하기까지 실행해보겠습니다. python 앱의 경우 pythonanywhere라는 무료 가능한 사이트가 있어서 좋았는데, 비슷한 걸 찾다보니 heroku에서 무료 배포가 가능했습니다. Heroku는 git과 연동되어 운용되니 Git도 설치가 필요합니다. 사전 준비 1. Git 설치 2. Heroku 설치 3. Gin 설치 방법 1. Git Repository 생성 Github에 가입하였다면, Repository 관리 페이지로 가서 새로운 Repository를 생성해줍니다. 별다른 설정사항 손댈 필요 없이 적당한 이름을 부여하고, Public으로 생성합니다. 2. 생성한 repository 로컬 pc에 다운로드 pc에 생성하고 github으로 .. 2020. 4. 17.
Go언어-Fyne Text Editor 만들기 package main import ( "fmt" "image/color" _ "unicode/utf8" "fyne.io/fyne" "fyne.io/fyne/app" "fyne.io/fyne/canvas" "fyne.io/fyne/layout" "fyne.io/fyne/theme" "fyne.io/fyne/widget" ) func main() { f := app.New() //f.Settings().SetTheme(theme.LightTheme()) f.Settings().SetTheme(theme.DarkTheme()) w := f.NewWindow("") //상단에 넣을 위젯 및 레이아웃 - NewFormLayout qry := widget.NewEntry() btn_go := widget.NewB.. 2020. 4. 15.
반응형