[FN] 공연 정보 조회 / KOPIS 공연 정보 Open API 가져오기, XML - JSON 파싱

FN 프로젝트에서 제공하는 기능중에 하나가 공연 정보를 조회하고 검색하는 기능이기 때문에

KOPIS에서 제공하는 공연 정보 Open API를 가져와서 사용해보도록 하겠다

 

공연예술통합전산망

해당 사이트에서 인증키 발급신청을 한다.

 

Open API 개발 가이드도 제공해주니 확인하면서 진행하면 좋다

ttp://www.kopis.or.kr/openApi/restful/pblprfr?service={서비스키}&stdate=20160101&eddate
 =20160630&rows=10&cpage=1

나는 공연 목록을 조회할 것임으로 위와 같은 경로로 진입해보면 공연 목록이 나타남을 확인할 수 있다.

---

전체적인 흐름

• KOPIS API 요청 (XML 응답을 받음)
• XML → JSON 파싱
• 출력하려는 장르 필터링
• FlatList로 카드 형태로 출력

---

export const SERVICE_KEY = 'KOPIS SERVICE KEY';

export const kopisURL = 'https://www.kopis.or.kr/openApi/restful';

export const kopisImgURL = 'https://www.kopis.or.kr';

 

 

인증키, URL 등 민감한 정보를 담는 파일을 생성하여 정의하고 공연 정보를 출력하는 페이지에서 불러와서 사용할 것이다.

 

ConcertScreen.tsx

import { SERVICE_KEY, kopisURL } from '../../OAuto2';

const ConcertScreen = ({ navigation }: Props) => {
  const [concerts, setConcerts] = useState<any[]>([]);
  
const fetchConcerts = async () => {
    try {
      const url = `${kopisURL}/pblprfr?service=${SERVICE_KEY}&stdate=20231201&eddate=20250405&rows=50&cpage=1`;
      const response = await fetch(url);
      const text = await response.text();

      const parser = new XMLParser();
      const json = parser.parse(text);

      const list = json.dbs?.db;
      const concertList = Array.isArray(list) ? list : [list];
      const filtered = concertList.filter((item: any) =>
        item.genrenm && item.genrenm.includes('대중음악')
      );
    
      setConcerts(filtered);
    } catch (error) {
      console.error('콘서트 데이터를 불러오는 중 오류:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchConcerts();
  }, []);
}

• OAuto2에 정의한 KOPIS 인증키와 URL주소를 사용하므로 import
• url : 20231201부터 20250405까지 50개의 데이터를 현재 페이지로 가져옴
• fetch로 API를 호출하고 text 형태로 읽음
• fast-xml-parser 라이브러리를 사용해 XML을 JavaScript 객체(JSON)로 변환
• json.dbs?.db 형태로 실제 데이터 배열에 접근
• filtered : genrenm(장르명)에 '대중음악'이 포함된 데이터만 출력

<TouchableOpacity
      onPress={() => navigation.navigate('ConcertDetail', { id: item.mt20id })}
    >
      <View style={styles.card}>
        {item.poster ? (
          <Image
            source={{ uri: item.poster }}
            style={styles.poster}
            resizeMode="cover"
          />
        ) : (
          <View style={[styles.poster, { backgroundColor: '#ccc', justifyContent: 'center', alignItems: 'center' }]}>
            <Text>이미지 없음</Text>
          </View>
        )}
        <View style={styles.info}>
          <Text style={styles.title}>{item.prfnm}</Text>
          <Text style={styles.period}>{item.prfpdfrom} ~ {item.prfpdto}</Text>
          <Text style={styles.place}>{item.area}  {item.fcltynm}</Text>
        </View>
      </View>
    </TouchableOpacity>

• 공연 정보 카드 하나하나는 터치가 가능하고 눌렀을 때 공연 상세 정보를 확인할 수 있도록 TouchableOpacity로 감싸준다
• Open API에서 제공해주는 해당 공연 포스터(poster)와 공연 제목(prfnm), 공연 시작 ~ 종료 일정(prfpdfrom, to), 지역과 장소(area, fcltynm)을 출력하도록 하였다.

 

구현 화면

필터링된 공연 정보가 카드 형태로 정상 출력됨

콘솔 로그에 filtered를 찍어봐도 정상적으로 데이터를 불러오고 있다.

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."