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

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

다름이 아니라 궁금한 사항(=에러 해결방법)이 필요해서 글을 남기게 되었습니다.

101강을 듣고 있는데요 Axios 에러(400)가 안드로이드 스튜디오 에뮬레이터에서 발생하고 있습니다.

일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후결과를 보려하는데,
농구공 그림(세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아서 이것을 어떻게 하면 그랩님과 같은
결과를 볼 수 있을지에 대해 여쭈어봅니다.

사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지
의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다.
어떻게 해야 하나요?

사진 2 첨부 : 구체적인 에러 내용

[사진3] 스크롤은 적용이 안 된 것 같은데요, 상품이 2개 뿐이라 스크롤이 없는 건가요?

[사진4] 사진 3에 대한 구체적인 에러 ----> 어떻게 에러를 해결 할 수 있을까요?

안드로이드 스튜디오에서 상품 정보를 불러오지 못하는
것에 대해서 어떻게 해결해야 할 지 차근 차근 잘 알려주셨으면 좋겠습니다.

그리고 마지막 질문은 안드로이드 애물레이터가 잘 되는지 확인하려면
grab-market-server에서 npm start를 해준 뒤 확인하면 되는건가요?
아니면 grab-market-mobile에서 npm start를 해준 뒤 a(=Open Android)를 누르면 되는 건가요?
아니면 둘다 동시에 npm start를 해주는 건가요?

그리고 아래에는 grab-market-mobile 폴더의 App.js 제 소스 코드를 아래에 첨부하겠습니다.

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image, ScrollView } 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";
dayjs.extend(relativeTime);
dayjs.locale("ko");

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

  return ( <View style={styles.container}>
    <ScrollView>
     <Text style={styles.headline}>판매되는 상품들</Text>
     <View style={styles.productList}>
     {
      products.map((product, index)=>{
        return (<View style={styles.productCard}>
      <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
  }
  
  
});

그랩님의 답변을 기다립니다.