KBW's cosmos

저번 글에 이어 클라이언트 단에서의 푸시 알림 구현을 진행해보겠다. 구현할 코드를 크게 세 부분으로 나누면, 1. FCM 인증 및 초기 설정 2. 알림 구현 3. Firebase Token 발급 으로 나눌 수 있다. 먼저 구현에 앞서 패키지를 설치하겠다. firebase_core: ^2.8.0 firebase_messaging: ^14.3.0 flutter_local_notifications: ^13.0.0 패키지 설치 및 프로젝트 - Firebase 연결은 어렵지 않아 생략하도록 하겠다. fcmSetting.dart Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async { // If you're going to use other..

FCM은 Firebase Cloud Messaging의 약자로 기존 GCM에서 모든 플랫폼에 푸쉬를 쉽게 보낼 수 있도록 통합된 솔루션이다. Notification 콘솔의 GUI나 Admin SDK를 이용해 서버 등에서 FCM의 백에 요청을 보내면, FCM에서 각 플랫폼 별로 메시지를 전송하는 방식이다. 이 글에서는 이 FCM을 활용해 Spring Boot에서 Notification을 보내는 방법에 대해 알아보겠다. 글 작성에 앞서 firebase 프로젝트 생성 부분은 생략하고 이미 되어있는 것을 가정하겠다. 1. Admin SDK 서버에서 Firebase 와 상호작용하기 위해서는 먼저 Admin SDK를 추가해야한다. (아래 공식문서 참고) 서버에 Firebase Admin SDK 추가 5월 10일, ..

필자는 Next.js와 Spring Boot를 이용해 서비스를 개발하고 있다. 이번에 무한 스크롤 기능이 필요했는데, No-Offset 방식의 레퍼런스가 많이 없어 애를 먹었다. 시행착오 끝에 잘 작동하여 이를 정리해보고자 한다. 근데 No-Offset이 뭐지? No-Offset 페이지네이션은 Offset을 사용하지 않고 페이지네이션을 진행한다는 말이다. Offset은 게임 개발할 때 많이 쓰이는 단어이기도 하다. 일반적으로 Offset을 사용하는 페이지네이션은 Offset(어디부터) limit(몇개의) 데이터를 불러올지 결정한다. 즉, 네이버 카페 같은 곳에서 볼 수 있는 위와 같은 번호들이 페이지 넘버이고 이 페이지 넘버가 Offset이라고 생각하면 된다. No-Offset은 이러한 Offset을 사..

React-Query의 useMutation을 커스텀 훅으로 만들어두면 편하다. 필자는 여기에 더해 mutate를 다루는 handler 함수를 정의하고 반환하는 방식의 커스텀 훅을 구현하였다. 아래는 예시 코드이다.(Typescript) 주석친 부분은 무시해도 된다. interface MutationProps { postId: number updatePostRequest: UpdatePostType } function usePostMutation( postInfoBeforeUpdate: PostInfoType, userId: number, updatedTitle: string, updatedContent: string, updatedIsAnonymous: boolean ): { handlePostMuta..

최근 하이브리드 앱을 많이 만들었다. 하이브리드 앱은 네이티브 앱에 비해 스토어(구글 플레이스토어, 애플 앱스토어)에 덜 종속적이고 별도의 심사과정없이 최초 등록만 되면 빠른 업데이트가 가능하다는 차별점이 있다. 하지만 하이브리드 앱은 웹뷰를 이용하기에 네이티브 앱에 비해 신경써야할 부분이 조금 더 많다. 이 중 하나가 바로 Flutter와 Webview에 띄워진 웹 간의 통신이다. 필자는 Flutter의 웹뷰 패키지로 아래 webview_flutter 패키지를 사용하였다. (4.0.0 이상 버전 사용) webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev 1. ..

ios의 경우 제스쳐로 뒤로가기가 가능하지만 기본적인 시스템 뒤로가기가 없다. 하지만 안드로이드의 경우 기본적으로 시스템 네비게이션 바가 있기에 웹뷰로 작동하는 어플리케이션이 비정상적으로 종료되는 것처럼 보일 수 있다. 때문에 웹뷰 구현 시 따로 뒤로가기에 대한 구현을 해줘야한다. 필자는 가장 좋아요 수가 많은 flutter 공식 팀에서 만든 웹뷰 패키지인 webview_flutter 패키지를 사용하였다. https://pub.dev/packages/webview_flutter webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev 이번에 4.0.0 버전으로 업그레..

ec2에 배포 후 문제가 발생할 수 있다. CI에 문제가 없다면 CD 쪽을 살펴야하는데 필자는 AWS의 CodeDeploy를 사용했다. codedeploy의 로그 파일은 깊숙한 곳에 숨어있어 찾기 어려운 경우가 많은데, 리눅스의 tail 명령어를 사용하면 손쉽게 확인할 수 있다. tail -f /opt/codedeploy-agent/deployment-root/deployment-logs/codedeploy-agent-deployments.log 리눅스의 tail 명령어는 파일의 마지막 행을 기준으로 지정한 행까지 파일 내용 일부(기본값은 마지막 10줄)를 출력해주는 명령어이다. tail 명령어는 일반적으로 로그와 같이 실시간으로 변하는 파일을 분석하는데 많이 사용된다. -f 옵션은 tail을 종료하지 ..

api의 도메인이 https 프로토콜을 사용하면서 swagger에서 CORS 오류가 발생하는 문제가 나타났다. 이는 Swagger가 기본적으로 http로 요청을 보내게 설정되어있기 때문이다. 이는 @OpenAPIDefinition 어노테이션으로 수정해주면 된다. ... import io.swagger.v3.oas.annotations.OpenAPIDefinition; import io.swagger.v3.oas.annotations.servers.Server; ... @OpenAPIDefinition(servers = {@Server(url = "/", description = "Default Server URL")}) @SpringBootApplication public class MyApplicati..

웹 서버란 무엇일까? 우선 웹 서버를 하드웨어 관점과 소프트웨어 관점으로 나누어 보아야한다. 하드웨어 관점 '웹 서버의 소프트웨어'와 웹 사이트의 '컴포넌트 파일'들을 저장하는 컴퓨터 (컴포넌트 파일 : HTML, CSS, JS, 이미지) 웹 서버는 인터넷에 연결되어 웹에 연결된 다른 기기들이 웹 서버의 데이터(컴포넌트 파일들)를 주고 받을 수 있도록 한다. 소프트웨어 관점 웹 사용자가 어떻게 호스트 파일에 접근하는지를 관리 웹 서버는 HTTP 서버 형태로 존재(웹 구현 시)하며, HTTP 서버는 HTTP의 소프트웨어 일부 위 두 가지 관점을 합쳐 보면 웹 서버는 브라우저가 HTTP를 통해 파일을 요청했을 때, 요청이 올바른 웹 서버(하드웨어)에 도달하면, HTTP 서버(소프트웨어)가 요청된 문서를 HT..

Mixed Content 에러... 프론트를 https로 배포 후 http로 서버와 통신하려하면 발생하는 문제다. 이 문제를 해결하기 위해서는 백엔드에서 http -> https로 접근할 수 있게 설정을 해줘야한다. 필자는 Spring Boot로 api를 개발하여 AWS EC2에 배포한 상황이였고 https로 설정하기 위해 찾아본 방법 중 간단하고 저렴한 방법에는 아래와 같은 방법들이 있었다. 1. AWS CloudFront 먼저 AWS의 CloudFront를 활용한 방법이다. 클라이언트가 https로 CloudFront와 통신을 하고 CloudFront와 api를 제공하는 주체는 http로 통신하는 것이다. ACM을 사용하면 ssl 인증서를 공짜로 이용할 수 있다. 후술하겠지만 CloudFront는 C..