노드 기본 학습: 프론트엔드에 대해 알아야 할 사항 [요약]

이 글에서는 node의 기본 지식 포인트에 대해 이야기하고, 프론트엔드가 알아야 할 몇 가지 nodejs 지식을 요약하고 공유하겠습니다. 모두에게 도움이 되길 바랍니다!

프론트엔드 개발이든 백엔드 개발이든 자신의 분야에만 국한되어서는 안 된다고 개인적으로 생각합니다. 자신의 한계를 벗어나야만 발전할 수 있지만, 생각 없이 배우면 혼란이 따른다는 것도 알아야 하므로 프론트엔드와 가장 밀접하게 관련된 서버사이드 지식을 이해하는 것이 필요하며, nodejs의 등장은 프론트엔드 개발을 가능하게 한다고 할 수 있습니다. 백엔드를 이해하는 더 빠른 방법. 다음은 프론트엔드 관점에서 nodejs를 학습하면서 얻은 경험 중 일부입니다.

기본 기능

nodejs를 빠르게 이해하려면 다음 측면을 살펴보면 됩니다. 노드의 모듈 개념(ECMAScript2015는 프런트 엔드를 지원했으며 이해하기 쉽습니다), V8 엔진(브라우저와 동일), 비동기 작업 (v8 기반이며 브라우저 처리가 약간 다름), 이벤트 기반(v8 기반이며 브라우저가 약간 다름), 노드 기반 API입니다. [관련 튜토리얼 추천: nodejs 비디오 튜토리얼, 프로그래밍 교육]

module

nodejs 모듈은 대략 세 가지 유형으로 나눌 수 있습니다: 핵심 모듈 타사 모듈 사용자 정의 모듈. 각 모듈에는 서로 다른 로딩 우선순위가 있습니다.

• 핵심 모듈: nodejs 내장 모듈. 일반적으로 사용되는 경로 os fs 등과 같은 nodejs의 기본 API로 이해할 수 있습니다. 이 모듈은 nodejs가 서버와 상호 작용하는 기초이기도 합니다.
• 타사 모듈: nodejs 패키지 관리 도구 플랫폼에 의해 설치되는 npm 패키지입니다.
• 사용자 정의 모듈: 일반적으로 자체 정의된 파일 모듈을 나타냅니다.

모듈 로딩 및 컴파일

• 파일 파싱 경로: 캐시가 있는지 확인=》핵심 모듈인지 확인=》확장자 확인=》파싱 및 실행(다른 접미사 이름에 따라)

//检查fs内存中的缓存是否存在如果不存在则加载fs模块
let fs = require("fs")
//检查fs内存中的缓存(无)=》检查是否核心模块=》检查扩展名
let demo = require("./demo")

• 캐시 우선순위 원칙 : 파일 파싱 경로를 보면 nodejs가 먼저 메모리에 캐시가 있는지 확인하고 캐시가 있으면 캐시를 로드한다는 것을 알 수 있습니다.
• 모듈 컴파일: 이 문서에서는 이 프로세스를 설명하지 않습니다. 다음 장에서는 이 프로세스를 자세히 설명합니다.

Standards

JavaScript 모듈 개발의 개념은 기본적으로 "스크립트" 소개 => 스코프 기능 => 자체 실행 기능 => Commonjs(AMD)입니다. nodejs의 모듈은 아래와 같이 주로 commonjs 사양을 채택합니다.

• 각 파일은 모듈이며 자체 범위를 갖습니다.
• 각 파일에 정의된 변수, 함수 및 클래스는 비공개이며 다른 파일에 표시되지 않습니다.
• 각 모듈은 exports 또는 module.exports를 통해 액세스할 수 있습니다. 인터페이스exports 或者 module.exports 对外暴露接口
• 每个模块通过 require 加载另外的模块

我们在nodejs中常用require exports module.exports都是基于Commonjs来的。

异步操作

异步操作对于前端开发很易了解，我们在JavaScript中到处都充斥的异步操作，回调函数，promise，setTimeout这些都是异步相关的操作，最基础的DOM渲染也是异步的，nodejs和JavaScript关联最深的也是这块，但大家请注意这两个处理方式有一些的不同，不同点此处不在多说后续会更新。以下简述下node的异步特点：

• 异步是通过Event Loop实现，其中有宏任务和微任务的概念
• node和JavaScript在异步的处理上有所区别

网上找到的一张事件循环的图：

V8引擎

