web 17

Firebase - Admin SDK 구동 원리

firebase-admin SDK란? Firebase Admin SDK의 Node.js 버전 서버 환경에서 Firestore, Auth, Storage 등에 접근할 수 있는 공식 라이브러리 Cloud Functions, Express, 직접 만든 Node.js 서버에서 사용 가능import * as admin from 'firebase-admin';if (!admin.apps.length) { admin.initializeApp();}const db = admin.firestore();→ 서버에서 인증 없이 Firebase 리소스에 접근 가능한 구조SDK란? Software Development Kit = 개발 도구 모음 일반적으로 포함되는 항목 라이브러리/패키지 문서 예제..

web 2025.08.01

WEB - REST API

REST API란? REST = Representational State Transfer 2000년 로이 필딩(Roy Fielding)의 박사 논문에서 제안 HTTP 기반으로 리소스를 표현하고 조작하는 웹 아키텍처 스타일 클라이언트(웹앱, 모바일앱)는 REST API로 서버 기능에 접근REST의 6가지 제약 조건 클라이언트-서버 구조 : UI와 데이터 처리 역할 분리 무상태성(Stateless) : 서버는 요청 간 클라이언트 상태 저장 X 캐시 처리 가능(Cacheable) : 응답 캐시 여부를 명시 계층화 시스템 : 중간 계층(ex. 프록시) 허용 일관된 인터페이스 : 리소스 접근 방식이 통일되어야 함 코드 온 디맨드 (선택) : 서버가 실행 코드 제공 가능 (거의 사용되지 않음)RE..

web 2025.08.01

Firebase - 파이어베이스 Functions

Firebase Functions = 서버리스 API 서버 1) HTTP Request 기반 : onRequest() 함수로 Express처럼 구성 2) 인증/보안 연동 쉬움 : Firebase Auth 통합 (context.auth) 3) Firestore 트랜잭션 활용 : DB 트랜잭션 로직 API에서 처리 가능 4) 글로벌 배포 및 확장 용이 : 자동 스케일링 및 리전 확장 5) 비용 효율적 : 사용량 기반 과금Firebase Functions가 처리하는 대표 기능 1) 예약 생성 : POST /api/reserve 2) 결제 시작 : POST /api/payment/start 3) 결제 성공 콜백 : POST /api/payment/webhook 4) 주문 상태 조회/업데이트 : ..

web 2025.08.01

Firebase - Nextjs14에서의 Auth 구현 방법론

Firebase + Next.js 14 기반 인증 시스템 설계Next.js App Router 환경에서 Firebase 인증을 구현하는 방식은 크게 2가지로 나뉩니다.1. ID 토큰 직접 사용 방식 인증 흐름: 클라이언트에서 getIdToken()으로 JWT 발급 → 요청 시마다 헤더에 첨부 전송 위치: Authorization: Bearer 유효 시간: 약 1시간 (자동 갱신 가능) SSR 지원: 비효율적 (수동 헤더 처리 필요) 보안 (XSS): 취약 (브라우저 JS 접근 가능) 보안 (CSRF): 안전 (헤더 기반) 권한 동기화: 클라이언트가 수동 갱신 필요 장점: 빠른 MVP 구현, 클라이언트 중심 앱에 적합 단점: SSR 및 장기 로그인 유지에 불리2. 쿠키 기반 세션 방식 ..

web 2025.06.21

Firebase - Auth 구현을 위한 클라이언트와 서버 사이드에서의 SDK 분리

Firebase client.ts와 admin.ts 분리 이유Firebase 프로젝트에서 client.ts와 admin.ts를 분리하는 것은 실행 환경, 권한 수준, 보안 책임이 다르기 때문입니다.1. 사용 목적 구분 구분 client.ts admin.ts 실행 위치 브라우저 (CSR) 서버 (API Route, SSR 등) 사용 SDK firebase/app, firebase/auth firebase-admin 역할 로그인, 로그아웃, getIdToken, onAuthStateChanged 등 세션 쿠키 생성/검증, 유저 삭제, DB 접..

web 2025.06.21

Firebase - 구글 Firebase 톺아보기

