스크래치_node.js에서 Node.js, Express, Ejs, Mongodb 서버 구축 및 애플리케이션 개발 시작하기

이 글은 Feiyu의 "[번역] 프론트엔드 개발자를 위한 시작 가이드, Node.js, Express, Jade, Mongodb 서버를 처음부터 새로 구축하기"를 각색한 것입니다. 제가 Jade를 Ejs로 바꾼 이유는 ejs라고 생각하기 때문입니다. WEB 프로그래머의 습관은 더 정확하게는 PHP 및 ASP 프로그래머의 사용 습관과 더 일치해야 합니다. 좋아요, 더 이상 고민하지 말고 바로 튜토리얼을 시작하겠습니다.

1부 – 15분 설치

정말 처음부터 배우고 싶다면 먼저 환경을 설정하는 데 시간을 투자하세요. 어렵지 않습니다. 저는 Win8을 사용하고 있기 때문에 Mac, Ubuntu 또는 기타 *nix 시스템 사용 튜토리얼과 조금 다르게 보이지만 기본적으로는 동일합니다.

1단계 – Node.JS 설치

쉽습니다. Node.js 공식 웹사이트로 이동하여 큰 녹색 설치 버튼을 클릭하면 시스템이 자동으로 감지되어 올바른 설치 파일을 다운로드할 수 있습니다. (그렇지 않은 경우 다운로드 버튼을 클릭하여 필요한 다운로드를 선택하세요.) 설치 프로그램을 실행하면 됩니다. Node.js가 설치되어 있고 NPM(Node Package Manager)을 사용하면 다양한 유용한 패키지를 Node.js에 쉽게 설치할 수 있습니다.

2단계 – Express 설치

이제 노드가 실행되었으므로 실제로 사용 가능한 사이트를 만들려면 몇 가지 사항이 필요합니다. 다음으로 우리는 Node를 기본 애플리케이션에서 우리가 일반적으로 사용하는 웹 서버와 더 유사한 웹 서버로 바꾸는 프레임워크인 Express를 설치해야 합니다. Express가 제공하는 스캐폴딩 기능이 필요하기 때문에 Express로 시작해야 합니다. 다음 명령을 입력합니다:

코드 복사 코드는 다음과 같습니다.

c:node>npm install -g express

이러한 방식으로 Express는 노드에 올바르게 설치되었으며 전 세계적으로 사용할 수 있게 되었습니다. 명령줄 창에 다수의 출력(주로 http 304 및 GET 요청)이 표시됩니다. 이는 정상적인 현상입니다. Express가 설치되어 사용 가능해야 합니다.

3단계 – 익스프레스 프로젝트 생성

Express와 Ejs를 사용할 예정이지만 CSS 전처리에는 사용하지 않습니다. CSS를 직접 작성하겠습니다. Node 및 Express 데이터를 처리하려면 Ejs 또는 기타 템플릿 엔진을 사용해야 합니다. HTML을 안다면 Ejs는 어렵지 않습니다. 집중해야 한다는 점을 기억하세요. 그렇지 않으면 일이 쉽게 잘못될 수 있습니다.

이제 동일한 명령줄 창에 다음을 입력합니다.

코드 복사 코드는 다음과 같습니다.

c:node>express –sessions nodetest1

Enter를 누르면 다음과 같은 내용이 표시됩니다.

코드 복사 코드는 다음과 같습니다.

C:node>express --sessions nodetest1
생성: nodetest1
생성 : nodetest1/package.json
생성 : nodetest1/app.js
생성: nodetest1/routes
생성: nodetest1/routes/index.js
생성: nodetest1/routes/user.js
생성 : nodetest1/views
생성 : nodetest1/views/index.ejs
생성 : nodetest1/public/images
생성 : nodetest1/public/javascripts
생성 : nodetest1/public
생성 : nodetest1/public/stylesheets
생성: nodetest1/public/stylesheets/style.css

종속성 설치:
$ cd nodetest1 && npm 설치

앱 실행:
$ 노드 앱

4단계 – 종속성 편집

