全栈开发日志

React 状态管理选型思考

从 Context + useReducer 到 Zustand 的迁移实践，关注可维护性与性能的平衡，记录不同方案在不同规模项目中的表现。

React Zustand 状态管理

Tailwind CSS 实用技巧

自定义设计令牌、响应式断点策略，以及如何告别 CSS 命名冲突，提升样式开发效率。

CSS Tailwind

Next.js App Router 初探

服务端组件与客户端组件的边界划分，以及数据获取模式的演进，全栈思维的实践。

Next.js SSR

Node.js 中间件模式拆解

从 Express 到 Koa 的洋葱模型，理解异步中间件的执行顺序与错误捕获机制。

Node.js Express Koa

JWT 鉴权最佳实践

Access Token 与 Refresh Token 的配合使用，以及安全存储策略，兼顾安全与用户体验。

Auth JWT

PostgreSQL 索引优化实录

B-Tree 与 GIN 索引的选择，EXPLAIN 执行计划解读，慢查询定位与优化思路。

PostgreSQL 索引优化

Redis 缓存策略设计

缓存穿透、击穿、雪崩的应对方案，以及缓存与数据库一致性的实践探讨。

Redis 缓存策略

Docker 多阶段构建优化

缩小镜像体积，加快构建速度，生产环境下的 Docker 最佳实践总结。

Docker CI/CD

Nginx 反向代理配置详解

负载均衡策略、SSL 终结、WebSocket 代理，以及常用优化参数调优。

Nginx HTTPS

🛠️ 技术栈 —— 持续打磨的工具链

⚛️

React & Next.js

组件化开发、SSR/SSG、状态管理

🟢

Node.js & Express

RESTful API、中间件、鉴权设计

🐘

PostgreSQL & Redis

索引优化、缓存策略、数据建模

🐳

Docker & DevOps

容器化部署、CI/CD、Nginx 配置

💡 常用代码片段 —— 沉淀的实用轮子

                        
                        asyncHandler.js

// Express 异步错误处理包装器
const asyncHandler = (fn) => (req, res, next) =>
  Promise.resolve(fn(req, res, next)).catch(next);

export default asyncHandler;

                        
                        debounce.ts

// TypeScript 防抖函数
function debounce<T extends (...args: any[]) => void>(
  fn: T, delay: number = 300
): T {
  let timer: NodeJS.Timeout;
  return ((...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  }) as T;
}

                        
                        redis-cache.js

// Redis 缓存装饰器模式
const withCache = (redis, keyPrefix, ttl = 3600) =>
  async (key, fetchFn) => {
    const cached = await redis.get(`${keyPrefix}:${key}`);
    if (cached) return JSON.parse(cached);
    const data = await fetchFn();
    await redis.set(`${keyPrefix}:${key}`, JSON.stringify(data), 'EX', ttl);
    return data;
  };

🗺️ 学习路线 —— 从入门到全栈的成长路径

HTML / CSS / JS

前端三剑客，打好基础

React / Vue

现代框架，组件化思维

Node.js / Express

后端入门，API 设计

数据库 / 缓存

持久化与性能优化

DevOps / 部署

容器化与自动化运维