Express.JS 시작하기

Express.JS 시작하기

Node.JS로 브라우저 지향 애플리케이션을 만드는 것은 지루합니다. Express.JS 이다 JavaScript 프레임 워크 Node.JS 환경에서 호스팅되는 단일 페이지 및 다중 페이지 애플리케이션 전용입니다.

이미 익숙한 Node.JS 기능을 가리지 않는 기본 웹 앱 기능의 얇은 레이어를 제공하므로 완성 된 앱이 성능 측면에서 스크래치 수준이 될 것이라는 확신을 가질 수 있습니다. 또한 바로 사용할 수있는 HTTP 유틸리티 메서드 및 미들웨어 스택 덕분에 강력한 API를 만드는데도 좋습니다.

시작 하시겠습니까? 알아야 할 사항은 다음과 같습니다.



01. 실행 가능한 구조 생성

Express.JS 시작 : 실행 가능한 구조 생성

시작하기에 적합한 작업 옵션을 소개합니다.

Express.JS는 개발자가 아키텍처, 템플릿 및 마크 업 엔진의 측면에서 혼합 및 일치시킬 수 있도록 '무의식'이라는 자부심을 가지고 있습니다. 안타깝게도 큰 힘에는 큰 책임이 따릅니다.

Express 개발자 팀은 프로젝트 생성기를 도입하여 타격을 완화하려고합니다. NPM 패키지의 형태로 워크 스테이션에 제공되며 다음 프레임 워크를 사용한 실험에 도움이됩니다.

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ sudo npm install express-generator -g

생성기에는 수십 개의 프로젝트 옵션도 포함되어 있습니다.이 단계에 수반되는 그림은 전체 도움말 출력을 보여줍니다. 단순화를 위해 기본 설정을 기반으로하는 프로젝트로 제한합니다. 다음을 통해 생성 프로세스를 시작하십시오.

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ express futuretest

경고 : 기본보기 엔진은 향후 릴리스에서 Jade가 아닙니다.

완료되면 현재 작업 디렉토리에 'futuretest'라는 새 폴더가 포함됩니다. 테스트 프로젝트의 홈이며 NPM의 패키지 다운로드 명령을 사용하여 구성해야합니다. 작성 당시 생성기는 Jade 뷰 생성기를 포함하고 있습니다. 프로젝트는 조만간이를 변경할 계획이며, 의도 한 뷰 엔진을 선택하는 매개 변수를 전달해야합니다. 또는 Pug 사용을 요청하십시오. 이것은 Jade 엔진의 공식적인 후속 제품입니다.

cd futuretest/ npm install

02. 애플리케이션 구조 이해

이제 프로젝트 생성기가 작업을 완료 했으므로 선택한 편집기에서 App.js를 엽니 다. 그 – 매우 요약 된 – 구조는 다음과 같이 나타납니다.

판타지 생물을 단계별로 그리는 방법
var indexRouter = require('./ routes/index'); var usersRouter = require('./ routes/users'); var app = express(); // view engine setup app.set('views', path.join(__ dirname, 'views')); app.set('view engine', 'jade'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path. join(__dirname, 'public')));

Express.JS는 고도로 모듈화되어 있습니다. App.js는 하나 이상의 'use ()'함수를 통해 다양한 요청을 처리하기위한 구성 요소를 추가 할 수있는 진입 점 역할을합니다. 'set ()'을 호출하면 엔진에서 매개 변수를 조정할 수 있습니다.이 중 하나는 이전 단계에서 언급 한 Jade보기 엔진의 설치입니다.

웹 콘텐츠의 실제 방출은 라우터 클래스에서 발생합니다. 간결함을 위해 Index.js로 제한합시다.

var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;

'get ()'에는 해당 이벤트가 발생할 때마다 호출되는 일치 자 문자열과 이벤트 핸들러가 제공됩니다. 우리의 경우 선택한 템플릿 엔진의 렌더링 방법은 로그인 한 사용자의 브라우저에 콘텐츠를 반환하도록 지시받습니다.

03. 웹 페이지 실행

이 시점에서 우리는 처음으로 웹 사이트를 시작할 준비가되었습니다. Express.JS 설치가 포함 된 터미널로 돌아가 디버그 플래그 세트로 NPM 시작을 호출합니다.

DEBUG=myapp:* npm start

