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

import axios from "axios"
import { API_SERVER_HOST } from "./todoApi"

// api server host
const host = `${API_SERVER_HOST}/api/products`

// 외부 보낼것 만들기 비동기 통신
export const postAdd = async (product) => {

    // 객체지정
    const header = {headers: {'Content-Type':'multipart/form-data'}}

    // product와 header 같이 보내기
    const res = await axios.post(`${host}/`, product, header)

    return res.data
}

export const getList = async (pageParam) => {

    try{
        
        const {page, size} = pageParam

        const res = await axios.get(`${host}/list`, {params: {page:page, size:size}})

        return res.data
    } catch (error) {
        console.error('Error in getList:', error);
        throw error;
    }
    
}

productsApi.js 위 코드이고

import React, { useState, useEffect } from 'react';
import useCustomMove from '../../hooks/useCustomMove';
import { API_SERVER_HOST } from '../../api/todoApi';
import { getList } from '../../api/productsApi';


const initState = {
    dtoList: [],
    pageNumList: [],
    pageRequestDTO: null,
    prev: false,
    next: false,
    prevPage: 0,
    nextPage: 0,
    current: 0
}

// 서버에 주소가 바뀌면 상수값만 바꿔줄려고 선언한것
const host = API_SERVER_HOST

function ListComponent(props) {

    // 커스텀 훅 사용해서 이동 refresh: 갱신
    const {moveToList, moveToRead, page, size, refresh} = useCustomMove()
    
    // 목록 데이터 가져오기
    const [serverData, setServerData] = useState(initState)
    
    // 데이터 가져오기
    const [fetching, setFetching] = useState(false)

    useEffect(() => {

        setFetching(true) // 데이터 가져오는 중 자동으로 처리되기 때문에

        // 서버데이터가 처리가 되면
        getList({page,size}).then(data => {
            
            console.log("data>>>>>>>", data);

            setFetching(false)
            setServerData(data)
        })

    }, [page,size,refresh]);

    return (
        <div className="border-2 border-blue-100 mt-10 mr-2 ml-2">

            {/* fetching일때는 FetchingModal 호출하고 그렇지 않으면 아무것도 안보여준다. */}
            {fetching? <FetchingModal/> :<></>}

            <div className="flex flex-wrap mx-auto p-6">
                {serverData.dtoList.map(product =>
                    <div 
                        key= {product.pno}
                        className="w-1/2 p-1 rounded shadow-md border-2"
                        onClick={() => moveToRead(product.pno)} /* 링크 만들어주고 썸네일 이미지 만들어서 보여주는 기능 */
                    >
                        <div className="flex flex-col h-full">
                            <div className="font-extrabold text-2xl p-2 w-full ">{product.pno}</div>
                            <div className="text-1xl m-1 p-2 w-full flex flex-col">
                                <div className="w-full overflow-hidden ">
                                    <img 
                                        alt="product" 
                                        className="m-auto rounded-md w-60"
                                        src={`${host}/api/products/view/s_${product.uploadFileNames[0]}`}
                                    />
                                </div>
                                <div className="bottom-0 font-extrabold bg-white">
                                    <div className="text-center p-1">
                                        이름: {product.pname}
                                    </div>
                                    <div className="text-center p-1">
                                        가격: {product.price}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}

export default ListComponent;

ListComponent.js 파일인데

import React from 'react';
import ListComponent from '../../components/products/ListComponent';

function ListPage(props) {

    return (
        <div className="p-4 w-full bg-white">
            <div className="text-3xl font-extrabold">
                Products List Page
            </div>

            <ListComponent/>

        </div>
    );
}

export default ListPage;

ListPage.js 파일입니다

터미널에 에러도 뜨지 않고 서버에서 데이터를 못가져오는데 postman으로 서버 테스트를 했을때는 잘 되는데요 서버에서 클라이언트로 연동되는 부분에서 문제가 생긴건지 list를 가져오지를 못하고 있습니다 ㅠ 왜 그런건지 알 수 있을까요 ㅠ 오타도 아닌거 같고..