본문 바로가기
반응형

Programming307

파이썬 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.
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.
SWR로 로컬 상태 컨트롤 - Counter import useSWR from "swr"; function useCounter() { const { data, mutate } = useSWR("state", () => window.count); return { data: window.count || 0, mutate: (count) => { window.count = count; return mutate(); }, }; } export default function Counter() { const { data, mutate } = useCounter(); const handleInc = () => mutate(data + 1); const handleDec = () => mutate(data - 1); return ( count: {data} in.. 2021. 6. 26.
Color Palette - palette.js palette.js : gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, ornage 일부는 적어놓고 붙여써야겠습니다. const palette = { gray: [ '#f8f9fa', '#f1f3f5', '#e9ecef', '#dee2e6', '#ced4da', '#adb5bd', '#868e96', '#495057', '#343a40', '#212529', ], cyan: [ '#e3fafc', '#c5f6fa', '#99e9f2', '#66d9e8', '#3bc9db', '#22b8cf', '#15aabf', '#1098ad', '#0c8599', '#0b7285', ], }; export default pa.. 2021. 6. 21.
Next.js 시작하기4 - 설정파일 1. next.config.js module.exports = { reactStrictMode: true, trailingSlash: false, // 뒤쪽 슬래시를 붙일 것인지.. env: { SANITY_PROJECT_ID: 'ozi5ivc6', //Sanity ID를 환경변수로 지정 } } 2021. 6. 20.
Next.js 시작하기3 - 스타일링 1. 라이브러리 설치 yarn add @sanity/block-content-to-react yarn add react-syntax-highlighter 2. BlogPostDetail.jsx import {Col, Row } from 'antd' import BlockContent from '@sanity/block-content-to-react' import SyntaxHighlighter from 'react-syntax-highlighter' const serializers = { types: { code: ({node}) => { const { code } = node; return ( {code} ) }, video: ({ node }) => { return video }, link: ({ n.. 2021. 6. 20.
Next.js 시작하기2 - 스타일링 1. 라이브러리 설치 yarn add antd @ant-design/icons// ant design yarn add dayjs// 날짜 변환 라이브러리 2. pages/_app.js 파일에 반영 -> 전체 적용 import 'antd/dist/antd.css' // p.slug === home.mainPostUrl); const otherPosts = posts.filter(p => p.slug !== home.mainPostUrl); console.log(mainPost); console.log(otherPosts); return ( ) } export async function getStaticProps() { const sanityService = new SanityService(); const .. 2021. 6. 20.
Next.js 시작하기 (Sanity Blog 작성 완료된 경우) 1. 프로젝트 생성 및 Library 설치 yarn create next-app . yarn add @sanity/client//Sanity 연결하여 Data를 가져오기 위한 라이브러리 2. 시작 yarn dev yarn start는 빌드 이후 가능합니다. 3. 라우팅 설정 (기초) 폴더/페이지구조url pages/index.js -> / pages/blog/index.js-> /blog pages/blog/first-post.js->/blog/first-post pages/dashboard/setting/username.js->/dashboard/settings/username pages/blog/[slug].js->/blog/:slug(/blog/hello-world) pages/[username]/.. 2021. 6. 20.
반응형

티스토리툴바