결과 Timer의 시간과 Title(제목) 저장 기능을 만들었다. React-Native 컴포넌트인 Modal을 사용하여 만들었다. 오류 타이머 기록한 내용을 삭제 시 전체가 사라지는 오류 (해결) → 변수를 잘못 설정해주었다. 너비가 고정이 아니라 Title 길이에 따라 변경되는 오류 (해결) → 가장 바깥 tag에 CSS가 잘못 지정되어 있었다. 계획 expo AsyncStorage 기능으로 DB 기능 구현할 계획이다. 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..

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

결과 [ 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] 배열값을 주면 불러올 수는 있었지만, 글이 여러 개일 때 처리 문제를 생각해..

오류 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..

결과 저장한 데이터를 수정하고 삭제할 수 있도록 만들었다. 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..