• V8 是驱动 Google Chrome 的 JavaScript 引擎的名称。 这是在使用 Chrome 浏览时获取我们的 JavaScript 并执行它的东西。
• 在Nodejs，v8是用来它提供了多种可调用的API，如读写文件、网络请求、系统信息等。另一方面，因为CPU执行的是机器码，它还负责将JavaScript代码解释成机器指令序列执行，这部分工作是由V8引擎
각 모듈은 require

를 통해 다른 모듈을 로드합니다. 우리는 일반적으로 nodejs에서 require 내보내기를 사용합니다. Module.exports는 모두 Commonjs를 기반으로 합니다.

비동기 작업

비동기 작업은 프런트엔드 개발을 위해 이해하기 쉽습니다. 우리는 JavaScript의 모든 곳에서 비동기 작업, 콜백 함수, 약속 및 setTimeout으로 가득 차 있습니다. 기본 DOM 렌더링도 비동기식입니다. 이는 nodejs와 JavaScript 사이에 가장 밀접하게 관련되어 있지만 이 두 처리 방법에는 몇 가지 차이점이 있습니다. 여기서는 차이점에 대해 자세히 설명하지 않고 나중에 업데이트하겠습니다. 다음은 노드의 비동기적 특성을 간략히 설명합니다.

일반적으로 사용되는 API

• fs: 파일 보기, 편집, 생성 및 기타 작업에 일반적으로 사용됨
• http: 네트워크의 핵심 모듈
• socket: 소켓 네트워크 통신
• events: 이벤트 모듈

애플리케이션 시나리오

• 백엔드 서비스
• 스크립트 처리

Server

nodejs가 등장한 처음 몇 년 동안 대부분의 개발자는 프로덕션 환경에 nodejs를 적용할지 여부에 대해 낙관하지 않았습니다. 그러나 최근 몇 년간의 연습을 통해 높은 동시성 시나리오를 처리하는 nodejs의 단일 스레드 애플리케이션은 잘 테스트되었습니다. 현재 온라인 제품에는 nodejs 기반 서비스가 많이 있습니다. 또한 nodejs에는 Java spring과 유사한 안정적인 서버측 프레임워크도 많이 있습니다. 다음은 일반적으로 사용되는 몇 가지 프레임워크입니다.

• Koa: 양파 모델을 기반으로 한 개발 모델
• Express: 라우팅 기능을 갖춘 서버측 nodejs 프레임워크 the core
• Fastify: 1인용 리소스가 매우 적고 속도가 매우 빠른 프레임워크입니다.

참고: 관심이 있다면 이에 대해 배울 수 있습니다.

Tools

개발을 위해 vue 또는 React Family Bucket을 사용할 때 그것에 대해 생각해 본 적이 있습니까? ? 단 한 줄의 명령으로 프런트 엔드 서비스를 실행할 수 있는 이유는 무엇입니까? 한 줄의 명령으로 프런트 엔드를 컴파일할 수 있는 이유는 무엇입니까? Vue 코드가 결국 많은 js를 출력하게 된 이유는 무엇입니까? 이러한 함수의 소스 코드를 연구하면 이러한 기능이 거의 모두 nodejs를 기반으로 개발되었음을 알 수 있습니다. 다음은 일상적인 도구에서 nodejs를 사용하는 목록입니다.

• 로컬 서비스: webpack에서 활성화되는 로컬 서비스 플러그인은 모두 nodejs의 http 모듈을 기반으로 구현됩니다.
• 컴파일 및 패키징: vue의 .vue 파일, React의 jsx 또는 일반적으로 사용되는 .ts 파일이 최종적으로 js 파일이 됩니다. 모두가 이것을 webpack이라고 생각합니다. 사실 전체 webpack은 nodejs를 기반으로 합니다. 파일을 컴파일하는 기능은 nodejs의 fs 모듈과 밀접하게 관련되어 있습니다.

Summary

프론트엔드 관점에서 nodejs의 기본에 대해 간략하게 이야기했습니다. 현재 저는 nodejs를 사용하여 많은 프로젝트를 완료했습니다. 더 많이 사용하고 나면 더 넓은 관점에서 일부 프런트엔드 기술 개발을 볼 수 있습니다.

노드 관련 지식을 더 보려면 nodejs 튜토리얼을 방문하세요!

위 내용은 노드 기본 학습: 프론트엔드에 대해 알아야 할 사항 [요약]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!