nodejs와 html을 결합하는 방법-프런트엔드 Q&A-php.cn

nodejs와 html을 결합하는 방법

王林

풀어 주다： 2023-05-18 15:06:08

원래의

1567명이 탐색했습니다.

프런트 엔드 개발 기술이 지속적으로 발전함에 따라 점점 더 많은 개발자가 Node.js를 사용하여 서버 측 애플리케이션을 구축하기 시작하고 있습니다. Node.js는 HTTP 요청 및 데이터베이스와의 상호 작용과 같은 작업을 처리하는 편리한 방법을 제공합니다. 동시에 Node.js는 서버측 데이터를 프런트엔드 HTML 페이지에 통합하는 편리한 방법도 제공합니다. 이 기사에서는 HTML과 결합된 Node.js를 사용하여 웹 애플리케이션을 개발하는 방법을 소개합니다.

1. Node.js 개요

Node.js는 JavaScript 언어를 기반으로 개발된 매우 인기 있는 서버 측 프로그래밍 언어입니다. Node.js의 가장 큰 장점은 서버 측에서 직접 JavaScript 코드를 실행할 수 있다는 것입니다. 이 기능은 한때 Node.js에 많은 관심을 끌었습니다. Node.js에는 웹 서버 개발뿐만 아니라 명령줄 도구, 데스크톱 애플리케이션 및 기타 분야에 대한 광범위한 애플리케이션 시나리오가 있습니다.

2. HTML 개요

HTML은 웹 페이지를 만드는 데 사용되는 마크업 언어입니다. HTML은 웹 페이지의 기본 구조와 스타일 정의로, 페이지의 제목, 단락, 링크, 표, 그림, 비디오 및 기타 요소를 정의할 수 있습니다. HTML 페이지는 브라우저에서 구문 분석되고 렌더링될 수 있으며, 사용자는 브라우저에서 페이지를 보고 상호 작용할 수 있습니다.

3. Node.js를 사용하여 HTML과 결합

Node.js를 HTML과 결합하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 템플릿 엔진을 통해 서버측 데이터를 HTML 페이지에 삽입하는 것입니다. 템플릿 엔진은 개발자가 서버 측에서 HTML 페이지를 생성하고 동적 데이터를 HTML 페이지에 통합할 수 있도록 해주는 도구입니다.

Node.js를 템플릿 엔진과 결합하여 사용하는 예를 살펴보겠습니다. 먼저 템플릿 엔진 라이브러리를 설치해야 합니다. 여기서는 EJS 템플릿 엔진을 사용하도록 선택합니다.

1. EJS 템플릿 엔진 설치

npm install ejs --save

로그인 후 복사

2. 간단한 Node.js 프로그램 만들기

const express = require('express')
const app = express()
const port = 3000

app.set('view engine', 'ejs')

app.get('/', (req, res) => {
  res.render('index', { title: 'Hello World', message: 'Hello World from Node.js!' })
})

app.listen(port, () => {
  console.log(`Server is running on port ${port}.`)
})

로그인 후 복사

이 코드에서는 Express 프레임워크를 사용하여 웹 애플리케이션을 만들고 루트 경로 인덱스에 라는 이름을 렌더링합니다. code>의 EJS 템플릿 파일입니다. 템플릿 파일에서는 아래와 같이 템플릿 태그를 사용하여 동적 데이터를 삽입할 수 있습니다. <code>index的EJS模板文件。在模板文件中，我们可以使用模板标记来插入动态数据，如下所示：

<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

로그인 후 복사

在这个模板文件中，我们添加了两个模板标记：<%= title %> 用于显示页面标题，<%= message %>

node index.js

로그인 후 복사

이 템플릿 파일에는 두 개의 템플릿 태그를 추가했습니다: <%= title %> is 페이지 제목을 표시하는 데 사용되며 <%= message %>는 페이지 내용을 표시하는 데 사용됩니다. 이러한 태그는 서버 측에서 렌더링되며 템플릿 파일을 동적 데이터로 채웁니다.

3. 애플리케이션 시작

rrreee

4. 페이지 방문

브라우저에서 http://localhost:3000을 방문하면 서버 측에서 설정한 동적 데이터가 포함된 간단한 페이지가 표시됩니다.

위 단계를 통해 Node.js와 HTML을 성공적으로 결합하여 간단한 웹 애플리케이션을 만들었습니다. 실제 개발에서는 더 많은 템플릿 엔진과 프레임워크를 사용하여 더 복잡한 기능을 구현할 수 있습니다.

4. 요약

이 글에서는 Node.js와 HTML을 사용하여 웹 애플리케이션을 구축하고 템플릿 엔진을 통해 서버측 동적 데이터를 HTML 페이지에 삽입하는 방법을 소개합니다. 이 접근 방식은 웹 애플리케이션 개발에서 매우 일반적이며 이를 통해 완전한 애플리케이션을 신속하게 구축할 수 있습니다. 실제 개발에서는 프로젝트 요구 사항에 맞는 적절한 템플릿 엔진과 프레임워크를 선택해야 한다는 점에 유의해야 합니다. 🎜

위 내용은 nodejs와 html을 결합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!