openWeatherMap undefined error

openWeatherMap에서 데이터를 보내줄 때, 비나 눈이 오지 않으면 snow나 rain이라는 항목 자체를 아예 보내주지 않음. 없는 항목을 읽으려고 하니 해당 에러가 반복적으로 나옴.(이미지에서 에러부분)

openWeatherMap에서 response를 받아 데이터를 가공할때 rain, snow 없는 경우에는 null을 할당하도록 처리해주었더니 해결 됨.( 이미지 윗부분)

• 위 이미지 상에서 보이는 에러는 weather데이터를 가져오는 커스텀훅에서 나는 에러인데, 현재는 context로 빼서 데이터를 공유하고 있음.

  무튼,

> {
...,
  precipitation: data.rain ? data.rain["1h"] : null,
}

이렇게 바꿔주었음.
그리고 WeatherData 타입에 null도 추가

...,
 precipitation: number | null;

react-markdown 적용하기

중요한 키워드는 굵게 표시하도록 openai prompt를 업데이트 했더니 마크다운 형식으로 텍스트를 리턴해줌.
그래서 react-markdown을 사용하여 마크다운 문법으로 작성된 내용이 html로 표시되게 해줌!

content를 프롭으로 받는 MarkDownViewer컴포넌트 생성

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";

export default function MarkDownViewer({ content }: { content: string }) {
  return (
    <ReactMarkdown
      className="prose max-w-none lg:prose-xl text-xl leading-8 "
      remarkPlugins={[remarkGfm]}
      components={{
        code(props) {
          const { ref, children, className, node, ...rest } = props;
          const match = /language-(\w+)/.exec(className || "");
          return match ? (
            <SyntaxHighlighter
              language={match[1]}
              PreTag="div"
              {...rest}
              style={materialDark}
            >
              {String(children).replace(/\n$/, "")}
            </SyntaxHighlighter>
          ) : (
            <code {...rest} className={className}>
              {children}
            </code>
          );
        },
      }}
    >
      {content}
    </ReactMarkdown>
  );
}

MarkDownViewr 사용하기

텍스트가 들어가는 곳에 message를 content로 내려주기만하면 끝

import React, { useEffect, useState } from "react";
import { useCaster } from "../context/CasterContext";
import { useWeather } from "../context/WeatherContext";
import MarkDownViewer from "./MarkDownViewer";

export default function WeatherMessage() {
  const [message, setMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const { weather } = useWeather();
  const { caster } = useCaster();

  useEffect(() => {
    async function fetchWeatherMessage() {
      if (caster && weather) {
        try {
          setIsLoading(true);
          const response = await fetch("/api/weather-message", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ caster, weather }),
          });
          const data = await response.json();
          setMessage(data.message);
          setIsLoading(false);
        } catch (error) {
          console.error("Error fetching weather message:", error);
        }
      }
    }

    fetchWeatherMessage();
  }, [caster, weather]);

  return (
    <div className="flex w-96 items-center justify-center bg-indigo-100 rounded-3xl p-6 h-72">
      {isLoading && <p>Generating message...</p>}
      {!isLoading && message && <MarkDownViewer content={message} />}
    </div>
  );
}

결과