230526 실전프로젝트4 [Node.js/Nest.js 와 카카오맵API 연동하기]

✅오늘학습 Keyword

Node.js/Nest.js환경(이하 N/N환경)에서 카카오맵 API 를 연동한다.

 

N/N환경을 기반으로 카카오맵API를 연동한 자료가 정~~말 부족, 아니 없었다 그냥..

이유는 보통 이런 부분은 프론트엔드(REACT)에서 구현되기 때문이다.

그래서! 아예 N/N환경에서 카카오맵 API를 연동하는 법을 기록해놓기로 했다╰(*°▽°*)╯

 

 

✅Node.Js+Nest.Js 환경에서 카카오맵API 연동하기 - 작업순서

작업순서

1. 프로젝트 설정
2. Kakao Developers에서 애플리케이션 등록, REST API 키 발급
3. Service->controller 작성

 

 

✅Node.Js+Nest.Js 환경에서 카카오맵API 연동하기 - 겪은 문제

구현 방식부터 A to Z로 찾아보면서 하느라 과정 전체가 문제였지만 그 중에 대표적인 문제만 정리해봤다. 

 

문제상황1.

kakao-sdk 라이브러리를 사용하면 axios를 별도로 사용하지 않고도 카카오 API와 통신할 수 있다고 하는데, 아래와 같은 에러가 뜨면서 설치가 되지 않았다. 

cryst@DESKTOP-V61BBO9 MINGW64 ~/OneDrive/바탕 화면/sparta/NODE JS/주특기주차/실전프로젝트/matwaiting/backend (develop)
$ npm i kakao-sdk
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: backend@0.0.1
npm ERR! Found: rxjs@7.8.1
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"^7.2.0" from the root project
npm ERR!   peer rxjs@"^6.5.3 || ^7.4.0" from @angular/core@16.0.3
npm ERR!   node_modules/@angular/core
npm ERR!     peer @angular/core@"*" from kakao-sdk@3.1.0
npm ERR!     node_modules/kakao-sdk
npm ERR!       kakao-sdk@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^5.5.11" from @ionic-native/core@4.20.0
npm ERR! node_modules/@ionic-native/core
npm ERR!   peer @ionic-native/core@"^4.2.0" from kakao-sdk@3.1.0
npm ERR!   node_modules/kakao-sdk
npm ERR!     kakao-sdk@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\cryst\AppData\Local\npm-cache\_logs\2023-05-26T02_55_24_682Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cryst\AppData\Local\npm-cache\_logs\2023-05-26T02_55_24_682Z-debug-0.log 에러

 

해결 시도:

npm이 종속성 트리를 해결하지 못해서 발생한 문제인데, npm i kakao-sdk --force 과 npm i kakao-sdk --legacy-peer-deps 를 사용하여 종속성 충돌을 무시하고 설치해보려 했으나 그것도 실패. 

sudo권한으로 실행해보았으나 그것도 실패, -g를 사용하여 글로벌 서치옵션으로 실행해봤지만 그것도 실패^^

 

사돈에 팔촌까지 찾아가서 물어봐서 알아낸 코드와 원인, 

npm 6버전에서는 버전에 안맞으면 오동작 경고만 줬었는데, 7버전부터는 에러로 처리하게 됌. 그래서 아래와 같이 에러를 무시하고 진행하게 하는 명령어를 쓴다..

npm config set legacy-peer-deps true

 

라고 해서 무사히 설치했지만 여전히 KakaoSDK은 불러와지지 않아서 여전히 실패~!!!!!!!!!^^

 

그래서 결국 kakao-sdk라이브러리 없이 axios를 사용하여 진행했다.

 

**axios란?

Js에서 HTTP 요청을 보내기 위한 라이브러리

 

 

 

 

문제상황2.

라이브러리 없이 코드를 짜고 재가동 하였는데.. 막상 웹페이지에서 아래와 같이 API 연결문제가 발생했다. 
{
statusCode: 404,
message: "Cannot GET /places",
error: "Not Found"
} 

 

해결 시도:

• 서버재시작
• 포트확인, 라우트 경로확인(@Controller('places'),
• 라우트 메서드 확인, app module확인
• 필요한 라이브러리 모두 있는지 확인
• 카카오맵 API_KEY 재발급 

모두 해봤는데도 안되길래.. 혹시..하고 앱 키를 찾아봤더니.. 

이제까지 나는 JS key를 입력하고 있었는데, REST API키를 입력하니 해결이 됐다. 

 

 

✅Node.Js+Nest.Js 환경에서 카카오맵API 연동하기 - 완성코드살펴보기

app.service.ts

import { Injectable } from '@nestjs/common';
import axios from 'axios';

@Injectable()
export class KakaoMapService {
  private readonly API_KEY = 'e84edcba09907dc19727de566a994a88';

  async searchPlaces(query: string): Promise<any> {
    const url = `https://dapi.kakao.com/v2/local/search/keyword.json?query=${query}`;
    console.log(url);
    const response = await axios.get(url, {
      headers: {
        Authorization: 'KakaoAK ' + 'e84edcba09907dc19727de566a994a88',
      },
    });
    return response.data;
  }
}

 

app.controller.ts

import { Controller, Get, Param, Inject } from '@nestjs/common';
import { KakaoMapService } from './app.service';

@Controller('places')
export class PlacesController {
  constructor(
    @Inject(KakaoMapService)
    private readonly kakaoMapService: KakaoMapService,
  ) {}

  @Get('/:query')
  async searchPlaces(@Param('query') query: string): Promise<any> {
    const result = await this.kakaoMapService.searchPlaces(query);
    // 여기서 결과를 처리하거나 필요한 로직을 추가하세요.
    return result;
  }
}

 

app.module.ts

import { Module } from '@nestjs/common';
import { KakaoMapService } from './app.service';
import { PlacesController } from './app.controller';

@Module({
  providers: [KakaoMapService],
  controllers: [PlacesController],
})
export class AppModule {}

 

main.ts 

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000, () => {
    console.log('3000 port로 연결되었습니다. ');
  });
}
bootstrap();

 

 

짜잔~~!! 카카오맵api 연동 성공!

http://localhost:3000/places/검색어

 

 

 

 

 

 

 

✅오늘 알게된 점 및 추후 학습 계획

카카오맵을 연동해서 장소를 불러오는 과정에 대해 파악했다.

이제는 category, x, y등의 조건을 이용해서 사용자 위치에 기반한, 원하는 결과를 가져오는 api를 구축할 예정이다. 

 

**

Node.js v18.15.0 에러 날때 알아두면 좋은 명령어~
1. node_modules 폴더를 삭제한다
:  rm -rf node_modules 
2. npm install