완료되면 http : // localhost : 3000 /을 선택한 브라우저에 입력하여 프로젝트 생성기에서 만든 스캐 폴딩을 확인합니다. 완료되면 Ctrl + 창을 닫고 명령 줄 인터프리터로 제어권을 반환하려면 디버깅 웹 서버도 닫힙니다.

04. 라우팅과 엔드 포인트에 관한 모든 것

Express.JS 시작 : 라우팅 및 엔드 포인트

올바른 진입 점 정렬, 새 경로 추가 및 정규식 지원 도입

단순함을 위해 웹 애플리케이션이 일반적으로 일련의 진입 점으로 구성된다는 데 동의합시다. Express.JS는 라우터 클래스를 통해이를 처리합니다. 들어오는 요청에 대한 응답으로 호출되는 메서드의 저장소라고 생각하면됩니다.

애플리케이션에 새 엔드 포인트를 추가하려면 큐에 새 작업자를 추가합니다. 자동 생성 된 예제는 각각 'require'메서드를 사용하여 발생하는 두 가지 라우터 유형을 만듭니다.

var indexRouter = require('./ routes/ index'); var usersRouter = require('./ routes/ users');

다음 단계에서 'app.use'는 라우터를 등록하고 요청 문자열에 연결합니다. 또한 우리 코드는 존재하지 않는 URL이 시스템에 입력 된 경우 호출되는 오류 처리기를 추가합니다.

app.use('/', indexRouter); app.use('/users', usersRouter); app.use(function(req, res, next) { next(createError(404)); });

05. 새 경로 생성

Users.js를 열고 아래와 같이 코드를 수정합니다.

router.get('/user1', function(req, res, next) { res.send('Future says Hello 1'); }); router.get('/', function(req, res, next) { res.send('respond with a resource'); });

Express.JS에 새 경로를 추가하는 것은 기계적인 프로세스입니다. 선택한 라우터 개체를 잡고 처리하려는 HTTP 동사에 해당하는 메서드를 호출합니다. 다음으로 'app.use'에 등록 된 'offset'에 추가 할 문자열을 전달합니다. 그 순간부터 http : // localhost : 3000 / users / user1 및 http : // localhost : 3000 / users / 모두 유효한 응답을 반환합니다.

Express.JS는 'GET'리소스를 처리하는 데 국한되지 않습니다. 'post ()', 'put ()'및 'delete ()'는 기존의 4 가지 HTTP 요청을 처리하며, 더 특이한 요구 사항을 충족하는 수십 개의 추가 동사 메서드를 사용합니다. 마지막으로 'req'객체는 요청 헤더에 대한 액세스를 제공합니다. 매개 변수 나 클라이언트 정보를 구문 분석 할 때 유용하게 사용합니다.

06. 고급 매칭

프로그램이 복잡 해짐에 따라 경로를 직접 추가하는 것은 지루합니다. Express.JS는 와일드 카드 및 정규식 지원을 모두 도입하여이 문제를 해결합니다. 예를 들어, 문자 시퀀스 dog를 포함하는 다양한 문자열과 일치시키기 위해 정규 표현식을 사용하는 다음 선언을보십시오.

app.get(/.*dog$/, function (req, res) { ... })

07. 비정상적인 라우팅

4 개의 HTTP 요청을 처리하는 것만으로 누구나 (Bill Gates에 대한 팁) 충분해야하지만 Express.JS는 추가 프로토콜을 사용할 수도 있습니다. Express-WS 이 섹션에서 특히 맛있는 후보입니다. Express.JS의 범위를 WebSocket 통신을 포함하도록 확장합니다.

플러그인이 메인 Express.JS 프로젝트에 추가되면 'require'호출을 통해 활성화됩니다. 하나를 제외한 모든 메서드를 포함하는 도우미 개체를 반환합니다.이를 호출하여 라우터와 플러그인 사이에 연결을 설정합니다.

var expressWs = require('express- ws') app); After that, a new method called 'ws()' can be invoked to add new routes based on WebSocket technology: app.ws('/', function(ws, req) { ws.on('message', function(msg) { console.log(msg); }); console.log('socket', req. testing); });

그들의 프로토 타입은 'ws'객체의 존재로 인해 일반 경로와 다릅니다. 연결을 담당하는 클라이언트에 연결된 기본 WebSocket 인스턴스에 대한 액세스를 제공합니다.

