마크투비의 고 GO

보호되어 있는 글입니다.

리액트 네이티브 💬채팅앱에서 Firebase 시작하기 - 인증, 데이터베이스, 스토리지 - 리액트 네이티브로 채팅앱을 만드는데 별도의 서버 구축 없이 파이어베이스를 이용할 것이다. 파이어베이스는 인증, 데이터베이스 등의 다양한 기능을 제공하는 개발 플랫폼이다. 파이어베이스를 이용하면 서버와 데이터베이스를 직접 구축하지 않아도 개발이 가능하다. 목차 1. 프로젝트 만들기 2. 앱 추가하기 3. 인증 (이메일 인증) 4. 데이터베이스 5. 스토리지 6. 라이브러리 설치 1. 프로젝트 만들기 파이어베이스 콘솔에서 먼저 프로젝트를 생성한다. 나는 react native 앱 폴더 이름과 같게 했다. 그다음은 Google 애널리틱스를 연동한다는 내용인데, Google 애널리틱스는 사용자가 앱에서 하는 행동이나 데이..

보호되어 있는 글입니다.

오늘은 8장 내비게이션에 대해 알아보겠다 😁 Navigation 리액트 네이티브에서는 네비게이션 기능을 지원하지 않아서 외부 라이브러리인 리액트 네비게이션 라이브러리를 이용해야 한다. 1. 리액트 네비게이션 리액트 네비게이션에서 지원하는 네비게이션의 종류는 스택(stack) 네비게이션, 탭(tab) 네비게이션, 드로어(drawer) 네비게이션 세 종류이다. 이 포스트에서는 리액트 네비게이션5 버전을 기준으로 진행할 것이다. 1) 네비게이션의 종류 1️⃣ NavigationContainer 컴포넌트 네비게이션의 계층구조와 상태를 관리하는 컨테이너 역할을 하며, 모든 네비게이션 구성 요소를 감싼 최상위 컴포넌트이다. 2️⃣ Navigator 컴포넌트 화면을 관리하는 중간 관리자 역할로 네비게이션을 구성하며,..

오늘은 7장 Context API에 대해 알아보겠다 😁 Context API 이전 포스트에서 Hooks의 여러 함수를 통해 컴포넌트에서 상태를 관리하는 방법에 대해 알아보았다. Context API는 데이터를 전역적으로 관리하고 사용할 수 있는 기능이다. 이번 포스팅에서는 Context API를 이용해서 상태를 전역적으로 관리하는 방법에 대해 알아보겠다. 1. 리액트 네이티브에서의 전역 상태 관리 일반적인 리액트 네이티브 애플리케이션의 경우 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 하지만 자식 컴포넌트에서는 부모로부터 받은 데이터를 변경할 수 없으므로 데이터를 전달받은 과정의 역순으로 App 컴포넌트(최상위 컴포넌트)에 데이터 변경 요청을 전달해야 한다. 💢 하지만 딱 봐도 위의 방법으로 상..

오늘은 6장 Hooks에 대해 알아보겠다 😁 Hooks 리액트 Hooks은 리액트 16.8, 리액트 네이티브 0.59 버전부터 사용할 수 있는 기능이다. Hooks를 이용해서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 1. useState 주로 컴포넌트들의 상태를 관리하기 위해 useState 함수를 사용한다. const [state, setState] = useState(initialState); useState 함수를 호출하면 파라미터로 전달한 값을 초깃값으로 갖는 상태 변수(state)와 그 변수를 수정할 수 있는 세터 함수(setState)를 배열로 반환한다. useState 함수는 관리해야 하는 상태의 수만큼 여러 번 사용할 수 있다. ✅ 상태를 관리하는 변수는 반드시 세터 함수를 이..

5장 할 일 관리 애플리케이션 만들기 이번 장에서는 4장까지 배운 내용을 바탕으로 TODO List 어플리케이션을 만들어보겠다. 5.0 애플리케이션 개요 5.0.1 파일 디렉토리 구조 ├── src │ ├── components │ │ ├── IconButton.js │ │ ├── Input.js │ │ └── Task.js │ ├── App.js │ ├── images.js │ └── theme.js │ ├── assets │ └── 이미지 파일들 └── App.js 5.0.2 세부 기능 등록: 할 일 항목을 추가하는 기능 수정: 완료되지 않은 할 일 항목을 수정하는 기능 삭제: 할 일 항목을 삭제하는 기능 완료: 할 일 항목의 완료 상태를 기록하는 기능 5.0.3 실행 화면 다음은 미리 맛보기로 이 ..

Unable to resolve module @react-native-async-storage/async-storage 에러 해결 💢 How I got this Error 오류는 다음과 같다 expo install @react-native-community/async-storage 위 코드를 cmd창에 입력해서 모듈을 설치해주고, npm start해서 아이폰에서 expo를 실행시키려고 하는데 자꾸 오류가 발생하는 것이다 ㅜㅜ package.json 파일에 모듈 이름과 버전이 나와있는 거 보면 모듈 설치는 잘 된 듯 하다. 뭐가 문제인지 모르겠다. 한글로 된 관련 문서는 없는 듯하니 이제 영어로 열심히 구글링해봐야겠다! ✅ Solution 패키지가 변경되면서 발생하는 에러이다. @react-native-c..

1. node.js 설치 node.js 설치가 필요하다 - 이미 설치했다면 버전 확인만 한 번 해본다 2. Expo CLI 설치 다른 블로그들 보니깐 Expo CLI말고 다른 걸 권장한다던데ㅜ 나에겐 선택권이 없었다... 3. 프로젝트 생성 expo init (프로젝트명) 그리고 여기서 template을 선택하는 게 나오는데, 나는 여기서 맨 위에 있는 blank를 선택했다. 4. 모바일 기기와 연결 아래와 같이 코드를 작성하면 QR코드가 나온다. 모바일 기기에서 Expo go 앱을 다운받고, 아래에 나오는 QR 코드를 인식해서 PC와 모바일 기기를 연결해주면 된다!