목록TiMER (15)

꾸매코딩

[ToDoListApp] 타이머 시간 저장 및 Title 저장 기능

결과 Timer의 시간과 Title(제목) 저장 기능을 만들었다. React-Native 컴포넌트인 Modal을 사용하여 만들었다. 오류 타이머 기록한 내용을 삭제 시 전체가 사라지는 오류 (해결) → 변수를 잘못 설정해주었다. 너비가 고정이 아니라 Title 길이에 따라 변경되는 오류 (해결) → 가장 바깥 tag에 CSS가 잘못 지정되어 있었다. 계획 expo AsyncStorage 기능으로 DB 기능 구현할 계획이다. ToDoList에 완료 버튼을 누르면 모든 스타일이 변경되는 문제를 해결할 예정이다.
Project/ToDoList [React-Native] 2021. 10. 15. 22:21
[ToDoListApp] ToDoList 기능 구현 및 타이머 기능 구현

결과 간단하게 ToDoList와 Timer 기능을 만들었다. 타이머의 시작, 멈춤 정지 기능을 구현했다. 이미지는 https://icons.expo.fyi/ 위 사이트에서 가져왔다. ToDos expo의 API 중 AsyncStorage를 사용하여 저장하고 있다. 완료 버튼과 삭제 버튼을 만들어 놓았는데, 삭제는 가능하나 완료 상태는 아직 구현하지 못하였다. const addToDo = () => { if (text === '') { return; } const newToDos = { ...toDos, [Date.now()]: { text, inToDos } }; setToDos(newToDos); saveToDos(newToDos); setText(''); }; const deleteToDo = asy..
Project/ToDoList [React-Native] 2021. 10. 14. 17:57
[React] Timer 만들기 - Project 마무리 및 회고

결론 [ 로그인 화면 ] Create Account를 누르면 계정을 만들 수 있다. Log in 상태에서 만들어진 아이디로 로그인하면 로그인 가능하다. Login 기능은 Firebase의 Authentication을 활용했다. [ Timer 화면 ] 타이머의 시작, 정지, 종료, 시간과 내용 저장 기능을 만들었다. FontAwesome을 통해 무료 아이콘을 이용했다. Send 버튼 클릭 시 새로운 DB로 내용(시간-Text들)이 저장된다. [ Contents 화면 ] 다른 Id로 Send 한 내용도 볼 수 있다. - 공유 목적 [ About 화면 ] Log Out을 누르면 Log Out이 된다. 회고에 대한 나의 이해 프로젝트 기간을 돌아보며, 부족한 부분과 긍정적인 부분을 되돌아보는 것 이를 통한 성장..
Project/Timer Project 2021. 8. 1. 14:20
[React] Timer 만들기 - flat() 사용하여 DB내용 불러오기

결과 [ Timer 화면 ] 아래에 Send 버튼을 누르면 saveTime(00:00:01)과 text (send 누르면 보내기)가 DB에 저장된다. [ Contents 화면 ] [DB 저장 화면] 묶음의 전체 id값인 creatorId는 Contents에서 내가 올린 글을 삭제할때 쓸 용도이다. DB에 저장된 saveTime과 text값을 Contents 페이지에 불러와서 출력해주면 된다. 오류 [ DB에서 불러온 data의 구조 ] DB에서 불러온 내용이 아래와 같이 array 안에 object안에 array안에 object의 구조이기 때문에 Object의 key값으로 불러올 수 없는 문제가 있었다. -> array의 [0] 배열값을 주면 불러올 수는 있었지만, 글이 여러 개일 때 처리 문제를 생각해..
Project/Timer Project 2021. 7. 29. 18:35
[React] Timer 만들기 오류 해결, 앞으로의 계획, 느낀 점

오류 DB에 있는 id값과 현재 로그인 중인 user의 id값을 비교하던 중, map을 사용하니 조건에 맞지 않는 값들은 undefined 로 출력이 되었다. undefined 상태로 DB에 넣으려 했더니 'FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined' 오류가 나왔다. undefined를 없애기 위해 이런저런 시도를 하다가 filter를 통해 다시 돌려주었고 undefined를 지울 수 있었다. 아래 코드는 해결이 된 코드이다. useEffect(() => { dbService.collection("currentTime").onSnapshot(snapshot => { const co..
Project/Timer Project 2021. 7. 28. 21:24
[React] Timer 만들기 / 저장한 데이터 수정(Update), 삭제 기능(Delete)

결과 저장한 데이터를 수정하고 삭제할 수 있도록 만들었다. Firebase DB에서 “실시간”으로 업데이트하기 때문에 바로 변경됨 CRUD의 기능이 완성되었다. 아이디에 고유 id 값과 DB의 id 값을 비교하여 자신의 데이터만 불러온다. CSS 내용 우선은 배치와 아이콘만 적용해 주었다. [Times.css] .times--container { width: 500px; display: grid; grid-template-columns: 400px 100px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 10px; padding: 10px 0px; font-size: 18px; } .times--container input { width: 3..
Project/Timer Project 2021. 7. 25. 15:22
이전 Prev 1 2 3 Next 다음