[JavaScript] Firebase Cloud Functions 연동(3) - DB 조회 후 FCM 알림 전송

구현 목표지정된 시간마다 자동으로 Firestore에서 데이터를 조회해서조건을 만족하면 FCM으로 알림을 전송하는 기능을 구현한다. onShedule 예약 함수 작성// The Cloud Functions for Firebase SDK to create Cloud Functions and triggers.const { logger, setGlobalOptions } = require("firebase-functions/v2");const { onSchedule } = require("firebase-functions/v2/scheduler");// The Firebase Admin SDK to access Firebstore.const { initializeApp } = require("firebase-..

• format_list_bulleted JavaScript
• · 2025. 8. 4.
• textsms

[Next.js] App Router의 렌더링 전략 | CSR, SSR, SSG, ISR

Pages Router와 App Router의 렌더링 전략 구현 차이Pages Router를 사용했을 때는 `getServerSideProps`, `getStaticProps` 등을 사용했기 때문에API 이름만 봐도 렌더링 전략을 명확하게 구분할 수 있었다. 하지만 App Router에서는 더 이상 이러한 API를 사용하지 않고서버/클라이언트 컴포넌트, 그리고 `fetch()` 함수와 `cache`, `revalidate` 옵션을 조합하여 렌더링 전략을 구현한다. App Router를 사용하면서 생긴 의문App Router로 프로젝트를 구현하면서 `cache: 'force-cache'` 옵션을 사용했던 적이 있다. "빌드 시"에 HTML 파일을 생성할 의도는 없었고,그냥 데이터를 서버에서 불러오고, 추가..

• format_list_bulleted JavaScript
• · 2025. 7. 26.
• textsms

[JavaScript] Firebase Cloud Functions 연동(2) - 지정된 시간마다 호출되는 함수

