728x90 반응형 전체 글36 [웹 알림 서비스] Firebase Cloud Messaging(FCM) 기초 정리 웹 브라우저 환경에서 사용자에게 알림을 제공하는 방법 중 하나인 FCM(Firebase Cloud Messaging)에 대해 정리해보고자 한다.(실제 적용 과정은 추후 포스팅 예정) 1. FCM이란?FCM은 Google Firebase에서 제공하는 무료 푸시 메시징 서비스이다.이를 통해 Android, iOS, Web 애플리케이션에 메시지를 전달할 수 있으며, 사용자가 백그라운드(앱 실행 중이 아닌 상태)에서도 알림을 받을 수 있다.즉, FCM은 서버에서 클라이언트로 메시지를 안전하고 빠르게 전달하는 통로 역할을 한다. 2. 왜 웹에서 FCM을 사용할까?웹 환경에서 FCM을 활용하면 다음과 같은 상황에서 유용하다.새로운 글/댓글/이벤트 발생 시 사용자에게 알림 전송실시간 업데이트 알림 (예: 채팅, 예약.. 2025. 9. 2. Turborepo + Vite + React 모노레포 세팅하기 (TanStack Router, Tailwind, shadcn 포함) 계속 같은 프로젝트를 진행 중인데,유사한 UI의 시스템 2개를 동시에 관리해야 하는 경우 어떻게 해야할지에 대해 계속 고민됐었다. 이 경우 turborepo 사용을 많이 추천 받았는데,모노레포 구조가 익숙하지 않아 기존 방식대로 계속 작업하다가 이제야 도입해봤다. Turborepo + Vite + React + TanStack Router + TailwindCSS 세팅 과정 1. Turborepo 프로젝트 생성먼저 Turborepo 기본 뼈대를 만들어준다.npx create-turbo@latest cms-monorepocd cms-monorepo 생성된 구조는 다음과 같다.cms-monorepo/ apps/ # 실제 실행할 앱들 docs/ web/ packages/ # 공.. 2025. 8. 17. [Part .06] React 프로젝트에서 Recharts 사용하기: Vite + React 19 + Tailwind CSS 환경에서의 선택과 적용기 시스템 개발을 하다보면 다양한 차트를 시각적으로 표현한 대시보드 페이지를 제작할 일이 생긴다.이를 위해 리액트에서는 어떤 라이브러리를 사용하여 대시보드를 제작할 수 있을지 공부해 보고자 했다. 차트 라이브러리 비교 검토1. Chart.js (react-chartjs-2) 바닐라 자바스크립트, 제이쿼리 사용 시 주로 사용했었다.장점가장 널리 사용되는 차트 라이브러리다양한 차트 타입 지원커뮤니티와 문서가 풍부성능이 우수함단점React와의 통합이 완전히 매끄럽지 않음커스터마이징이 복잡할 수 있음TypeScript 지원이 아쉬움 2. D3.js장점무한한 커스터마이징 가능가장 강력한 데이터 시각화 도구세밀한 제어 가능단점학습 곡선이 매우 가파름개발 시간이 많이 소요됨React 컴포넌트로 래핑하기 복잡 3. Vic.. 2025. 7. 6. [Part. 05] TanStack Router로 React 프로젝트 라우팅하기 React 프로젝트에서 라우팅을 처리할 때 React Router가 가장 일반적인 선택이었지만, 최근 TanStack Router가 주목받고 있다.실제 프로젝트에 TanStack Router를 적용해보며 느낀 장점과 구현 방법에 대해 작성해보고자 한다. TanStack Router의 특징TanStack Router는 다음과 같은 특징을 가지고 있다.타입 안전성: 완전한 TypeScript 지원으로 컴파일 시점에 오류 감지파일 시스템 기반 라우팅: Next.js와 유사한 직관적인 라우팅 구조자동 코드 분할: 성능 최적화를 위한 자동 코드 스플리팅개발자 도구: 강력한 DevTools 제공 프로젝트 설정1. 패키지 설치npm install @tanstack/react-router @tanstack/react-.. 2025. 7. 5. [Part. 04] 라우팅된 페이지 새로고침 시 404 에러, 왜 뜨는걸까? React로 프로젝트를 생성하고 배포한 후 root가 아닌 경로에서 새로고침을 해보면 404가 뜨는 것을 볼 수 있다. 분명 NavLink(a 태그)로 이동했을 때나, 배포 전 새로고침 시에도 잘 되던 것이 왜 배포 후에는 안되는 걸까? 이는 React와 Spring Boot가 라우팅을 처리하는 방식이 달라 생기는 문제이다. React의 클라이언트 사이트 라우팅React는 BrowserRouter 방식으로 클라이언트 측에서 라우팅이 이루어지며, 경로에 매핑된 컴포넌트를 보여준다.또한, 브라우저의 URL은 변경하지만 실제로 서버에 요청을 보내지는 않는다. 브라우저의 기본 동작브라우저에서 새로고침하거나 URL을 직접 입력하여 접근하면 서버에 해당 경로에 대한 요청을 보낸다. 이러한 차이로 문제가 발생하며,.. 2025. 5. 14. [Part. 03] Github 비공개 저장소 vercel배포 본격적으로 페이지를 구성하고 작업을 들어가기 전,배포 시스템을 먼저 구축해보고자 한다. 어느정도 틀을 갖춘 후 진행할까 했지만, 현재 가장 궁금한 부분이라서 해당 내용부터 다루게 되었다. 배포는 vercel에 github 저장소를 연결해서 진행했다.master (main) 브런치를 등록해 놓으면 내가 작업한 것을 master 브런치에 merge 시키고 문제가 없는 것으로 판단되면, 자동 배포가 되어 편리하다. 우선, 깃헙 계정으로 vercel에 로그인 했다.https://vercel.com/ Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives develope.. 2025. 5. 11. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
