24.05.24 13:44 작성
·
195
·
수정됨
0
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를 가져오지를 못하고 있습니다 ㅠ 왜 그런건지 알 수 있을까요 ㅠ 오타도 아닌거 같고..
답변 3
0
0
2024. 05. 24. 14:34
우선 products의 ListPage에서 ListComponent를 호출하는 부분이 없었네요
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;
components/products/ListComponent에서는
import FetchingModal from "../common/FetchingModal";
이 에러가 났었습니다.
0
2024. 05. 24. 13:50
서버상의 문제는 아닌거 같다는 얘기시죠?
리액트 프로젝트의 코드를
https://drive.google.com/drive/folders/1ZLHRKaXx8Ou8kZNd1WE6qALxq_wJODXW
로 올려주세요.. node_modules 폴더는 제외시켜 주세요..
2024. 05. 24. 13:54
해당 링크로 올렸습니다 확인 부탁드립니다~!