리액트네이티브(17)
-
탭탭카드놀이) lottie files 적용하기
숫자나 글자 그림은 직접 제작하는 게 통일성이 있고 사용하기 좋았지만, 동물은 좀 더 움직임이 있으면 좋을 거라 생각했다 기존에는 아주 약간 다른 그림파일 2개를 준비한 뒤 한장만 보여주고 클릭했을 때 나머지 한 장을 보여주는 식으로 애니메이션을 만들었는데 그림을 그리는 시간을 내는것도 쉽지 않고 그리다 보니 욕심이 나서 하나하나 만드는데 체력적, 정신적으로 굉장히 많은 에너지를 쏟다 보니 정작 중요한 개발을 못하는 사태가 발생했다 그러던 와중 맘에 드는 애니메이션을 사용할 수 있는 lottie files를 찾게 되었고 적용했던 과정을 작성해보고자 한다 https://github.com/coqoa/tabtabcard GitHub - coqoa/tabtabcard Contribute to coqoa/tab..
2022.04.09 -
탭탭카드놀이) 3/28~4/4 개발내용
개발 내용 1. 동물 메뉴 외의 메뉴 구현 - 한글 낱말, 알파벳, 숫자 구현 (+ 각 메뉴에 간단한 아이콘 제작해서 넣을 예정) 2. 오디오 파일, 이미지 파일 제작 및 사용 오디오 파일은 직접 녹음했고(약 300여 개 파일) 이미지 파일은 아이패드 procreate로 그리거나 adobeXD로 제작했음 3. 컴포넌트화(중복제거) 동물카드 3단계에서 선택지를 만드는데 랜덤배열을 생성한 뒤 그 배열에 맞는 데이터를 넣는 과정이 필요했다 각 선택지마다 다른 panResponder를 쓰거나 style을 적용해야 했지만 공통적으로 사용하는 부분도 굉장히 많아서 공통 사용하는 부분을 함수화하고 props를 통해 개별 적용해야 할 부분들을 처리했다 4. 파일/변수 명명법 수정 생각도 많고 개발하면서 계획이 자꾸 바..
2022.04.09 -
탭탭카드놀이) 코드정리 WordPlay.js
앞단 작업이 거의 끝나서 부분 부분 정리할 겸 포스팅합니다. 전체코드는 제 깃헙을 참고하시길 바랍니다. https://github.com/coqoa/tabtabcard import React, { useState, useEffect, useRef } from "react"; import {View, Dimensions, PanResponder, Animated, Pressable, TouchableOpacity } from "react-native"; import { Audio } from 'expo-av'; import styled from "styled-components"; import { colors } from "../component/Color"; import { WordCardLevel } ..
2022.04.02 -
탭탭카드놀이) 코드정리 Menu.js
앞단 작업이 거의 끝나서 부분 부분 정리할 겸 포스팅합니다. 전체코드는 제 깃헙을 참고하시길 바랍니다. https://github.com/coqoa/tabtabcard // Menu.js import React,{ useRef } from "react"; import styled from "styled-components"; import {Animated, Pressable, View} from "react-native"; import { Audio } from 'expo-av'; import { colors } from "../component/color"; const BG = styled.ImageBackground` flex: 1; width: 100%; height: 100%; justify-co..
2022.04.01 -
탭탭카드놀이) 코드정리 MenuStack.js
앞단 작업이 거의 끝나서 부분 부분 정리할 겸 포스팅합니다. 전체 코드는 제 깃헙을 참고하시길 바랍니다. https://github.com/coqoa/tabtabcard //MenuStack.js import React from "react"; import {createNativeStackNavigator} from "@react-navigation/native-stack" import Menu from "../screens/Menu"; import WordPlay from "../screens/WordPlay"; const NativeStack = createNativeStackNavigator(); // Menu와 WordPlay를 Screen으로 가진다 const MenuStack = () => {..
2022.04.01 -
탭탭카드놀이) 코드정리 Stack.js
앞단 작업이 거의 끝나서 부분 부분 정리할 겸 포스팅합니다. 전체 코드는 제 깃헙을 참고하시길 바랍니다. https://github.com/coqoa/tabtabcard //Stack.js import React from "react"; import {createNativeStackNavigator} from "@react-navigation/native-stack" import Login from "../screens/Login"; import Signup from "../screens/Signup"; import MenuStack from "./MenuStack"; const NativeStack = createNativeStackNavigator(); // 스택네비게이터 (Login, Signup,..
2022.04.01