[object Object]

배경

토이프로젝트 하고 있는데,
{pdfText && <TranslationResult text={pdfText} 를 화면에 출력해보니 결과가

[object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object][object Object] [object Object]

라고 표시되길래,
JSON 변환 안해줘서 깨진 건가? 해서

JSON.parse(pdfText); 라고 해봤는데

The resource http://localhost:3000/_next/static/css/app/layout.css?v=1740930717369 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

라는 에러가 떴다.

GPT

pdfText가 JSON.stringify된 문자열이 아니라 이미 객체 또는 배열 형태로 저장되어 있기 때문입니다.
즉, JSON.parse(pdfText)를 하면 JSON이 아닌 값을 JSON으로 해석하려고 해서 오류가 발생하는 것입니다.

---

🔍 오류 원인 분석

1. pdfText는 JSON 문자열이 아니라 이미 객체 또는 배열일 가능성이 높습니다.
2. 하지만 화면에서 [object Object]로 보인다면, 배열의 요소들이 객체이거나 배열 내부에 중첩된 구조일 가능성이 있습니다.
3. JSON.parse()는 문자열만 처리 가능하므로, 객체나 배열을 넣으면 에러가 발생합니다.

---

🛠 해결 방법

✅ 1. console.log()로 pdfText의 데이터 타입 확인

console.log("📌 pdfText의 타입:", typeof pdfText);
console.log("📌 pdfText 값:", pdfText);

출력 결과를 보면 pdfText가 문자열인지, 배열인지, 객체인지 확인할 수 있습니다.

---

✅ 2. JSON.parse() 대신 JSON.stringify()로 확인

만약 pdfText가 객체나 배열이라면, JSON.stringify()로 변환하여 출력하면 보기 쉬워집니다.

console.log("📌 pdfText JSON 형식으로 출력:", JSON.stringify(pdfText, null, 2));

📌 만약 pdfText가 JSON 문자열이면?
이때는 JSON.parse(pdfText)를 해도 괜찮습니다.

---

✅ 3. TranslationResult에서 text prop을 올바르게 전달

지금 TranslationResult에 { text: pdfText }로 넘기고 있습니다.
그런데 pdfText가 객체 또는 배열이라면, 이걸 직접 <p> 태그로 렌더링할 수 없습니다.

➡ 해결책: Array.isArray(pdfText)로 확인하고, 배열이면 .map()을 사용해 출력하세요.

📌 TranslationResult.tsx 수정

const TranslationResult: React.FC<{ text: string | string[] }> = ({ text }) => {
  console.log("📌 전달된 text:", text);

  return (
    <div className="p-4 border rounded shadow">
      <h2 className="text-xl font-bold mb-2">번역 결과</h2>
      
      {Array.isArray(text) ? (
        text.map((sentence, index) => (
          <p key={index} className="mb-2">{sentence}</p>
        ))
      ) : (
        <p>{text}</p>
      )}
    </div>
  );
};

---

✅ 4. pdfText가 배열인지 문자열인지 확인 후 올바르게 변환

📌 pdfText가 배열이라면?

• pdfText.join(" ")로 문자열로 변환 후 TranslationResult에 전달하세요.

📌 pdfText가 문자열이라면?

• 그냥 그대로 전달하면 됩니다.

📌 page.tsx에서 pdfText 처리

<div>{pdfText && <TranslationResult text={Array.isArray(pdfText) ? pdfText.join(" ") : pdfText} />}</div>

---

🎯 결론

• pdfText가 JSON 문자열인지, 배열인지, 객체인지 먼저 console.log()로 확인해야 합니다.

• JSON.parse()는 문자열일 때만 사용할 수 있음. 객체나 배열이면 사용하면 안 됨.

• TranslationResult에서 pdfText가 배열이면 .map()으로 출력.

• pdfText가 배열이라면 .join(" ")으로 변환하여 전달.

  ---

내일 해봐야지,,,