응애 프로젝트 진행기(2) - 반응형 작업 및 깃허브 기초 작업

채연·2023년 6월 10일

응애

목록 보기

1/9

🔥이번 스프린트에 진행 작업들

상담 페이지 반응형 작업
끝말잇기 반응형 작업
스무고개 반응형 작업
통계 페이지 레이아웃 작업

반응형 작업

상담 페이지, 끝말잇기, 스무고개 반응형 작업은 같은 형식이었다

하지만, 각 페이지가 다르고 들어가는 내용들이 달라서 각각 페이지마다 따로 작업을 해둔 상태

이제는 반응형 작업을 통하여 어차피 새로 편성을 해야하므로 컴포넌트를 하나 만들어 재사용을 시켜주었다.

컴포넌트 생성

  return !isTablet ? (
    <GamePhone styles={styles} array={array} />
  ) : (
    <GameTablet styles={styles} array={array} />
  );

상담 페이지, 끝말잇기, 스무고개는 모두 게임 탭에 들어가게 되므로 GamePhone, GameTablet 이라는 컴포넌트를 각각 파준 후, styles와 array로 인자를 전해주었다.

핸드폰 화면인지? 태블릿 화면인지?

이러려면 isTablet에 해당하는 반응형을 판단해주는 것이 필요한데, 어떻게 할까 생각하다가 app.js에서 판단해준 후, recoil을 이용하여 태블릿 or 핸드폰을 판단해주도록 변수를 생성하였다.

import { atom } from "recoil";

export const isTabletState = atom({
  key: "isTablet",
  default: false,
});

RN에서 반응형을 얻어오는 건 Dimensions로 할 수 있었다.

  useEffect(() => {
    const updateScreenSize = () => {
      setIsTablet(isTablet());
    };

    Dimensions.addEventListener("change", updateScreenSize);

    return () => {
      Dimensions.removeEventListener("change", updateScreenSize);
    };
  }, []);

-> useEffect로 화면이 변할 때마다 태블릿인지 아닌지를 tablet 에 저장

하지만!

역시 한 번에 되지 않는 건 코딩 불변의 진리

App.js에서 Recoil을 선언해주는데, 거기서 바로 recoil을 사용하다보니 recoil이 선언도 되지 않는 상태에 recoil을 사용하는 격이 되었다.

React에선 이 오류를 index.js에서 해주는 걸로 해결했었는데, RN에서는 index.js가 없어 포기..!

두 번째 시도한 방법은 함수를 만드는 것이었다!

함수를 하나 만들어 return 값으로 태블릿인지 아닌지 판단하면 아주 좋겠다는 생각!

하지만, 함수를 만드니 useEffect가 작동하지 않았다.. 초기 값은 잘 불러오는데 사이즈가 조정될 때마다 움직이지 않음,,,

포기하고 그냥 매페이지마다 써야겠다.. 하며
~~(뒤에 다른 방법으로 성공한 거 있어욧)~~

import { Dimensions } from "react-native";

const isTablet = () => {
  const width = Dimensions.get("window").width;
  return width > 600;
};

export default isTablet;

이 정도만 함수로 만들어놓았다.

팀원들에게도 내가 찾아놓았던 useEffect 방식 공유 후 사용법도 같이 전달!

깃허브 이슈 체크

이렇게해서 반응형 작업까지 무사히 완료!!

-> 생성해놓은 이슈 할 일 체크 후 닫아주고

PR을 올리려는데!

PR

PR을 뭔가 깔끔하게 쓰고 싶다는 생각이 확 들었다!

바로 구글링 구글링 하여, PR 본문 템플릿을 따온 후 우리 페이지에 맞게 변형시켰다

적용시켰으면 뭐다?!

바로 공유!

pr도 올리면 혼자 머지 시키는 게 의미 없을 거 같아 코드 리뷰를 진행해보자 제안하였당

그렇게 해서 완성된 PR!

이게 완벽한 PR 틀이라곤 할 수 없겠지만 내 현재 지식 상에선 완벽하다..ㅎ

더 좋은 틀이 있다면 즉시 수정할 계획 200%!

꽤 뭔가 많이 얻어가고, 깔끔하게 정리된 것 같아 햄복하다

그리고 다음날, 내가 해야할 스프린트가 하나 더 남았지

바로 통계 페이지 만들기를 진행 중으로 옮기고,
이슈, 브랜치 생성 후 개발 고고씽 ✨

통계 페이지 개발

이것도 레이아웃만 잡는 것보다 클릭하면 작동까지 해야한다고 생각하여 내가 한다 지원하였닷

코드를 열어 내가 어제 했던 작업을 복사하여 반응형이 되도록 설정한 후, 작업을 진행!

반응형 코드 수정하기

제일 처음 코드를 짤 때, 우린 모두 노란 바탕이고 패딩이 필요했다.

이럴 거면 Layout 컴포넌트를 하나 만들까?

하여 만들게 된 Layout 컴포넌트!!

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from "react-native-responsive-screen";
import isTablet from "../utils/validationSize";

// 반응형이 필요한 페이지에서 
// const [isTabletScreen, setIsTabletScreen] = useState(isTablet());
// 이와 같이 state 만들어 전해주면 true, false 값으로 값이 리턴이 된다.
function StatsPage({ children, setIsTabletScreen }) {
  useEffect(() => {
    const updateScreenSize = () => {
      setIsTabletScreen(isTablet());
    };

    Dimensions.addEventListener("change", updateScreenSize);

    return () => {
      Dimensions.removeEventListener("change", updateScreenSize);
    };
  }, []);

  return <View style={styles.container}>{children}</View>;
}

export default StatsPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F3E99F",
    padding: wp("5%"),
  },
});

Layout 컴포넌트를 만들다보니 여기에 반응형을 넣으면 아주 안성맞춤이었다

바로 적용!

왜 어제 이 생각을 못했었지,,

통계 페이지에 Layout 컴포넌트 적용

const StatsPage = () => {
  // 태블릿 사이즈인지 아닌지 판별해주는 state
  const [isTabletScreen, setIsTabletScreen] = useState(isTablet());
  
  // 빈번 창인지, 위험창인지 판별해주는 state
  const [isFrequent, setIsFrequent] = useState(true);

  return (
    // Layout 컴포넌트로 감싸주어, 노란 배경 + 패딩 + 반응형 효과
    <Layout setIsTabletScreen={setIsTabletScreen}>
      <Text style={{ fontWeight: "bold", fontSize: wp("8%") }}>
        {isFrequent ? "자주 대화한 내용" : "위험 의심 내용"}
      </Text>
      <View
        style={{
          flex: 1,
          backgroundColor: "#FDFBEC",
          marginTop: heightPercentageToDP("3%"),
          borderRadius: "2%",
        }}>
        <View style={{ display: "flex", flexDirection: "row" }}>
          <TouchableOpacity
            style={{
              flex: 1,
              height: hp("6%"),
              justifyContent: "center",
              alignItems: "center",
              borderBottom: isFrequent ? "1px solid #000000" : undefined,
            }}
            onPress={() => setIsFrequent(true)}>
            <Text
              style={{
                textAlign: "center",
              }}>
              자주 대화한 내용
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flex: 1,
              height: hp("6%"),
              justifyContent: "center",
              alignItems: "center",
              borderBottom: !isFrequent ? "1px solid #000000" : undefined,
            }}
            onPress={() => setIsFrequent(false)}>
            <Text style={{ textAlign: "center" }}>위험 의심 내용</Text>
          </TouchableOpacity>
        </View>
        {isFrequent ? <Frequent /> : <Danger />}
      </View>
    </Layout>
  );
}

export default StatsPage;