티스토리

united-prompt

검색하기

블로그 홈

united-prompt

united-prompt.tistory.com/m

useSword 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

listplz - DB에 변수 추가하기, taskProgressBar taskProgressBar를 만들어서 현재 진행률을 확인할 수 있도록 만들고 싶었다. 기존에 indexedDB에 있던 DailyTask에 isDone이라는 변수를 만들고 boolean 값을 가지도록 수정했다. DB를 확인하여 isDone이 false이면 '완료하기'버튼이 나오고 true면 '완료됨'으로 변경되도록 만들었다. taskProgressBar는 총 100으로 두고 DailyTask만큼 나눈뒤 DailyTask의 isDone의 true값 만큼 활성화되도록 만들었다. 추가적으로 디자인을 손 볼 예정이다. 그리고 taskProgressBar가 100까지 가득차면 아래의 화면이 나타나도록 만들었다. 몇몇 게임들의 ui가 이뻐서 todolist를 만들고 싶었다. 점점 어느정도 보이니 재미가 있다. //.. 공감수 0 댓글수 0 2024. 2. 6.
listplz 데이터 상호작용 listplz의 데이터 관련해서 2~3일정도 소모한 것 같습니다. 원치 않게 데이터가 저장되거나 원하는 데이터만 가져오지 못해 더욱 시간이 걸렸던 것 같습니다. 1. 사용자 인터페이스(UI)에서의 동작 MainPage에서 ADD버튼을 클릭하여 새로운 일(task)을 추가할 수 있는 모달을 엽니다. TaskCreationForm 모달이 표시되고 사용자가 폼(form)을 제출하면, 폼의 데이터는 handleSubmit 함수로 전달됩니다. 2. 애플리케이션 상태 관리(Redux) handleSubmit 함수 내에서, 입력된 데이터를 바탕으로 새로운 일(task) 객체를 생성합니다. 적절한 Redux 액션(addNewTask 또는 addNewDailyTask)이 디스패치됩니다. 이 액션은 비동기적으로 Index.. 공감수 0 댓글수 1 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`;.. 공감수 0 댓글수 0 2024. 1. 31.
react-electron 환경설정(윈도우) 관련된 내용들을 검색해보니 맥과 yarn을 이용한 정보가 많았고 electron에 알맞은 환경을 만든 후 react를 설치하는 분들이 많았습니다. 저는 윈도우와 npm을 주로 사용해왔기 때문에 이들로 환경설정을 할 생각입니다. react를 주로 사용하다보니 우선 react를 설치하고 electron을 추가하여 동시에 작동하는 방식을 사용할 예정입니다. 이렇게 하는 이유는 electron은 변경사항이 있을때마다 새로고침을 해야합니다.이럴바에 react로 빠르게 파악하는 편이 나을 또는 localhost:3000을 지정하여 할 수 있지만 저는 설정하는 방법도 까다로워 보이고 electron을 빠르게 이용하고 싶어 효율적이지 못하게 사용했습니다. 우선 react를 설치하겠습니다. npx create-react.. 공감수 0 댓글수 0 2024. 1. 23.
예전 아이콘 공감수 0 댓글수 0 2024. 1. 20.
ContentSectionThree 눈 내리기 추가 ContentSectionThree에 눈내리기를 추가하였다. snow.jsx import React, { useEffect, useRef } from 'react'; class SnowItem { static defaultOptions = { color: 'white', radius: [0.5, 3.0], speed: [1, 3], wind: [-0.5, 3.0] }; constructor(canvas, options = {}) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.options = { ...SnowItem.defaultOptions, ...options }; this.initialize(); } initialize() { t.. 공감수 0 댓글수 0 2024. 1. 20.
ContentSectionTwo 1. 왼쪽에 4개씩의 이미지를 보여주고 클릭하면 오른쪽에 그 이미지에 대한 설명을 나타나게 해야함. 2. 이미지가 5개가 넘어가면 페이징처리를 해야함. 3. 클릭을 했을 때, 어떤 이미지가 클릭되었는지 확인할 수 있어야함. 밝기 조절을 해서 클릭한 이미지가 무엇인지 눈에 띄게 보이게 만들었음. 테두리 색상 변경과 박스 그림자 강조 배경색 변경 등 여러가지 시도 했지만 밝기 조절이 가장 이뻐보였음. 1번쨰 이미지를 클릭해서 1번째 이미지는 "ListPlz"라는 데스크탑 어플리케이션을 만들예정이기에 그림과 같이 해놓았다. 글자의 배치같은 경우 대부분 position: absolute을 이용했기 때문에 나중에 쉽게 다시 배치를 변경 가능하다. 설명과 다른 부분이 완성되면 제대로 배치할 생각이다. Content.. 공감수 1 댓글수 1 2024. 1. 19.
ContentSectionThree 오늘은 강의보단 개인적으로 만들고 싶었던 작업물을 만들었다. 홈페이지의 3번째 세션을 만들었고 글은 아무거나 가져온 것이기 때문에 수정할 예정이다. 1번째와 2번째 세션을 아직 지속적으로 작업중이므로 블로그에 올리기에 부끄러운 수준이라 나중에 올릴 듯 싶다. REACT를 이욯했으며 사용된 라이브러리는 react-icons,antd 가 있다. ContentSectionThree.jsx import React, { useState, useEffect } from 'react'; import { Layout } from 'antd'; import { FaDiscord, FaBloggerB, FaEnvelope } from 'react-icons/fa'; import { FaArrowLeft, FaArrowRi.. 공감수 0 댓글수 0 2024. 1. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.