Tailwind CSS @source 사용법: 클래스 감지 누락 해결 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 클래스가 맞는데도 스타일이 적용되지 않는 상황을 자동 콘텐츠 감지와 @source 관점에서 정리합니다. 컴포넌트 위치, 모노레포 공용 UI 패키지, 외부 라이브러리, CMS나 JSON 기반 클래스처럼 Tai…
더 읽기Next.js
React 기반의 풀스택 프레임워크 Next.js의 구조와 활용 방법을 정리합니다.
Firebase Hosting App Hosting 차이: 정적 배포와 SSR 기준
이 글에서 정리하는 내용 Firebase 과 이 무엇을 해결하는 서비스인지부터, 정적 사이트·SPA·Next.js 프로젝트에서 어떤 선택이 더 자연스러운지까지 한 번에 정리합니다. 글을 끝까지 보면 프로젝트가 CDN 중심 배포에 가까운지, 서버 렌더링과 운영 자동화가 …
더 읽기
Firebase 보안 규칙 설계: Firestore와 Storage 권한 관리하기
주요 포인트 한눈에 보기 이 문서는 GPT를 활용해 Firebase 보안 규칙을 학습하고 실제 프로젝트에 적용하는 과정을 정리합니다. Firestore Database와 Firebase Storage 규칙을 중…
더 읽기
프론트엔드 배포 로드맵: Vercel, Firebase Hosting, App Hosting 기준
이 글은 프론트엔드 배포 오류 체크리스트: Vercel, Vite, Expo 문제 해결의 세부 항목입니다. 전체 설정 흐름과 관련 오류 해결 순서는 대표 허브 글에서 함께 확인할 수 있습니다. Firebase 글은 있지만 Vercel, Firebase, SSH/SF…
더 읽기
React 라이브러리 조합 가이드: Zustand·TanStack Query·shadcn/ui 선택 기준
React 라이브러리 조합 선택 핵심 요약 이 글은 React, Vue, Svelte 중 무엇을 고르는 비교 글이 아닙니다. React를 이미 선택한 프로젝트에서 Zustand, TanStack Query, shadcn/ui, Radix UI, React Hook Fo…
더 읽기
Firebase 초기화 구조: Next.js firebase.ts 설계 기준
주요 포인트 한눈에 보기 이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때 어떤 방식으로 제작되었는지 프로젝트를 분석합니다. 그 중 이번 챕터에서는 firebase.ts 초기화 …
더 읽기
Next.js package.json: scripts dependencies 이해
이 글에서 정리하는 내용 Next.js 프로젝트를 처음 열었을 때 많이 보게 되는 scripts, dependencies, devDependencies, next dev/build/start를 초심자 기준으로 한 흐름으로 정리합니다. 용어를 따로 외우기보다 프로젝트가 …
더 읽기
Next.js 성능 최적화: 배포 플랫폼별 개선 기준
주요 포인트 한눈에 보기 Next.js는 서버 사이드 렌더링, 코드 분할 등 강력한 기능으로 웹 성능 최적화를 지원합니다. 이 글에서는 코드 및 배포 최적화 실제 사례를 분석하고, Vercel, AWS, Netlify 등 주요 배포 플랫폼을 비교하여 프로젝트에 맞는 최…
더 읽기
Next.js 렌더링 성능 최적화: React 화면이 느릴 때 기준
주요 포인트 한눈에 보기 React의 렌더링 성능은 사용자 경험(UX)과 검색 엔진 최적화(SEO)에 결정적인 영향을 미칩니다. Next.js는 서버 사이드 렌더링(), 정적 사이트 생성() 등 강력한 기능을 통해 React의 성능을 극대화하는 프레임워크입니다. 이 글…
더 읽기
Axios 사용법: React Next.js에서 API 요청 구조 잡는 법
주요 포인트 한눈에 보기 Axios는 단순히 HTTP 요청을 보내는 도구가 아니라, 프론트엔드 개발자가 복잡한 비동기 통신을 체계적으로 관리할 수 있게 돕는 강력한 라이브러리입니다. 자동 JSON 변환, 요청/응답 인터셉터, 공통 설정 관리에러 처리, 요청 취소 기능…
더 읽기