Maxima's Lab

안녕하세요, 오늘은 Vue.js 프로젝트에서 Json Web Tokens (JWT)를 사용하는 방법에 대해서 알아보겠습니다. Backend에서는 Flask를 사용하여 Token을 생성할 예정입니다. 먼저, 다음과 같이 파이썬 패키지를 설치합니다. pip install flask flask_cors flask_apscheduler flask[async] Flask-SoketIO pip install Flask-JWT-Extented python-dotenv import osfrom flask_socketio import SocketIO, emitfrom flask import Flask, request, jsonify, render_template, redirect, session, gfrom flask_..

안녕하세요, 오늘은 Vue.js를 위한 UI Component 라이브러리인 PrimeVue를 사용하는 방법에 대해서 알아보겠습니다. PrimeVue를 사용하기 위한 명령어는 다음과 같습니다. npm install primevue npm install primeicons 위의 명령어를 통해 라이브러리를 설치 후 main.js 파일을 다음과 같이 수정합니다. import { createApp } from 'vue';import App from './App.vue';import PrimeVue from 'primevue/config';import 'primevue/resources/themes/saga-blue/theme.css';     import 'primevue/resources/primevue.min..

안녕하세요, 오늘은 Material Design Icons (MDI) 사용 하는 방법에 대해서 알아보겠습니다. 이를 위해 다음과 같은 명령어를 통해 패키지를 설치합니다. npm install @mdi/jsnpm install @jamescoyle/vue-icon 위의 패키지를 설치 후 Vue Component 내 다음과 같이 사용할 수 있습니다.  위의 코드는 Javascript 관련 코드 입니다. 이를 활용하여, 내부에서 다음과 같이 사용할 수 있습니다.   다양한 Icons 관련 해서는 다음 링크에서 확인 가능합니다.  https://pictogrammers.com/library/mdi/ Material Design Icons - Icon Library - PictogrammersThe origin..

안녕하세요, 오늘은 psycopg2 패키지를 활용하여, PostgreSQL (DB)를 사용하는 방법에 대해서 알아보겠습니다. 먼저, psycopg2 패키지를 설치합니다. pip install psycopg2-binary 이어서, DB에 연결하여, Table을 생성하는 방법에 대해서 알아보겠습니다. import psycopg2 conn = psycopg2.connect(host='localhost', database='postgres', user='postgres', password='', port=5432) cur = conn.cursor() print(cur.closed == 0) create_users_table = """ CREATE TABLE IF NOT EXISTS users ( user_id ..

안녕하세요, 오늘은 PostgreSQL & DBeaver Community 설치 및 사용 방법에 대해서 알아보겠습니다. https://www.postgresql.org/download/ PostgreSQL: Downloads www.postgresql.org 위의 링크에서 각 OS에 맞게 다운로드 및 설치를 해주시면 됩니다. 이어서, DBeaver Community 설치 경로는 다음과 같습니다. https://dbeaver.io/download/ Download | DBeaver Community Download DBeaver Community 24.0.2 Released on April 8th 2024 (Milestones). It is free and open source (license). Also..

안녕하세요, 오늘은 Vuetify 3에서 Data table (Component) 사용하는 방법에 대해서 알아보겠습니다. https://vuetifyjs.com/en/components/data-tables https://vuetifyjs.com/en/components/data-tables/ vuetifyjs.com 먼저, Data table (Component)에 대한 코드 예시는 다음과 같습니다. 위의 코드 실행 결과는 다음과 같습니다. 위의 코드에서 header를 구성하는 titles는 다음과 같습니다. Index Name Student ID Grade 그리고, 해당 Table의 Items를 구성하는 변수는 students 입니다. 변수 students는 List 이며, 각 원소는 Dictiona..

안녕하세요, 오늘은 Vuetify 3에서 File inputs (Component)을 사용하는 방법에 대해서 알아보겠습니다. https://vuetifyjs.com/ Vuetify — A Vue Component Framework Vuetify is a no design skills required Open Source UI Component Framework for Vue. It provides you with all of the t... vuetifyjs.com File inputs (Component)를 다양한 예시들을 활용한 결과는 다음과 같습니다. 위의 코드에서 variant 값의 따라서 디자인이 위의 예시 처럼 변화하는 것을 확인할 수 있으며, accept 옵션은 특정 파일 format이나 타..

안녕하세요, 오늘은 Vuetify 3을 설치하고 적용하는 방법에 대해서 알아보겠습니다. 먼저, Vue.js 3에 대한 프로젝트를 생성한 상태라고 가정하겠습니다. 이어서, 아래 명령어를 통해 vuetify를 설치합니다. npm install vuetify@next npm i -D vuetify vite-plugin-vuetify npm i @mdi/font 위의 명령어 실행 후 다음과 같은 경로에 파일을 추가해줍니다. (vuetify.js) src/plugins/vuetify.js // src/plugins/vuetify.js import '@mdi/font/css/materialdesignicons.css' import 'vuetify/styles' import { createVuetify } from ..