TIL(데이터를 Flask로 받기,배포하기,listplz 사이드메뉴)

1. python

1-1. Form에서 보낸 데이터 Flask에서 받기

1-2. Pythonanywhere를 통하여 배포하기

 

사용된 문법들)

<form action="{{ url_for('music_create') }}" method="GET">

위의 문법을 통해 Form에서 입력한 데이터를 전송하기 위해서는 어디로 어떻게 보낼지 결정함

 

@app.route('/music/create')
def music_create():
    # form으로 데이터 입력 받기
    username_receive = request.args.get("username")
    title_receive = request.args.get("title")
    artist_receive = request.args.get("artist")
    image_receive = request.args.get("image_url")

    # 데이터를 DB에 저장하기
    song = Song(username=username_receive, title=title_receive, artist=artist_receive, image_url=image_receive)
    db.session.add(song)
    db.session.commit()

데이터 1줄을 만들고, Commit이라는 명령어로 저장함

 

@app.route('/music/')
def render_music():
    songs_list = Song.query.all()
    return render_template('music.html', data=songs_list)

DB에 있는 모든 데이터를 보여주려면 테이블.query.all() 을 해주면 됨

 

@app.route('/music/<username>/')
def render_music_filter(username):
    # 필터하기
    filter_list = Song.query.filter_by(username=username).all()
    return render_template('music.html', data=filter_list)

특정 조건에 맞는 데이터만 보여주려면 테이블.query.filter_by(조건).all()을 활용하면 됨

2. Listplz

2-1. listplz 사이드메뉴 완성
2-2. 사이드 메뉴 클릭시 화면 크기 변경.

2-3. 캘린더

 

 

마우스 클릭시 원이 퍼지는 이펙트를 만들고 싶었지만 여러 시도 끝에 아직 완성하지 못함.

오늘 한 일중에 가장 오래 걸린 에러는 
난 현재 npm start를 하면 react,electron을 동시에 켜짐. 내 electron은 localhost:3000에서 정보를 가져오고 있다.
그렇기 떄문에 2-2인 사이드메뉴를 클릭 시 화면 크기 변경을 진행하면 react 웹팩에 문제가 생겼다.
npm eject과 같은 웹팩, Babel 등을 직접 관리하는 방법을 시도할까 고민했지만 최후의 보루로 생각했고 

ipcRenderer를 electron 모듈에서 직접 가져오지 않고 preload.js에 electronAPI를 만들어 window.electronAPI를 사용했습니다.

 

//sideMenu.jsx

import React,{useState} from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { toggleMenu } from '../../actions/menuActions';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import './SideMenu.scss'

const SideMenu = ({ setMenuVisible }) => {
  const dispatch = useDispatch();
  const isVisible = useSelector((state) => state.menu.isVisible);

  const handleMenuClick = (page) => {
    const size = page === 'mainPage' ? { width: 1024, height: 768 } : { width: 768, height: 1024 };
    window.electronAPI.resizeWindow(size);
  };


  const handleToggleMenu = () => {
    dispatch(toggleMenu());
    setMenuVisible(false);
  };

  
  return (
    <div className="side-menu" style={{ width: isVisible ? '20%' : '0%' }}>
      <button onClick={handleToggleMenu}>
        {isVisible ?  <MenuFoldOutlined />: <MenuUnfoldOutlined />}
      </button>
      <ul>
        <li><Link to="/" onClick={() => handleMenuClick('mainPage')}>Main</Link></li>
        <li><Link to="/today-list" onClick={() => handleMenuClick('otherPage')}>TodayList</Link></li>
        <li><Link to="/event" onClick={() => handleMenuClick('otherPage')}>Event</Link></li>
        <li><Link to="/calendar" onClick={() => handleMenuClick('otherPage')}>Calendar</Link></li>
        <li><Link to="/memo" onClick={() => handleMenuClick('otherPage')}>Memo</Link></li>
      </ul>
    </div>
  );
};


export default SideMenu;

 

 

//preload.js

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    send: (channel, data) => {
        // whitelist channels
        let validChannels = ["toMain"];
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receive: (channel, func) => {
        let validChannels = ["fromMain"];
        if (validChannels.includes(channel)) {
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    },
    readFile: (filePath) => ipcRenderer.invoke('read-file', filePath),
    resizeWindow: (size) => ipcRenderer.send('resize-window', size),

});