1. 선택된 날짜만 나오게 하기 (1) 로직 (2) 코드 리뷰 배열의 내장 함수인 filter를 이용. fiter는 배열 원소 하나하나 대입하여 해당 명령문에 대하여 참인 원소들로만 새 배열을 만드는 기능을 한다. (3) 추가적으로 공부하여 알아낸 것 JS 의 Array Filter에 대하여 추가적으로 공부 Array의 내장함수 Filter는 주어진 배열의 값들을 오름차순으로 접근해서 callbackFn({}안에 적혀있는 함수)에 넣어보고 그 결과가 true인 원소들로만 새로운 배열을 만들어 반환한다. **callback의 의미 : 다른 코드에 인수로 들어가 있는 실행이 가능한 코드 덩어리 **callback 함수는 : 다른 코드에 인수로 들어간 실행 가능한 함수

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를 flatList로서 넣는다. 캘린더와 to do List가 따로 Scroll 된다면 그것도 사용자에게 불편함을 줄 것이다. 그래서 하나의 FlatList에 캘린더와 Scroll이 같이 있게 만들어줘야 한다. (1)따라서 지금까지 만들었던 캘린더 로직을 하나의 파일로 따로 빼서, toDoList FlatList의 ListHeaderComponent로 넣어줄 것이다. (2) 그리고 화면 뒤에 배경 이미지도 넣어줄 것이다. 이때 화면과 View 가 겹칠 때 누가 앞에 뜰 것인지 우선순위를 정하는 것이 중요하다. 여기서는 CSS를 이용하여 두 태그간의 우선순위를 나눌 것인데, position과 zindex가 쓰인다. (3) 마지막으로 밑에 todo를 추가할 수 있는 ..

우리는 캘린더 구현 뿐만 아니라 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. 스스로 해보기 스무스하게 함. 16분

1. 개요도 상태 변수가 추가되었다. 상태 변수는 renderItem 의 on Press 을 이용해 사용자가 특정 날짜 누를 때 마다 상태 변수가 최신화 되도록 세팅한다. 이렇게 세팅된 상태변수는 총 3가지에서 쓰인다. 먼저 달력에 들어갈 dayjs 변수들을 배열로 돌려주던 utill.js에 이제 now(현재시간)을 안 넣고, 해당 상태 변수를 넣는다. 이렇게 되면 사용자가 달력 내 전월이나 내월의 날짜를 클릭 했을 시 그 날짜의 달로 넘어가는 기능이 구현된다. 왜냐하면 눌러진 날짜가 속한 달을 기준으로 달력에 들어갈 값의 배열을 다시 뽑기 때문이다. 두 번째로 renderItem에서 쓰인다. onPress를 누르면 상태변수가 해당 날짜로 세팅된다. isSelected라는 변수에서 상태 변수가 이용되는데..

저번에 만들었던 달력 데이터를 이용해서 달력 모양으로 화면에 띄우겠다. 위에 오늘의 날짜 2022.11.24 부분은 아직 구현 안하고, now라는 현재 시각 받아서 진행 하겠음. 1. FlatList 를 만들어 화면 띄우기 data는 저번에 우리가 util.js 에서 만들었던 column을 이용한다. 여기에는 현재 "년월일 시분초"를 뜻하는 now를 넣었다. 사실 안 넣어줘도 되지만, (why? dayjs()는 현재 년월일 시분초 의미하는데, 인수가 아무것도 넘어오지 않으면 getCalendarColumns 안에 있는 dayjs는 인수를 아무것도 안 받게되기 때문) 일단 넣어준다. data에 colums를 넣으면 이제 renderItem에서 columns의 배열 원소를 차례로 돌면서 어떠한 기능을 처리한..

달력 내부에는 다음과 같이 날짜가 있어야 한다. 우리는 이번 4월달의 날짜 데이터를 만들 것이다. 위에서 보면 알 수 있듯이, 달력에는 해당 월의 날짜 뿐만 아니라, 빈 공간을 채우는 전월, 내월의 날짜가 조금씩 들어가 있다. 이 부분도 얼마나 필요한지 계산 해내어서 데이터에 추가할 것이다. 1. getCanlendarColumns // 딴 파일에서 import될 최종본 // now를 선언하지 않았는데 왜 돌아갈까? // now를 선언하지 않은 것이 맞다. 근데 그냥 dayjs()에 파라미터 안 넣은 경우, dayjs()는 최신 날짜를 반환한다. // 이걸 이용한 것이다. 그냥 now 다 지워버려도 동작한다. export const getCalendarColumns = (now) => { // now는 ..

