본문 바로가기

전체보기

(31)
Next.js 모니터링 하기(feat. Sentry.io) '농실농실 - 실시간 농산물 가격 조회'가 어느 정도 마무리 단계에 있습니다. 현시점으로 가장 큰 문제는 아직 API 운영 승인되지 않아 개발 트래픽 100건에 머물러 있다는 것입니다.  그래서 테스트를 하다가 api 호출이 100건이 넘어가면 트래픽 오류를 뿜어내죠.그 외에도 아직 완벽한 단계가 아니라 여러 오류를 뿜뿜! 뿜어내곤 합니다.  그럴 때마다 백엔드 개발자분께서 "왜 오류가 나는 것이냐"라고 물어보시곤 하는데,오류가 날 때마다 개발자 도구 켜서 네트워크에서 찾아봐야 하는 것이 너무 귀찮기도 하고, 만약 서비스 사용자들이 많아지면 오류 트래킹하는것도 문제겠더라고요. 그래서 모니터링을 추가하기로 했습니다!1. Sentry.io 회원가입Sentry는 애플리케이션에서 오류가 발생하면 알려주는 에러 ..
농산물 실시간 경매 가격 조회앱 출시기 - 농실농실 최근 코드드림에서는 농산물 실시간 경매 가격 조회 서비스를 개발했습니다.기획에 참고한 기존 앱들에 광고가 너무 많아(사용이 힘들정도로) 이번에는 광고 없이 앱을 출시하기로 했고, 출시된 앱은 광고 없이 사용이 가능합니다. 앱과 더불어 웹 버전도 개발을 했습니다.제공되는 기능은 다음과 같습니다. 앱 설치 후 편하게 사용해보세요.실시간 경매 가격 조회정산 가격 조회기간별 정산 가격 통계 조회 [Android] 농실농실 - 실시간 농산물 가격 조회앱 - Google Play 앱농산물 실시간 & 정산 가격을 확인해 보세요play.google.com [iOS] ‎농실농실 - 실시간 농산물 가격 조회앱‎농산물 실시간 가격과 정산/통계 정보를 확인해 보세요. 자주 검색하는 부류/품목/품종을 등록해두고 간편하게 사용할..
Flutter 데이터 모델링 할 때 Freezed를 쓰는 이유에 대하여 Flutter 개발자로 일하고 있지만 여러 프로젝트를 쳐내는 것에 급급하여제대로 공부하는 것은 애써 외면하고 있었습니다만프로젝트를 하면서 알게 된 것들을 포스팅함으로써공부해보려고 합니다!고럼 스타뚜-!      알고 가면 좋은 immutable 개념일단 시작하기 앞서 알고가면 좋을 immutable 개념을 볼까요?immutable은 의미 그대로 불변 이라는 뜻입니다. 이에 상반되는 mutable(변하기 쉬운)도 있습니다. var music = 'ismylife';print(music);여기서 music 변수는 'ismylife' 라는 값을 갖고 있습니다.print로 변수값을 찍어본다면 당연히 ismylife 값이 나옵니다. music = 'islove';print(music); 이다음music 값을 ' ..
인스타그램 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로 맞춰야합..