전체보기

개요프로젝트 진행 도중에 콜백 지옥인 코드를 맛보게 되었다... 가독성이 너무 떨어져서 다음에 기능 수정할 때 눈이 너무 아플 것 같았다! 바로 콜백 지옥에서 벗어나기 위해 async/await과 Promise를 활용했고, 비동기 처리에 있어서 얘네들에 소중함을 절실히 느꼈다. 그리고 얘네들에 소중함을 널리 알리기 위해 정리해보려고 한다. 1. 비동기(Asynchronous)비동기에 대한 설명들은 많이 보고 들었지만, 가장 이해가 빨랐던 설명은 '카페에서 음료 주문'이였던 것 같다. 일단 개념은하나의 작업을 시작하고, 그 작업이 끝날 때까지 그 코드에서 머물지 않고(기다리지 않고) 바로 다음 작업을 처리하는 방식이다. 그 뒤 작업이 끝나면 그 결과를 나중에 알려준다.(Non-Blocking) -> 이 내..

개요FCM 기능을 추가하고, 로컬에서 테스트하려고 하니까 localhost에서는 작동한다고 하는데 스마트폰에서 접속하기 위해서아예 HTTPS로 로컬에서 웹서버 실행되게 설정을 추가하기로 했다. 그래서 관련 내용을 정리해보려고 한다. 1. vite용 플러그인 (실패...)지금 프로젝트가 Vite + React 환경에서 개발하고 있기 때문에 HTTPS 적용에 있어서@vitejs/plugin-basic-ssl 이거를 사용하려고 했다. 그런데!! 제대로 설정했음에도 위와 같은 화면이 나타났다... 아마 찾아보니까, 플러그인이 생성한 로컬 인증 기관이 시스템에 제대로 설치되지 못하거나, 신뢰받지 못했기 때문이다. 2. mkcert (성공) mkcert란?로컬 환경에서 HTTPS 인증서를 아주 간단하게 만들어주는 ..

개요React + PWA 코드 에 이어서 오늘은 백엔드 코드로 FCM을 마무리해보려고 한다. 1. Spring Boot FCM 구현Spring Boot로는 React PWA로부터 FCM 토큰을 받아서 DB에 저장하고, 필요한 시점에 FCM 백엔드로 푸시 알림을 전송하는 코드를 작성할 것이다! (1) Firebase SDK 의존성 추가//firebaseimplementation 'com.google.firebase:firebase-admin:9.2.0' (2) Firebase SDK 초기화Spring Boot 애플리케이션 시작시 Firebase SDK를 초기화해야 한다. 이때 서비스 계정 키(JSON 파일)을 사용해야 한다. -> src/main/resources 폴더에 넣어줬다. @Configuratio..

개요지금 플젝을 진행하고 있는데, 푸시 알림 기능이 사용자들한테 정말 편할거라고 생각해서 구현하려 한다. 안드로이드에서는 프로젝트마다 구현해서 방법을 알고 있는데, React에서 구현하는건 처음이라... 열심히 정리해야겠지?! 1. FCM(Fireabse Cloud Messaging)이란?FCM은 Google에서 제공하는 크로스 플랫폼 메시징 솔루션이라고 한다. 거의 모든 앱에서 푸시알림기능이 들어가는데, 이 FCM을 통해 Android ,iOS, 웹 등 다양한 플랫폼에서 편하게 메시지를 보낼 수 있다. 단계를 그림으로 보면 위와 같은데, 상세하게 살펴보자.1-1. FCM 세팅(1) 프로젝트 생성일단, Firebase 콘솔에서 프로젝트를 생성한다.권장사항이라길래 애널리틱스 설정도 함께 넣었다. 그럼 이..