반응형

API 8

[카카오맵 API] React 클릭 위치로 마커(Marker) 변경 및 주소 가져오는 방법

* 카카오맵 API 사용 가이드 2023.04.10 - [React] - [카카오맵 API] React TypeScript에서 카카오맵 불러오기 1. 커스텀 Hook 생성 첫 렌더링 시에 함수 실행을 막기 위한 Hook을 생성한다. useEffect는 state가 변할 때 실행되는데 최초 렌더링 시에도 state가 설정되는 것을 확인 하고 실행된다. 이러한 상황을 막기 위한 Hook를 생성한다. import { useEffect, useRef } from "react"; const useDidMountEffect = (func: any, deps: any) => { const didMount = useRef(false); useEffect(() => { if (didMount.current) func()..

React 2023.04.17

[카카오맵 API] React TypeScript에서 Geolocation를 사용한 현재 위치 표시 방법

Geolocation란? 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있다. 브라우저의 경우 정확한 위치를 찾지 못하지만 핸드폰으로 사용할 경우 GPS를 통해 정확하게 확인 가능 Chrome 브라우저는 https 환경에서만 geolocation을 지원한다. * 카카오맵 API 사용 가이드 2023.04.10 - [React] - [카카오맵 API] React TypeScript에서 카카오맵 불러오기 1. 사용 방법 브라우저에서 제공하기 때문에 따로 라이브러리 설치가 필요 없다. navigator.geolocation.getCurrentPosition(success) navigator.geolocation.getCurrentPosition(succes..

React 2023.04.11

[카카오맵 API] React TypeScript에서 카카오맵 불러오기

1. API Key 발급 방법 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1-1) 애플리케이션 추가 [내 애플리케이션] => [애플리케이션 추가하기] 1-2) API Key 복사 [요약 정보] => [JavaScript 키] 복사 1-3) 플랫폼 등록 [플랫폼] => [등록하기] 사용하는 URL를 등록한다. 2. Script 불러오기 autoload=false : script를 동적으로 로드하게 되면 로드가 다 끝나기도 전에 kakao api를 불러오는 코드가 먼저 실행 될 수 있기 때문..

React 2023.04.10

[카카오 주소 API] TypeScript에서 카카오(다음) 주소 API 사용 방법

카카오 주소 API의 경우 별도의 Key 없이 바로 외부 스크립트를 cdn 등의 방법으로 바로 사용이 가능하다. 1. Script 불러오기 /* NextJS */ 2. Interface 선언 타입스크립트는 컴파일 언어이기 때문에, IDE에서 바로 오류를 감지한다. 그렇기 때문에 외부 객체는 타입을 알 수 없기 때문에 바로 참조할 수가 없고 Interface를 선언해 주어야 한다. declare global { interface Window { daum: any; } } interface IAddr { address: string; zonecode: string; } 위와 같이 window에 daum 객체가 있다고 명시해 준다. 주소 입력 후 반환받기 위한 Paramiter도 interface 선언해 준다..

React 2023.03.29

[Spring Boot / Java8] OpenAI API GPT3 사용 방법

1. OpenAI Key 발급 로그인 => 좌측 상단 [Personal] 클릭 => [View API keys] 클릭 https://platform.openai.com/overview OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com API Key는 최초 발급받을 때 한 번만 확인할 수 있다. 2. OpenAI Sevice 생성 @Slf4j @Service public class OpenAIService { private static final String API_ENDPOINT = "https://api.openai.com/v1/"; @Value("${OPEN_AI_KEY}") private Stri..

Java 2023.03.23

[Naver 뉴스 API] NextJS에서 네이버 뉴스 데이터 수집 방법

1. 네이버 개발자 센터 네이버 개발자 센터에서 앱 등록 후 Client 정보를 발급 받는다. NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 1-1) 애플리케이션 등록 상단 탭 Application > 애플리케이션 등록 클릭 웹 서비스 url이 아직 없는 경우 localhost를 등록한다. 1-2) Client 정보 등록 후 애플리케이션 정보로 자동으로 이동하게 되는데 해당 ID, Secret은 네이버 API를 사용하기 위해 필요하다. 2. 네이버 뉴스 API 검색 > 뉴스 - S..

React 2023.01.19

[YouTube API] 유튜브 API 동영상 데이터 가져오는 방법

유튜브 영상을 가져오기 위해서는 유튜브 API를 사용해야 한다. 1. Google Cloud Platform 프로젝트 등록 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 1-1) 프로젝트 생성 1-2) YouTube Data API v3 사용 검색 > YouTube Data API v3 클릭 > 사용 클릭 1-3) API Key 생성 사용자 인증 정보 > 사용자 인증 정보 만들기 > API 키 1-4) API Key 제한 설정 (선택) 무단 사용 방지를 위해 Key 수정 키제한 > YouTube Data API v3 선택 2. YouTube API 통해 동영상 리스트 가져오기 Videos: list | YouTube Data API | Goo..

React 2023.01.11

[Kotlin] Retrofit 사용한 API 통신 방법

Retrofit Retrofit이란? 안드로이드와 자바를 위한 타입 안전한 HTTP 클라이언트이다. (서버와 통신할 때 거의 필수) API로 정보를 받아오기 때문에 HTTP클라이언트이다. 요청 바디 값(Request Body)과 응답 바디 값(Response Body)을 원하는 타입으로 안전하게 바꾸어주기 때문에 타입 안전이다. 네트워킹 관련 스레딩, 캐싱, 에러 핸들링, 응답 파싱에 필요한 보일러 플레이트를 줄여주고 개발자가 읽기 편한 코드를 작성할 수 있게 도와준다. 보일러 플레이트(BoilerPlate) 코드란 ? 모든 코드를 작성하기 위해 항상 필요한 부분을 의미한다. BoilerPlate는 다음 4가지로 구성되어 있다. - Import : 필요한 코드를 불러들이는 부분 - Component : ..

Kotlin 2022.11.14
반응형