리액트 네이티브로 만든 애플 일기앱 클론코딩

Web Demo
(IOS 기준으로 제작되었기 때문에, 웹 데모에서는 작동하지 않는 기능이 있습니다.)

개요

목적

모바일 프로그래밍 수업의 개인 프로젝트 과제를 위하여 제작하였습니다.

개발 기간

24.05.18 ~ 24.06.04

주제 / 필수 조건

아래 3가지 필수 조건을 포함한 자유 주제의 과제입니다.

• 컴포넌트 10개 이상 사용
• 화면 3개 이상 사용
• State, Props, Event 사용

기술 스택

프로젝트 프리뷰

유저 로그인/회원가입

로그인 화면	회원가입 화면	메인 화면

일기 작성

일기 작성 화면	일기 작성 화면2	일기 작성 완료 상태

일기 수정/삭제

일기 더보기 버튼	일기 수정 화면	일기 삭제 확인

기타

긴 일기 펼치기	사진 전체 보기	유저 정보 화면

시연 영상

journal-preview.mov

직접 실행하기

사전 작업

1. npm 설치
2. 파이어베이스 프로젝트 생성

파이어베이스 세팅

1. Authentication의 이메일/비밀번호 활성화
2. Firestore Database 활성화

규칙을 아래와 같이 설정

rules_version = "2";

service cloud.firestore {
match /databases/{database}/documents {

    // 사용자의 메모에 대한 규칙 설정
    match /users/{userId}/memos/{memoId} {
        // 사용자가 자신의 메모에 대해 읽고 쓸 수 있음
        allow read, write: if request.auth != null && request.auth.uid == userId;
    }

  }
}

3. Storage 활성화

규칙을 아래와 같이 설정

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /images/{imageId} {
      allow write: if request.auth != null;
      allow read, delete: if request.auth != null && request.auth.uid == resource.metadata.uid;
    }
  }
}

프로젝트 세팅

1. 레포지토리 클론

git clone https://github.com/ICE0208/journal-with-react-native

2. NPM 패키지 설치

npm install

3. 파이어베이스 코드 수정

firebaseConfig.ts에 있는 firebaseConfig 객체(16 라인)를 본인의 파이버베이스 구성 내용으로 수정
파이어베이스 프로젝트 설정 > 일반 > 내 앱 에서 구성 내용 확인 가능

프로젝트 실행 및 확인

1. 실행

npm run start

2. 확인

Expo App 혹은 Web을 이용하여 확인

(자세한 내용은 공식문서를 참고)