분류 전체보기 (20) 썸네일형 리스트형 인스타그램 API 연결하기 - 2편 : API 연결 안녕하세요. 다시 돌아온 맛도리 탐정입니다.이번 편에서는 이전에 포스팅을 진행했던 Next.js + 인스타그램 API를 마무리 짓도록 하겠습니다. 4. 테스트 사용자 인증순서에 따라 아래의 인증 창 URL을 구성합니다. https://api.instagram.com/oauth/authorize ?client_id={app-id} &redirect_uri={redirect-uri} &scope=user_profile,user_media &response_type=code app-idredirect-uri표시된 부분 (클라이언트 OaAuth 리디렉션 URI | 콜백 URL 승인 취소 | 데이터 삭제 요청 URL)에배포된 사이트의 주소를 입력해 주고 하단의 변경 내용 저장 버튼을 클릭해 줍니다. 그.. 인스타그램 API 연결하기 - 1편 : 기본 설정 새로운 토이프로젝트가 거의 마무리 단계까지 왔습니다. 제가 먹는 걸 좋아해서 맛집 관련 웹사이트를 간단히 만들어봤는데요. 기왕 하는거 캐릭터도 만들고 인스타그램도 개설해서 관리를 하는 게 어떨까 해서기존 웹서비스(MongoDB사용) 에서 인스타그램 API를 연결해서 데이터를 가져오기로 했습니다. 1. Instagram 기본 디스플레이 API 제품 > Instagram > 기본 디스플레이 > Instagram 앱 ID 필드에서) {redirect-uri}는 2단계에서 제" data-og-host="developers.facebook.com" data-og-source-url="https://developers.facebook.com/docs/instagram-basic-display-api/gettin.. Next.js + Typescript로 NAVER MAP API 연결하기 안녕하세요. 요즘따라 날씨가 좋아서 더욱더 공부하기 싫은 인간 1입니다.이번에 새로운 프로젝트 (가제: 물고기 탐험단)를 진행하면서 네이버 지도 API를 사용하게 되었습니다. 예전에 API를 사용해 본 적은 있지만, 이번에 NextJS + typescript로 써본 적은 처음이라 간단하게 사기도 올릴 겸 포스팅을 해보았습니다. 레고.. 우선, 제가 네이버 지도를 그리는 과정은 아래와 같습니다.1. 해당 주소를 위도, 경도로 변환 (ex, '경기도 성남시 분당구 불정로 6' > 해당 주소의 위도, 경도)2. 변환된 위도, 경도로 지도 생성1. 네이버 application 등록하기 NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS,.. Flutter Firebase 클라우드 메세징 사용해보기 - 2편 : 푸쉬 수신 개발 이전 글에 이어 푸쉬 수신을 위한 개발을 알아보겠습니다. *푸쉬 수신을 위한 설정이 먼저 필요합니다. 이전 글에서 플랫폼별 설정을 확인하실 수 있습니다. 푸쉬 송신 역할을 하는 API 서버는 Node로 구성했으며, 해당 코드는 이 글에서 확인하실 수 있습니다. 푸쉬 테스트를 위해서는 해당 작업이 선행되어야 합니다. 본 포스팅의 개발 환경은 다음과 같습니다. Flutter 3.16.5 Dart 3.2.3 Firebase_core 2.4.1 Firebase_messaging 14.2.1 푸쉬 수신은 디바이스의 상태에 따라 설정이 필요합니다. 디바이스 상태는 3가지로 나뉩니다. Foreground : 앱이 실행되어 있고, 화면에 보여지고 있는 상태 Background : 앱이 실행되어 있지만 화면에 보여지지 .. Flutter Firebase 클라우드 메세징 사용해보기 - 1편 : 설치 최근 교회 앱을 개발하며 푸쉬 기능을 추가했습니다. 이전에 회사 앱의 푸쉬 API를 만들어 모바일개발자분과 소통을 했었는데 앱의 푸쉬 기능도 직접 개발해보면 재밌을 것 같아 시작하게 됐습니다. 앱 푸쉬 기능은 파이어베이스의 클라우드 메세징(FCM)을 사용하였습니다. 앱 푸쉬는 FCM으로부터 메세지를 받아 Local notification를 통해 디바이스 화면에 알림을 띄우는 구조로 동작합니다. 개발을 하기 전 Android와 iOS 각각의 설정이 필요하며 본 포스팅은 1편 설치, 2편 개발로 나누어 작성했습니다. *파이어베이스 프로젝트 설정은 포스팅 내용에 포함되어 있지 않습니다. Android 1. build.gradle(:app) 설정 1-1) SDK 버전 설정 FCM 사용을 위해 최소 버전은 31.. Spring Boot, Redis를 이용해 캐싱 구현하기 회사에서 Spring Boot를 주로 사용하고 있지만 이제는 업무 기반의 쿼리 개발이 많아지다보니 Spring 기술을 사용할 일이 많이 없어졌습니다. (쿼리 데이터 출력 -> 클라이언트로 서빙하는 작업의 반복..) 요즘은 스터디에서 진행 중이던 프로젝트도 종료가 되어 여유가 생겨 예전에 사용해봤던 캐싱 기능을 Redis에 접목시켜 보기로 했습니다. 현재 개발 환경은 다음과 같습니다. Spring Boot 2.7.5 jdk11 Gradle Mybatis MySQL 8 캐시란 캐시는 자주 사용되는 데이터나 값을 저장해 놓은 임시 장소를 말합니다. 캐시는 데이터 저장소 유형 중 하나로 반복되는 데이터를 돌려주는 상황에 효율적으로 사용할 수 있습니다. 캐시를 사용함으로써 반복되는 데이터의 접근을 피해 DB 서버.. Node와 MongoDB(+Mongoose) 이번에 교회 서비스를 개발하면서 MongoDB를 사용했는데요. SQL 문법에 익숙했는데 새로운 문법을 배우니 기록해두면 좋겠다는 생각이 들었습니다. 스키마 관리를 위해 Mongoose를 추가했습니다. DB 생성과 설정하는 방법은 이전 포스팅을 참고해서 진행하실 수 있습니다. SQL 문법과 비교해서 하나씩 살펴보겠습니다. 예제에서 사용될 컬렉션은 다음과 같습니다. 사용자 : users export const UserScheme = new Schema({ _id: { type: ObjectId }, userName: { type: String }, roleCode: { type: String }, createDate: { type: Date, default: Date.now }, }); 역할 : roles .. Next.js + Firebase를 활용한 모바일 푸시 구현 요즘 코드드림팀에서는 교회를 대상으로 하는 서비스를 개발하고 있습니다. 교회 다니는 팀원이 있어 간단한 서비스를 제공해볼까라는 이야기에서 시작되었는데요. 개발할수록 기능이 하나씩 추가되고 있어요. 최근에 서비스 안에 기능 중 모바일 앱으로 푸시를 보내는 기능이 필요해졌는데요. 파이어베이스에서 Node를 지원하는 것을 보고 파이어베이스를 이용하기로 했습니다. Spring에서만 해봤던 기능을 Next.js에서는 처음 해보게 돼서 포스팅을 작성해봤고, 테스트 환경은 다음과 같습니다. *모바일앱은 Flutter를 이용했고 푸시를 받기 위한 환경은 갖춰진 상태입니다. Next.js 14 Firebase admin sdk Typescript 5 1. 서비스 키 생성 1-1) 파이어베이스에 접속 후 프로젝트 선택 1.. 이전 1 2 3 다음
