5. flutter 네이버 지역 API를 이용한 검색 기능 구현

소요시간

 
2025년 2월 2일 - 5시간
 

느낀 점

만드는 건 AI와 함께 정말 빠르게 만들었는데 
api와 라이브러리 차이에서 정말 헷갈렸다.
기존에는 데이터베이스에 저장된 검색 시스템만 만들어보다가 api에서 불러와서 검색 시스템을 만들려니까
나로서는 이해하기 힘들었다.
그래도 오늘 배운 점은 검색을 만들 때는 json으로 그에 마땅한 정보를 불러와야 된다는 점은 확실하게 배웠다.
 

사용법

 
html 사용이유 - 자꾸 api에 <br>가 껴서 나오길래 제거하기 위해서 필요했음 

import 'package:http/http.dart' as http;  
html: ^0.15.5

 
쿼리문을 불러오기 위해 일단 네이버개발자 api에 가입 후 id와 secret 불러와야 함.

final String clientId = '1'; // 네이버 개발자 센터에서 발급받은 Client ID
final String clientSecret = '1'; // 네이버 개발자 센터에서 발급받은 Client Secret
final String url =
    'https://openapi.naver.com/v1/search/local.json?query=$query&display=5&start=1&sort=sim';

 
 

코드

 
 
이 메서드에 대해서 설명하자면 
나는 네이버지도에서 검색을 해서 그 지도로 이동하여 마커를 띄어야 하기 때문에
도로주소, 지번, 위도, 경도를 불러왔다.
 
서울역을 쳤을 때 관련순으로 5개를 json으로 불러오는 코드를 적어 준다.
 
query 부분은 텍스트필드에서 받게 하여 사용자가 원하는 위치를 칠 수 있게 했다.
그런 후 위도 경도를 불러오니까 서울역을 쳤을 때 5개의 정보가 뜬다 그럴 때 5개 중 하나를 클릭하면
위도 경도를 받아와서 지도에서 이동하게 만들려고 한다.
 
그럼 한마디로 검색시스템이 되는 거다
 
'https://openapi.naver.com/v1/search/local.json?query=$query&display=5&start=1&sort=sim';
 

Future<void> _fetchData(String query) async {
  setState(() {
    _isLoading = true;
  });

  final String clientId = '1'; // 네이버 개발자 센터에서 발급받은 Client ID
  final String clientSecret = '1'; // 네이버 개발자 센터에서 발급받은 Client Secret
  final String url =
      'https://openapi.naver.com/v1/search/local.json?query=$query&display=5&start=1&sort=sim';

  try {
    final response = await http.get(
      Uri.parse(url),
      headers: {
        'X-Naver-Client-Id': clientId,
        'X-Naver-Client-Secret': clientSecret,
      },
    );

    if (response.statusCode == 200) {
      final Map<String, dynamic> data = json.decode(response.body);
      final List<dynamic> items = data['items'];
      setState(() {
        _responseBody = items.map((item) {
          // HTML 태그를 제거하고 텍스트만 반환
          final title = item['title'];
          final document = html_parser.parse(title);
          final cleanTitle = document.body?.text ?? '';

          // 위도와 경도 가져오기
          final latitude = item['mapy']; // 위도 (문자열)
          final longitude = item['mapx']; // 경도 (문자열)

          // 위도와 경도를 소수점 형태로 변환
          final parsedLatitude = _parseCoordinate(latitude, isLatitude: true);
          final parsedLongitude = _parseCoordinate(longitude, isLatitude: false);

          // 도로명 주소와 지번 주소 가져오기
          final roadAddress = item['roadAddress'] ?? '도로명 주소 없음'; // 도로명 주소
          final address = item['address'] ?? '지번 주소 없음'; // 지번 주소

          // 결과 문자열 생성
          return '$cleanTitle\n'
              '도로명: $roadAddress\n'
              '지번: $address\n'
              '위도: $parsedLatitude, 경도: $parsedLongitude\n';
        }).join('\n');
      });
    } else {
      setState(() {
        _responseBody = 'Failed to load data: ${response.statusCode}';
      });
    }
  } catch (e) {
    setState(() {
      _responseBody = 'Error: $e';
    });
  } finally {
    setState(() {
      _isLoading = false;
    });
  }
}

 
 

문제점

 
 
좌표가 12340501 이런 식으로 불러와졌다 원래 위도 경도 좌표는
12.340501  이런식으로 불러와져야 되는데
 
방지하기 위해서 소수점 형태로 반환하는 함수를 만들어서 해결하였다. 

// 좌표를 소수점 형태로 변환하는 함수
  String _parseCoordinate(String coordinate, {required bool isLatitude}) {
    if (coordinate.isEmpty) return '0.0';

    // 위도는 앞의 2자리가 정수 부분, 경도는 앞의 3자리가 정수 부분
    final integerLength = isLatitude ? 2 : 3;

    // 정수 부분과 소수 부분 분리
    final integerPart = coordinate.substring(0, integerLength);
    final decimalPart = coordinate.substring(integerLength);

    // 소수점 추가
    return '$integerPart.$decimalPart';
  }

 
 
 

결과

 
 
검색이 잘된다. 아직 코드는 다듬어야 되지만 최소한의 테스트 모듈로써는 성공인셈이다.