자, 이제 기본적인 프로젝트 구조가 완성되었지만 아직 끝나지 않았습니다. 빠른 설치 프로세스가 nodetest1 디렉터리에 package.json이라는 파일을 생성하는 것을 볼 수 있습니다. 텍스트 편집기로 이 파일을 엽니다.

코드 복사 코드는 다음과 같습니다.

{
"name": "응용 프로그램 이름",
"버전": "0.0.1",
"비공개": 사실,
"스크립트": {
"시작": "노드 app.js"
},
"종속성": {
"익스프레스": "3.4.8",
"ejs": "*"
}
}

이는 애플리케이션과 해당 종속성을 나타내는 표준 JSON 형식 파일입니다. 우리는 뭔가를 조금 추가해야 합니다. 예를 들어 mongodb 및 Monk에 대한 호출입니다. 종속성 부분을 다음으로 변경합니다.

코드 복사 코드는 다음과 같습니다.

"종속성": {
"익스프레스": "3.4.8",
"ejs": "*",
"mongodb": "*",
"수도사": "*"
}

5단계 – 종속성 설치

이제 프로젝트의 종속성을 정의했습니다. *는 NPM에게 "최신 버전을 설치하세요"라고 지시합니다. 명령줄 창으로 돌아가서 nodetest1 디렉터리를 입력하고 다음을 입력합니다.

코드 복사 코드는 다음과 같습니다.

C:nodenodetest1>npm 설치

그것은 많은 것들을 출력할 것입니다. 이는 수정된 JSON 파일을 직접 읽고, 그 안에 있는 종속성을 식별하고, 필요한 파일을 설치하기 때문입니다. NPM이 설치되면 프로젝트에 필요한 모든 종속성 파일이 포함된 node_modules 디렉터리가 있어야 합니다.

이제 모든 기능을 갖춘 앱이 완성되었으며 실행할 준비가 되었습니다. 한번 시도해 봅시다! 현재 디렉터리가 nodetest1 디렉터리인지 확인하고 다음을 입력하세요.

코드 복사 코드는 다음과 같습니다.

C:nodenodetest1>node app.js

Enter를 누르면 다음이 표시됩니다:

코드 복사 코드는 다음과 같습니다.

포트 3000에서 수신 대기하는 Express 서버

기이. 브라우저를 열고 http://localhost:3000을 입력하면 Express 시작 페이지가 표시됩니다.

이제 Express 엔진과 Ejs HTML 템플릿 엔진으로 실행되는 자체 Node JS 웹 서버가 생겼습니다. 그렇게 어렵지는 않죠?

2부 - 자, "Hello, World!"를 쓰자

일반적으로 사용하는 텍스트 편집기나 다른 IDE를 엽니다. 저는 개인적으로 Sublime Text를 사용하는 것을 좋아합니다. nodetest1 디렉터리에서 app.js를 엽니다. 이 파일은 앱의 핵심입니다. 다음과 같은 내용이 표시됩니다.

코드 복사 코드는 다음과 같습니다.

var express = require('express');
var Routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var 경로 = require('경로');

이는 단지 여러 JavaScript 변수를 정의하고 일부 패키지와 종속성, 노드 기능 및 경로를 가리킵니다. 경로는 MVC의 모델 및 컨트롤러 모음과 동일하며 요청 전달을 담당하며 일부 처리 논리도 포함합니다. Express는 우리를 위해 이러한 모든 것을 생성했습니다. 지금은 사용자 경로를 무시하고 최상위 경로(routesindex.js로 제어됨) 작성을 시작하겠습니다.

위 파일 끝에 작성:

코드 복사 코드는 다음과 같습니다.

var app = express();

이 문장이 중요합니다. Express를 인스턴스화하여 앱 변수에 할당합니다. 다음 콘텐츠에서는 이 변수를 사용하여 여러 Express 매개변수를 구성합니다. 계속 입력하세요:

코드 복사 코드는 다음과 같습니다.