1. dayjs는 react에서 날짜, 시간을 표시하고 시간 계산을 위해 쓰는 라이브러리다. (1) install npm install dayjs yarn은 따로 보시길.. (2) import 이제 다운 받은 dayjs 라이브러리를 사용해 보겠다. dayjs 자체만 import 한다고 해서 내장 함수를 다 쓸 수 없다. 몇몇 함수들은 직접 import및 상속도 받아야 한다. 2. 많이 쓰이는 함수 알아보기 (0) 사전 세팅 now라는 변수에 년월일 시분초를 넣어주겠다. 다음이 dayjs를 통해 변수에 년월일, 시분초를 넣는 방법이다. const now = dayjs("2022-11-04 16:01:30"); (1) set 함수, format 함수 day(now).set("minute", 5)는 now에서..

하나의 파일에 상태 변화 변수, 함수들과 View 부분이 혼재 하면, 유지 보수가 어렵다. 그래서 상태 변화 변수, 함수들은 다른 파일로 빼주고, 그 파일 return 값에 태워서 View part 파일에게 건네다 주는 식으로 해야지 가독성이 좋다. 우리는 우리가 만들었던 Hook들을 모아 나만의 Hook file을 만들 것이다. **주의점** Hook은 무조건 use라는 이름으로 시작해야함. Custom Hook (우리가 만들려는 Hook) file 도 예외 없음 이번엔 계산기 만드는데 썼던 Hook 이니까 useCalculator라고 쓰자. 이 안에 내용 다 넣고 return {} (객체) 안에 태워 보낸다. ()는 하나의 값 밖에 못 보내기 때문에 {}를 사용해야 한다. ()는 아무 의미 없고 그냥..

프로그램을 만들 때 수많은 예외처리가 필요하다. 계산기에도 수많은 예외처리가 필요하지만 일단 몇 개만 해보자 문제1: 두 번째 값을 한 자리 수 밖에 클릭할 수 없는 이유 문제가 발생하는 이유: const onPressNum = (num) => { if(currentOperator) { setResult(input); setInput(num); } else{ const newInt = Number(`${input}${num}`) setInput(newInt) } }; 첫번째 숫자 누르기 -> = 아닌 연산자 누르기 -> 두 번째 숫자 누르기 순으로 진행된다. 위의 로직을 보면 현재 연산자가 골라져 있으면, 붙여쓰지 말고, 바로 바로 result로 값을 넘기게 되어있다. 그래서 두 번째 숫자에서는 한 자리..

0. Test 하는 값들이 눈에 보이도록 UI에 test 결과 창 만들기 test 결과창을 만들어 test 내용을 항시적으로 확인하는 것이 좋다. main 함수에다가 만들어준다. 1. Button에서 함수 이용해 중복 코드 제거 배열의 Map 함수 이용 하나의 row에 들어가는 숫자 값들로 배열을 만들어주고 - [7,8,9] 배열의 내장 함수 map을 이용 (num)은 배열의 원소가 차례대로 대입되는 인수 text는 String 값을 받아야 하므로 `${}`이용해서 number 변수인 num을 String으로 형 변환 이런 식으로 789, 456, 123의 코드를 줄이자. 2. 숫자 클릭 시 결과창에 찍히도록 const onPressNum = (num) => { setInput(num); } 해당 num..

1. 코드 리뷰 (1) styled component 이용하여 태그들 가독성 높이기 a. styled component 깔기 npm install styled-components b. styled component 이용하여 꾸미기 styled Component 이용하면 가독성이 좋아진다. 그 이유는 다음과 같다. 인라인 스타일로 꾸밀 경우, style 속성들을 이용해 꾸미는 내용을 적어줘야 했다. 이는 꾸미는 내용이 많아질수록 가독성이 떨어진다. StyleSheet를 이용하는 경우에는 태그들과 CSS 객체들을 연결해줘야 하는데, 이게 CSS 객체의 양이 많아질수록 헷갈릴 가능성이 높다. 스타일드 컴포넌트는 말 그대로 컴포넌트의 내용에 CSS를 첨가할 수 있는 것이다. 컴포넌트는 이름을 마음대로 할 수 있..

1. 코드 리뷰 import React from "react" import { TouchableOpacity, View, Text } from "react-native" import styled from "styled-components/native" const ButtonContainer =styled.View` flex-direction: row; width: 100%; `; //Button Type : 'reset' | 'Operator' | 'num' const Button = ({text, onPress, flex, type}) => { const backgroundColor = (type === "reset") ? COLOR.RESET : (type === "operator") ? COLOR...

