inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

아바타 커뮤니티앱 만들기 (React Native Expo)

[5-1] 글 작성 기능 연동 + 키보드 이슈 대응하기

[5-1] 글작성 후 저장이 되지 않습니다.

해결된 질문

326

주현

작성한 질문수 3

0

질문 작성시 꼭 참고해주세요

윈도우에서 개발중이고 백엔드 서버 잘셋팅 되어 있습니다(로그인 부분은 잘 넘어갔습니다)

다만 글 저장이 안되어서 도저히 봐도 모르겠어서 올려주신 소스 그대로 다운 받아 다시 설치 후 해봐도 저장이 되지 않습니다. 콘솔에 오류도 안뜨고 디버깅 이것저것 해봐도 도통 모르겠습니다 (소스 받아서 해도 안되서요 ㅠㅠ)

 

다만 axios.ts에서 안드로이드 저 주소가 되지 않아

제 로컬 아이피 주소를 했더니 로그인 부분이 잘 넘어갔습니다. 이 주소는 그대로 해도 그냥 제 로컬 아이피 주소를 해도 어찌되었던 저장은 되지 않습니다. 여기서 진도가 나가지 않아 답답하네요 ㅠㅠ

export const baseUrls = {
  android: "http://10.0.2.2:3030",
  ios: "http://localhost:3030",
};

javascript react react-native typescript react-query

답변 1

0

Kyo

시뮬레이터/실기기 어떤 환경인지 모르겠지만 아이피주소로 했을때 로그인이잘되었다면 회원가입이 잘된것이고 디비에도 유저가 잘 생생되었다는것인데요. 그럼 백엔드 연결에는 문제가 없는것같고 작성이 안된다면 핸들러가 잘 실행되는지, api는 동작하는지, 리턴값은 오는지 등을 하나씩 확인해보셔야할것 같습니다.

0

주현

하루종일 붙들고 있었는데 도통 해결이 되지 않아서 강의 도중하차 합니다...ㅠㅠ 해결방법이 제겐 보이지 않네요 ㅎㅎ..

0

Kyo

pdadmin에서 회원데이터는 잘 쌓인것을 확인하셨나요? 글작성이 안되는 코드 깃헙으로 올려주시면 저도 확인해보겠습니다!

0

주현

네 회원데이터는 잘 쌓이는걸 확인했구요 write.tsx에서 아래와 같이 쓰면 저장이 잘 되는것도 확인했습니다. 상단에 버튼만 적용이 안되더라구요

 <FormProvider {...postForm}>
      <KeyboardAwareScrollView contentContainerStyle={styles.container}>
        <TitleInput />
        <DescriptionInput />
        <VoteAttached />
        <ImagePreviewList imageUris={postForm.watch().imageUris} />
        <TouchableOpacity
          onPress={postForm.handleSubmit(onSubmit)}
          style={{
            backgroundColor: "orange",
            padding: 16,
            borderRadius: 8,
            marginTop: 16,
          }}
        >
          <Text style={{ color: "white", textAlign: "center" }}>
            테스트 저장
          </Text>
        </TouchableOpacity>
      </KeyboardAwareScrollView>

      <PostWriteFooter />
      <VoteModal />
    </FormProvider>

 

 

혹시 컴포넌트나 뭘 잘못 불러왔나 싶어서 기본 버튼으로 테스트 해봤는데 눌렀다는 콘솔이 안찍히더라구여 그래서 여러가지로 확인을해봤더니

        headerRight: () => {
        console.log("Rendering header button");
        return (
          <Button
            title="저장"
            onPress={() => {
              console.log("Header button pressed");
              postForm.handleSubmit(onSubmit)();
            }}
          />

 

headerRight 여기문제 같아요 왜냐면 헤더에 <- (뒤로가기) 버튼도 눌리진 않더라구여 어떻게 하면 해결 할 수 있을지 몰라서 우선 내일 더 해보도록하겠습니다 ㅠㅠ 제가 초보라 어렵네요^^;...

 

강의자료 올려주신거 그대로 받아서 모듈 다 설치하고 디비 연결해도 똑같더라구요ㅠㅠ

회원가입만 잘되고 직접 글쓰기 버튼에서만 글 작성이 잘 되영 ㅠㅠ

0

Kyo

그럼 백엔드연결은 문제가없고, 헤더 문제가 맞겠네요! 코드를 일부분이 아닌 깃헙으로 전체를 올려주시면 저도 실행해서 확인해보겠습니다.

0

주현

이렇게 친절히 답변 달아주셔서 너무 감사합니다 ㅠㅠ

https://github.com/webseed87/avatar-community

 

git 주소 입니다 테스트 글쓰기 버튼으론 디비에 잘 저장 되는거 확인했습니다.

상단만 저장 버튼이 안먹히더라구요

0

주현

결국 해결하긴 헀습니다 ios에서는 문제가 없었는데 안드로이드에서 문제가 있었어요 ㅠㅠ

https://github.com/react-navigation/react-navigation/issues/7052

이글을 참고해서 아래처럼 바꾸니 되긴합니다만 저렇게 써도 되는지 궁금합니다 ㅠㅠ

제가 맥이 아니라 윈도우고 안드로이드 환경에서만 테스트가 가능합니다.

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <CustomButton
          label="저장"
          size="medium"
          variant="standard"
          onPressOut={postForm.handleSubmit(onSubmit)}
        />
      ),
    });
  }, []); 

