반응형 전체 글79 FCM 웹 푸시 실전 테스트: 중복 알림 문제와 브라우저 상태별 동작 지난 글 [웹 푸시 알림 삽질기: Firebase FCM 적용 중 알림이 안 뜰 때 해결법]에서는“푸시 이벤트는 잡히는데 알림이 안 뜨던 문제”를 다뤘다. 이번 글은 그 다음 단계,👉 알림은 뜨는데 중복으로 두세 번씩 표시되던 문제와👉 브라우저 상태별로 푸시 알림이 어떻게 동작하는지를 테스트한 기록이다. 1. 중복 알림 문제 😅처음 Firebase 콘솔에서 테스트 메시지를 보냈을 때,똑같은 알림이 두 번, 많게는 세 번씩 뜨는 현상이 발생했다. 원인Firebase에서 notification 메시지를 보내면 → 브라우저가 자동으로 알림을 띄움그런데 내 서비스워커 코드에서도 showNotification을 또 실행결과적으로 알림이 중복 표시된 것즉, “Firebase도 띄우고, 내가 또 띄우고” → 알.. 2025. 8. 26. 웹 푸시 알림 삽질기: Firebase FCM 적용 중 알림이 안 뜰 때 해결법 지난 글 [웹에서 Firebase Cloud Messaging(FCM) 푸시 알림 적용하기]에서는 기본 세팅(프로젝트 설정, VAPID 키, 토큰 발급 등)까지 정리했었다.“여기까지 하면 바로 알림 오겠지~” 하고 신나게 테스트했는데… 👉 로그는 찍히는데 알림이 안 뜨는 사태 발생 😱 이번 글은 그때 했던 삽질 기록 + 해결 팁을 남겨둔다.혹시 저처럼 똑같이 헤매는 분들께 도움이 되길 🙏 1. 문제 상황서비스워커 등록은 잘 됐음 → DevTools에서도 Activated 확인푸시 이벤트도 들어옴 → 콘솔에 [SW] Push Received: 로그 찍힘 근데 알림 UI는 전혀 안 뜸… “이게 뭐야? 푸시 이벤트는 잡히는데 정작 사용자한테는 아무 것도 안 보이네?” 2. 삽질의 여정 🥲(1) Serv.. 2025. 8. 25. 웹에서 Firebase Cloud Messaging(FCM) 푸시 알림 적용하기 웹에서 푸시 알림을 붙여야 하는 일이 생겼습니다.앱에서는 흔히 쓰던 FCM이지만, 웹은 처음이라 문서를 보면서 하나씩 적용해봤습니다.생각보다 놓치기 쉬운 포인트가 있어서 정리해둡니다. 1. 사전 준비HTTPS 환경에서만 동작합니다. (개발은 http://localhost 허용)Firebase 콘솔 → Project settings → Cloud Messaging → Web configuration에서 VAPID Key를 생성하고 Public Key를 복사해둡니다.iOS Safari는 iOS 16.4 이상, 그리고 홈 화면에 추가된 PWA 환경이어야 알림이 옵니다.👉 여기서 첫 번째 깨달음: 서비스워커, HTTPS, VAPID 키 이 세 가지가 없으면 진행이 안 됩니다. 2. Firebase 초기화먼저.. 2025. 8. 20. robots.txt와 sitemap.xml – 검색 허용의 문지기들 SEO를 공부하다 보면 반드시 마주치는 파일이 있다.바로 robots.txt와 sitemap.xml이다. 이 두 파일은 검색엔진이 내 사이트를 얼마나, 어떻게 크롤링할지 제어하는 역할을 한다.한마디로, 검색 허용의 입구 관리인 같은 존재다. 1. robots.txt란?robots.txt는 사이트 최상단 루트 디렉터리에 위치한 텍스트 파일로,검색 엔진 봇(crawler)에게 어떤 페이지를 크롤링해도 되는지, 하지 말아야 하는지를 알려주는 규칙이다. 📁 위치 예시:https://example.com/robots.txt ✅ 기본 구조 예시User-agent: *Disallow: /admin/Allow: /키워드설명User-agent대상이 되는 봇 지정 (*은 모든 봇)Disallow크롤링 금지 경로Al.. 2025. 8. 4. devDependencies인데 왜 설치가 안 되지? 배포 환경에서 겪은 삽질 공유 🙋♀️ 시작은 사소한 devtools 에러였다React Query를 잘 쓰고 있었고,개발 중엔 @tanstack/react-query-devtools도 함께 쓰고 있었다.쿼리 상태를 실시간으로 볼 수 있고, 캐시도 초기화할 수 있어서 아주 유용했다. 그런데…배포 후 콘솔에 이런 에러가 떴다.Module not found: Error: Can't resolve '@tanstack/react-query-devtools'로컬에선 문제 없었는데 배포 환경에선 왜 안 되는 걸까? 🔍 문제 요약 1. 나는 @tanstack/react-query-devtools를 devDependencies에 넣었음2. 로컬 개발환경에서는 문제없이 잘 동작3. 그런데 배포 서버에서는 모듈을 못 찾는 에러 발생 🤯 원인은 .. 2025. 8. 4. 검색 결과에 직접 영향을 미치는 메타태그 정리 웹페이지를 만들면서 태그를 무심코 복붙만 한 적이 있다면,이 글을 통해 다시 한 번 정리해볼 필요가 있다. 메타태그는 검색엔진이 페이지를 어떻게 이해하고, 검색결과에 어떻게 보여줄지를 결정짓는 핵심 정보다.잘 설정하면 클릭률(CTR)과 검색 노출 최적화에 도움이 되고,잘못 설정하면 검색에서 누락되거나 이상하게 노출될 수 있다. 이번 글에서는 실전에서 가장 중요한 메타태그 4가지 – title, description, robots, og 태그에 대해 정리해본다. 1. – 검색 결과의 제목 가장 기본이자 가장 중요한 태그.검색 결과에서 페이지의 제목으로 직접 노출된다.개발자가 알아야 할 SEO 기본 개념 검색 엔진: 제목 분석에 큰 비중을 둠사용자: 가장 먼저 클릭 여부를 판단하는 기준TIP:50~6.. 2025. 8. 1. 도메인과 SEO, 정말 영향이 있을까? SEO를 공부하다 보면 꼭 한 번쯤 궁금해지는 주제가 있다.바로 도메인 이름이 검색엔진 최적화(SEO)에 얼마나 영향을 줄까? 하는 것이다. 특히 개인 블로그나 웹 서비스를 새로 만들 때,"도메인에 키워드를 넣어야 하나?" "오래된 도메인이 더 SEO에 유리한가?" 같은 질문이 자연스럽게 생긴다. 이번 글에서는 이와 관련된 주요 오해와 실제 영향을 정리해본다. 키워드가 들어간 도메인이 유리할까? 과거에는 "exact match domain(정확 일치 도메인)"이라고 해서bestshoes.com, koreanfooddelivery.com 같은 검색어와 일치하는 도메인이 상위 노출에 유리한 시절이 있었다. 하지만 지금은 그렇지 않다. 구글은 2012년 EMD 업데이트 이후, 단순히 키워드만 포함됐다고 해서.. 2025. 7. 28. 개발자가 꼭 알아야 할 SEO 기본 개념 웹 서비스를 만들다 보면 "SEO"라는 단어를 자주 접하게 된다.특히 프론트엔드 개발을 하다 보면, 검색 노출과 관련된 문의나 요구가 자연스럽게 따라온다. 나 역시 처음에는 SEO를 마케팅 팀의 일이라고 생각했다.하지만 실제로 웹페이지가 검색에 잘 노출되기 위해서는 개발자가 챙겨야 할 기술적 요소들이 상당히 많았다. 그래서 이번 기회에 SEO에 대해 하나씩 정리해보려 한다. SEO란? SEO(Search Engine Optimization)는 말 그대로 검색엔진 최적화다.즉, 구글이나 네이버 같은 검색엔진에 웹사이트를 더 잘 노출시키기 위한 모든 전력과 기술을 말한다.그렇다면 검색엔진은 어떤 원리로 웹페이지를 찾아서 보여줄까? 검색엔진의 동작 원리 (3단계) 1. 크롤링(Crawling)검색엔진 봇(.. 2025. 7. 25. [JavaScript] 문자열을 반복해서 출력하는 다양한 방법 🧩 상황 예시프로그래머스, 백준 등 코딩 테스트에서문자열을 N번 반복 출력해야 할 때가 있어요.예를 들어, 문자열 "abc"를 3번 반복해서 출력하라면?abcabcabc 이렇게 출력해야 하죠. 💡 자바스크립트에서 문자열 반복하는 다양한 방법 ✅ 1. .repeat() 메서드 사용 (가장 간단)ES6부터 지원되는 문자열 전용 메서드입니다. const str = 'abc';const repeated = str.repeat(3);console.log(repeated); // abcabcabc 장점: 가장 직관적이고 깔끔함주의: 브라우저/Node.js가 ES6 이상이어야 함 ✅ 2. for 반복문 이용const str = 'abc';let result = '';for (let i = 0; i 장점: 반.. 2025. 4. 30. 이전 1 2 3 4 ··· 9 다음 반응형
