React로 위치 기반 서비스 애플리케이션 만들기, 지도와 위치 기반 데이터로 주변 장소 찾기 애플리케이션 제작

최근에는 사람들이 자신의 위치를 기반으로 다양한 정보를 찾고 활용하는 경우가 많아지고 있습니다. 이러한 위치 기반 서비스(Geolocation Service)는 특정 장소나 지역에 대한 정보를 제공하는 데 유용하며, 특히 관광, 음식점 추천, 지역 사회 활동 등의 분야에서 큰 인기를 끌고 있습니다. 본 강좌에서는 React를 사용하여 위치 기반 서비스 애플리케이션을 만드는 과정을 자세히 살펴보도록 하겠습니다. 이 애플리케이션은 사용자의 위치를 기반으로 주변 장소를 찾고, 이를 지도에 표시하며, 사용자에게 유용한 정보를 제공합니다.

프로젝트 설정

시작하기에 앞서, React 애플리케이션을 설정해야 합니다. 아래 명령어를 통해 새로운 React 프로젝트를 생성합니다.

npx create-react-app location-based-app

프로젝트가 생성되면, 아래의 디렉토리 구조를 만들고 필요한 패키지를 설치합니다.

cd location-based-app
npm install axios react-leaflet leaflet

필요한 라이브러리 소개

  • Axios: 서버와의 HTTP 요청을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다.
  • React-Leaflet: Leaflet을 React에서 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 지도 구현에 사용됩니다.
  • Leaflet: 오픈 소스 JavaScript 라이브러리로, 모바일 친화적인 대화형 지도 애플리케이션을 만드는 데 사용됩니다.

위치 정보 접근

위치 정보를 사용하기 위해서는 사용자의 동의가 필요합니다. 이를 위해 HTML5의 Geolocation API를 사용할 수 있습니다. 이 API를 통해 사용자의 현재 위치를 얻는 방법은 아래와 같습니다.

const getLocation = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
};

const showPosition = (position) => {
  const lat = position.coords.latitude;
  const long = position.coords.longitude;
  console.log("Latitude: " + lat + ", Longitude: " + long);
};

주요 컴포넌트 구현

애플리케이션의 기본 구조는 다음과 같습니다:

  • App: 전체 애플리케이션을 감싸는 루트 컴포넌트입니다.
  • Map: 지도를 렌더링하는 컴포넌트입니다.
  • LocationList: 주변 장소의 리스트를 보여주는 컴포넌트입니다.

App 컴포넌트

import React, { useState, useEffect } from 'react';
import Map from './Map';
import LocationList from './LocationList';

const App = () => {
  const [location, setLocation] = useState({ lat: null, long: null });
  const [places, setPlaces] = useState([]);

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

  const getLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  };

  const showPosition = (position) => {
    const lat = position.coords.latitude;
    const long = position.coords.longitude;
    setLocation({ lat, long });
    fetchPlaces(lat, long);
  };

  const fetchPlaces = async (lat, long) => {
    const response = await axios.get(`https://api.example.com/places?lat=${lat}&long=${long}`);
    setPlaces(response.data.places);
  };

  return (
    

      
위치 기반 서비스 애플리케이션

      {location.lat && location.long ? (
        
      ) : (
        
위치 정보를 불러오는 중입니다...

      )}
      
    

  );
};

export default App;

Map 컴포넌트

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

const Map = ({ position }) => {
  return (
    
      
      
        현재 위치입니다.
      
    
  );
};

export default Map;

LocationList 컴포넌트

import React from 'react';

const LocationList = ({ places }) => {
  return (
    

      
주변 장소

      
    
        {places.map((place) => (
          
  • {place.name}
    • 
        ))}
      

    

  );
};

export default LocationList;

API 연동

위치 기반 서비스를 구현하려면, 주변 장소 데이터를 제공하는 API가 필요합니다. 예를 들어, Google Places API, Foursquare API 등을 사용할 수 있습니다. 아래는 간단한 API 호출 예시입니다.

const fetchPlaces = async (lat, long) => {
  try {
    const response = await axios.get(`https://api.example.com/places?lat=${lat}&long=${long}`);
    setPlaces(response.data.places);
  } catch (error) {
    console.error("API 호출 실패:", error);
  }
};

애플리케이션 스타일링

우리는 CSS를 사용하여 애플리케이션의 전반적인 디자인을 개선할 수 있습니다. 여기에 간단한 CSS 예제를 추가합니다.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  margin: 20px 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background: #f9f9f9;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #ddd;
}

마무리 및 확장

이번 강좌를 통해 우리는 React를 사용하여 위치 기반 서비스 애플리케이션을 만들었습니다. 이 애플리케이션은 사용자의 위치를 기반으로 주변 장소 정보를 보여주는 기능을 구현합니다. 이후에는 사용자의 즐겨찾기 기능, 장소에 대한 리뷰 시스템 등을 추가하여 애플리케이션을 확장할 수 있습니다.

점진적으로 추가 기능을 구현하고, UX/UI 디자인을 개선하며 사용자 피드백을 통해 애플리케이션을 발전시켜 나가시기 바랍니다. 이러한 경험은 리액트 개발자로서의 성장에 큰 도움이 될 것입니다.