既然你学完了MERN(MongoDB、Express、React、Node.js）

图像.png

您终于在 YouTube 上完成了整个 MERN 教程。在接下来的几周内，您将致力于自己的梦想项目。现在你完成了，你想知道：是吗？

对你们中的一些人来说，确实如此。但是对于那些寻求对 Web 开发有更全面了解的人来说，您还有很长的路要走。因此，为了让您步入正轨，这里汇集了一些必备技术，以扩展您的网络知识：

PostgreSQL

虽然像 MongoDB 这样的 NoSQL 数据库有其优点和用例，但 SQL 数据库是必须知道的。SQL 查询语言非常强大，允许您进行更复杂和高效的查询。与 NoSQL 数据库不同的是，SQL 数据库强制执行传入数据库的数据结构，确保数据的有效性。

为什么要学习：了解 SQL 和关系数据库，非常有用。

Next.js

create-react-app可以走很长的路，但最终您将需要诸如 Next.js 之类的框架提供的功能。使 Next.js 与众不同的关键特性是服务器端渲染 (SSR)。这是在服务器端而不是在客户端创建 HTML 页面的时候。这种方法的好处是更好的性能和 SEO。Next.js 提供的另一个优势是静态站点生成 (SSG)。如果页面不需要外部数据，则可以在构建时进行预渲染，从而显着提高加载时间。Next.js 还具有自动代码拆分功能，这意味着只会加载特定页面所需的 JavaScript 和 CSS，这又是一次性能提升。

为什么你应该学习：理解和使用服务器端渲染。

TypeScript

如果您对学习一门新“语言”的想法感到畏惧，请不要害怕。从技术上讲，TypeScript 只是 JavaScript 的超集，大部分工作已经为您完成。使用 TypeScript，您可以利用带有类型定义的库，让您轻松获得自动完成和静态类型的所有好处。

为什么你应该学习：用于自动完成、静态类型和捕获错误。

React Query

React Query 提供了一种从 API 获取数据的更好方法。它提供了许多有用的功能，例如加载变量、分页支持，也许最重要的是缓存。通过自动缓存您的数据，React Query 摆脱了将此类数据存储在 Redux 等全局状态中的需要，并使您的 API 调用更加高效。更重要的是，React Query 还可以与 GraphQL API 一起使用，这是下一个主题。

为什么你应该学习：用于缓存和消除对 Redux 的需要。

GraphQL

GraphQL 背后的想法很简单：只返回你想要的数据，不多也不少。GraphQL API 只有一个端点，您需要做的就是告诉它要执行的操作以及之后要返回的数据。GraphQL 旨在替代传统的 REST API，但由于其灵活性，在中型到大型项目中使用时效率最高。

GraphQL 代码生成器

对于喜欢 TypeScript 的人来说，GraphQL 代码生成器是从 GraphQL 模式自动生成类型定义的必备工具。现在，您不再需要在前端创建冗余的类型定义，因为这一切都在一个命令中完成。

为什么你应该学习：为了获得更灵活的 API，这些 API 会随着你的项目的增长而更好地工作。

Go

想学习一门新语言吗？输入 Go、Elixir 或其他任何你感兴趣的东西。就个人而言，我选择 Go 是因为它强大的静态类型、庞大的社区、速度和整体乐趣。虽然这对大多数 Web 开发人员来说是不必要的步骤，但总有一天你会厌倦编写 JavaScript，并且会对其他语言着迷。幸运的是，有许多语言可以在后端很好地满足您的需求。

为什么你应该学习：为了好玩和/或避免使用 JavaScript。

Architecture

良好的架构在构建长期项目方面大有帮助，并且有一种简单的方法可以使您的项目更具可扩展性。

许多项目从按类型组织的文件开始：

/components
    UserProfile.tsx
    Article.tsx
    Comment.tsx
    CommentFeed.tsx
/hooks
    useUser.ts
    useComment.ts
    useArticle.ts
/types
    userTypes.ts
    articleTypes.ts
    commentTypes.ts
/utils
    formatTime.ts
    humanize.ts

但是，这意味着文件夹的大小会随着项目的增长而增长，从而更难组织和找到您要查找的文件。

更好的方法是添加一个额外的层来按功能分隔代码：

/users
    /components
        UserProfile.tsx
    /hooks
        useUser.ts
    /types
        userTypes.ts
/articles
    /components
        Article.tsx
    /hooks
        useArticle.ts
    /types
        articleTypes.ts
/comments
    /components
        Comment.tsx
        CommentFeed.tsx
    /hooks
        useComment.ts
    /types
        commentTypes.ts
/utils
    formatTime.ts
    humanize.ts

虽然这扩大了文件树，但由于分离，它可以更容易地组织和定位文件。跨多个功能使用的任何东西utils都可以放在根目录中。

为什么你应该学习：为了更好的可扩展性和组织。

Others

TailwindCSS

CSS 是许多全栈开发人员存在的祸根。随着时间的推移，出现了许多 CSS 框架来减轻这种痛苦，对我来说，治愈方法是 Tailwind CSS。它提供了高级别的控制，同时仍保持其简单性和开发速度。最棒的是，我不再需要花时间思考类名。如果 Tailwind CSS 对您来说仍然与 CSS 过于相似，那么还有许多其他CSS 框架供您尝试。

Docker

多年来，Docker 变得非常流行，虽然我承认我不是最精通它的人，但如果我不承认它提供的许多好处，我就会失职。Docker 的主要目的是将您的代码容器化，这意味着无论它部署在哪里，它都可以在相同的环境中运行。这消除了由于计算机设置的差异而导致代码在您的计算机上运行而不是在其他人的计算机上运行的可能性。使用 Docker，如果它在您的计算机上运行，它将在任何人的计算机上运行。

Cypress

测试对于任何生产级产品都至关重要。从长远来看，它可以确保代码的健壮性并加快开发速度。Cypress很棒，因为它像真实用户一样测试应用程序，确保您的产品在现实世界中完全符合您的要求。