초보개발자의 소소한 기록

@ List * 8.2 회원 인증 기능 구현하기 ** 8.2.1 회원 인증을 위한 UI 준비하기 ** 8.2.2 인풋 상태 관리하기 ** 8.2.3 인풋에서 키보드 리턴 처리하기 ** 8.2.4 컴포넌트 분리하기 @ Note 1. Firebase 로그인 제공업체 목록 2. rest 연산자, spread 연사자 - [BorderedInput] 의 파라미터 부분에서는 rest 연산자를 사용하고, JSX 부분에서는 spread 연산자를 사용해 Props로 받아온 모든 키와 값을 TextInput 컴포넌트의 Props로 지정함 > rest 연산자 : 파라미터나 값을 선언하는 부분에서 사용 const object = { a: 1 , b: 2, c: 3 }; const { a, ...rest } = object; ..

@ List * 8.1 프로젝트 준비하기 ** 8.1.1 내비게이션과 아이콘 설정하기 ** 8.1.2 Firebase 적용하기 ** 8.1.3 화면 구성 이해하기 @ Note 1. 내비게이션 및 아이콘 관련 라이브러리 설치 $ yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs react-native-vector-icons 2. Android Firebase 적용 - Fisebase 가이드 따라서 진행 - 디버그 서명 인증서 SHA-1 확인 명령어 $ keytool -J-Duser.language..

@ List * 7.7 useReducer Hook 함수 사용하기 * 7.8 AsyncStorage로 데이터 유지하기 * 7.9 정리 @ Note 1. useReducer 함수 - 상태를 관리할 때 사용하는 Hook 함수 - useState를 여러 번 사용하는 상황에서 사용하면 유용 할 수 있음 > 상황에 따라 useState로만 구현하는 게 편할 때도 있으므로, 반드시 사용할 필요는 없음 > 아래 처럼 각각 다른 상태를 동시에 업데이트하는 상황에는 useReducer로 구현하는 것을 고민해보면 좋음 const onPressDate = () => { setMode('date'); setVisible(true); }; - 기본 개념 > state : 상태 action : 변화를 정의하는 객체 reducer..

@ List * 7.5 달력 기능 구현하기 ** 7.5.1 달력에 표시하기 ** 7.5.2 데이터를 달력과 연동하기 ** 7.5.3 달력 하단에 로그 목록 보여주기 ** 7.5.4 useMemo Hook으로 최적화하기 * 7.6 날짜 및 시간 수정 기능 구현하기 ** 7.6.1 WriteHeader에서 날짜 및 시간 보여주기 ** 7.6.2 DateTimePickerModal 컴포넌트 사용하기 @ Note 1. 유용한 라이브러리 - react-native-calendars : 달력 생성 > reference : https://github.com/wix/react-native-calendars - react-native-modal-datetime-picker : 날짜/시간 선택 컴포넌트를 모달 형태로 쉽게..

@ List * 7.1 작성한 글을 WriteScreen으로 열기 ** 7.1.1 FeedListItem 수정하기 ** 7.1.2 WriteScreen에서 log 파라미터 인식하기 * 7.2 수정 기능 구현하기 ** 7.2.1 LogContext에 onModify 함수 구현하기 ** 7.2.2 WriteScreen에서 onModify 함수 사용하기 * 7.3 삭제 기능 구현하기 ** 7.3.1 LogContext에 onRemove 함수 구현하기 ** 7.3.2 WriteScreen에서 onRemove 함수 사용하기 ** 7.3.3 WriteHeader 수정하기 * 7.4 검색 기능 구현하기 ** 7.4.1 SearchHeader 컴포넌트 만들기 ** 7.4.2 화면 크기 조회학 ** 7.4.3 Searc..

@ List * 6.4 글 목록 보여주기 ** 6.4.1 FeedListItem 컴포넌트 만들기 ** 6.4.2 FeedList 컴포넌트 만들기 ** 6.4.3 date-fns로 날짜 포맷팅하기 * 6.5 Animated로 애니메이션 적용하기 ** 6.5.1 애니메이션 연습하기 ** 6.5.2 스크롤을 내렸을 때 글쓰기 버튼 숨기기 ** 6.5.3 spring 사용하기 ** 6.5.4 예외 처리하기 * 6.6 정리 @ Note 1. 일정 텍스트 길이를 초과할 경우, 정규식 활용 줄임표(...) 만들기 function truncate(text) { // 정규식을 사용해 모든 줄 바꿈 문자 제거 const replaced = text.replace(/\n/g, ' '); if (replaced.length ..

@ List * 6.3 새 글 작성하기 ** 6.3.1 FloatingWriteButton 만들기 ** 6.3.2 WriteScreen UI 준비하기 ** 6.3.3 useRef로 컴포넌트 레퍼런스 선택하기 ** 6.3.4 KeyboardAvoidingView로 화면 감싸기 ** 6.3.5 WriteScreen에서 텍스트 상태 관리하기 ** 6.3.6 LogContext로 배열 상태 관리하기 ** 6.3.7 Log 작성 기능 마무리하기 @ Note 1. 리팩토링 습관 - 반복되는 코드 발견 시, 이를 컴포넌트로 만들어서 재사용하는 형태로 리팩토링 할 것 2. useRef Hook 사용 - 함수 컴포넌트에서 컴포넌트의 레퍼런스를 선택할 수 있게 하는 Hook - const bodyRef = ueseRef(..

@ List * 6.1 프로젝트 준비하기 ** 6.1.1 react-native-vector-icons 적용하기 ** 6.1.2 react-navigation 적용하기 * 6.2 Context API 사용하기 ** 6.2.1 children Props ** 6.2.2 useContext Hook 함수 ** 6.2.3 Context에서 유동적인 값 다루기 @ Note 1. Context API 전역 상태 관리 - Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 함 > reference : https://ko.reactjs.org/docs/context.html#reactcreatecontext - 현재는 잘 사용하지 않는 방법 > LogContext.Provider :..

@ List * 5.3 다양한 내비게이터 ** 5.3.1 드로어 내비게이터 --> Drawer 라이브러리 에러로 Pass ** 5.3.2 하단 탭 내비게이터 ** 5.3.3 머티리얼 상단 탭 내비게이터 ** 5.3.4 머티리얼 하단 탭 내비게이터 ** 5.3.5 머티리얼 하단 탭 내비게이터 헤더 타이틀 동기화하기 * 5.4 내비게이션 Hooks ** 5.4.1 useNavigation ** 5.4.2 useRoute ** 5.4.3 useFocusEffect ** 5.5 정리 @ Note 1. Drawer 라이브러리 에러 - 라이브러리 설치 시 에러 (해결 완료) > reference : https://bocoder.tistory.com/66?category=904878 - const Drawer = c..

@ List * 5.1 설치 및 적용하기 ** 5.1.1 의존 패키지 설치하기 ** 5.1.2 라이브러리 적용하기 * 5.2 기본적인 사용법 ** 5.2.1 네이티브 스택 내비게이터 ** 5.2.2 스크린 이동하기 ** 5.2.3 라우트 파라미터 ** 5.2.4 뒤로가기 ** 5.2.5 헤더 커스터마이징하기 @ Note 1. react-navigation 의존 패키지 설치 // 모듈 설치 yarn add @react-navigation/native // 의존 라이브러리 설치 yarn add react-native-screens react-native-safe-area-context - reference : https://reactnavigation.org/docs/getting-started 2. 주요 ..