개발 기록 (34) 썸네일형 리스트형 플러터 ToDo리스트 만들기 진행 상황 ToDo 리스트에 할 일을 추가하고 이를 달성했는지 확인하며 나중에 삭제하는 것 까지 만들었다. 터미널을 열어 깃허브에 올리기까지 완료했다. 깃 허브 연동 완료! 최근 목표로 플러터로 간단한 앱을 만들고 깃 허브로 이를 관리하여 관련 경험을 쌓고자 하였다. 이에 따라 현재 작업 중인 아래 코드를 깃허브에 올리고자 하였고 성공적으로 추가했다. 깃 허브에 잘 추가된 것으로 보아 이제 pull을 통해 어디서나 작업을 이어나가고 버전 관리하는 것이 쉬워질 것이다. Godot 예제 따라해보기 https://docs.godotengine.org/en/stable/getting_started/first_2d_game/index.html 에서 제공되는 예제를 따라 만들어보았다. 이전에 UNITY를 통하여 게임 만드는 것에 도전해보았었는데 생각보다 너무 어려워 생산성이 좋은 godot으로 다시 시도해보았다. gd_script라는 새 언어를 사용해야하는 점이 살짝 장벽이었지만 그렇게 어려운 종류의 언어는 아니라 무난히 사용할 수 있었다. 프로젝트 일시 중지 본래 계획은 React 와 Electron을 바탕으로 앱을 만드는 것이었다. 다만 몇 가지 문제가 있었는데 1. JS 사용 경험이 미약함2. Electron 사용 경험이 처음 이 두 가지가 문제인 것 같다. 오늘 내용의 저장이 로컬 브라우저의 캐시에 저장되는 것을 확인하였다. 이후 캐시를 지우자 달력의 지출 내역이 모두 사라졌다. 일렉트론으로 앱으로 export 하게 되면 브라우저가 아니므로 로컬 디렉토리에 저장을 해야한다. 그런데 이 과정에서 컴파일 실패가 일어나고 하는데 고민해본 결과 언어 숙련도가 많이 떨어지기 때문에 앞으로 프로젝트를 진행하는 것이 어려울 수 있겠다는 생각이 들었다. 이에, 다른 소규모 프로젝트를 진행한 다음 향후 다시 진행할 계획이다. 지출 내역 입력 및 저장 완료 파일의 입력 및 저장에 성공하였다. json파일로 지출한 내역을 저장한 다음 달력의 날짜가 갱신되면 이를 반영하여 표현하도록 하였다. 좌측에는 이름 입력할 수 있는 파트와 저장되어 있는 내용을 저장할 수 있도록 되어있다. import React, { useState, useEffect } from "react";import "./App.css";function App() { const [currentDate, setCurrentDate] = useState(new Date()); const [selectedDate, setSelectedDate] = useState(null); const [transactions, setTransactions] = useState({}); // 연/월로 구분된 k.. API Vercel 호출 실패 및 계획 변경 기존의 API 호출 시스템을 열었을 때의 내용이다. 연결도 완료되었고 vercel에도 문제가 없으나 서버 함수에 문제가 있다는 내용이다. 이를 해결하기 위해 로그를 보며 고친 결과 토큰이 없다고 한다. 다만, 이 과정은 로그도 나오지 않고 API 제공 측에서 인증이 되지 않는 것으로 보이기 때문에 해결하기가 어렵다. 이에 가계부 시스템을 먼저 만들고 차후에 결제 내역을 추가할 방안을 탐구하기로 하였다. 이를 위하여 지출 내역을 수동으로 추가하는 기능과 모든 날짜에서 지출 내역을 관측할 수 있도록 달력을 설정하였다. 다만, json 파일로 저장하는 것을 아직 구현하지 못하여 재실행시 기존의 데이터가 날라가는 상황이다. 이를 해결한 다음 지출 내역 입력의 편의성과 지출 내역 분석 기능을 만드는 것을 하도록.. API 사용 방법 탐구 이 프로젝트의 핵심은 결국 카드 사용 정보를 불러오는 것이다. 검색해본 결과 카드 사용 정보의 경우 금융결제원이라는 기관에서부터 api를 받아올 수 있었다. 회원가입 후 API 코드를 발급받아 적용해볼 생각이었다. 다만, 문제가 있었는데 해당 사이트는 API를 코드가 아닌 OAuth인증을 통해 준다는 점이었다. 이 api를 사용하기 위해서는 서버간 통신을 통해 get 요청으로 원하는 카드 정보 양식을 보내고 이를 받아와 사용해야 한다는 점이었다. 문제는 내가 제작하려는 것은 데스크톱 프로그램이지 웹이 아니며 나에게는 별도의 서버가 없어 해당 정보를 recall 받을 수 있는 수단이 없다는 것이었다. 이를 해결 하기 위해 Vercel이라는 서비스를 활용하기로 하였다. Vercel은 LWS와 유사하지만 기.. 기본 틀 제작 및 날짜 설정 프로그램을 제작하기에 앞서 가장 먼저 파워포인트를 활용하여 대략적인 틀을 작성하였다. 여러 웹 사이트 디자인 툴이 있었지만 대략적인 틀만 잡고 수정해나갈 것이기에 가장 간략하게 제작하였다. 이후 이를 App.js를 통해 구현하였다. import React, { useState, useEffect } from "react";import "./App.css";function App() { const [currentDate, setCurrentDate] = useState(new Date()); // 해당 월의 일 수 계산 함수 const getDaysInMonth = (year, month) => { return new Date(year, month + 1, 0).getDate(); }; //.. 이전 1 2 3 4 5 다음