08. 데이터베이스 및 템플릿 엔진 통합

Express.JS 시작 : 데이터베이스 및 템플릿 엔진 통합

풍부한 플러그인 생태계의 힘을 활용하십시오

Node.JS를 기반으로한다는 것은 웹 기반 애플리케이션에서 작업 할 때 풍부한 플러그인 에코 시스템이 명령에 달려 있음을 의미합니다. 예를 들어, SQL 및 NoSQL 데이터베이스 액세스 (일반적으로 매우 지루한 작업)는 데이터베이스 공급 업체에서 제공하는 플러그인을 사용하여 처리 할 수 ​​있습니다. 실제 배포는 필요한 NPM 모듈을 설치하는 것만 큼 쉽습니다. 코드가 Redis 데이터베이스에 액세스하는 경우 다음을 추가하기 만하면됩니다.

var redis = require('redis') var client = redis.createClient() client.set('stringKey', 'aVal', redis.print) . . .

물론 메모리 내 SQLite도 지원됩니다.

var sqlite3 = require('sqlite3'). verbose() var db = new sqlite3. Database(':memory:') db.serialize(function () { db.run('CREATE TABLE lorem (info TEXT)')

Node.JS 통합은 데이터베이스 플러그인으로 제한되지 않습니다. 모험심이 강한 개발자는 Tessel과 같은 제품을 포함하여 상호 작용할 수있는 웹 애플리케이션을 만들 수 있습니다. 사물 인터넷 장치.

09. 스타일의 템플릿

단순한 프로그램과 실제 프로그램이 다른 한 영역은 뷰 생성입니다. 작은 예제 프로젝트는 일반적으로 손으로 만든 문자열을 사용하지만, 연결된 사물의 문자열로 큰 HTML을 조립하는 것은 매우 성가신 일입니다.

템플릿 엔진은 깔끔한 해결 방법을 제공합니다. 이를 통해 미리 정의 된 스키마 파일을 만들 수 있으며, 실행시 프로그래밍 방식으로 채울 수 있습니다.

예제 프로그램의 경우 뷰는 .jade 파일에 있습니다. 오프닝 인덱스는 다음 구조를 보여줍니다.

extends layout block content h1= title p Welcome to #{title}

중괄호로 묶인 표현식은 런타임에 값이 대체되는 템플릿 필드 역할을합니다. Index.js는 매개 변수 객체를 사용하여 렌더링을 호출하여이 단계에 수반되는 그림에 표시된 시작 페이지의 렌더링으로 이어집니다.

router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); });

대부분의 템플릿 엔진은 항목 템플릿과 함께 제공 될 때 배열을 구문 분석 할 수도 있습니다. 이 경우 배열의 모든 행이 DOM 모델의 한 인스턴스로 표시됩니다. Android에서 발견 된 목록 표시 모델과의 유사성은 순전히 우연입니다. Express.JS는 미리 정의 된 템플릿 엔진으로 제한되지 않습니다. 어떤 이유에서든 직접 롤아웃하고 싶다면 다음 단계를 따르십시오. 여기 – 원칙적으로 하나를 제외한 모든 기능을 재정의해야합니다.

10. 정적 콘텐츠 처리

Express.JS 애플리케이션은 CSS 파일과 그림을 포함하는 경향이 있습니다. Render 함수를 통해 이러한 서비스를 제공하는 것은 비효율적입니다. 더 현명한 방법은 기존의 HTTP 요청을 사용하여 즐거운 방식으로 보내는 것입니다. 이는 내보내기를 위해 전체 폴더를 표시 할 수있는 'express.static ()'함수를 통해 수행 할 수 있습니다.

app.use(express.static('public')) app.use(express.static('files'))

11. 이벤트 흐름 수정

마지막으로 미들웨어라는 용어를 곧 언급하겠습니다. Express.JS 용어에서 미들웨어는 반대쪽에 표시된 순서도에 통합되는 하나 이상의 구성 요소 집합입니다. 그런 다음 라우팅 시스템을 통과 할 때 요청을 수정하는 데 사용할 수 있습니다. 올바르게 구현되면 무한한 기능을 얻을 수 있습니다.

또한 몇 가지 준비된 구성 요소를 찾을 수 있습니다. 여기 – 대규모 개발 프로젝트를 시작하기 전에이 사이트를 방문하십시오.

