- [ 언어·프레임워크/React Native ][React Native] 모바일 푸시 알림 토큰, 어떻게 관리해야 할까?2025-07-22 19:44:06모바일 푸시 알림 토큰, 어떻게 관리해야 할까?푸시 알림은 현대 모바일 애플리케이션에서 사용자와 소통하는 핵심적인 기능이다. 그러나 사용자의 다양한 이용 행태는 푸시 토큰 관리를 예상보다 복잡하게 만든다. 특히 사용자가 여러 기기를 사용하거나 앱을 재설치하는 경우는 데이터 정합성에 큰 영향을 미친다. 이 글에서는 이러한 시나리오를 효과적으로 처리하고, 안정적인 푸시 알림 시스템을 구축하기 위한 토큰 관리 전략에 대해 설명하고자 한다.1. 푸시 토큰 관리의 복잡성단순히 토큰을 데이터베이스에 저장하고 조회하는 것을 넘어, 실제 서비스 환경에서는 여러 예외적인 상황이 발생한다.1-1. 앱 재설치와 토큰의 변화새로운 토큰의 발급: 사용자가 기기에서 앱을 삭제한 후 다시 설치하면, 구글의 FCM(Firebase ..
- [ 언어·프레임워크/React Native ][React Native] Expo에서 커스텀 푸시 알림 사운드 적용하기2025-07-22 17:45:31Expo에서 커스텀 푸시 알림 사운드 적용하기1. 개요모바일 애플리케이션에서 푸시 알림은 사용자와 소통하는 핵심적인 수단이다. 이때, 기본 알림음이 아닌 앱의 정체성을 담은 커스텀 사운드를 사용하는 것은 사용자 경험을 향상시키고 브랜드 인지도를 강화하는 중요한 요소가 될 수 있다. 하지만 Expo를 사용하여 커스텀 알림 사운드를 적용하는 과정, 특히 Android에서는 예상치 못한 여러 장벽에 부딪히기 쉽다. 이 글에서는 그 과정에서 겪을 수 있는 모든 문제와 그 해결책을 종합하여 가장 확실하고 안정적인 적용 방법을 제시한다.2. 사전 준비파일 위치프로젝트의 루트 디렉토리에 assets 폴더를, 그 안에 sounds 폴더를 생성하여 사운드 파일을 위치시킨다. 이 예제에서는 assets/sounds/not..
- [ 언어·프레임워크/React Native ][React Native] Expo/FCM 푸시 알림, Node.js 백엔드에 완벽 통합 가이드2025-07-21 17:05:05Expo/FCM 크리티컬한 푸시 알림, Node.js 백엔드에 완벽 통합 가이드모바일 애플리케이션에서 푸시 알림은 사용자와 소통하는 핵심 창구이다. 특히, 사용자의 즉각적인 반응이 필요한 '위험 경고'나 '이상 감지'와 같은 미션 크리티컬(Mission-Critical) 정보를 전달해야 할 때, 알림의 전달 실패는 곧 시스템의 실패로 이어질 수 있다.이 글에서는 단순한 알림 발송을 넘어, 중요 알림의 누락을 방지하는 데 초점을 맞춘 안정적인 푸시 알림 백엔드 시스템을 Node.js와 Express 환경에서 구축하는 방법을 알아본다.1. 실패를 용납하지 않는 데이터베이스 설계안정적인 토큰 관리의 첫걸음은 데이터베이스 모델링에서 시작된다. 단순히 토큰을 저장하는 것을 넘어, 토큰의 '상태'와 '활성도'를 추..
- [ DevOps/Docker ]도커(Docker)로 Nginx 웹 서버 컨테이너 만들기2025-07-21 11:18:59도커(Docker)로 Nginx 웹 서버 컨테이너 만들기1. 도커와 Nginx란 무엇인가1-1. 도커(Docker)의 개념도커(Docker)는 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 도커를 사용하면 애플리케이션과 그 실행 환경을 하나의 컨테이너로 패키징하여, 어디서든 일관되게 실행할 수 있다.1-2. Nginx란 무엇인가Nginx는 가볍고 빠른 성능을 자랑하는 오픈소스 웹 서버이다. 정적 파일 서비스, 리버스 프록시, 로드 밸런싱 등 다양한 기능을 제공한다. 공식 도커 이미지는 도커허브에서 제공된다.참고: Nginx Docker Hub 공식 페이지2. 도커로 Nginx 웹 서버 컨테이너 만들기2-1. index.html 파일의 중요성웹 프로젝트의 메인 페이지는 일반적으로 index.html로 작명한..
- [ DevOps/Docker ]Next.js 애플리케이션을 Docker와 Alpine으로 배포하기2025-07-21 10:45:47Next.js 애플리케이션을 Docker와 Alpine으로 배포하기1. Next.js 프로젝트 생성C:\docker-practice>npx create-next-app@latest√ What is your project named? ... my-next-app√ Would you like to use TypeScript? ... No / Yes√ Would you like to use ESLint? ... No / Yes√ Would you like to use Tailwind CSS? ... No / Yes√ Would you like your code inside a `src/` directory? ... No / Yes√ Would you like to use App Router? (recommen..
- [ AI/AI와 일하기 ]Chrome 내장 Translation API 활용 튜토리얼2025-07-20 09:19:18Chrome 내장 Translation API 활용 최신 튜토리얼1. 개요Chrome의 내장 AI Translation API는 브라우저에서 직접, 클라우드가 아닌 온디바이스로 텍스트 번역을 수행할 수 있는 혁신적인 기능이다.이 튜토리얼에서는 최신 Chrome(138 이상)에서 Translator API를 활용해 간단한 번역 웹앱을 만드는 방법을 안내한다.본 기능은 실험적이므로, 특정 플래그 활성화와 최신 Chrome 버전이 필요하다.2. 준비물Chrome 브라우저(버전 138 이상)(Canary, Dev, Beta 등 최신 버전 권장)실험적 플래그 활성화 (먼저 코드를 구동해보고 동작하지 않는다면 이 설정을 적용해 다시 시도해 보자!)주소창에 chrome://flags 입력 후 이동아래 플래그를 검색 ..
- [ DevOps/Docker ]Docker를 활용한 Nest.js 애플리케이션 컨테이너화 및 관리2025-07-18 18:42:51Docker를 활용한 Nest.js 애플리케이션 컨테이너화 및 관리1. Nest.js 프로젝트 생성my-nest-server 프로젝트를 생성 후 해당 프로젝트로 이동, 해당 프로젝트 내에서 Dockerfile을 생성하면 된다.C:\Users\dandycode\Documents\GitHub\docker-practice>nest new my-nest-server2. Dockerfile 생성FROM nodeWORKDIR /appCOPY . .RUN npm installRUN npm run buildEXPOSE 3000ENTRYPOINT [ "node", "dist/main.js" ]FROM node이 Dockerfile은 Node.js 런타임이 포함된 공식 node 이미지를 기반으로 시작한다. 즉, Node...
- [ 언어·프레임워크/React Native ][React Native] Expo 푸시 알림 완벽 정복 튜토리얼2025-07-18 14:49:59Expo 푸시 알림 완벽 정복 튜토리얼이 튜토리얼은 Expo의 푸시 알림 서비스를 사용하여 React Native 애플리케이션에 푸시 알림 기능을 통합하는 전체 과정을 안내합니다. 기본 개념 이해부터 실제 구현, 전송 및 수신 처리까지 모든 단계를 다룹니다.1. 소개: Expo 푸시 알림 서비스란?Expo 푸시 알림 서비스는 개발자가 Apple(APNs) 및 Google(FCM)의 푸시 알림 서비스를 직접 다루는 복잡성을 줄여주는 중개 서비스입니다. 이 서비스를 통해 iOS와 Android 플랫폼에 대해 동일한 방식으로 알림을 보낼 수 있어 개발 시간을 크게 단축할 수 있습니다.주요 이점:플랫폼 간 통일성: 단일 API로 Android와 iOS에 모두 알림을 보낼 수 있습니다.간소화된 설정: 복잡한 네이..