새로운 프로젝트 시작 & 와이어프레임 & 기획 & API선정 및 연결

이번 프로젝트는 외부API를 연결해 zustand와 tanstackQuery를 사용해 프로젝트를 관리하는 것이 핵심이다. 평소 예술 공연에 관심이 많았고 팀원들에게 적극적으로 구체적인 기획을 이야기해 제시한 의견으로 프로젝트를 시작하게 되었다.나는 이번에 상세페이지를 맡게 되었고 카카오지도 API를 이용해 장소를 불러오고 공연장정보, 출연진 등 정보를 소개할 수 있도록 만들려고 했다. 댓글 기능 CRUD를 구현하고 이것을 TanstackQuery 로 관리할 예정이다.

• 프로젝트 명 : 공연 공유 페이지
• 소개
  • 한 줄 정리 : 공연을 공유하고 검색할 수 있는 페이지
  • 내용 :
    메인페이지 - 현재 상영중인 공연(일주일), 내 위치 주변 공연장
    카테고리 - 장소로 검색하기, 장르로 검색하기, 검색바 (+시간되면 날짜 포함)
    상세페이지 - 공연 장소(지도API를 사용해 위치 보여줌), 공연 음악, 댓글, 북마크
    커뮤니티 - 내가 좋아하는 음악과 공연장 소개
    로그인, 로그아웃, 회원가입
    

☘️ Kopis API연결

import axios from "axios";
import { XMLParser } from "fast-xml-parser";

const URL = "https://www.kopis.or.kr/openApi/restful/pblprfr";

const fetchKopisData = async () => {
  try {
    const response = await axios.get(URL, {
      params: {
        service: import.meta.env.VITE_KOPIS_KEY,
        stdate: "20240101",
        eddate: "20241231",
        cpage: 1,
        rows: 10,
      },
받을 때 설정
    });

 
export default fetchKopisData;

💥 트러블 슈팅

kopis API는 json이 아니라 XML로 OPENAPI를 제공하고 있어서 이것을 변환하는 과정이 필요했다.
당황 x100이었지만 한단계씩 차근차근 해결해보았다.

1. 우선 kopis API pdf를 읽으며 필수적으로 연결해주어야 하는 params를 적어주었다.
2. API_KEY는 .env 환경변수에 저장해 gitignore에도 추가해서 노출되지 않도록 막아주었다.
3. XML을 json으로 파싱하기 위해 아래 로직을 추가해주었다.

import axios from "axios";
import { XMLParser } from "fast-xml-parser";

const URL = "https://www.kopis.or.kr/openApi/restful/pblprfr";

const fetchKopisData = async () => {
  try {
    const response = await axios.get(URL, {
      params: {
        service: import.meta.env.VITE_KOPIS_KEY,
        stdate: "20240101",
        eddate: "20241231",
        cpage: 1,
        rows: 10,
      },
      responseType: "text", // XML로 응답을 받을 때 설정
    });

    // XML 데이터 출력
    console.log("Raw XML Data:", response.data);

    // XML을 JSON으로 변환
    const parser = new XMLParser({
      ignoreAttributes: false,
      allowBooleanAttributes: true,
      attributeNamePrefix: "@_", // 속성에 '@_' 접두사 붙이기
      textNodeName: "#text", // 텍스트 노드 이름
      ignoreNameSpace: true, // 네임스페이스 무시
    });
    const jsonData = parser.parse(response.data);

    // JSON 데이터 콘솔에 출력
    console.log("Parsed JSON Data:", JSON.stringify(jsonData, null, 2));

    return jsonData;
  } catch (error) {
    console.error("데이터 요청 중 에러 발생:", error);
    throw error;
  }
};

export default fetchKopisData;

🥹 보완할 점

계속해서 CORS오류가 뜨는데 어떻게 이것을 해결해야할 지 모르겠다. 방법을 찾아야할 것 같다.