인프런 커뮤니티 질문&답변

102강 강의를 듣고 있는데요,
react-native-reanimated-carousel 설치 위해 노션에 링크대로
npm install react-native-reanimated-carousel@3.3.0 명령어로 설치하고

그 이후 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 터미널에서 설치 완료하였습니다

질문 1.

이후babel.config.js 파일에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해야
하는데 문제는 babel.config.js 파일이 존재하지 않아 어디에 플러그인 작성해야 하는지 모르겠습니다 첨부 사진

package.json에 디펜던시를 보면 아래와 같아요

"react": "19.1.0",
    "react-native": "0.81.5",
    "react-native-reanimated-carousel": "^3.3.0",
    "react-native-reanimated": "~4.1.1",
    "react-native-gesture-handler": "~2.28.0"

질문 2. Babel 설정 위해 Cache 초기화 하는 부분도 위에 질문1이 순서대로 정상적으로 진행이 되지 않아
스킵했는데 babel.config.js에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시
초기화 하는 것이 옳지요?

질문 3
102강 시작부터 ~ 18분 56초 까지 타이핑한 grab-market-mobile의 App.js
소스 내용
아래와 같은데 이것을 실행하면 사진과 같이 안드로이드 스튜디오(runtime not ready)에서 에러 발생 아래 App.js 는 강의 전체 완성본 소스가 아니라 에러가 난 시점까지의 소스 입니다

질문4
->여기서 Carousel 부분 살펴보면 아래 App.js 소스에서 아래와 같이 작성하는 것 맞나요?
만약 아래 작성 소스가 다르면 어떻게 작성 해야하는지 댓글에 소스 적어주세요
<Carouseldata={banners}width={Dimensions.get("window").width} height={200}autoPlay={true}renderItem={(obj)=>{ return( <TouchableOpacity> <Imagesource={{uri:obj.item.imageUrl}} /> </TouchableOpacity> ) }} />

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity } from "react-native";
import BasketballImage from "./assets/products/basketball1.jpeg";
import Avatar from "./assets/icons/avatar.png";
import {API_URL} from "./config/constants";
import axios from "axios";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/ko";
import Carousel from "react-native-reanimated-carousel";
dayjs.extend(relativeTime);
dayjs.locale("ko");

export default function App() {
  const [products, setProducts] = React.useState([]);
  const [banners, setBanners] = React.useState([]);
  React.useEffect(()=>{
    axios.get(`${API_URL}/products`).then((result)=>{
      setProducts(result.data.products);
    }).catch((error)=>{
      console.error(error);
    })
    axios.get(`${API_URL}/banners`).then((result)=>{
      setBanners(result.data.banners);
    }).catch((error)=>{
      console.error(error);
    })
  },[])

  return ( <View style={styles.container}>
    <ScrollView>
      <Carousel 
        data={banners}
        width={Dimensions.get("window").width}
        height={200}
        autoPlay={true}
                
        
        renderItem={(obj)=>{
          return(
            <TouchableOpacity>
              <Image source={{uri : obj.item.imageUrl}} />
            </TouchableOpacity>
          )
        }}
      />
     <Text style={styles.headline}>판매되는 상품들</Text>
     <View style={styles.productList}>
     {
      products.map((product, index)=>{
        return (<View style={styles.productCard} key={product.id}>
          {product.soldout === 1 && <View style={styles.productBlur}/>}
      <View>
        <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} resizeMode={"contain"} />
      </View>
      <View style={styles.productContents}>
        <Text style={styles.productName}>{product.name}</Text>
        <Text style={styles.productPrice}>{product.price}원</Text>
        <View style={styles.productFooter}>
        <View style={styles.productSeller}>
          <Image style={styles.productAvatar} source={Avatar} />
          <Text style={styles.productSellerName} >{product.seller}</Text>
        </View>
        <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text>
      </View>
     </View>
    </View>);
      })
     }
     </View>
     </ScrollView>
    </View>
  
);
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 32,

  },
  productCard: {
    width: 320,
    borderColor: 'rgb(230,230,230)',
    borderWidth:1,
    borderRadius: 16,
    backgroundColor: "white",
    marginBottom: 8,
   

  },
  ProductImage :{
    width: '100%',
    height: 210
  },
  productContents : {
    padding: 8
  },
  productSeller : {
    flexDirection: 'row',
    alignItems: 'center'
  },
  productAvatar: {
    width:24,
    height:24,
  },
  productFooter: {
    flexDirection: 'row',
    justifyContent:'space-between',
    alignItems: 'center',
    marginTop: 12,
  },
  productName : {
    fontSize: 16
  },
  productPrice: {
    fontSize: 18,
    fontWeight: '600',
    marginTop: 8
  },
  productSellerName: {
    fontSize: 16,

  },
  productDate: {
    fontSize: 16,
  },
  productList: {
    alignItems:"center",
  },
  headline : {
    fontSize: 24,
    fontWeight: "800",
    marginBottom:24
  },
  productBlur : {
    position: 'absolute',
    top: 0,
    bottom: 0,
    right: 0,
    left: 0,
    backgroundColor: "#ffffffaa",
    zIndex: 999,
  },
  
  
});

에러 해결 차근차근 알려주셨으면 좋겠습니다
---------------------------------------------------------------------------------------------
질문 5 babel.config.js 없기에 프로젝트 루트에 파일을 직접 생성하고 module.exports = {

presets: ['babel-preset-expo'],

plugins: ['react-native-reanimated/plugin'],

};
위 소스입력 후 저장 완료 후 캐시 초기화를 위해 expo start -c 까지 차례대로 수행 후 ngrok과 모바일/서버로 연동 후 결과가 위 버전 에러와 다르게 새로운 에러가 발생했습니다

어떻게 해결하죠?

질문6 아래 게시글 답변대로 질문 2까지 수행 하니 아래와 같은 에러가 발생

질문7 아래게시글 답변에 질문 3 및 3-1은 하라는대로 실행해보면 에러가 발생할까 실행을 안했는데 3개를 입력해 줘도 괜찮은건가요?
명령어 1: npm uninstall react-native-reanimated-carousel react-native-reanimated
명령어 2:npm install react-native-reanimated-carousel@3.3.0 react-native-reanimated@^2.0.0
명령어 3:expo install react-native-gesture-handler

질문8 잘 되던 안드로이드 스튜디오가 로딩을 왜 못할까요?