본문 바로가기

Web 프로그래밍/Javascript60

FCM Token이 계속 무효화되는 이유와 해결 방법 FCM(Firebase Cloud Messaging)에서 발급되는 fcmToken이 계속 무효화되거나 사라지는 현상은 다양한 이유로 발생할 수 있습니다. 아래에 주요 원인과 해결 방법을 구체적으로 정리해 드릴게요.🔄 1. 앱이 삭제되거나 재설치된 경우원인사용자가 앱을 삭제하거나 재설치하면 기존 fcmToken은 무효화됩니다.이는 FCM의 보안 정책에 따라 토큰 재발급이 강제되기 때문입니다.해결 방법앱이 실행될 때마다 getToken()으로 새 토큰을 받아와 백엔드에 업데이트하는 로직을 구현해야 합니다.import { getToken, onMessage } from "firebase/messaging";async function fetchAndUpdateToken(messaging) { try { .. 2025. 5. 22.
두 개의 Object array 특정 키 값으로 Join 하는 방법 JavaScript에서 두 개의 객체 배열(Object Array)을 특정 키를 기준으로 join하려면 SQL의 JOIN처럼 직접 구현해야 합니다. JavaScript에는 기본적으로 SQL처럼 자동으로 JOIN해주는 기능이 없기 때문에, map, filter, find 또는 reduce 등의 메서드를 활용해서 수동으로 조합해야 합니다. 아래는 다양한 방법으로 inner join(교집합 형태)을 구현하는 예시입니다.✅ 예시 상황const users = [ { id: 1, name: '철수' }, { id: 2, name: '영희' }, { id: 3, name: '민수' }];const orders = [ { userId: 1, product: '노트북' }, { userId: 2, product.. 2025. 4. 15.
Nuxt, Next) Hydration completed but contains mismatches. 오류 해결방안 Nuxt에서 발생하는 "Hydration completed but contains mismatches." 오류는 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 서로 다를 때 나타나는 문제입니다.즉, SSR(Server Side Rendering) 과 클라이언트 렌더링(Client Side Rendering) 결과가 일치하지 않을 때 이 오류 메시지를 브라우저 콘솔에서 확인할 수 있습니다.이 문제를 해결하려면, SSR과 CSR의 출력이 왜 달라졌는지를 파악해야 하며, 일반적으로는 아래와 같은 원인들이 많습니다.💡 오류 메시지: Hydration completed but contains mismatches."Hydration completed but contains mismatches."N.. 2025. 4. 7.
앱링크, 딥링크 개념 및 적용 앱링크, 딥링크 개념 및 적용앱링크는 모바일 앱의 컨텐츠에 딥 링크하기위한 개방형 옴니 채널 솔루션입니다. 라고 페이스북 공식문서에 설명이 나오지만 뭔 소리인가 싶다앱링크, 딥링크는 링크를 클릭 하였을 때 앱이 설치 되어 있으면 앱으로 연결이 되고 그렇지 않을 경우에는 URL로 설치 할 수 있게끔 하는 설계 방식.앱링크와 딥링크의 큰 차이는 custom scheme 을 사용하냐 안하냐의 차이이며 앱링크는 http와 https로만 앱링크가 연결이 가능하고 딥링크는 custom url shceme 으로도 가능하다. 또한 앱링크는 안드로이드 6.0 이상 부터 지원이 가능하지만 딥링크의 경우에는 직접 안드로이드의 URL과 매핑하기 때문에 어느 기기에서든 가능하다. 안드로이드와 iOS 연결하는 방식은 다르다.앱링.. 2024. 5. 13.
프론트엔드 개발자 기술면접 인터뷰 질문 모음(v2024.05.13) 프론트엔드 기술면접 실제현업 질문 모음최근 1년 간 프론트엔드 면접을 7번 정도 본 것 같다. 국내 IT 대기업 N사만 여러번, K사, 온라인쇼핑몰 C사 등등 여러군데를 면접을 진행했으며 비록 떨어졌지만 여러모로 좋은 경험을 하였습니다. 프론트엔드 엔지니어를 꿈꾸는 시니어 주니어 엔지니어들에게 면접을 진행하기전 필수적으로 알아야 할 질문과 마음가짐에 대해서 공유해보려고 합니다. 다른 프론트엔드 기술면접 관련된 글도 많지만 너무 많아서 조금 요약을 해보려고 합니다. 면접관으로 들어가시는 분들께서도 어떤 질문을 할지 모를 경우에는 참고하셨으면 좋겠습니다.Frontend 필수 언어중요도설명★★★★★프론트 엔지니어를 꿈꾼다면 정확하게 알고 있어야 하는 것들이며 하나라도 모르면 떨어진다고 봐도 무방하다. 꼭 알고.. 2024. 5. 13.
robotjs npm, yarn install 오류 해결방법(prebuild-install || node-gyp rebuild) 라이브러리 패키지는 일반적으로 다른패키지의 의존성을 많이 가지기 때문에 설치 도중 의존성 패키지가 적합하지 않는다면 설치가 제대로 되지 않는 경우가 많다. robotjs 라이브러리 설치하면 아래와 같은 오류를 많이 만날 것이다. Mac에서는 오류가 잘 안나지만 Windows계열에서 오류가 잦아 이번에 포스팅을 해보고자 한다. prebuild-install warn install no prebuilt binaries found (target=14.17.0 runtime=node arch=x64 libc= platform=win32) prebuild-install || node-gyp rebuild 위와 같이 오류메세지가 출력되면서 설치가 되지 않는다. 위의 이미지는 인터넷에 떠돌아 다니는 일반적인 오류메시.. 2021. 8. 29.