[클라우딩 어플리케이션 엔지니어링 TIL] 240418 - React Native 캠핑앱 만들기 프로젝트 (2)

Intro

---

2일차엔 전국 캠핑장 리스트를 조회하기 위해 공공데이터 API를 불러오는 코드를 구현하였다.

 

해야 할 일

✅ 공공데이터 API 불러오기

✅ Home 화면 구현하기

➡️ Article 화면 구현하기 

 

 

프로젝트 진행상황

---

오픈 API 활용하기

https://www.data.go.kr/data/15101933/openapi.do#/layer-api-guide

한국관광공사_고캠핑 정보 조회서비스_GW

 

위 사이트에서 회원가입 후 활용 신청을 해야 API를 불러올 수 있다.

로그인 후 발급받은 인증키를 입력해야 불러올 수 있다.

 

IOS 시뮬레이터로 테스트 하는데 안돼서 원인을 찾아봤는데 IOS는 HTTPS 프로토콜 네트워크 통신만 허용되는 것 때문에 HTTP로 호출되는 오픈 API를 불러오지 못하는 상황이었다.

해결 방법을 찾아보았는데 ios > info.plist 파일에 NSAppTransportSecurity를 true로 설정해주면 HTTP로 호출되는 API를 불러올 수 있다.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

 

 

• Open API 조회 코드

import { SERVICE_KEY } from '../../security/openAPIKey';

const BASE_URL = `https://apis.data.go.kr/B551011/GoCamping`;

export const getCampingList = async ({ pageNo = 1 }: { pageNo: number }) => {
  const params = {
    MobileOS: 'IOS',
    MobileApp: 'campingapp',
    serviceKey: SERVICE_KEY,
    _type: 'json',
    pageNo: `${pageNo}`,
  };

  const queryString = new URLSearchParams(params).toString();
  const url = `${BASE_URL}/basedList?${queryString}`;

  try {
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
      },
    });

    const result = await response.json();
    return result;
  } catch (e) {
    console.error(e);
  }
};

 

개인 키는 security 폴더 안에 넣어두고 gitignore에 폴더명을 입력해서 git에 올라가지 않도록 설정했다.

 

캠핑 데이터는 1페이지당 기본 10개의 캠핑 데이터를 불러온다.

다음 페이지를 로딩하기 위해 스크롤 가장 아래로 내려왔을 때 다음 페이지를 호출하는 무한 스크롤 기능을 구현하였다.

FlatList의 속성들을 활용하여 생각보다 간편하게 구현할 수 있었다.

 

 

예시 코드)

...
const HomePage = () => {
  const [campingList, setCampingList] = useState([]);
  const [pageNo, setPageNo] = useState(1);
  const [loading, setLoading] = useState(false);

  const fetchCampingList = async () => {
    try {
      const result = await getCampingList({ pageNo });
      return result.response.body.items.item;
    } catch (e) {
      console.log(e);
    }
  };

	...

  const onEndReached = async () => {
    if (!loading) {
      setPageNo(pageNo + 1);
      setLoading(true);
      const result = await fetchCampingList();
      setCampingList([...campingList, ...result]);
      setLoading(false);
    }
  };

  return (
    <SafeAreaView style={styles.wrapper}>
			...
      <View style={styles.mainContainer}>
        <FlatList
          data={campingList}
          keyExtractor={item => item.contentId}
          renderItem={({ item }) => <CampingInfo {...item} />}
          removeClippedSubviews
          showsVerticalScrollIndicator={false}
          style={styles.campingListContainer}
          onEndReached={onEndReached}
          onEndReachedThreshold={0.2}
          ListFooterComponent={
            loading && (
              <View style={styles.loadingIcon}>
                <Icon name="ellipsis-h" size={30} />
              </View>
            )
          }
        />
      </View>
    </SafeAreaView>
  );
};

...

 

 

 

 

 

 

 

추후 개발 사항

---

 

다음 작업해야 할 것들

• Article UI 구현
• Home UI 구현
• 무한스크롤에서 발생하는 오류 해결