[팀 프로젝트] 스케줄러 모바일 어플리케이션 구축

💡 Project Info

프로젝트명: KnockKnock

팀명: 4-Others

기간: 5월 21일 ~ 7월 말 (약 2개월)

플랫폼: iOS / Android (React Native)

한 줄 소개: 실사용이 가능한 개인화된 일정 관리 앱 (To-Do List 개선 프로젝트)

1. 기획 및 초기 세팅

화면 기획서

📅 기획 배경

🛠 기술 스택 선정: React Native CLI

⚙️ 환경 설정 (Troubleshooting)

$ npm install typescript @types/react @types/react-native --save-dev
$ react-native init front

2. 핵심 기능 구현

Splash Screen을 활용한 자동 로그인

import AsyncStorage from '@react-native-async-storage/async-storage';

// 데이터 접근
const storageGetValue = async (key: string) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value !== null ? JSON.parse(value) : null;
  } catch (e: any) {
    console.log(e.message);
    return null;
  }
};

// 데이터 저장
const storageSetValue = async (key: string, value: any) => {
  try {
    if (value !== null) {
      await AsyncStorage.setItem(key, JSON.stringify(value));
    }
  } catch (e: any) {
    console.log(e.message);
  }
};
// ...삭제 및 리셋 함수 포함

🤔 Retrospective

간단한 방법이지만, 보안이 중요한 실무에서는 EncryptedStorage나 키체인 같은 더 보안성이 높은 저장소를 고려해야 할 것 같다.

회원가입 프로세스 리팩토링 (Stack → Tab)

// SignUpTab.tsx
const SignUpTab: React.FC<onLoginProps> = ({onLogin}) => {
  // ...Progress Bar 로직 생략
  return (
    <SafeAreaView style={{flex: 1}}>
      <Tab.Navigator tabBar={props => <></>}> {/* 탭 바 숨김 */}
        <Tab.Screen name="SignAgree" component={SignAgree} />
        <Tab.Screen name="SignPassword" component={SignPassword} />
        <Tab.Screen name="SignEmail" component={SignEmail} />
        {/* ... */}
      </Tab.Navigator>
    </SafeAreaView>
  );
};

3. 소셜 로그인 (OAuth2) 도전과 실패, 그리고 해결

실패: React Native Webview

성공: Firebase SDK

const socialLogin = async (providerType: 'GOOGLE' | 'KAKAO') => {
    try {
      if (providerType === 'GOOGLE') {
        const userInfo = await GoogleSignin.signIn();
        // 백엔드에 ID Token 전달
        postId(userInfo.user.id, providerType);
      } 
      // ... Kakao 로직
    } catch (error) {
      console.log('Login Failed', error);
    }
};

4. 앱 배포 (Google Play Store)

1. Package Name 변경

2. Keystore (서명 키) 생성

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

3. 빌드 및 최적화

4. 스토어 등록 및 심사

마치며