유리의 개발새발

지난 시간에는 RN 앱에 Firebase SDK를 붙여봤습니다.이번에는 백엔드에서 FCM을 직접 호출하는 부분을 구현해 보겠습니다.(저는 애플 개발자 계정이 없으니, Android 기준으로만 테스트합니다 🙏) 1. Firebase Admin 설정Firebase 콘솔 → 프로젝트 개요 → 프로젝트 설정 → 서비스 계정“새 비공개 키 생성” 버튼 클릭 → JSON 키 파일 다운로드이 파일을 Express 프로젝트 루트에 둡니다.이 키가 백엔드에서 Firebase Admin SDK를 초기화하는데 사용됩니다. Springr과 Express 중... 음..... Express로 하겠습니다!Node.js로 설정하고 다운ㄱㄱ그리고 그걸 백엔드 프로젝트 루트에 둡니다! 다음으로 패키지 설치npm i firebase-..

생각해 보니, RN 0.76 이후로는 Firebase를 직접 붙여본 적이 없었다.게다가 패키지도 몇몇은 지원이 중단됐다고 들었고… 🤔“이참에 연습 삼아 평소에 약하다고 느꼈던 부분들(FCM, Chat, Animation, Native Module)을 차례대로 직접 해보자”라는 마음이 생겼다. 이건 첫 번째 레슨 FCM Firebase 콘솔: https://console.firebase.google.com/구글 계정 로그인새 Firebase 프로젝트 생성Android, iOS 앱 각각 등록안드로이드 세팅부터 시작Android 앱을 등록할 때 패키지 네임을 입력한다.등록이 끝나면 google-services.json 파일을 내려받는다.이 파일을 프로젝트의 android/app 폴더에 넣는다.Firebase..

서버 액션(Server Actions)은 아주 간단하게 말하면,폼 데이터를 서버로 직접 보낼 수 있는 새로운 방법이야.useState, useEffect, fetch 이런 거 다 안 쓰고도 가능해! 💥 왜 필요한데?기존 방식은 이랬지input에서 값 입력useState로 값 저장fetch로 API 요청서버에서 처리다시 클라이언트로 응답 받고 상태 업데이트너무 복잡해…서버 액션은 이걸 그냥 이렇게 만들어줌폼 제출 → 서버 함수 호출 → 끝✨ 서버 액션 한 줄 정의"서버에서 실행되는 함수인데, 클라이언트에서 바로 호출 가능함"// app/page.tsx'use client';export default function Page() { async function createPost(formData: Form..

스트리밍(Streaming)은 말 그대로, 아주 큰 데이터를 조각내어 연속적으로 전송하는 기술입니다. 전체 동영상을 다 다운로드할 필요 없이, 앞부분부터 바로 재생할 수 있는 것처럼데이터를 "순차적으로 받아서 바로 사용"하는 방식입니다. 🧠 스트리밍은 왜 필요한가요?일반적인 방식이라면, 서버는 모든 데이터를 준비한 후에야 클라이언트로 응답을 보냅니다.하지만 데이터가 크거나 준비 시간이 오래 걸리는 경우, 사용자는 하얀 화면만 보면서 기다려야 하죠.🚫 전체 렌더링이 끝날 때까지 아무것도 못 보는 건 사용자 입장에서 큰 불편입니다. 그래서 등장한 게 스트리밍 렌더링입니다.✅ 핵심 개념 요약데이터를 한 번에 다 전송하지 않고, 조각 단위로 나눠서 연속적으로 보냄클라이언트는 데이터 일부만 받아도, 그 부분부..

Next.js를 쓰다 보면 "데이터 캐싱"이라는 개념을 한 번쯤 마주하게 된다. 이건 단순히 속도만 빠르게 하자는 게 아니라, 사용자 경험과 서버 비용까지 챙기는 핵심 전략이다.이번 글에서는 Next.js에서의 데이터 캐싱이 어떻게 동작하는지, 그리고 SSR, SSG, ISR, fetch API와의 관계에서 어떤 식으로 작동하는지를 정리해보자.1️⃣ 왜 캐싱이 중요한가?사용자가 동일한 데이터를 여러 번 요청할 때 서버를 매번 호출하면 리소스 낭비다.데이터를 캐싱하면:응답 속도가 빨라지고 (성능 향상),API 서버 트래픽이 줄어들고 (비용 절감),서버 과부하도 방지된다.2️⃣ Next.js의 캐싱 전략 요약Next.js에서의 캐싱은 요청 유형에 따라 달라진다:렌더링 방식캐싱 기본값비고Static Gener..

기존의 페이지 라우터에서는 데이터 패칭을 어떻게 했죠?기억나시나요?getServerSideProps, getStaticProps, getInitialProps 같은 특수 함수들을 사용했죠.페이지 단위에서만 데이터 패칭이 가능했습니다.단점은 무엇일까요?바로 프롭스 드릴링(Props Drilling)입니다.페이지에서 받아온 데이터를 하위 컴포넌트에 일일이 전달해야 했습니다.상위 → 중간 → 하위로 계속 전달하다 보면, 컴포넌트가 복잡해지고 유지보수가 어려워집니다.그럼, App Router에서는 데이터 패칭을 어떻게 할까요?이제는 서버 컴포넌트(Server Component)라는 강력한 도구가 생겼습니다.서버 컴포넌트 안에서 async 함수로 비동기 처리를 할 수 있고,필요한 데이터를 그 자리에서 직접 패칭할..

📌 이것은, App Router의 가장 핵심 개념 중 하나다.React Server Component란?리액트 18부터 등장한, 완전히 새로운 유형의 컴포넌트입니다.기존 리액트 컴포넌트와는 다르게, 오직 서버에서만 실행되고,브라우저에서는 실행조차 되지 않습니다.📌 특징 요약✅ 서버에서만 실행됨❌ 브라우저로 JS 번들 전송 ❌ (코드 자체가 클라이언트에 가지 않음)✅ 비동기(fetch, DB 쿼리 등) 가능❌ useState, useEffect 등 클라이언트 훅 사용 불가🤔 이게 뭔 말인가 싶죠? 네, 저도 그렇습니다."컴포넌트가 리액트인데 브라우저에서 안 돌면 대체 뭔데?""그럼 JSX는 뭐고 렌더링은 어디서 하는 건데?"이런 생각이 드는 게 정상입니다.📌 근데, 이게 왜 등장한 건데?🤯 Rea..

페이지 라우터(Page Router)랑 너무 다른데요...?아니... 하... 뭐 어쩌겠어요. 시대의 흐름은 따라가야죠. 해야죠.이번에는 App Router 기반으로 프로젝트를 만들어보겠습니다.먼저 생성된 디렉토리 구조를 확인하고, 각 폴더가 어떤 역할을 하는지 간단히 설명드릴게요.npx create-next-app@latest {projectName} 구성부터 보져.✅ app/ 디렉토리App Router의 중심이 되는 디렉토리입니다.pages/ 대신 app/ 폴더를 루트로 사용하며, 여기에 URL 경로를 기준으로 폴더와 파일을 구성합니다.라우팅, 레이아웃, 에러 핸들링까지 전부 여기서 처리됩니다.✅ layout.tsx각 경로마다 공통으로 유지할 UI, 예를 들면 헤더, 사이드바, 푸터 같은 것들을 여기..