본문 바로가기

전체 글101

팀소개 웹사이트 1일차 오늘은 1일차이여서 기획 부분에 많은 시간을 쏟았다. 오전 회의에서는 codepen과 구글을 통해 각자 맘에 드는 디자인을 뽑았다 다음 회의에서는 각자 역할 분담을 간단히 진행했고 마지막 회의에서는 CRUD 부분에서 CR은 해결햇지만 UD는 각자 해결하기로 했다. 이 부분에서 역할 분담하는데에 생각보다 공정하게 나누는 일이 어려웠다. 1.프로젝트 설정 VSCODE에서 command palette를 통해 파이썬 설정 1-1 가상 환경 설정 mkdir Phoenix001 cd Phoenix001 python3 -m venv venv venv\Scripts\activate # Windows 1-2 패키지 설치 pip install Flask SQLAlchemy 2. 프로젝트 구조 내가 맡은 일은 생성 버튼을 .. 2024. 2. 13.
listplz - DB에 변수 추가하기, taskProgressBar taskProgressBar를 만들어서 현재 진행률을 확인할 수 있도록 만들고 싶었다. 기존에 indexedDB에 있던 DailyTask에 isDone이라는 변수를 만들고 boolean 값을 가지도록 수정했다. DB를 확인하여 isDone이 false이면 '완료하기'버튼이 나오고 true면 '완료됨'으로 변경되도록 만들었다. taskProgressBar는 총 100으로 두고 DailyTask만큼 나눈뒤 DailyTask의 isDone의 true값 만큼 활성화되도록 만들었다. 추가적으로 디자인을 손 볼 예정이다. 그리고 taskProgressBar가 100까지 가득차면 아래의 화면이 나타나도록 만들었다. 몇몇 게임들의 ui가 이뻐서 todolist를 만들고 싶었다. 점점 어느정도 보이니 재미가 있다. //.. 2024. 2. 6.
listplz 데이터 상호작용 listplz의 데이터 관련해서 2~3일정도 소모한 것 같습니다. 원치 않게 데이터가 저장되거나 원하는 데이터만 가져오지 못해 더욱 시간이 걸렸던 것 같습니다. 1. 사용자 인터페이스(UI)에서의 동작 MainPage에서 ADD버튼을 클릭하여 새로운 일(task)을 추가할 수 있는 모달을 엽니다. TaskCreationForm 모달이 표시되고 사용자가 폼(form)을 제출하면, 폼의 데이터는 handleSubmit 함수로 전달됩니다. 2. 애플리케이션 상태 관리(Redux) handleSubmit 함수 내에서, 입력된 데이터를 바탕으로 새로운 일(task) 객체를 생성합니다. 적절한 Redux 액션(addNewTask 또는 addNewDailyTask)이 디스패치됩니다. 이 액션은 비동기적으로 Index.. 2024. 2. 2.
indexedDB 1. listplz 1-1. 마우스 클릭 이펙트 1-2. 데이터 저장옵션 선택. 1-3 데이터 생성 마우스 클릭 이펙트 클릭 했을 때 이펙트를 넣고 싶었고 아래와 같은 효과를 얻을 수 있었다. //코드 import React, { useEffect } from 'react'; import './WaveEffect.css'; const WaveEffect = () => { useEffect(() => { const handleClick = (e) => { const wave = document.createElement('div'); wave.className = 'wave-effect'; wave.style.left = `${e.pageX}px`; wave.style.top = `${e.pageY}px`;.. 2024. 1. 31.
TIL(데이터를 Flask로 받기,배포하기,listplz 사이드메뉴) 1. python 1-1. Form에서 보낸 데이터 Flask에서 받기 1-2. Pythonanywhere를 통하여 배포하기 사용된 문법들) 위의 문법을 통해 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.. 2024. 1. 30.
파이썬-2일차 오늘은 파이썬에서 아래의 개념들을 배웠다. 1. 라우팅 2. url에서 데이터 가져오기 3. SQLAlchemy 사용으로 database 조작하기 4. [실습] 음원 사이트인 멜론 Top 100 차트에서 가수, 노래 제목, 앨범 커버를 스크래핑해서 카드 형태로 만들어 주세요. 1. 라우팅 아래의 코드처럼 /,/music을 설정합니다. from flask import Flask, render_template app = Flask(__name__) @app.route("/") def home(): return render_template("motto.html") @app.route("/music/") def music(): return render_template("music.html") if __name_.. 2024. 1. 26.

티스토리툴바