결과 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..

서론 지금까지의 짧은 경험으로는 익숙해지는 데에는, 직접 해보는 게 가장 효과적이라고 생각해서 무작정 내가 사용할만한 ToDoList 어플을 만들어볼 계획이다. 프로젝트 계획 만들고 싶은 것 ToDoList와 Timer, 날짜별로 내가 했던 일들, 하는대에 걸린 시간을 저장하는 어플을 만들 계획이다. 사용 할 기술 - React-Native - Expo 구현 할 기능 - 날짜별로 저장할 수 있는 DB 기능 - ToDoList 기능 - 계획 진행 시간 체크 기능 (= 타이머) - 고정적으로 하는 일정 따로 지정해 놓는 기능 (ex, 운동) 일정 계획 10월 17일까지 구현 13일 : 시작 및 ToDoList 기능 구현 14일 : 타이머 기능과 시간 저장 기능 구현 15일 : 시간 저장, 타이틀 설정과 To..

서론 React를 배우다 보면 React Native에 대해 한번쯤 들어 봤을 것이라고 생각한다. React Native가 무엇인지 알기 전까지는 '앱(app)을 만들 때 사용한다' 정도만 알고 있었는데, 문뜩 조금 더 자세히 알고 싶어져 React Native에 대해 공부하고 정리해보기로 결정했다. React Native란 무엇인가? React Native란 리액트(Web)의 접근방법을 모바일(App)로 확장한 Facebook의 오픈소스 프로젝트이다. Javascript로 코딩한 React의 컴포넌트는 React Native의 플랫폼을 통해 iOS, 안드로이드 개발이 가능하다. Swift, Objective-c, java, Kotlin이 아닌 Javascript와 React Library만으로 앱(Ap..