모바일 개발/React Native-이론 썸네일형 리스트형 앨범 별로 사진 추가하기 전반 이번 강의에서 한 것은, 갤러리 상단 부에 현재 우리가 접속한 앨범 명 + 앨범 추가 화면 뜨도록 만들기 . 앨범 추가란 버튼 누르면 팝업이 뜨도록 하고, 해당 팝업에 text input을 두어서 사용자가 입력 할 수 있게 하기. 아직 입력 값이 전달되서 새로운 앨범이 만들어지는 것은 구현 하지 않았다. 1. 로직 2. 코드 리뷰 (1) use-gallery (customHook 부분) 쓰일 상태 변수 모음 selectedAlbum은 현재 선택된 앨범의 이름을 말하는 것이고, albumTitle은 사용자가 신규 입력한 앨범의 이름이 들어가는 곳이다. albums는 현재 저장된 앨범의 목록이다. modalVisible은 팝업창 on/off 용 상태변수이다. 신규 추가된 함수 : 모달이라는 팝업창 켜기 / .. 더보기 갤러리 앱 클론코딩 - 갤러리에 사진 추가하기 1. Device 내장 갤러리 접속 : expo의 imagePicker라는 로직이용 (1) 로직 (2) 코드리뷰 내부 코드들인데 async 함수, await 등 pickImage를 구현하는 내부 로직들 중 모르는 keyWord들이 많다. 해당 내용들을 알려면 promise 라는 키워드 부터 공부해야 한다. 이는 시간이 많이 걸리므로, 먼저 이번 강의 전 내용을 빠르게 정리한 후 돌아와서 공부하도록 하겠다. (3) 새롭게 알게 된 것 - image Picker 로직 분해를 통하여 https://docs.expo.dev/versions/latest/sdk/imagepicker/ 2. imagePicker가 하나의 사진 뿐만 아니라 여러 개의 사진을 가지고 있을 수 있도록 커스터마이징 + imagePicker.. 더보기 캘린더 클론코딩 - todoList 저장고에 저장하고 꺼내오기 앱을 나왔다가 다시 들어가도 내가 일전에 적었던 todoList는 그대로 저장되어 있어야 한다. 그걸 구현하기 위해 Stroage란 DB를 사용하여 프로그램이 랜더링 되고 있는 상황에서 update 시 바로 DB에 update 결과를 저장시켜 주도록한다. 그리고 프로그램이 다시 시작될 때, 해당 DB에서 내용물을 꺼내 오도록 한다. 1. 로직 2. 코드 리뷰 AsyncStorage - Expo Documentation AsyncStorage Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 먼저 여기서 AsyncS.. 더보기 캘린더 클론코딩 - toDo 적힌 날짜는 찐하게 표시 1. 로직 2. 코드리뷰 3. 새롭게 배운 것 JS 의 Array 함수 중 하나인 find find는 주어진 판별 함수를 만족하는 첫번째 요소를 반환한다. array = [5,12,23,45,13] const result = array.find(element => element > 10 ); console.log(result) // 결과는 12 알다시피, 0이 아닌 모든 숫자는 참 취급을 받는다. (그래서 위의 로직은 이를 이용해 boolean 값처럼 쓴 것이다.) 만약에 위의 함수에서 10보다 큰 숫자가 아무것도 없었다면, find 함수는 undefined를 반환한다. 더보기 캘린더Todo 클론코딩 - 달력에 선택된 날짜의 할 일만 나오게 하기 1. 선택된 날짜만 나오게 하기 (1) 로직 (2) 코드 리뷰 배열의 내장 함수인 filter를 이용. fiter는 배열 원소 하나하나 대입하여 해당 명령문에 대하여 참인 원소들로만 새 배열을 만드는 기능을 한다. (3) 추가적으로 공부하여 알아낸 것 JS 의 Array Filter에 대하여 추가적으로 공부 Array의 내장함수 Filter는 주어진 배열의 값들을 오름차순으로 접근해서 callbackFn({}안에 적혀있는 함수)에 넣어보고 그 결과가 true인 원소들로만 새로운 배열을 만들어 반환한다. **callback의 의미 : 다른 코드에 인수로 들어가 있는 실행이 가능한 코드 덩어리 **callback 함수는 : 다른 코드에 인수로 들어간 실행 가능한 함수 더보기 Toggle버튼, 꾹 누를 시 삭제, 추가 버튼 구현 1. Toggle버튼 구현 (1) 로직 설계도 (2) 코드리뷰 TodoList 자체를 누를 수 있도록 하기 위해 전체를 감싸던 RootView를 Pressable로 바꾸어 주었다. (3) 추가적으로 알아낸 점 a. onPress 속성 내부에 함수를 적을 때 표현 ㄱ. 만약 onPress에 적히는 함수가 매개변수를 따로 전달 안하는 경우 // 셋 다 같은 가능함. onPress(ExFunc) onPress(() => Ex.Func()) onPress(() => {return Ex.func()}) // 이건 틀린 것. 익명함수로 적어주려면, 함수의 매개변수 부분도 무조건 적어줘야 한다. onPress(() => Ex.Func) 하지만 익명 함수 형태 ()=> {} 로 적어주면 컴포넌트가 렌더링 할 때마다 새.. 더보기 캘린더에 to do list 만들기, 컴포넌트 정리 먼저 캘린더 밑 부분에 To do List를 flatList로서 넣는다. 캘린더와 to do List가 따로 Scroll 된다면 그것도 사용자에게 불편함을 줄 것이다. 그래서 하나의 FlatList에 캘린더와 Scroll이 같이 있게 만들어줘야 한다. (1)따라서 지금까지 만들었던 캘린더 로직을 하나의 파일로 따로 빼서, toDoList FlatList의 ListHeaderComponent로 넣어줄 것이다. (2) 그리고 화면 뒤에 배경 이미지도 넣어줄 것이다. 이때 화면과 View 가 겹칠 때 누가 앞에 뜰 것인지 우선순위를 정하는 것이 중요하다. 여기서는 CSS를 이용하여 두 태그간의 우선순위를 나눌 것인데, position과 zindex가 쓰인다. (3) 마지막으로 밑에 todo를 추가할 수 있는 .. 더보기 ToDo캘린더 클론코딩 - Custom Hook으로 정리 우리는 캘린더 구현 뿐만 아니라 ToDo List 구현도 해야하기 때문에, 양쪽 상태변수들이 섞여 적히면 가독성이 현저히 떨어지게 되고 유지보수에 큰 어려움을 겪을 수 있다. 따라서 지금까지 만들었던 캘린더의 상태변수 및 필요한 함수들은 따로 useCalendar라는 Custom 훅에 넣어서 정리한다. App.js 에서 필요한 값들은 useCalendar의 return 값에서 받아온다. 그리고 이제부터 만들 useTodoList는 처음부터 따로 커스텀 훅 파일을 만들고 거기에 필요한 상태변수들과 함수들을 적겠다. 1. use-Calendar.js import dayjs from "dayjs"; import { useState } from "react"; export const useCalendar = (.. 더보기 이전 1 2 3 4 5 6 7 다음
