>  기사  >  웹 프론트엔드  >  nodejs를 사용하여 개인 웹사이트 구축

nodejs를 사용하여 개인 웹사이트 구축

WBOY
WBOY원래의
2023-05-25 19:11:061713검색

개발자로서 개인 웹사이트를 갖는 것은 매우 중요한 일입니다. 귀하의 기술과 경험을 소개하는 데 사용될 수 있을 뿐만 아니라 새로운 기술과 개념을 시험해 볼 수 있는 실험적인 플랫폼으로도 사용될 수 있습니다.

요즘 Node.js는 웹 개발에서 점점 더 인기를 얻고 있으며 점점 더 많은 사람들이 개인 웹사이트를 구축하는 데 Node.js를 선택하고 있습니다. 이 기사에서는 Node.js와 일부 인기 있는 npm 패키지를 사용하여 자신만의 개인 웹사이트를 구축하는 방법을 소개합니다.

1. Node.js 설치

먼저 Node.js를 설치해야 합니다. Node.js 공식 웹사이트(https://nodejs.org/)에서 설치 패키지를 찾아 "다운로드" 버튼을 클릭하세요. 설치 과정은 매우 간단합니다. 지시 사항을 따르기만 하면 됩니다.

2. 프로젝트 생성

Node.js가 설치되면 프로젝트 생성을 시작할 수 있습니다. 빈 폴더를 열고 명령줄에 입력합니다. 그런 다음, 다음 명령을 입력하세요:

npm init

그러면 새 npm 프로젝트를 만드는 방법이 안내됩니다. 이 과정에서 이름, 버전 번호 등과 같은 프로젝트에 대한 정보를 제공해야 합니다. 완료되면 프로젝트에 대한 일부 메타데이터가 포함된 프로젝트 폴더에서 package.json 파일을 찾을 수 있습니다.

3. 종속성 설치

다음으로 종속성을 설치해야 합니다. 명령줄에 다음 명령을 입력하세요:

npm install express jade body-parser --save

이렇게 하면 Express, Jade 및 Body-parser 패키지가 설치되어 웹 사이트를 만들고 웹 사이트 간에 데이터 흐름을 만들 수 있습니다. --save 옵션을 사용하여 이러한 패키지를 프로젝트의 종속성에 추가합니다. 이는 npm install 명령을 사용하면 함께 설치된다는 의미입니다.

4. 서버 만들기

이제 서버 만들기를 시작할 수 있습니다. 새 파일 server.js를 만들고 다음 코드를 입력하세요.

var express = require('express');
var app = express();

app.set('view engine', 'jade');

app.get('/', function(req, res) {
  res.render('index');
});

app.listen(3000, function() {
  console.log('Server started on port 3000');
});

이 코드 블록을 빠르게 살펴보겠습니다.

var express = require('express');
var app = express();

먼저 require 함수를 사용하여 Express 모듈을 소개하고 새로운 Express 인스턴스를 생성합니다. 이것을 app이라는 변수에 저장합니다.

app.set('view engine', 'jade');

다음으로 Express에 Jade 템플릿 엔진을 사용하여 뷰를 렌더링하겠다고 알립니다. app.set 메소드를 사용하여 뷰 엔진 및 템플릿 파일의 확장자를 설정합니다.

app.get('/', function(req, res) {
  res.render('index');
});

저희 라우터입니다. 이는 응답을 반환해야 하는 URL을 Express에 알려줍니다. 이 경우 루트 경로 "/"로 설정합니다. 라우터가 요청을 받으면 Jade 뷰를 렌더링합니다.

app.listen(3000, function() {
  console.log('Server started on port 3000');
});

마지막으로 Express의 app.listen 메소드를 사용하여 서버를 시작합니다. 포트를 3000으로 설정하고 서버가 시작되었음을 나타내는 메시지를 콘솔에 인쇄합니다.

5. 뷰 생성

이제 Jade 뷰를 생성하겠습니다. Jade는 들여쓰기를 사용하여 HTML 코드를 구성하는 HTML용 템플릿 엔진입니다. 새 views 폴더를 만들고 그 안에 index.jade라는 새 파일을 만듭니다. 다음 코드를 입력하세요.

html
  head
    title My Personal Website
  body
    h1 Hello, World!

이것은 Jade 뷰의 최소 예입니다. 페이지에는 제목만 표시됩니다. 여기서는 Jade 템플릿 엔진이 HTML 코드를 생성한다는 의미입니다. HTML과 달리 Jade는 태그 대신 들여쓰기를 사용합니다.

6. 웹사이트 테스트

모든 구축 단계를 완료했습니다. 이제 웹사이트를 테스트할 시간입니다. 명령줄에 다음 명령을 입력하세요:

node server.js

이렇게 하면 서버가 시작되고 포트 3000으로 설정됩니다. 이제 브라우저를 열고 주소 표시줄에 "localhost:3000"을 입력하세요. 페이지에 "Hello, World!"가 표시됩니다.

축하합니다. Node.js와 인기 있는 npm 패키지를 사용하여 개인 웹사이트를 성공적으로 구축했습니다!

요약

이 기사에서는 Node.js와 인기 있는 npm 패키지를 사용하여 개인 웹사이트를 구축하는 방법을 배웠습니다. Node.js 설치부터 간단한 Express 서버 및 Jade 뷰 생성까지 단계별로 웹사이트를 구축했습니다.

물론 이것은 시작에 불과합니다. 고급 기술과 패키지를 사용하여 웹사이트의 기능과 모양을 확장할 수 있습니다. 하지만 이제 개인 웹사이트 구축을 시작하는 방법을 알게 되었습니다. 귀하의 웹사이트가 성공하길 바랍니다!

위 내용은 nodejs를 사용하여 개인 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.