프로그래밍/Node.js

Node.js 생활코딩 정리 – Express 프레임워크 도입

가카리 2016. 11. 21. 20:25
반응형

Express 프레임워크 도입

 

튜토리얼 페이지의 hello.js 예제를 다시 한번 풀어보면 다음과 같다.

 

const http = require('http');//http 모듈 사용

 

const hostname = '127.0.0.1';

const port = 3000;

 

//함수 호출함

const server = http.createServer((req, res) => {

res.statusCode = 200;

res.setHeader('Content-Type', 'text/plain');

res.end('Hello World\n');

});

 

server.listen(port, hostname, () => {

console.log(`Server running at http://${hostname}:${port}/`);

});

 

//위를 다시 써보면 아래와 같다

var server = http.createServer(function(request, response){

response.statusCode = 200;//접속 성공시

response.setHeader('Content-Type', 'text/plain');

response.end('Hello World\n');

});

server.listen(port, hostname, function(){

console.log(`Server running at http://${hostname}:${port}/`);

});

 

 

 

Express는 node.js로 만든 서버쪽 애플리케이션을 위한 웹프레임워크이다.

 

Express 설치방법 npm init이 끝난 뒤

 

프로젝트 폴더 이동 후

 

npm install –save express를 치면 package.json에 의존성이 추가된다.

 

 

 

 

 

자 이제 Express를 써보자

 

먼저 메인 페이지인 app.js를 만들자

 

var express = require('express');

var app = express();

app.get('/', function(req, res){//'/' 홈으로 접속한 것을 의미

res.send('Hello world');

});//사용자가 GET방식으로 웹서버에 접속할

 

app.listen(3000, function(){//3000 포트번호

console.log('Connected 3000 port!');

});

 

 

node app.js로 실행한 화면

 

 

만약 다음과 같이 수정하면

 

var express = require('express');

var app = express();

app.get('/', function(req, res){//'/' 홈으로 접속한 것을 의미

res.send('Hello world');

});//사용자가 GET방식으로 웹서버에 접속할

 

app.get('/login', function(req, res){

res.send('login page');

});

 

app.listen(3000, function(){//3000 포트번호

console.log('Connected 3000 port!');

});

 

 

이와 같이 하는 것을 라우팅이라고 한다. 경로별로 다른 페이지를 보여줌

 

실행화면

다음과 같은 화면이 나타난다.

 

 

 

그리고 다음과 같이 send 메서드에 html 태그를 입력할 수 있다.

 

app.get('/login', function(req, res){

res.send('<h1>login page</h1>');

});

 

 

모듈은 부품으로 사용하는 작은 프로그램

NPM은 모듈들을 관리하는 프로그램(Jade, Express, Underscore 등)

 

컨트롤러란 회원가입, 홈페이지, 에러화면 등을 의미

라우터는 이러한 홈페이지들을 이동시키는 것

 

  출처 : 생활코딩 (https://opentutorials.org/course/2136)

 

 

 

반응형