// 모든 환경
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('뷰 엔진', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

이는 포트, 뷰를 찾을 디렉터리, 이러한 뷰를 처리하는 데 사용할 템플릿 엔진 및 기타 몇 가지 사항을 설정합니다. 또한 Express가 public/ 디렉터리의 정적 파일을 최상위 디렉터리의 파일로 호스팅하도록 지시하는 마지막 줄을 참고하세요. 예를 들어 이미지 디렉터리는 c:nodenodetest1publicimages에 저장되지만 실제 액세스 주소는 http://localhost:3000/images/입니다.

참고: 이 줄을 입력해야 합니다.

코드 복사 코드는 다음과 같습니다.

app.use(express.bodyParser());

로 변경

코드 복사 코드는 다음과 같습니다.

app.use(express.urlencoded());

이는 앱이 실행되는 동안 Node 창에 표시되는 일부 경고 메시지를 무시하기 위한 것입니다. 주로 Express 및 해당 플러그인에 대한 향후 수정이 가능합니다. 이렇게 수정하지 않으면 프로그램이 실행될 때 특정 기능이 곧 만료된다는 경고 메시지가 많이 표시됩니다.

그런 다음 다음을 추가하세요.

코드 복사 코드는 다음과 같습니다.

// 개발 전용
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

이렇게 하면 개발 중에 일부 오류 검사를 수행할 수 있습니다.

계속 증가:

코드 복사 코드는 다음과 같습니다.

app.get('/', Routes.index);
app.get('/users', user.list);

이는 URI 요청이 도착할 때 사용할 경로를 라우터에 알려줍니다. 사용자 변수는 이전에 정의되었으며 /routes/user.js에 매핑되었습니다. 이 파일에 정의된 목록 함수를 호출합니다. 여기에 사용자 목록이 표시될 수 있습니다.

계속 증가:

코드 복사 코드는 다음과 같습니다.

http.createServer(app).listen(app.get('port'), function(){
console.log('포트 '에서 수신 대기 중인 Express 서버 app.get('port'));
});

마지막으로 http 서버를 생성하고 시작합니다. 거의 그 정도입니다.

(위 내용은 새로운 Express에서 생성된 템플릿에 모두 포함되어 있으므로 직접 작성할 필요가 없습니다.)

이제 유용한 내용을 작성해 보겠습니다. 우리는 인덱스 페이지에 "Hello World!"를 직접 쓰지 않을 것이며, 이 기회를 통해 경로 라우팅을 사용하는 방법과 Ejs 엔진이 어떻게 작동하는지 배울 것입니다. 위 app.js 파일의 app.get() 섹션 뒤에 한 줄을 추가합니다.

app.get('/helloworld', Routes.helloworld);
명령줄 창에서 Ctrl C를 눌러 app.js 프로세스를 종료한 다음 다시 시작한 다음 브라우저를 사용하여 http://localhost:3000/helloworld에 액세스하면 매우 흥미로운 노드 오류가 발생하고 다음이 표시됩니다. 명령줄 창의 메시지: 여러 개의 충돌 프롬프트. 이는 이 경로를 처리하도록 라우팅을 수정하지 않았기 때문입니다. 이렇게 해보자. 편집기에서 경로 디렉터리로 이동하여 index.js를 찾아 엽니다. 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

/*
* 홈페이지를 받아보세요.
*/

exports.index = 함수(req, res){
res.render('index', { title: 'Express' });
};

새 페이지를 추가해 보겠습니다. 나는 각 첫 번째 수준 디렉터리에 대해 독립적인 경로 파일을 만드는 것을 선호하지만 지금은 뷰 아래에 helloworld에 대한 완전한 디렉터리 구조를 구축할 계획이 없으므로 지금은 인덱스 라우팅을 사용하겠습니다. 이 파일 끝에 다음을 추가합니다:

코드 복사 코드는 다음과 같습니다.

수출.helloworld = 함수(req, res){
res.render('helloworld', { title: 'Hello, World!' });
};

이 URI 요청을 처리하는 역할을 담당하지만 이제 렌더링할 res.render에 대한 실제 페이지가 없습니다. 이것이 Ejs의 작업입니다. views 디렉터리로 이동하여 index.ejs를 열고 helloworld.ejs 파일로 저장합니다. 이제 다음과 같이 표시됩니다.

코드 복사 코드는 다음과 같습니다.

<제목><%= 제목 %>

<%= 제목 %>

<%= 제목 %>

에 오신 것을 환영합니다.