0

Kyo

 

저도 찾아보니 cli에선 발생하지 않았던것 같은데, expo 안드로이드 기기에서 발생하는 이슈로 보입니다.

링크주신 이슈뿐만아니라 여러 이슈들을 찾아볼 수 있었고 (https://github.com/expo/expo/issues/29489)
(https://github.com/expo/expo/issues/30032)

저 또한 실제 안드로이드 기기에서 해당 이슈를 재현할 수 있었습니다! 저는 시뮬레이터에선 재현이 안됐는데 실기기에선 재현이 되네요.

onPressIn 이나 onPressOut으로 해결했다는 코멘트들이 많았는데요. 이렇게 해결하는것이 좋아보입니다. 또 다른 방법으로는 onPress와 함께 pressRetentionOffset={1000} 속성을 지정해도 동작합니다.

 

 

0

Kyo

모든 Pressable에서 onPressIn또는 onPressOut props를 추가하거나, Pressable을 한번 래핑하는 컴포넌트를 만들어서, Pressable를 사용하는 대신 새로 만든 컴포넌트로 대체하는 방법이 좋을것 같습니다.

 

예시)

import { ReactNode } from "react";
import { Pressable, PressableProps, Platform } from "react-native";

interface CustomPressableProps extends PressableProps {
  children: ReactNode;
}

function CustomPressable({ children, ...props }: CustomPressableProps) {
  const pressHandlerProps =
    Platform.OS === "android"
      ? { onPressIn: props.onPress || props.onPressIn }
      : { onPress: props.onPress };

  return (
    <Pressable {...props} {...pressHandlerProps}>
      {children}
    </Pressable>
  );
}

export default CustomPressable;

0

주현

친절한 답변감사합니다!!

0

먼길

저의 경우 onPress, onPressOut 모두 정상 작동했습니다. 다만 다른 분이 질문한 것처럼 navigation.setOptions()로 저장 버튼 만든 것은 루트 레이아웃에만 적용이 되어서 일단 루트 레이아웃의 네비도 활성화시킨 후 post 스크린은 이중 네비로 진행하고 있습니다.

0

먼길

네비 문제 해결 봤네요. 엑스포 라우터를 5.0.3에서 5.0.6으로 업글하니까 그냥 해결됐습니다 ㅎㅎ

secureTextEntry 설정에 관해

0

58

2

expo 55 tabs 사라짐 이슈

0

83

2

백엔드도 궁금합니다!

1

86

1

댓글 버튼 하단에 고정되지 않는 이슈

0

53

1

SafeAreaView 적용 기준 문의

0

82

2

스크린 옵션 아이콘

0

56

2

[Note] 안드로이드 네비게이션 헤더 이슈 안내

0

67

2

ActionSheet

0

87

1

안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의

0

99

1

iOS 빌드 후 실기기에서 앱 시작

1

71

1

[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련

0

84

2

클라이언트 사이드에서 세션 관련 질문

0

82

2

Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의

0

113

1

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

0

63

1

Expo 54 버전 ios에서 headerLeft

1

140

2

어플 개발 후 배포 시에 주의할 사항이 있을까요?

0

79

1

코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?

0

92

1

텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?

0

78

2

Axios Network error...

0

151

2

강의는 52버전인데 expo가 현재 54버전이에요

0

310

1

[TIP] SafeAreaView 사용할 때마다 자꾸 ios에서 위아래가 빵꾸 나시는 분들 필독

0

238

2

키보드 이슈 관련 해결 질문

0

74

1

android header를 ios처럼 바꾸기

0

70

1

CustomButton 코드 버튼 관련 질문

0

66

1