탭탭카드놀이) 4/4~4/11 개발내용

 

이번 주에 한 것

- lottie files 적용 

  : 로그인 페이지, 동물카드 등등에 사용했음

 

- firebase로 로그인/ 회원가입 기능 구현 
  :  웹에서 직접 유효성 체크해가면서 구현한 것보다 훨씬 간편하게 구현할 수 있었음

 

- 소스코드 재작성

  : ios로만 작업해놓고 안드로이드에 적용하니 에러 나는 곳이 많았음

    어디에서 발생하는 문제인지 알 수 있는 부분은 수정했지만 불가능한 부분도 꽤 있었고

    시간을 계속 쓸 수 없기에 처음부터 체크하면서 하나하나 만들기로 했음

    이미 했던 부분들을 적당히 복사하고 수정해가면서 작업하니 코드들을 더 깔끔하게 정리할 수 있었고

    처음 개발할 때 신경 쓰지 못한 부분들을 체크할 수 있었음

    약 3일 정도 시간을 사용했지만 과정과 결과를 봤을 때 투자할 만한 가치가 있었다고 생각함

 

- 앱 사용 방식 변경

  원래는 카드를 우-> 좌로 넘기는 방식이었는데 쌓여있는 카드를 한 장씩 없애는 방식으로 변경했음

  그 결과 애니메이션 효과가 좀 더 증가된 앱이 됐음

 

 

- 개발 중 발생한 각종 에러 해결

1. 오디오를 여러 번 실행하면 소리 안 나는 문제 해결

expo-av를 import 해서 사용하는데 load가 중첩되다가 한계치를 넘겨서 소리가 출력되지 않는 문제가 발생했음

ios에서는 문제가 없었고 안드로이드에서만 발생한 이슈라서 오디오 관련 작업을 할 때 체크하지 못했음

결론은 load->play 이후에 unload 하는 과정을 추가했고 setTimeout함수를 통해 일정 시간 뒤에 실행되도록 해서 해결했음

import { Audio } from 'expo-av';

const playSound = async(e) => {
    const sound = new Audio.Sound();
    try {    
        await sound.loadAsync(e);
        await sound.playAsync();
        setTimeout(function(){
            sound.unloadAsync();
        },2500) 
    } catch (error) {
        console.log('CardDefault.js PlaySound error = ', error)
    }
}

 

2. 사진을 보여주는 모달 창의 시작 위치 조절

동물의 사진을 보여주는 모달 창을 열었을 때 최근 위치에서 시작하는 문제가 생겼음

에러는 아니지만 나의 생각대로 흘러가지 않는 문제였기에 수정해야겠다고 생각했음

처음에는 infinite scroll형식으로 구현할까 했는데 그냥 버튼을 누를 때 state값을 변경 -> 리렌더 되는 과정을 통해 해결했음

개발 시간, 코드의 양, 직관성 등 여러 가지 장점이 있는 해결방법이라고 생각함

 

 

3. panresponder와 onpress 같이 사용해서 생긴 문제 해결

Animated를 적용한 컴포넌트에 panHandler를 연결해서 panResponder를 사용하고 있다

해당 컴포넌트를 눌렀을 때는 onPanResponderGrant, onPanResponderStart 이벤트를 줄 수 있고

컴포넌트에서 손을 떼면 onPanResponderRelease, onPanResponderEnd 이벤트를  줄 수 있는데

이것들의 차이점에 대한 문서를 찾기가 어려웠고 이들을 여러 가지 방법으로 직접 사용하면서 알게 된 내용을 정리하고자 함

- <Pressable> 컴포넌트는 onPanResponderGrant, onPanResponderRelease

<View> 컴포넌트는 onPanResponderStart, onPanResponderEnd를 사용할 수 있다

- <Pressable>는 onPress이벤트를 사용할 수 있지만 <View>는 onPress이벤트를 사용할 수 없다

결론 : 이런 차이점들을 잘 이해하고 적절한 위치에 각 컴포넌트를 사용함으로써 원하는 결과를 얻을 수 있었다

(예를 들어 같은 panResonder를 사용하는데 Pressable 컴포넌트와 View컴포넌트에 대해 다른 액션을 할 수 있도록 구현)

문서도 많이 읽을 수 있었고, 개발 외적인 해결책들도 생각할 수 있어서 굉장히 만족스러웠다

 

해결해야 할 것

- 로그인 에러 모달 창 만들기

 alert을 쓰는데 ios는 맘에 들지만 안드로이드 부분이 너무 못생겨서 추가 작업이 필요하다

- 오디오 재생 관련

 ios는 문제없고 안드로이드에서만 발생하는 에러, expo-av 말고 다른 것 적용해보기

- 동물 3단계 선택지 갑자기 뜨는 부분이 어색함

- 정답 체크 애니메이션 (로띠 파일 적용)

- 오답 시 출력할 모달 창 구현

 

다음 주 목표

- 소셜 로그인

- 코드 정리(컴포넌트화)

- 결제 기능

- 동물 asset 추가