12. Express.JS 앱을 호스팅하는 방법

Express.JS 시작하기 : Express.JS 앱을 호스팅하는 방법

새로운 창작물을 호스팅 할 수있는 플랫폼 고려

Express.JS 기반 애플리케이션 테스트는 쉽습니다. 페이지를 제 3자가 액세스 할 수 있도록하려는 경우 문제가 발생합니다. Node.JS 환경에서 페이지가 생성되기 때문에 웹 호스팅 서비스에 대한 FTP 배포에 적합한 정적 이미지를 얻을 수있는 방법이 없습니다.

이론적으로는 Raspberry Pi, OrangePi, 전용 서버 또는 클라우드 서비스 또는 가상 호스팅을 제공하는 웹 호스트 제공 업체에서 대여 한 가상 머신을 사용하는 것에 반대 할 수 없습니다. 그러나 전체 가상 머신을 임대하면 실행 환경과 운영 체제를 최신 상태로 유지해야하는 책임이 있습니다.

이 작업이 당신의 취향에 맞지 않는다면, Platform-as-a-Service 공급자가 더 매력적인 선택이 될 수 있습니다 (대부분의 경우 꽤 비싸지 만).

많은 개발자가이 박스에 첨부 된 그림에 표시된 가격과 함께 Heroku를 Node.JS 호스팅과 관련된 모든 것에 대한 표준으로 간주합니다.

캐논 파워 샷을위한 최고의 SD 카드

그러나 이것은 사실 약간 불공평합니다. Amazon의 Elastic Beanstalk, Google의 Cloud Platform 및 Microsoft의 Azure는 모두 Node.JS 기반 페이로드의 원격 실행에 대해 유사한 지원을 제공합니다. 이러한 모든 시스템에서 주요 문제는 처리입니다. Azure는 느린 배포로 유명하지만 다른 공급자는 매우 복잡한 구성 시스템의 사용하기 어려운 백엔드 서비스로 개발자에게 부담을줍니다.

또한 지원되는 Node.JS 환경 버전은 공급자마다 다릅니다. 물론 주제를 심도있게 다룰 공간이 충분하지 않습니다. 방문 Mozilla의 배포 튜토리얼 및 Express.JS ' 성능 및 신뢰성보안 관련된 일부 문제에 대한 모범 사례 페이지. 더 많은 모범 사례를 수집하려면 공급자의 설명서를 참조하십시오.

13. 미래 보장형 애플리케이션

Express.JS 시작 : 애플리케이션의 미래 보장

새로운 추가 사항에 주목해야합니다.

Express.JS의 개발주기는 순조 롭지 않습니다. 개발자는 클라이언트 코드를 다시 작성해야하는 빈번한 API 변경으로 잘 알려져 있습니다. 3.x에서 4.x 로의 전환은 특히 고통 스러웠습니다.이 때문에 5.x의 출시가 임박하여 많은 분들이 불편 함을 느끼실 수 있습니다.

Express.JS 5.0은 몇 가지 주요 변경 사항을 제공하지만 그 영향은 더 제한적입니다. 우선, 이미 사용되지 않는 기능 세트가 실제로 제거됩니다. 코드에서 계속 사용하는 경우 5.x로 업그레이드하려면 유지 관리가 필요합니다.

뷰 엔진 디자이너는 뷰 렌더러와 관련하여 'res.render () :'순위 증가를 확인해야하는데, 이로 인해 일부 동기 구현이 실패했습니다. 프레임 워크 버전 5는 비동기 렌더링을 적용하여 성능을 향상시킵니다.

그 외에도 여러 가지 개선 사항 및 변경 사항이 문서화되었습니다. 여기 이전 버전에서 일부 소멸 된 기능이 반환되는 것을 확인합니다. 또한 새 릴리스에서 일부 오래된 버그가 수정 될 것입니다.

마지막으로, 이미 새 버전을 사용해 볼 수 있습니다. 소스 코드의 사본을 만들고 터미널을 잡고 다음 명령을 입력하여 간신히 테스트 된 최신 JavaScript 아카이브를 다운로드하십시오. 안전한.

$ npm install express@>=5.0.0- alpha.1 --save

이 기사는 원래 크리에이티브 웹 디자인 잡지 Web Designer 279 호에 게시되었습니다. 여기서 279 호 구매 또는 여기에서 Web Designer 구독 .

관련 기사: