반응형 분류 전체보기373 C#(WPF) - GUI 연습하기(with Material Design) 오늘은 아래 유튜브 영상의 데스크탑 어플리케이션을 구현해보겠습니다. https://www.youtube.com/watch?v=sgEhK3mbDYo 1. 라이브러리 설치 이번 영상에서는 Material Design과 LiveCharts를 사용합니다. 아래의 명령으로 Package를 설치해줍니다. dotnet add package MaterialDesignThemes --version 4.2.1 // material Design 설치 dotnet add package LiveCharts.Wpf --version 0.9.7 // live chart 설치 또는 Nuget GUI Manager 를 설치 후 Shift + Ctrl + P 로 명령창에서 Nuget 입력 시 나타나는 명령을 수행합니다. 그리고 Nuge.. 2021. 10. 29. C#(WPF) - VSCode에서 Material Design 적용하기 VSCode에서 WPF 프로젝트를 하며 Material Design을 적용하는 방법을 알아보겠습니다. 1. Nuget Package Manager GUI 설치 우선 Nuget GUI Manager 를 설치해줍니다. 확작프로그램에서 nuget을 검색하여 설치합니다. 2. Material Design Theme설치 설치가 완료되면 Shift + Ctrl + P 로 명령창에서 Nuget 입력 시 나타나는 명령을 수행합니다. (한번만 수행하면 다음부터는 Shift +Ctrl + P만 눌러도 나타납니다.) 그러면 실행되는 Nuget Package Manager GUI에서 material design을 검색해서 설치해줍니다. 1) Install New Package 탭 2) material design 검색 3) .. 2021. 10. 28. C#(WPF) - VSCode에서 GUI 시작하기 1. Dotnet Core 설치 .Net Core SDK를 다운로드 받아 설치합니다. .Net Core 3.1 이후에는 .Net 5에 통합되었으므로 최신 버전은 .Net 5 이상을 다운받아 설치하면 됩니다. [다운로드 경로] Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and ASP.NET. dotnet.microsoft.com 2. 생성 dotnet new wpf ...or... dotnet new winforms ...o.. 2021. 10. 22. 자바(JavaFX) - 계산기 1. main.java package application; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage primaryStage) { try { // fxml layout loader //FXMLLoader loader = new FXMLLoader(); //loader.setLocation(getClass().getResource("MainView... 2021. 10. 18. 자바(JavaFX) - eclipse plugin 및 scene builder 설치 1. JavaFX 플러그인 설치 경로: help > eclipse Marketplace 검색: javafx 2. JavaFX 라이브러리 설치 GlueON JavaFX - Gluon Roadmap Release GA Date Latest version Long Term Support Extended or custom support Details 19 September 2022 (planned) n/a no 18 March 2022 (planned) early access no 17 September 2021 17.0.0.1 (September 2021) until September 2026 upon request details 16 gluonhq.com 3. Scene Builder 설치 GlueON Sc.. 2021. 10. 18. Python - Django 시작하기 3 - blog app 추가하기 블로그 앱을 추가하도록 하겠습니다. 블로그 앱에서는 메인인 Home.html에서 포스트 클릭 시 포스트를 출력해주는 기능입니다. 1. blog app 추가 블로그 앱을 생성해줍니다. django-admin startapp blog 2. mysite/settings.py 수정 블로그 앱을 등록해줍니다. INSTALLED_APPS = [ 'blog.apps.BlogConfig',# 추가 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] 3. blog/models.py .. 2021. 10. 13. Python - Django 시작하기 2 - start bootstrap template 적용 Start Bootstrap에서 템플릿을 받아와서 메인 페이지를 구성하겠습니다. 1. Start Bootstrap 템플릿 다운로드 우선 Google에서 start bootstrap으로 검색하여 해당 사이트로 이동합니다. 다음으로 Themes 메뉴를 클릭한 다음, Free 옵션을 선택(Pro 해제) 하여 무료 옵션 중에서 적당한 테마를 고릅니다. 클릭하여 나타나는 상세 페이지에서 Download를 해 줍니다. 그리고 Template에서도 블로그용 template를 받아줍니다. 다운로드 받은 Theme 파일은 아래와 같이 static폴더와 templates폴더에 나누어 넣어줍니다. index.html 파일은 home.html로 이름을 바꾸어줍니다. 2. home.html 파일 수정 파일 링크를 참조하는 "s.. 2021. 10. 13. Python - Django 시작하기1 - 설치 1. 프로젝트 생성 ( 가상환경 생성) 2. 라이브러리 설치 pip install django 3. Django 프로젝트 설치 현재 폴더에 ( . ) mysite라는 프로젝트를 생성해줍니다. 이 경우 manage.py파일이 현재 폴더에 생성됩니다. (현재 폴더를 지정하지 않으면 한단계 더 아래 폴더에 프로젝트 및 manage.py 파일을 생성합니다. ) django-admin startproject mysite . 4. setting.py 수정 DB / Template / Media / Static 관련된 폴더들을 만들고, 이들 경로를 BASE_DIR을 기준으로 지정해줍니다. 그리고 TIME_ZONE, USE_TZ 값을 수정해줍니다. """ Django settings for mysite project... 2021. 10. 13. Python 키보드로 소리내기 피아노 연주하기 키보드 입력에 맞추어 비프음을 내도록 하겠습니다. 이번 프로그램을 위해서는 비프음을 내도록 하는 windsound 모듈과 키보드 인풋을 받아들이는 pynput 모듈이 필요합니다. 그 중 windwound 모듈은 기본으로 내장되어있으니 pynput 모듈만 설치해주도록 합니다. 1. 라이브러리 설치 pip install pynput 2. pynput모듈 pynput 모듈에서는 on_press 이벤트와 on_release 이벤트에 대해 리스너를 통해 입력받는 방법이 있습니다. from pynput import keyboard def on_press(key): print('Pressed Key: %s' % key) def on_release(key): print('Pressed Key: %s' % key) if.. 2021. 10. 13. 파이썬 tkinter 로 둥근버튼(Round button) 구현하기 이전 포스팅의 투명한 배경에 이어, 둥근 버튼 구현하기를 알아보겠습니다. 요즘 tkinter와 kivy를 번갈아가며 사용해보고 있는데, 서로 장단점이 존재하네요. 어느것도 완벽한게 없는듯 합니다. tkinter는 둥근버튼이 없어서 별도로 구현해야 하는 반면 투명한 배경처리가 가능하고, kivy는 투명한 배경은 안되도 둥근버튼은 쉽게 구현이 되네요. import tkinter as tk root = tk.Tk() # root.attributes('-alpha', 0.3) # 앱 전체가 투명해짐 root.wm_attributes("-transparentcolor", "white") canvas = tk.Canvas(root, width=600, height=300, bg='white') canvas.grid.. 2021. 9. 26. 파이썬 tkinter 로 투명 배경 구현하기 한참 좋다고 다른 GUI라이브러리 공부할 땐 언제고, 투명 기능이 어려워서 다시 tkinter를 손대게 되네요. 아래는 Tkinter로 구현하는 투명 배경 예제입니다. import tkinter as tk root = tk.Tk() # root.attributes('-alpha', 0.3) # 앱 전체가 투명해짐 root.wm_attributes("-transparentcolor", "white")# 흰색을 투명하도록 지정 canvas = tk.Canvas(root, width=600, height=300, bg='white')# 배경을 흰색으로 지정 canvas.grid(columnspan=3, rowspan=3) instructions = tk.Label(root, text="Hello World",.. 2021. 9. 25. 파이선 kivy 시작하기4 - 파일 관리(file chooser) 파일관리 프로그램 예제입니다. ## File Chooser from kivy.app import App from kivy.uix.gridlayout import GridLayout class TopGridLayout(GridLayout): def selected(self, directory, filename): try: self.ids.image.source = filename[0] except: pass class TreeApp(App): def build(self): return TopGridLayout() if __name__ == '__main__': TreeApp().run() : cols:2 id:my_widget #FileChooserIconView: FileChooserListView: i.. 2021. 9. 25. 파이썬 kivy 시작하기 3 - 태양계 행성들이 가운데 태양을 중심으로 공전하는 모습을 구현해보겠습니다. import math from kivy.app import App from kivy.uix.widget import Widget from kivy.core.window import Window from kivy.clock import Clock import math Window.size = (900, 900) center_w = Window.size[0]/2 center_h = Window.size[1]/2 class Sun(Widget): pass class Mercury(Widget): pass class Vinus(Widget): pass class Earth(Widget): pass class Mars(Widget): pass cl.. 2021. 9. 25. 파이썬 kivy 시작하기 2 - kv 파일 분리 1. main.py from kivy.app import App from kivy.uix.gridlayout import GridLayout from kivy.uix.textinput import TextInput from kivy.uix.label import Label from kivy.uix.button import Button from kivy.uix.widget import Widget from kivy.properties import ObjectProperty class MyGridLayout(Widget): name = ObjectProperty(None) # 변수에 아무것도 할당하지 않도록 함 pizza = ObjectProperty(None) color = ObjectProperty(No.. 2021. 9. 24. 파이썬 kivy 시작하기 1 - Kivy란? 파이썬에는 tkinter, pyqt(pyside2), wxpython외에 Kivy라는 라이브러리도 있습니다. Kivy는 크로스 플랫폼 사용자 인터페이스의 신속한 개발을 위한 오픈 소스 파이썬 라이브러리다. 키비 응용 프로그램을 사용하면 리눅스, 윈도우에 사용하는 GUI 프로그램뿐 아니라 안드로이드, IOS 용 GUI도 개발할 수 있다고 합니다. PC에서는 SDL2와 OpenGL 을 사용해서 그래픽 API를 사용할 수 있고 모바일 환경에서 OpenGL ES (임베디드 시스템용 OpenGL)를 사용하여 균일하고 안정적인 그래픽을 표현할 수 있습니다. 그리고 MIT 라이센스이므로 무료로 사용하는데 제한은 없습니다. Kivy는 특이하게도 화면을 구성하는 kv파일과 로직을 구성하는 일반 py파일이 구분되어있습니다.. 2021. 9. 24. 파이썬 tkinter 로 만드는 PDF 텍스트 추출 프로그램 우선 PyPDF2 라이브러리 설치가 필요합니다. pip install pypdf2 app.py 파일을 하나 생성하여 아래와 같이 입력합니다. 여기에 로고로 쓸 images.png파일이 필요한데, 인터넷에서 적당한 파일을 다운받으시거나 첨부 파일을 사용하시기 바랍니다. import tkinter as tk import PyPDF2 from PIL import Image, ImageTk from tkinter.filedialog import askopenfile root = tk.Tk() canvas = tk.Canvas(root, width=600, height=300) canvas.grid(columnspan=3, rowspan=3) # logo image = Image.open('images.png').. 2021. 9. 23. 파이선 PySimpleGUI 예제 1. hello_world.py import PySimpleGUI as sg sg.Window(title="Hello World", layout=[[]], margins=(100,50)).read() 2. hello_psg.py import PySimpleGUI as sg layout = [ [sg.Text("Hello from PySimpleGUI")], [sg.Button("OK")] ] window = sg.Window("Demo", layout) while True: event, values = window.read() if event =="OK" or event == sg.WIN_CLOSED: break window.close() 3. Image_Viewer.py import PySimpleGU.. 2021. 9. 22. 파이썬 주피터 노트북 Extension 설치 1. npextensions 설치 pip install jupyter_contrib_nbextensions && jupyter contrib nbextension 2. 필요한 기능 선택 - Table of Contents: 자동 목차 생성기능 - Variable Inspector: 변수 값 검사기 ※ 설치 후 리프레쉬 필요 3. 결과 2021. 9. 15. FastAPI - Jinja2, Form, Redirect 적용 Database에서 간단히 CRUD만 구성할 일이 있었는데, Backend 와 Frontend를 분리해서 구축하려니 조금 번거로워서 찾게되었습니다. Python 프레임워크들은 Jinja2 템플릿을 사용하여 Frontend도 쉽고 빠르게 구축할 수 있도록 지원해주기 때문에, 이런 용도로는 잘 맞는 것 같습니다. FastAPI도 일반적으로는 API 형태의 backend를 구성하겠지만, Jinja2를 이용하여 Frontend 연결까지 해보도록 하겠습니다. 1. 폴더구조 아래와 같이 폴더구조를 만들겠습니다. 이전에 만들었던 main.py를 업데이트하기 위해 mainlist.py 파일을 새로 작성하였습니다. 실행도 mainlist.py로 실행하겠습니다. 2. 라이브러리 설치 pip install fastapi, .. 2021. 9. 11. FastAPI - MySQL CRUD 1. 폴더구조 2. 라이브러리 설치 pip install fastapi, uvicorn pip install mysql, sqlalchemy pip install starlette 3. 코드 from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declarative_base from sqlalchemy.orm import sessionmaker, scoped_session user_name = "root" user_pwd = "" db_host = "127.0.0.1" db_name = "project01" DATABASE = 'mysql://%s:%s@%s/%s?charset=utf8' % ( user_name, user.. 2021. 9. 10. FastAPI 시작하기 1. 폴더구조 2. 라이브러리 설치 pip install fastapi uvicorn pydantic jinja2 import uvicorn from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.templating import Jinja2Templates from pydantic import BaseModel import requests app = FastAPI() db=[] #---------------------------------------------------------------------------------------------------------- # data models c.. 2021. 9. 9. FastAPI - Jinja2로 프론트 적용하기 1. 설치 pip install fastapi uvicorn pip install aiofiles # CSS파일 로딩 pip install jinja2 2. Project 구성 3. 시작명령어 python app.py 4. app.py import uvicorn from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.staticfiles import StaticFiles from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates(directory="templates") app.mount("/s.. 2021. 9. 9. Python folium을 이용한 지도 불러오기 / 마커 표시하기 import folium as g g_map = g.Map(location=[34.5, 128], zoom_start=7) # tiles='Stamen Terrain', 'Stamen Toner', 'Stamen Watercolor' latlon=[ [33.452278, 126.567803],#제주 [37.56667, 126.97806], #서울 [35.17944, 129.07556], #부산 ] # 마커 marker = g.Marker([37.509671, 127.055517], # 마커를 찍는 과정이다. 해당 위치의 마커를 찍고 popup='campus seven', # 해당 마커의 이름을 넣어준다. icon = g.Icon(color='blue'))# 해당 아이콘의 색깔을 지정해준다. marker... 2021. 9. 5. Vue3 프로젝트 - Vue시작하기: Fruit List(Vuex예제) 1. vue/cli 설치 npm i -g @vue/cli 2. 프로젝트 생성 vue create . //해당 폴더에 생성 3. 라이브러리 설치 npm i -g reset-css npm i vuex@next 4. App.js Fruits List 5. /components/FruitList.vue Fruits Name {{ fruit.name }} 6. /components/FruitPrice.vue Fruits Price $ {{ fruit.price }} 7. store/store.js // store.js import {createStore} from 'vuex'; //export const store = createStore({ export default createStore({ // 상태 stat.. 2021. 8. 24. React toolkit을 이용한 React counter 1. 라이브러리 설치 yarn add redux react-redux @reduxjs/tookit 2. index.js Reducer 연결 및 store 생성 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { configureStore } from "@reduxjs/toolkit"; import rootReducer from "./reducers"; import { Provider } from "react-redux"; const store = configure.. 2021. 8. 23. React에서 Kakao 지도 api 사용하기 - 지도에 표시하기 1. 지도에서 좌표-주소 변환 geocoder 라는 것을 사용해야하는데, services라이브러리를 써야합니다. 라이브러리는 api 요청할 때 url에 추가해서 보내면 됩니다. (kakao 예제에서 제공하는 cluster, drawing도 함께 추가해 넣었습니다.) 2. 우선 화면에 무언가 표시를 해봅시다. 예제는 kakao에서 제공되는 kakao 제주 사옥을 찾는 것 같습니다. import React, { useEffect } from 'react'; const { kakao } = window; const MapContainer = () => { useEffect(() => { const container = document.getElementById('myMap'); const options = {.. 2021. 8. 11. React에서 Kakao 지도 api 사용하기 1. App key 발급 https://apis.map.kakao.com/web/guide/ 사이트에 접속해서 순서대로 진행합니다. 우선 카카오 개발자사이트 (https://developers.kakao.com) 접속하여 회원가입을 하고, 애플리케이션 추가하기를 통해 앱 생성을 합니다. 생성된 앱(mymap)을 클릭해 들어가면 사용할 수 있는 앱 키가 제공됩니다. 이렇게 간단히 앱키 발급이 완료되었습니다. 2. Sample React App 생성 리액트 앱을 생성하고, 간단히 소스를 추가해보겠습니다. 1) public/index.html 아래 코드를 /public/index.html 파일의 내부에 붙여넣습니다. 2) 지도를 띄우는 코드 작성 import React, { useEffect } from 'r.. 2021. 8. 10. NSSM을 이용하여 Windows 에 Node 서비스 추가하기 1. NSSM 다운로드 및 설치 https://nssm.cc/download 에서 적당한 것을 다운로드 받습니다. 2. nssm 실행 커맨드창에서 nssm.exe install [등록할 서비스 이름] 으로 실행합니다. 3. UI 입력 실행파일 실행 시 UI가 열리며, 각각의 Input에 값을 넣습니다. - Path : node.exe 실행파일 경로 - Startup directory: Node의 경로 - Arguments: Node가 실행할 프로젝트 경로 - Service name: 이름을 지정 4. Service 시작하기 5. Sample Project Node가 실행할 샘플 프로젝트를 아래와 같이 구성하였습니다. js파일을 실행하게 되며, js 파일 내에서 index.html 파일을 불러오게 됩니다... 2021. 8. 10. 오브젝트 - 4. 설계 품질과 트레이드오프 01. 데이터 중심의 영화 예매 시스템 ○ 데이터를 준비하자 ○ 영화를 예매하자 02. 설계 트레이드오프 ○ 캡슐화 · 객체를 사용하면 변경 가능성이 높은 부분은 내부에 숨기고(구현) 외부에는 상대적으로 안정적인 부분만 공개함으로써(인터페이스) 변경의 여파를 통제할 수 있다. ○ 응집도와 결합도 · 응집도: 모듈 내의 요소들이 하나의 목적을 위해 긴밀하게 협력한다면 높은 응집도 · 결합도: 어떤 모듈이 다른 모듈에 대해 꼭 필요한 지식만 알고 있다면 두 모듈은 낮은 결합도를 가진다. 클래스의 구현이 아닌 인터페이스에 의존하도록 코드를 작성해야 낮은 결합도를 얻을 수 있다. 03. 데이터 중심의 영화 예매 시스템의 문제점 ○ 캡슐화 위반 ○ 높은 결합도 ○ 낮은 응집도 단일책임원칙(SRP: Single R.. 2021. 8. 9. 오브젝트 - 3. 역할, 책임, 협력 01. 협력 - 영화 예매 시스템 돌아보기 협력: 기능 구현을 위한 상호작용 책임: 협력에 참여하기 위해 수행하는 로직 역할: 협력 안에서 수행하는 책임들이 모여 객체가 수행하는 역할을 구성한다. - 협력 객체가 메시지를 처리할 방법을 스스로 선택한다.(자율적 존재) 자율적 존재가 되기 위해서는 자신이 알고있는 정보를 이용해 직접 요금을 계산해야 한다. (캡슐화) 메시지를 처리하던 중에 직접 처리할 수 없는 정보나 행동이 필요한 경우 또다른 객체에게 도움을 요청한다. - 협력이 설계를 위한 문맥을 결정한다. 객체의 행동을 결정하는 것은 객체가 참여하고 있는 협력이다. 협력이 바뀌면 객체가 제공해야하는 행동 역시 바뀌어야 한다. 협력 -> 행동 -> 상태 협력이 일종의 문맥(Context)를 제공한다. 0.. 2021. 8. 9. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음 반응형
