초보개발자의 소소한 기록

@ List ** 8.2.5 Firebase로 회원 인증하기 ** 8.2.6 오류 예외 처리하기 ** 8.2.7 사용자 프로필 Firebase에 담기 @ Note 1. React Native Firebase 회원 인증 - Firebase에서 제공하는 함수들을 컴포넌트에 바로 사용하지 않고 임의의 함수를 따로 만들어서 호출함 - 함수를 감싸는 작업을 한 번 하면 추후 firebase를 사용하지 않고 다른 방식으로 인증할 경우에도 코드를 쉽게 전환 가능 > reference : https://rnfirebase.io/auth/usage 2. loading 을 통한 상태 관리 - async/await 문법을 사용한 비동기 처리 시, loading & setLoading 을 적절히 사용 3. 오류 처리 - e ..

* Firebase 연동 후 ios 에서 auth() 호출 시 발생한 에러. import auth from '@react-native-firebase/auth'; ... // 회원가입 export function signUp({email, password}) { return auth().createUserWithEmailAndPassword(email, password); } ... iOS에 Firebase 적용 시, 아래 3번 4번 단계를 React Native Firebase에서 처리하기 때문에 생략하였고, 이 때 React Native Firebase 설치를 위해 AppDelegate.m 에 코드 추가 하는 것을 놓쳐서 발생한 에러 아래 코드 추가로 해결됨 # ios > ... > AppDelega..

@ 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 :..