[뉴스모아 #2] 뉴스API 및 번역API 연동, 랜딩페이지 완료

사용한 뉴스API 및 번역API

다양한 뉴스 API중 newsomaticapi 이라는 API를 발견을 했다
하루에 500번의 API요청을 할수 있으며 다른 유명한 API들이랑은 다르게 49$ 한번 결제로 기간 제한 없이 사용할수 있다는 점에서 체택 하였다

번역 API는 이후 뉴스 요약에 GPT를 사용할 예정이었기에 GPT로 번역을 할까 고민 했지만 비용을 생각하여
랜딩페이지 및 리스트페이지는 다른 무료 번역 API를 사용하기로 했다
RapidAPI에 있는 AI Translate 라는 html구조를 인식하는 번역 API를 선택 하였다
그렇게 연동을 하며 개발하던중 값자기 오류가 발생하였다

이게 무슨일인가 싶어서 네트워크 탭을 확인해보니

그 후 해당API의 질문탭을 확인해보니 이전에도 비슷한 상황이 있었고 개발자가 서버 갱신을 까먹어 일어났던 모양이였다
나는 계속 해서 개발을 해야했고 이후 프로젝트 완료 후에도 이런 일이 생기면 곤란하니 번역 API를 RapidAPI에 있던 Google Translate로 교체 하기로 했다

---

API연동하기

전체적인 계획은 뉴스 API로 각각의 나라의 뉴스를 받아온다 -> 필요한 부분만 번역 요청 -> 각 컴포넌트로 데이터 전달

export const useGetNews = () => {
  const [newsData, setNewsData] = useState([]);

  const getData = async (countriesData, pageSize, page, search) => {
    try {
      // 매개변수로 받은 countriesData를 활용하여 뉴스 받기
      const fetchPromises = countriesData.map(async (el1) => {
        const params = {
          apikey: process.env.NEXT_PUBLIC_NEWSOMATIC_API_KEY,
          country: el1.country,
          language: el1.language,
		  ...
        };
        const response = await axios.get(
          "https://newsomaticapi.com/apis/news/v1/all",
          { params },
        );

        // 받은 뉴스 데이터중 필요한 것만 return
        const processedData = response.data.articles.map((el2) => {
          return {
            title: el2.title,
            description: el2.description,
            ...
          };
        });
        return processedData;
      });

      // Promise.all을 이용하여 한번에 모든 결과 받기
      const result = await Promise.all(fetchPromises);

      // 데이터 저장
      setNewsData(result);
    } catch (error) {
      if (error instanceof Error) {
        alert(error.message);
      }
    }
  };

  return { newsData, getData };
};

추후에 리스트 페이지에서 무한 스크롤을 이용하여 해당 뉴스 데이터를 보여줄 생각이였기 때문에 getData도 같이 return 하였다
해당 API의 결과

해당 데이터를 번역 API와 연동

export const usePostTranslation = (newsData) => {
  const [translateData, setTranslateData] = useState({});

  useEffect(() => {
    const postTranslation = async () => {
      try {
        // newsData가 없으면 종료
        if (newsData.length === 0) return;

        // post를 위한 data 및 headers 작성 후 한국어로 번역 요청
        const fetchPromises = newsData.map(async (el) => {
          // 한국어는 번역할 필요가 없으니 return
          if (el[0].country === "kr") return el;

          const data = {
            from: "auto",
            to: "ko",
            common_protected_paths: [
              "image",
              "country",
              ...
            ], // 해당 key는 번역 X
            json: el,
          };

          const headers = {
            "content-type": "application/x-www-form-urlencoded",
            "X-RapidAPI-Key": process.env.NEXT_PUBLIC_X_RAPID_API_KEY,
            "X-RapidAPI-Host": "google-translate113.p.rapidapi.com",
          };

          const response = await axios.post(
            "https://google-translate113.p.rapidapi.com/api/v1/translator/json",
            data,
            { headers },
          );

          return response.data.trans;
        });

        // Promise.all을 이용하여 한번에 모든 결과 받기
        const result = await Promise.all(fetchPromises);

        // 국가 키에 데이터가 있으면 추가 없으면 키를 생성해서 저장
        setTranslateData((prev) => {
          // 새로운 데이터를 추가할 새로운 객체 생성
          const newData = { ...prev };

          // result 배열을 순회하면서 데이터를 적절한 국가 키에 추가
          result.forEach((el) => {
            const country = el[0].country;

            // 해당 국가 키가 이미 newData에 존재하는지 확인
            newData[country] = newData[country]
              ? [...newData[country], ...el] // 이미 존재한다면 새로운 데이터를 기존 배열에 추가
              : el; // 존재하지 않는다면 새로운 배열을 만들어 추가
          });

          return newData;
        });
      } catch (error) {
        if (error instanceof Error) {
          alert(error.message);
        }
      }
    };

    postTranslation();
  }, [newsData]);

  return translateData;
};

해당 API의 결과

---

img태그의 403 Forbidden 오류

해당 데이터로 UI작업을 하던중 몇몇개의 뉴스 이미지가 엑박[X]로 표시되는 문제가 생겼다

해당 이미지를 확인 해보니 403 Forbidden 이라는 오류가 발생해 있었다
해당 에러는 서버에서 권한 문제로 거부했다 라는 것을 알아 냈다
서버측에서 허용된 도메인이 아닌 다른 도메인으로 요청을 했기 때문이다
다행이 이미지 url은 해결 방법이 간단하게 존재 했다

<img referrerPolicy="no-referrer" src="" alt="" />

referrerPolicy를 no-referrer로 설정하는 것으로 오류를 해결했다

---

랜딩페이지 완료