Day10

前端数据结构核心考点：

前端必须刷的 10 道数据结构题

强烈建议刷这几题：

前端面试中的数据结构，本质考察三个能力：

第一：基础结构理解

数组
哈希
栈
队列
链表

第二：算法思想

双指针
滑动窗口
递归
BFS
DFS

第三：工程应用

diff算法
缓存策略
任务调度
虚拟列表

如果能达到这种“算法题会写、复杂度会分析、工程场景能结合

基本就能达到 大厂前端实习的数据结构和算法要求。

个人博客更新bug

Turbopack 反复崩溃（日志中 11 次 FATAL panic，「Next.js package not found」，编译 /notes/\[slug\] 和 /\_not\-found 端点失败）→ dev 服务器的 HMR websocket 断开 → 浏览器里的 Next.js dev client 重连后自动整页刷新 → 刷新又触发编译 → 再次崩溃 → 无限循环。这就是页面一直刷新的原因。

根因：Turbopack 的失败状态被持久化进 .next/ 缓存目录，后续每次编译都命中同一份被污染的缓存，重装依赖也没用（node\_modules/next 本身可正常解析，排除了安装问题）。删除 \.next 是社区确认的修复方式。

处理过程

停止 dev 服务器，删除 \.next 缓存
清理未退出的僵尸 node 进程（旧进程 19500 一直占着 3000 端口）
重新启动 → 验证：首页 200 ✓、笔记页 200 ✓、0 次 panic、无刷新循环 ✓

项目上线话术

https://www\.yuque\.com/guluguluwater\-qkq0t/fo3vhf/imbczo3rmwwaewuf

倒推简历项目描述 → 每一条项目职责，都能接住这些问题
模拟面试自检 → 如果某一问你答不出来，说明项目包装不完整

fetch vs axios，面试时怎么说

面试官最喜欢问这个

推荐回答结构：

fetch 是 Web 原生 API，轻量但能力基础
axios 在工程层面更友好
拦截器、错误处理、请求实例在复杂项目中更有优势
实际项目中更倾向 axios + 封装

基于 axios 封装统一请求层，结合请求/响应拦截器实现 token 注入、错误兜底与接口数据规范化处理，减少组件耦合度，提高项目可维护性。

https://www\.yuque\.com/guluguluwater\-qkq0t/fo3vhf/bysc9s0gyd6ara24

fetch和axios练习

前端新手——react项目指南

src/
├── main.tsx           // 应用入口
├── App.tsx            // 应用外壳
├── router/            // 路由配置
│   └── index.tsx
├── pages/             // 页面级组件
│   └── Login/index.tsx
├── components/        // 通用组件
│   └── BaseButton.tsx
├── services/          // 接口请求（api）
│   └── user.ts
├── store/             // 全局状态（Redux / Zustand）
│   └── userStore.ts
├── hooks/             // 自定义 hooks
│   └── useRequest.ts
├── utils/             // 工具函数
│   └── format.ts
├── styles/            // 全局样式
│   └── index.scss
└── assets/            // 静态资源

main.tsx 只负责把应用跑起来创建React应用+挂载到DOM 主要内容：Router包裹，Provider，ReactDOM.createRoot
App.tsx 应用壳定义应用整体结构主要内容：路由出口，全局Layout，全局异常兜底
Pages 页面内容
Components 可复用UI组件
Services 接口接口=一个函数，而不是一段逻辑好处：页面与接口解耦，接口可复用，方便mock，统一维护
store 跨页面共享状态的唯一位置多页面共享数据，登录/用户信息，全局配置数据 store是全局数据源
Hooks 复用“逻辑” 发现多个地方有一模一样的useEffect+useState=>抽成hook，但是hook不是组件的替代品
Utils 纯函数特征：输入确定，输出确定，无副作用