Node.js와 브라우저 간에 코드를 공유하는 방법은 무엇입니까?

풀 스택 애플리케이션의 백엔드와 프런트엔드 간에 코드를 공유하는 것은 어려운 작업이 될 수 있습니다. 그러나 유지 관리 및 확장 가능한 애플리케이션을 구축하려면 필수적입니다. 코드를 공유함으로써 코드 중복을 방지하고, 개발 시간을 단축하며, 애플리케이션 전반에 걸쳐 일관성을 유지합니다.

이 튜토리얼에서는 Node.js와 브라우저 간에 코드를 공유하는 다양한 기술을 살펴보고 프로젝트에 가장 적합한 방법을 선택하는 방법을 알아봅니다.

Node.js와 브라우저 간 코드 공유 기술

사용자는 다음과 같이 node.js와 브라우저 간에 코드를 공유할 수 있습니다. -

CommonJS 모듈

CommonJS 모듈은 Node.js에서 코드를 구성하고 공유하는 데 널리 사용되는 간단한 방법입니다. 많은 Node.js 패키지는 사용하기 쉽기 때문에 CommonJS 모듈을 사용하여 구축됩니다.

그러나 기본적으로 브라우저에서는 작동하지 않습니다. 브라우저에서 CommonJS 모듈을 사용하려면 Browserify 또는 Webpack과 같은 도구를 사용해야 합니다. 이러한 도구는 Node.js와 브라우저에서 실행할 수 있는 단일 JavaScript 파일을 생성할 수 있습니다. 대상 환경에 따라 코드를 CommonJS에서 ES 모듈로 또는 그 반대로 변환할 수도 있습니다.

Node.js 애플리케이션을 구축하고 브라우저에서 일부 서버측 코드를 재사용하려는 경우 CommonJS 모듈을 선택하는 것이 좋습니다.

ES 모듈

ES 모듈은 웹 브라우저와 Node.js에서 코드를 구성하고 공유하는 현대적이고 기본적인 방법입니다. 사용이 간편하며 React 및 Vue.js와 같은 많은 최신 프런트엔드 프레임워크는 즉시 ES 모듈을 지원합니다

npm 또는 Yarn과 같은 패키지 관리자를 사용하여 Node.js와 브라우저 간에 코드를 공유할 수 있습니다. 코드를 패키지로 게시하고 패키지 관리자를 사용하여 두 환경 모두에 설치할 수 있습니다.

애플리케이션의 백엔드와 프론트엔드 간에 코드를 구성하고 공유하는 현대적이고 표준화된 방법을 사용하려면 ES 모듈이 탁월한 선택입니다.

범용 JavaScript

동형 JavaScript라고도 알려진 Universal JavaScript를 사용하면 서버와 클라이언트 모두에서 실행되는 코드를 작성할 수 있습니다. 이는 성능을 향상시키고, 페이지 로드 시간을 단축하며, SEO를 향상시키는 데 도움이 됩니다.

범용 JavaScript에는 많은 사전 구성이 필요하며 설정이 복잡할 수 있습니다. 또한 일부 라이브러리와 API는 서버와 클라이언트에서 다르게 작동하여 예기치 않은 오류가 발생할 수 있습니다.

서버 측 렌더링을 통해 성능이 뛰어나고 확장 가능한 애플리케이션을 구축해야 하고 백엔드와 프런트엔드 간에 최대한 많은 코드를 공유하려는 경우 이는 좋은 선택입니다.

이 세 가지 방법을 이해함으로써 사용자는 프로젝트 요구 사항 및 개발 선호도에 가장 적합한 방법을 선택할 수 있습니다.

Webpack을 사용하여 Node.js 코드를 브라우저와 공유

Webpack과 같은 빌드 도구는 Node.js와 브라우저 간에 코드를 공유하는 강력한 방법입니다. 사용자는 다음 단계에 따라 Webpack을 사용하여 Node.js와 브라우저 간에 코드를 공유할 수 있습니다. -

1단계 - 먼저 컴퓨터에 Webpack을 설치해야 합니다.

으아악

2단계 - 다음으로 코드를 번들링하는 방법을 지정하기 위해 Webpack 구성 파일을 생성해야 합니다. 다음은 파일의 간단한 예입니다.

으아악

3단계 - 그런 다음 Node.js나 브라우저에서 평소와 같이 코드를 작성할 수 있습니다.

4단계 - 이제 다음 명령을 사용하여 코드를 번들링해야 합니다. -

으아악

5단계 - 마지막으로 HTML 파일에 포함하거나 Node.js 코드에 요구하여 Node.js 또는 브라우저 애플리케이션에서 번들을 사용할 수 있습니다.

예를 들어 2단계의 기본 구성을 사용하는 경우 다음과 같이 HTML 파일에 패키지를 포함할 수 있습니다.

으아악

예

이 예에서는 일반적인 JavaScript 메서드를 사용하여 Node.js 및 브라우저용 함수를 정의하고 내보내는 방법을 보여줍니다. myLibrary.js 파일에는 Node.js 및 브라우저 환경에서 사용할 수 있는 Greet() 및 안녕() 두 가지 함수를 정의합니다. 코드는 모듈이 존재하는지 확인하고 Node.js의 기능을 브라우저의 창 개체로 내보내는 동안 내보냅니다.

index.js 파일에서는 require() 함수를 사용하여 myLibrary.js 모듈을 가져온 다음 매개변수를 사용하여 내보낸 함수인 안녕()을 호출합니다.

index.html 파일에는 myLibrary.js 파일을 스크립트 태그로 포함시킨 다음 스크립트 태그를 사용하여 내보낸 함수인 Greeting()을 매개변수와 함께 호출합니다.

이렇게 하면 Node.js와 브라우저 환경 모두에서 사용할 수 있는 공통적이고 재사용 가능한 코드 기반을 만들 수 있으며 코드는 각 환경에서 올바르게 실행됩니다.

myLibrary.js

으아악

index.js

으아악

index.html

으아악

출력

이 튜토리얼에서 사용자는 CommonJS 모듈, ES 모듈 및 범용 JavaScript를 포함하여 Node.js와 브라우저 간에 코드를 공유하는 다양한 기술을 배웠습니다. 각 방법에는 장점과 단점이 있으며 선택은 프로젝트 요구 사항 및 개발 선호도에 따라 달라집니다.

이 튜토리얼에 언급된 단계에 따라 사용자는 코드를 번들링하는 방법을 지정하는 Webpack 구성 파일을 생성하여 Node.js 또는 브라우저에서 평소와 같이 코드를 작성할 수 있습니다. 또한 일반적인 JavaScript 메서드를 사용하여 Node.js 및 브라우저용으로 내보낸 함수를 정의하는 방법에 대한 예도 살펴보았습니다.

위 내용은 Node.js와 브라우저 간에 코드를 공유하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!