1. 코드 리뷰 UseState만 설정 UseState는 상태를 저장하기 위한 함수 이다. 구조 분해 할당의 첫번째 인자에는 값이 저장될 변수, 두 번째 인자는 값을 바꿔주는 함수가 들어간다. useState()의 () 안은 값의 초기값이다. 처음부터 모든 UseState를 세팅하고 가려고 하면 되려 머리 아프다. 어짜피 개발하다가 필요한 것이 더 생기면, 그 때 또 추가해야 한다. 마음 편히 먹고 굵직 한 것만 일단 구현한다는 생각으로 하자.

1. 아이콘의 터치범위 넓히는 법 (1) View로 되어있는 icon 컴포넌트를 TouchableOpacity로 바꾼다. (2) hitslop 이용 TouchableOpacity의 hitslop 속성은 해당 아이콘의 터치 범위를 늘려준다. top, bottom, left, right의 옆에 자기가 늘려주고 싶은 만큼을 적어주면 된다. const IconButton = ({name, bgColor}) => { return( ) }; ** 곁다리 컴포넌트에서 속성을 props로 받을 경우, {} 없이 () 안에 바로 적어주면 되었다. 왜냐하면, props는 하나의 객체이기 때문이다. 오류 코들르 읽어보니 () 안에는 객체나 배열같은 구조체만 들어올 수 있는 것 같다. 위처럼 name, bgColor를 넣을거..

1. React-Native에서 CSS 스타일링을 하는 방법이 3가지가 있다. (1) inline 스타일 이런 식으로 태그 안에다가 적어주는 것 양이 많아지면 가독성이 떨어지지만, 반대로 양이 적으면 가독성이 오히려 높다. (2) StyleSheet 써서 내용 밑으로 빼기 양이 많아질 경우, 이렇게 사용하면 가독성이 높아진다. (3) expo에서 제공하는 기능인 styled Component 사용 이건 컴포넌트인데 안에 CSS 기능을 넣을 수 있는 것이다. a.장점은 컴포넌트를 사용하는 것 이므로, 컴포넌트 이름을 내가 쓰려는 CSS에 맞게 바꿀 수 있다. 이는 컴포넌트만 보아도 해당 함수가 어떻게 꾸며질 것인지 알 수 있어 가독성이 높아진다. b. 형태 (1) styled.View 혹은 Image, T..

1. Scroll View 와 FlatList의 차이점. ScrollView는 화면에 보이지 않는 부분도 다 랜더링하여 만들어 놓는다. 그리고 사용자가 화면에서 벗어나는 부분을 보고 싶으면, 스크롤 해서 볼 수 있게 만든다. 데이터 양이 많지 않고 고정적일 때 사용한다. 반면 FlatList는 화면에 보이는 부분만 랜더링하여 만들어 놓는다. 만약 사용자가 보이지 않는 부분을 보고 싶어 스크롤 할 시 그 때 안 만들어 놓은 내용들을 만든다. 미리 모든 내용을 만들어 놓는 Scroll View와 비교했을 때 압도적으로 좋은 성능을 보인다. 2. 코드 리뷰 (1) FlatList의 속성들 뜯어보기 index} ItemSeparatorComponent={ItemSeparatorComponent} stickyHe..

1. 코드 리뷰 (1) App.js export default function App() { const [isOpened, setIsOpened]=useState(true); const [selectedTabIdx, setSelectedTabIdx] = useState(0); const onPressArrow = () => { console.log("clicked arrow") setIsOpened(!isOpened) } return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: statusBarHeight, }, }); a. tabBar 제외한 모든 컴포넌트들은 view..

친구List를 화살표 키를 눌러 토글 시킬 것이다. 토글 시킬려면 boolean 변수를 만들고, 우리가 상황에 따라 그 값의 상태를 변화 시켜주면 된다. (useState 이용) 변화가 필요한 곳은 friendSection, friendList 2가지 장소이다. boolean 변수가 false 일때, friendSection은 화살표를 위로 보게 하고, true 일때는 아래를 보게 만들어야 한다. friednList에서 boolean 변수가 false 일 때, return 값을 null로 줘서 안 보이게 만들고 true일 때 원래 로직을 보이게 만들면 된다. 여기서 쓰이는 것이 삼항 연산자 혹은 if문, &&문 이다. 1. 코드 리뷰 (1) App.js // useState로 boolean 변수의 상태 ..