본문 바로가기
반응형

Programming251

자바(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.
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.
Javascript 주요 팁 1. 조건이 필요할 때 => 3항 연산자 score > 5 ? 'Good': 'Bad'; // 조건이 true이면 'Good', false이면 'Bad' 2. 조건이 필요할 때 => nullish coalescing const message = text ?? 'Nothing to display'; //text가 있으면 text, 없으면(null, undefined) 'Nothing to display' //함수 default parameter : null 인 경우에는 null을 출력 function printMessage(text = 'Nothing to display'){ console.log(text); } // Logical Or || leftExpr ?? right Expr // falsy(nul.. 2021. 8. 7.
Oracle 여러행의 데이터를 하나의 행에 가로로 합치기(LISTAGG) SELECT LISTAGG(필드명, 구분자) WITHIN GROUP ( ORDER BY 정렬기준필드 ASC 또는 DESC) FROM 테이블 2021. 7. 27.
Gatsby 시작하기 (with Typescript) 0. Gatsby-cli 설치 npm install -g gatsby-cli 1. Gatsby 프로젝트 생성 gatsby new [프로젝트명] or npx gatsby-cli new [프로젝트명]// gatsby-cli설치 없이 수행할 때 yarn remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud // 필요없는 라이브러리 삭제 2. 타입스크립트 설치 yarn add typescript --dev yarn add gatsby-plugin-typescript 3. gatsby-config.js 파일 수정 module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Kick.. 2021. 7. 4.
Recoil을 활용한 비동기 요청 예제 1. Library 설치 yarn add recoil 2. 구성 /src ㄴ components * UserList.jsx ㄴ recoil * state.js *App.js *Index.js 3. 코드 (1) src/App.js import React, { ErrorBoundary } from "react"; import { RecoilRoot } from "recoil"; import UserList from "./components/UserList"; function App() { return ( ); } export default App; (2) src/recoil/state.js import { atom, selector } from "recoil"; export const userListStat.. 2021. 6. 30.
SWR을 활용한 비동기 요청 예제 1. Library 설치 yarn add swr 2. 폴더 구성 Counter는 참고로 작성했는데, 본 포스트에서 구성하지는 않겠습니다. 비동기로 서버에서 User목록만 불러와서 보여주는 부분만 코드로 남김니다. /src ㄴcomponents *Users.jsx ㄴcustomHooks *useUsers.js *App.js *index.js 3. 코드 (1) App.js import Users from "./components/Users"; import Counter from "./components/Counter"; function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import useSWR from "swr.. 2021. 6. 29.
React-query 를 활용한 비동기 요청 예제 1. Library 설치 yarn add react-query 2. 프로젝트 구조 /src ㄴcomponents * RQ1 (테스트용) * RQ2 (실 사용 컴포넌트) ㄴcustomHooks * useUsers.js *App.js *index.js 3. 코드 (1) App.js import { QueryClient, QueryClientProvider } from "react-query"; import RQ2 from "./components/RQ2"; const queryClient = new QueryClient(); function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import { useQuery } .. 2021. 6. 29.
Redux-Saga 를 활용한 비동기 요청 예제 1. 프로젝트 생성 yarn create react-app . 2. 라이브러리 설치 yarn add redux react-redux redux-actions axios redux-saga redux-devtools-extension 3. 프로젝트 구성 프로젝트 구성은 아래와 같이 할 계획입니다. /src 하위부분만 살펴보면 되겠습니다. /src ㄴ components * Leader.jsx ㄴ containers * LeaderContainer.jsx ㄴ lib * api.js (서버에 요청하는 비동기 함수 정의부분) ㄴ modules * index.js (redux와 saga를 통합하는 부분) * leader.js ( action 타입, action 생성함수, redux, saga 정의하는 부분) * .. 2021. 6. 29.