dev.to 앱은 내 기술을 향상시키기 위해 네이티브 클론을 반응합니다 - 블로그 일기

함께 안녕

나는 얼마 전에 React Native를 사용하기 시작했고 내 기술을 향상시키는 방법을 몰랐습니다.
그래서 저는 dev.to 앱을 다시 빌드하기로 결정했습니다.

이제 첫 번째 단계를 완료했으며 내 dev.to 클론에 대한 블로그 시리즈로 시작합니다.



이 앱은 EXPO와 결합된 React Native를 기반으로 하며 Google Firebase를 데이터베이스로 사용합니다.

현재 앱은 데이터베이스에서 검색되는 기사 피드와 페이지 탐색, 상단 표시줄 및 아바타 아이콘을 통해 사용자 모달을 통해 액세스할 수 있는 일부 화면으로 구성됩니다.

여기에서 전체 프로젝트를 찾을 수 있습니다: https://github.com/Gismo1337/dev-to-clone

모든 초보자는 이 클론에서 나와 함께 작업하도록 초대됩니다. 그래서 우리는 Github로 작업하는 방법을 함께 배우고 실수가 발생하더라도 세상은 끝나지 않을 것입니다.

readme 파일에 단계별 가이드가 있습니다. 따라서 자신의 컴퓨터에서 앱을 시작할 수 있습니다.

물론 교육이나 dev.to 이외의 다른 목적으로 앱을 사용하는 것은 허용되지 않습니다. dev.to에서 요청하면 프로젝트를 오프라인으로 전환할 수 있습니다.

제 영어를 실례합니다. 저도 계속 노력중입니다 =)

----- 읽어보기 -----

요구 사항

Expo
Firebase

설치

1) 프로젝트 다운로드

터미널에서 프로젝트 경로를 엽니다.

  git clone https://github.com/Gismo1337/dev-to-clone
  cd dev-to-clone
  npm install  

2) 데이터베이스 생성

방문 https://console.firebase.google.com/

새 프로젝트 만들기

프로젝트 이름 지정 -> 다음 클릭

분석 비활성화 -> 다음 클릭

생성될 때까지 대기 -> 다음 클릭

탐색에서 'Firestore 데이터베이스'를 선택했습니다

.

데이터베이스 생성을 클릭합니다

.

'테스트 모드에서 시작' 선택 -> 다음 클릭

사용자 위치 근처의 서버 목적지 선택 -> 다음 클릭

탐색 맨 위에서 프로젝트 개요를 클릭합니다

.

아이콘을 클릭하여 Firebase를 웹으로 추가

앱 이름 지정

생성을 클릭합니다

.

다음과 같이 필요한 자격 증명이 표시됩니다.

apiKey: "AIzaSyAtxgrnlAtGXV-OdwMVngC6KmLZXG1BQwQ",
authDomain: "test-bf771.firebaseapp.com",
projectId: "test-bf771",
storageBucket: "test-bf771.appspot.com",
messagingSenderId: "920493813599",
appId: "1:920493813599:web:a35040e0933196768390ea"

나중에 임의의 txt 파일에 저장합니다.

3) 환경 파일

환경 템플릿 복사
파일 이름을 .env로 변경
.env 파일을 열고 무작위 txt 파일의 자격 증명을 .env 파일에 붙여넣습니다.

API_KEY=AIzaSyAtxgrnlAtGXV-OdwMVngC6KmLZXG1BQwQ
AUTH_DOMAIN=test-bf771.firebaseapp.com
PROJECT_ID=test-bf771
STORAGE_BUCKET=dtest-bf771.appspot.com
MESSAGING_920493813599
APP_ID=1:920493813599:web:a35040e0933196768390ea

4) 더미데이터

https://console.firebase.google.com/ 열기 및 'Firestore 데이터베이스' 열기

'게시물'이라는 모음 만들기

임의의 ID와 다음 필드를 사용하여 문서를 만듭니다.

author: 'John Doe' [string]
comments: 13 [number]
date: 'Nov 22' [string]
id: 1 [number]
imagePath: '***PATH_TO_IMAGE_HERE***' [string]
likes: 41 [number]
readTime: 7 [number]
tag1: '#JavaScript' [string]
tag2: '#ReactNative' [string]
tag3: '#Composer' [string]
text:'Lorem ipsum dolor sit amet consectetur adipisicing elit.' [string]
title:'Top 10 React Native' [string]

이 패턴으로 더 많은 더미 데이터를 자유롭게 추가하십시오.

4) 엑스포 서버 시작

터미널에서 프로젝트 경로를 엽니다.

다음을 실행하여 (재)클린 캐시로 서버 시작
expo start -c