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

그랩님, 강의 잘 듣고 있습니다.

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

그 이후 한번 더 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 vs code 터미널에서 성공적으로 설치를 완료하였습니다.

질문 1.

그 이후babel.config.js 파일에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해주려고
하는데요, 문제는 babel.config.js 파일이 어디에도 존재하지 않아서 어디에서 플러그인 문구를 입력해 주어야 하는지 모르겠습니다. 아래는 첨부 사진입니다. 어떻게 해야 위 플러그인 문구를 입력 가능할까요?

참고로 grab-market-mobile의 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
react-native-reanimated-carousel 소스 내용이
아래와 같은데요, 이것을 실행하면 첨부한 사진과 같이 안드로이드 스튜디오(runtime not ready)에서 에러가 납니다. 참고로 아래 App.js 소스는 강의 전체 완성본 소스가 아니라 에러가 난 시점까지의 소스 입니다.

질문3-1.
-->그리고 여기에서 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,
  },
  
  
});

그랩님께서 진행하시는 강의처럼 에러가 뜨지 않고 제대로 결과값이 나와야 하는데, 아무리 해도 어떻게 에러를 해결해야 하는지 차근차근 알려주셨으면 좋겠습니다.
아직 그랩님의 강의 102강 처음부터 ~ 19분 안되는 정도까지 진행하다 위 에러를 만나게 되어 해결이 안되고 있어서 더 진행을 하지 못하고 있어서 질문을 남깁니다.

질문 4.

아래 AI 인턴 답변을 보고 vs code의 grab-market-mobile에서 babel.config.js을 프로젝트 루트에 파일을 직접 생성하고 module.exports = {

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

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

};

위 소스입력 후 저장을 완료 한 뒤 캐시 초기화를 위해 vs code grab-market-mobile의 터미널에서
expo start -c 까지 차례대로 수행한 후 ngrok과 grab-market-server와 안드로이드 스튜디오 에뮬레이터 실행 후 마지막으로 grab-market-mobile로 연동 실행 후 결과가 위 버전 에러와 다르게 또 새로운 에러가 발생하게 되었습니다. 아래 사진 첨부합니다.

이 점은 어떻게 해결해야 하는지요?

질문 5.

그리고 Vs code에서 아래 인턴님이 답변 준대로 질문 2까지 수행 하니 아래와 같은 에러가 발생하여 사진을 첨부합니다.

이 에러는 어떤 것을 의미하며 해결하는 방법은 무엇인가요?

질문 6.
AI 인턴님이 남겨주신 <질문 3 및 질문 3-1>에서는 "package.json에서 관련 패키지를 제거하세요"라고 써있는데요, 이것은 구체적으로 무엇을 어떻게 수행하는 건가요? 예를들면 어떤 명령어를 입력해야 합니다와 같이 알려주시면 좋겠습니다.

질문 7. (확인 차원에서 재 질문 합니다.)Carousel 소스가 궁금한데요, 그랩님께서 강의에서 찍었을 당시 오픈소스인데 오래된 것이라 다른 것으로 변경하여 재 촬영 해주셨다고해서 조금 햇갈린데요,

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

질문 8. AI 인턴님이 남겨주신 답변에 관한 질문 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

확인하시면, 그랩님께서 꼭 답변 부탁 드립니다.