친환경 스토어 지도 개발 로그 1편 ( 데이터 분석 및 삽입 )

시작하기 전.. 

처음에는 프로젝트에서 서울맵의 지도 api를 활용하여 친환경 스토어를 보여주려고 했지만
서울시 지도의 UI/UX가 너무 구리(너구리)길래 카카오맵에서
보여주면 좋겠다는 의견이 나왔고 서울시 제로웨이스트 스토어 데이터를 활용해서

카카오 맵으로 커스텀해보기로 했슴다,.

 

 

데이터 분석

 

서울시 API에서 제공하는 데이터를 살펴보니 필요 이상으로 많은 필드가 있었습니다.

아래와 같이 필요한 것만 추려냈습니다

interface OgInfo {
  COT_CONTS_ID: string;
  COT_CONTS_NAME: string;
  COT_ADDR_FULL_NEW: string;
  COT_COORD_Y: number;
  COT_COORD_X: number;
  COT_VALUE_03: string;
  COT_TEL_NO: string;
  COT_GU_NAME: string;
  COT_ADDR_FULL_OLD: string;
}

 

그 후 필요한 데이터를 기반으로

supabase에서 테이블을 생성했습니다

 

 

서울맵에서 데이터 가져오기

  const getStore = async () => {
    try {
      const response = await fetch(
        `https://map.seoul.go.kr/openapi/v5/${API_THEME_KEY}/public/themes/contents/ko?page_size=100000&page_no=1&coord_x=126.974695&coord_y=37.564150&distance=2000&search_type=1&search_name=&theme_id=11103395&content_id=&subcate_id=`
      );

      if (!response.ok) {
        throw new Error("데이터를 불러오지 못했습니다");
      }

      const data = await response.json();
      const fetchedStoreInfo = data.body;
      setStoreInfo(fetchedStoreInfo);
    } catch (error) {
      console.error("에러:", error);
    } finally {
      setIsLoading(false);
    }
  };

 

 

서울맵 문서에서 제공하는 방법대로 진행하니까 아주 간단하게 데이터를 요청이 가능했슴다

저장된 데이터는 state로 저장해두었스다

 

db(supabase)에 저장하기

  const saveToSupabase = async (stores: OgInfo[]) => {
    try {
      const formattedStores = stores.map((store) => ({
        store_id: store.COT_CONTS_ID,
        store_name: store.COT_CONTS_NAME,
        road_address: store.COT_ADDR_FULL_NEW,
        jibun_address: store.COT_ADDR_FULL_OLD,
        lat: Number(store.COT_COORD_Y),
        lon: Number(store.COT_COORD_X),
        operating_hours: store.COT_VALUE_03,
        contact_number: store.COT_TEL_NO,
        district: store.COT_GU_NAME,
      }));

      console.log("저장된 데이터:", formattedStores);

      const { data, error } = await supabase
        .from("eco_stores")
        .insert(formattedStores)
        .select();

      alert("저장 성공");
      console.log("저장된 데이터:", data);
    } catch (error) {
      console.error("데이터 저장 중 에러 발생:", error);
    }
  };

 

 

이전에 데이터를 분석했던 것을 가지고 실제 db에 insert 해주었슴다

그 과정에서 정책이나 타입의 오류들이 나타났는데 귀찮았슴다...

 

데이터 저장 시도 중 발생한 오류들

 

첫 번째 오류: 타입 및 컬럼명 불일치

invalid input syntax for type bigint: "11103395_1658122392322"

 

위 로그처럼 계속 맞지 않는 타입 오류나 컬럼명 오류가 발생했는데 대부분 제 실수였씀다 ㅎㅎ...

 

두 번째 오류: RLS 정책

new row violates row-level security policy for table "eco_stores"

 

Supabase의 보안 정책 때문에 발생한 오류였습니닷..
아래 SQL문으로 누구든 insert가 가능하도록 했습니닷...

 

ALTER TABLE "public"."eco_stores" ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Enable read access for all users"
ON "public"."eco_stores"
FOR SELECT
TO anon
USING (true);

CREATE POLICY "Enable insert for all users"
ON "public"."eco_stores"
FOR INSERT
TO anon
WITH CHECK (true);

 

 

어차피 학습 목표와 다른 애플리케이션에서 데이터를
insert 하기 때문에 누구든 접근이 가능하도록 설정했읍니다..

 

완료

 

이렇게해서 db에 데이터가 잘 저장되었고,
이 데이터를 가지고 이제 카카오 맵에서 커스텀을 진행해야 합니닷..

---

 

앞으로 해야 할 일

 

 

카카오맵은 SDK를 사용하기로 했습니다..

타입스크립트 지원도 되고 문서화도 잘 되어있어서입니다요!

 

 

더 구체적인 계획으로는 아래 사항이 있슴다 =>

• 카카오맵 초기화 작업
• 저장된 스토어 데이터 지도에 표시
• 마커 및 정보창 디자인
• 검색 및 필터링 기능 구현

 

그리고 이 개발 과정에서 특이 사항도 있슴다...=>

• 카카오맵의 기본 검색 기능은 사용하지 않을 예정
• 우리 DB에 있는 친환경 스토어 데이터만 보여줄 계획

결론 : 지도는 카카오맵을 사용하되, 데이터는 우리 것만 사용

 

 

 

 

 

마치며..

서울시 데이터를 카카오맵에서 보여주는 게 가능할 것 같습니다만.....

만약 카카오맵 적용이 어려워지면 서울시 지도를 그대로 쓰는 것도 대안이 될 것 같습니다.

 

사실 이런 작업은 처음 해보는 작업이라 확실하게 될까? 이런 생각이 들긴 하지만

뭐 어쩌게씀까.. 일단 필요하니까 맨땅에 헤딩이라도 해봐야 알겠쥬...

 

담에는 카카오맵 시작하는 부분이나 커스텀을 적용하는 부분을 가져오겠슴다..ㅃㅇ