리액트와 협동해서 프로젝트를 만들어보고 있는데요


/api/members로 이동하면 현재 DB에 저장된 모든 회원을 json 리스트로 반환하는 코드입니다


근데 아래 결과물에서 페이지를 새로고침하면 맨 아래 사진과 같이 raw json이 그대로 렌더링되는데 어떤 문제가 있는걸까요 ?

같이 하는 프론트가 작성한 리액트 코드도 첨부합니다 제가 리액트는 하나도 몰라서요 ..




import { useEffect, useState } from "react";


const Confirm = () => {

const [members, setMembers] = useState([]);

const base = "htt80/";

useEffect(() => {

const fetchData = async () => {

try {

const response = await fetch(base + "/api/members", {

method: "GET",

mode: "cors",

headers: {

"Content-Type": "application/json",

},

});

if (!response.ok) {

throw new Error("Network response was not ok");

}

const data = await response.json();

const memData = Object.values(data.data);

setMembers(memData);

} catch (error) {

console.error("There was a problem with the fetch operation:", error);

}

};

fetchData();

}, []);

return (

<div className="member-list">

<h2>Member List</h2>

<ul>

{members.map((member, index) => (

<li key={index}>

Name: {member.name}, Age:{member.age}

</li>

))}

</ul>


{/* CSS를 JSX 안에 직접 포함 */}

<style>{

.member-list {

font-family: Arial, sans-serif;

border: 1px solid #ccc;

border-radius: 5px;

padding: 20px;

max-width: 400px;

margin: 0 auto;

}


.member-list h2 {

margin-top: 0;

}


.member-list ul {

list-style-type: none;

padding: 0;

}


.member-list li {

margin-bottom: 10px;

padding: 5px;

background-color: #f9f9f9;

border-radius: 3px;

}


.member-list li:last-child {

margin-bottom: 0;

}

}</style>

</div>

);

};


export default Confirm;