구현 목표평일 오후 5시~5시 50분에 10분 간격으로 자동 실행되는 함수를 만들었다.함수가 실행되면 조건 충족 여부에 따라 DB에 데이터를 추가한다. onSchedule 예약 함수 작성지정된 시간에 함수를 실행하도록 예약하려면 `firebase-functions/v2/scheduler`에서 제공하는 `onSchedule` 핸들러를 사용하여 지정한 시간마다 함수 로직을 호출한다. 이를 위해서는 프로젝트에 `Cloud Scheduler API`가 사용 설정되어 있어야 하는데,대부분의 Firebase 프로젝트에서는 이미 사용 설정이 되어 있을 것이다.사용 설정 여부는 Google Cloud 콘솔에서 확인할 수 있다. const { logger, setGlobalOptions } = require("fire..

• format_list_bulleted JavaScript
• · 2025. 7. 22.
• textsms

[JavaScript] Firebase Cloud Functions 연동(1) - 기본 함수 테스트

구현 목표매일 특정 시간마다 특정 사이트를 스크래핑해서 원하는 데이터가 올라왔는지 확인하고,데이터가 올라왔다면 DB에 저장 후, 앱 푸시를 보내는 기능을 구현하고 싶다. 일단 Functions가 어떻게 작동하는지 직접 코드를 작성하고 실행해 보면서 배워보려고 한다.이번 글에서는 Firebase Functions를 초기화하고, 함수를 작성 후 배포까지 해 보았다. 프로젝트 초기화 및 구조 변경npm install -g firebase-toolsFirebase CLI를 설치한다. firebase login다음 명령어를 실행하여 Google 계정으로 Firebase에 로그인한다. firebase init`firebase init`을 실행한다. Firestore와 Fuctions를 선택한다.참고로 Firebas..

• format_list_bulleted JavaScript
• · 2025. 7. 17.
• textsms

[Next.js/TypeScript] NAVER Maps Geocoding API로 좌표 검색하기

구현 목표 입력 창에 주소를 입력하여 검색하면 해당 주소의 좌표로 이동하고, 지도를 클릭하면 해당 지점의 좌표로 주소를 검색하는 기능을 만들었다.기능 구현을 위해 Naver Maps API의 Dynamic Map, Geocoding, Reverse Geocoding 기능을 사용했다. 네이버 클라우드 플랫폼 Application 등록사용할 API를 선택해서 Application을 등록한다. 생성된 Application에서 [인증 정보] 버튼을 클릭한다. NEXT_PUBLIC_NAVER_CLIENT_ID=발급받은_ID인증 정보에 있는 클라이언트 ID를 `.env`에 다음과 같이 저장했다. 구현 코드타입스크립트 사용 준비npm i -D @types/navermapsNAVER Maps API 타입 정의 파일을 ..

• format_list_bulleted JavaScript
• · 2025. 7. 4.
• textsms

[Next.js] Google Analytics Data API (GA4) 연동해서 방문자 데이터 가져오기

구현 목표Google Analytics(GA4)의 Data API를 이용해서 Next.js에서 “일자별 방문자 수”, “운영체제별 방문자 수”, “조회수 상위 페이지” 데이터를 가져오는 API를 구현해 보자. Google Analytics Data APIGA4에서 수집한 통계 데이터를 외부 앱에서 사용할 수 있도록 제공하는 API이다. 이 API를 사용하기 위해서는 서비스 계정을 생성하고, JSON 형태의 키 파일을 발급받아야 한다. 서비스 계정 생성구글 클라우드 콘솔에서 `IAM 및 관리자 > 서비스 계정` 탭에 들어가서 [서비스 계정 만들기] 버튼을 클릭한다. `서비스 계정 ID` 항목만 입력하고 [완료] 버튼을 누르면 간단하게 서비스 계정이 생성된다. JSON 키 파일 발급새로 생성한 서비스 계정의..

• format_list_bulleted JavaScript
• · 2025. 6. 27.
• textsms

[Next.js] 검색 기능 사용을 유도하는 툴팁 구현하기

문제 상황두 달 전에 웹소설 캘린더에 작가나 작품명을 검색할 수 있는 검색 기능을 추가했다.이 서비스의 핵심 기능이라고 생각했기 때문에 많은 사용을 기대했다.하지만 GA 데이터를 확인해 보니, 이용률이 거의 제로에 가까웠다. 사용자가 검색 기능의 존재를 인지하지 못하고 있다고 생각돼서검색 기능의 사용을 유도하기 위해 검색 버튼 하단에 툴팁을 추가해보기로 했다. 툴팁 UI툴팁은 기능에 대한 보조 설명을 제공하거나, 혜택 정보 제공, 다음 행동을 제시하는 경우에 사용할 수 있다.나는 사용자들에게 검색 기능이 있다는 것을 알리고, 자연스러운 사용을 유도하기 위해 툴팁을 사용했다. 툴팁 컴포넌트 구현import Image from "next/image";export default function SearchTo..

• format_list_bulleted JavaScript
• · 2025. 5. 30.
• textsms

[React] 성능 최적화: React.memo보다 먼저 고려할 컴포지션 패턴

원문: Beyond React.memo: Smarter Ways to Optimize Performance 소개React 성능 최적화와 관련하여 개발자가 가장 먼저 찾는 도구는 `React.memo`입니다. 이는 리렌더링 문제를 발견했을 때 잡는 망치인데, 갑자기 모든 것이 못처럼 보입니다. 하지만 많은 경우에 React의 구성적 특성에 더 잘 부합하는 더 간단하고 우아한 솔루션이 있다고 하면 어떨까요? 오늘은 React가 컴포넌트를 렌더링하는 방법에 대한 몇 가지 기본 개념을 살펴보고, 메모이제이션의 복잡성과 문제없이 성능을 크게 향상시킬 수 있는 컴포지션 패턴을 공유하고자 합니다. 리렌더링 미스터리 일반적인 시나리오부터 시작하겠습니다: 버튼으로 트리거되는 모달 대화창과 같은 간단한 기능을 React..

• format_list_bulleted JavaScript
• · 2025. 4. 26.
• textsms

[Next.js 15] 동적으로 메타 태그 생성하기 Dynamic Metadata

Dynamic Metadata가 필요한 경우검색 페이지에서 검색어에 따라 `title` 항목이 `{검색어} 검색 결과 | 웹소설 캘린더`라는 동적인 메타데이터를 생성하고 싶었다. 이처럼 페이지의 콘텐츠나 URL 파라미터에 따라 메타데이터가 변경되어야 하는 경우에는 동적 메타데이터 생성이 필요하다. Next.js의 Metadata 생성 방법Next.js는 SEO를 개선하기 위해 애플리케이션 메타데이터(`head` 요소 내부의 `meta` 및 `link` 태그)를 자동으로 생성해 주는 API를 제공한다. Static Metadata (정적 메타데이터)// layout.tsximport type { Metadata } from 'next' export const metadata: Metadata = { ti..

• format_list_bulleted JavaScript
• · 2025. 4. 1.
• textsms

Next.js & Supabase로 검색 결과 페이지네이션 구현하기

검색 결과 페이지네이션의 필요성검색 결과가 많아지면 슈퍼베이스의 쿼리 개수 제한(1,000개)을 초과하거나 성능이 저하될 수 있다.이를 해결하기 위해 검색 결과를 n개씩 나눠서 가져오는 페이지네이션 기능을 구현했다. page 쿼리 파라미터 추가검색 페이지의 URL을 `/search?q=hello&page=2`와 같이 변경하여 검색어와 페이지 정보를 포함하도록 설정한다. 검색어로 URL 업데이트하기import { useRouter, useSearchParams, usePathname } from "next/navigation";const { replace } = useRouter();const pathname = usePathname();const searchParams = useSearchParams()..

• format_list_bulleted JavaScript
• · 2025. 3. 30.
• textsms