Firebase란 무엇인가?Firebase는 구글에서 제공하는 Backend-as-a-Service(BaaS) 플랫폼으로, 앱 개발에 필요한 백엔드 기능을 서버 구축 없이 빠르게 적용할 수 있도록 돕는 도구 모음입니다.1. Firebase의 등장 배경모바일 앱과 웹 서비스가 급속히 증가하면서, 개발자들은 인증, 데이터베이스, 파일 저장, 푸시 알림 등의 공통 기능을 반복해서 구현해야 했습니다. 이러한 중복 작업을 줄이고, 빠르게 MVP를 만들 수 있도록 등장한 것이 Firebase입니다.2. Firebase의 간단한 역사 2011년: Firebase 실시간 데이터베이스 서비스로 시작 2014년: Google에 인수됨 2016년: Google I/O에서 통합 플랫폼으로 재출시 이후: Firestor..

web 2025.06.21

Next.js - Windows + WSL2 + Node.js + Next.js14 + VSCode 디버깅 환경 세팅

디버거(Debugger)란? 단순히 에러 메시지를 보는 것을 넘어서 함수 호출 시점과 상태 변화를 추적하는 도구 스택 트레이스는 '함수 호출의 역사'를 보여줌 VS Code + Node.js 디버거 구조 VS Code는 Node.js의 디버그용 WebSocket 포트에 접속하는 클라이언트 역할 디버깅 순서: Node.js는 --inspect 또는 --inspect-brk 옵션으로 9229 포트를 엶 VS Code의 launch.json이 해당 포트에 연결 브라우저 F12처럼, Node 프로세스를 멈추고 상태를 분석 WSL2 + VS Code 디버깅 구조 WSL2 내에서 실행되는 Node.js를, Windows의 VS..

web 2025.06.03

Node.js - Mac과 Windows 개발환경 비교 및 추천

macOS vs WSL2: Node.js 개발환경 비교본인은 Windows를 쓰고 있지만, Node.js 개발할 때는 리눅스가 더 익숙하긴 하죠. 맥북은 쓰고 싶은데 비쌉니다.그래서 그냥 Node 개발할 때 과연 macOS와 Windows + WSL2 중 뭐가 더 좋을까 대충 알아보고 싶어졌습니다.🔍 요약 비교 (Node.js 개발 기준)항목MacOSWindows (WSL2)🐧 리눅스 호환성✅ 기본 Unix (macOS = Darwin 기반)✅ WSL2는 진짜 리눅스 커널 사용📦 npm/yarn 환경✅ 자연스럽고 안정적⚠️ WSL2 내에선 좋지만 윈도우 native는 충돌 많음🐳 Docker✅ Mac용 Docker 안정적 (단점: 느림)✅ WSL2에서 Docker Desktop 성능 우수💻 파일..

web 2025.06.03

React - CRA와 eject, 그리고 craco

CRA에서 eject란? craco로 대체하는 이유1. CRA(Create React App)란? 리액트 앱을 빠르게 시작할 수 있도록 Webpack, Babel 등의 설정을 숨긴 템플릿. ✔ 장점: 설정 없이 바로 개발 가능 ❌ 단점: 내부 설정(Webpack, Babel 등)을 수정하려면 제약 존재2. npm run eject란? CRA 내부의 숨겨진 설정(Webpack, Babel 등)을 프로젝트 디렉토리로 꺼내오는 명령어. $ npm run eject eject 후에는 config/와 scripts/ 디렉토리가 생성되어 전체 설정 파일을 직접 수정 가능.3. eject의 단점 ❌ 되돌릴 수 없음: 한 번 eject하면 undo 불가 ❌ 설정 책임 100%: CRA의 유지보..

web 2025.05.11

WEB - Web Worker, 웹 워커

Web Worker란? 브라우저에서 멀티스레드처럼 사용하는 방법1. Web Worker란? 메인(UI) 쓰레드와 분리된 백그라운드 쓰레드에서 JavaScript를 실행할 수 있게 해주는 기능. ✔ 정의: 브라우저가 제공하는 자바스크립트 멀티스레딩 구조. ✔ 특징: 메모리 공유 없이 메시지(postMessage) 기반 통신.2. Web Worker = 진짜 멀티스레드? ✔ Yes: 브라우저는 OS 레벨 쓰레드로 관리. ❗ 하지만: 메모리 공유 불가, 락/뮤텍스 없음 → “엄격한 격리 기반 병렬 처리”.3. Web Worker vs 전통 멀티스레드 항목Web WorkerC/Java 멀티스레드 스레드 분리✅ 됨✅ 됨 메모리 공유❌ 없음✅ 가능 통신 방식postMessa..

web 2025.05.11