소스플로우

http://a.com/index

http://a.com/login

http://a.com/topic

login이라는 하나의 라우터(path)로 아이디값 즉 쿼리스트링을 다르게 줌으로써 다른 결과를 나타낼 수 있다.

http://a.com/login?id=1

http://a.com/login?id=2

http://a.com/login?id=3

http: 프로토콜 

a.com: 도메인 네임

/login: path

id=1: query string(쿼리스트링)

http://a.com/login : url

http://a.com/login?id=1 :uri

===========================================================================

<app.js>

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

res.send(req.query.id);

});

<description>

req.query.id (요청객체.쿼리스트링.name값)    // 여기서 name=id 

127.0.0.1:3000/info?id=success87 로 접근시  (<< url에서 쿼리스트링: id=success87)

===========================================================================

url: 127.0.0.1:3000/info?id=success87&name=Sean 으로 접근시 

Sean, success87이 화면에 출력된다. 

127.0.0.1:3000/info 으로 접근할 경우에는 undefined, undefined

마찬가지로 127.0.0.1:3000/info?id=success87 으로만 접근하면 undefined,success87 가 출력된다. 

위에서 보다시피 url로 접근시 id와 name의 쿼리스트링 위치(순서)는 문제가 되지 않는다. 

주의할 것!

그렇다면 만약 app.js에서 주석처리되어있는 위의 로직을 해제한다면?

생각한대로 url로 접근시 

정상적으로 로직이 전부 실행되지는 않는다. 

로직상 가장 위에 있는 것만 응답객체에 실어서 보내지고 그다음껀 보내지지 않는다. 

jade문법 간단하게 알아보자.

1. 들여쓰기를 해야한다.

2. 줄바꿈을 할 경우 태그로 인식되므로 주의하자.

3. 줄바꿈을 하지 않고 띄어쓰기를 하면, 해당 태그의 text값을 의미하게 된다. ex) h1 Hello Jade! >>  <h1>Hello Jade!</h1> 

4. 페이지 소스보기를하여 예쁘게 보기위해서는 app.locals.pretty= true;를 app.js에 입력해주자.

5. 화면에 출력되지 않는 코드 즉, 함수와 같은 경우에는 -를 붙여야한다.

예를 들어 for문을 사용하기 위해서는 -for(var i= 0; i<5; i++){}이런식으로 사용해야 한다. 

6. 사용하고싶은 변수or객체가 있다면 app.js 에서 객체를 만들어주고 res.render('temp', 두번째인자);

두번째 인자로 변수를 주입해주어야한다. 변수가 두개일 경우에는 두 변수와 값을 포함하여{ } 중괄호로 묶어주자.   

7. jade에서 태그에 속성을 주고 싶은경우에는 태그 뒤에 괄호를 사용하여 나타내면 된다. 

예. meta(charset='utf-8')

8. 주의할것 notepad메모장에서 작성할 경우 태그뒤에 공백이 있어서는 안된다. 반드시 공백을 없애야한다.

안그러면 에러가 난다. 

============================================================================

app.js 에 추가해주자. 

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

res.render('temp',{_title:'jade',time:Date()});

});

============================================================================

============================================================================

temp.jade

html

head

   meta(charset='utf=8')

title=_title

body

h1 Hello Jade!

ul

-for(var i=0; i<5; i++)

li coding

div=time

============================================================================

127.0.0.1:3000/template 로 접속하여 확인해주자.

해당 페이지의 소스보기를 해보자.

템플릿 엔진의 장점 

1. 짧은코드로 장황한 html 코드를 표현할 수 있다. 

++ jade 파일에 외부에서 변수를 선언, 정의하고 변수를 주입시켜 사용할 수 있다. 

2. express(외부 모듈)의 정적파일 서비스에 대한 장점을 구현해 낼 수 있다. (코드를 변경하더라도 app.js를 다시 실행시킬 필요 없음)

3. express(외부 모듈)의 동적 웹페이지에 대한 장점을 구현해 낼 수 있다. 함수를 사용할 수 있으며, for문과 같은 반복문을 사용할 수 있다. 

========================================================================

temp.jade

html

head

title=_title      //(14)번 글 참고 http://sourceflower.tistory.com/14

body

h1 Hello Jade!

ul

-for(var i=0; i<5; i++)

li coding

div=time      //(14)번 글 참고 http://sourceflower.tistory.com/14

// jade 문법에 유의하자.

// div=time   

// temp.jade 외부에서 time이라는 변수를 만들어 주입해 준 것이다.  (14)번 글 참고 http://sourceflower.tistory.com/14

// ※주의 할것. 제이드 문법에서 공백을 두면 error가 발생한다.

// 들여쓰기를 정확히 해야만 for문등이 제대로 실행된다. 

=========================================================================

※ 템플릿 엔진의 종류는 여러 개가 있다.  그 중 jade를 사용할 것이다.  (Express 모듈에서 recommended)

1. 따라서 npm을 이용하여 jade를 인스톨 시켜줘야 한다. 

npm install jade --save 

jade(템플릿 엔진)를 설치한 후에는 express(nodejs가 기본적으로 제공하는 모듈이 아닌 외부 모듈)에 알려줘야 한다. 

2. view engine,  사용할 템플릿 엔진을 설정해줘야 한다. 

app.set('view engine', '사용할 템플릿 엔진');   // jade를 사용할 것.

3. views, 템플리트가 있는 디렉토리를 설정해줘야한다.

app.set('views','템플리트가 있는 디렉토리')     // 템플리트가 있는 디렉토리의 경우 관습적으로 views로 사용한다. 

4. app.js 에 express를 이용하여 비동기방식으로 콜백함수 로직을 작성해보자. (res.render('파일명')사용)

app.get('/temp', function(req, res){     // res.send 대신 res.render를 사용한다. 

res.render('파일명');     // views 디렉토리에 있는 특정 파일(ex: temp)을 렌더링해서 화면상에 뿌려준다. 

}

※ 랜더링 

사전적의미: 렌더링(Rendering)은 컴퓨터 프로그램을 사용하여 모델(또는 이들을 모아놓은 장면인 씬(scene) 파일)로부터 영상을 만들어내는 과정을 말한다. 

// 여기서 렌더링은 jade 문법으로 작성한 로직을 jade 템플릿엔진을 사용하여 화면상에 뿌려주는 의미에서 렌더이다. 

// template 경로로 들어온 사용자에게 위와같은 function이 실행되면서 temp.jade 라는 파일을 찾아서 

웹페이지로 랜더링(jade의 문법에 의존하여 해석한 그 결과)해서 전송한다라는 의미.

=========================================================================

app.js

const express = require('express');

const app = express();

app.locals.pretty= true;     // 코드를예쁘게해준다.

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

app.set('views','./views');

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

res.render('temp');        

});

 //  template 경로로 접속할 경우 views 폴더 안에 있는 파일명인 temp인 파일을 렌더링해서 화면에  뿌려준다.

위 페이지의 소스보기를 할 경우 아래와같이 소스코드가 붙어서 나온다 이러한 소스코드를 파악하기는 어렵다. 

따라서 app.js 에 코드를 예쁘게 정리해주는 app.locals.pretty= true;  이것을 작성해주자. 

app.locals.pretty= true;     // 소스보기를 하여 열어보았을 때 아래와 같이 코드를예쁘게해준다.

Express,정적인 파일을 서비스 하는방법

app.use(express.static('디렉터리명'));

// 정적파일을 서비스 할 디렉터리의 경우 반드시 package.json 파일이 있는(즉, 패키지를 선언한 곳) 위치와 동일한 위치의 디렉토리에 생성해주자. 

웹페이지(html)를 표현하는 방법

1) 순수 html 코드로!(정적)  app.use(express.static('디렉터리명'));사용

장점: app.js 에 코드를 작성하지 않으므로 지저분하지 않다.

정적인파일 자체를 수정하면 되므로 cmd 창에서 (ctrl+c)껐다가 (node app.js)켤 필요가 없다.

단점: 동일한 텍스트를 입력해주고 싶을 경우, 함수등을 지원하지 않기 때문에 일일이 컨c 컨v해야한다.

Date()와 같은 함수를 사용할 수 없다.ㅠ 

2) app.js 에 html 코드를 삽입해서 (동적)  app.get('/dynamic'function(req,res){res.send(변수명)사용

장점: 기본적으로 자바스크립트언어를 사용할 수 있으므로 함수를 사용가능하다.

띠라서 코드의 길이를 줄일 수 있다.

Date()와 같은 함수를 사용할 수 있다. ^^

단점: 코드가 지저분해진다. 

파일 자체를 수정하면 cmd 창에서 (ctrl+c)껐다가 (node app.js)켜야하므로 번거롭다.

static.html 파일을 만들어 public에 놓고 정적으로 웹페이지를 표현해보자. 

======================================================================

static.html

<!DOCTYPE html> 

<html>

<head>

<meta charset="utf-8">

</head>

<body>

Hello, Static

<ul>

<li>coding</li>

<li>coding</li>

<li>coding</li>

<li>coding</li>

<li>coding</li>

</ul>

</body>

</html>

<!--static 폴더에 넣어놓고 반드시 app.use(express.static('public'));

해줘야한다. 그래야 곧바로 실행가능하다. 안그러면 에러 -->

======================================================================

정적파일 서비스를 위한 디렉토리 public 안에 static.html 을 위치시켰다. 

127.0.0.1:3000/static.html 을 입력하여 접근 해보자. 

app.js에 (``그래이브 액센트를 사용) html 코드를 직접 작성하여 동적으로 웹페이지를 표현해보자. 

======================================================================

const express =require('express');    // 모듈을 가져오자.

var app= express();   //express().get 이런식으로 사용해도 되지만! 가독성을 높여주기 위하여 app이라는 변수에 담아주자.

// use라는 api를 사용하여 express의 정적서비스를 app.js에서 사용할 수 있도록 연결시키자.

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

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

var time =Date();      // Date(); 자바스크립트에서 제공하는 함수를 사용할 수 있다. 

var lis = '';

for(var i=0; i<5; i++){       // for 문을 사용할 수 있다. 

lis = lis + '<li>coding</li>';

}

var output = `<!DOCTYPE html> 

<html>

<head>

<meta charset="utf-8">

</head>

<body>

Hello, Dynamic!

<ul>

${lis} 

<!--변수를 담아서 표현하는 방법 use 그래이브 액센트``-->

</ul>

${time}

</body>

</html>`;        

res.send(output);

});

======================================================================

command 창을 열고 node app.js 를 입력하여 express 에서 구현해 놓은 서버를 켠 후  127.0.0.1:3000/dynamic으로 접근해보자.

Express,정적인 파일을 서비스 하는방법

app.use(express.static('디렉터리명'));

// 정적인 파일을 모아놓은 (나의 경우 public)디렉토리는 패키지로 선언한 해당 디렉토리(package.json 파일이 있는..)에 위치시키자.  

// public 디렉토리 안에 router.png 파일과 sample.txt 파일이 있다. 

============================================================================================

<app.js>

const express =require('express');    // 모듈을 가져오자.

var app= express();   //express().get 이런식으로 사용해도 되지만! 가독성을 높여주기 위하여 app이라는 변수에 담아주자.

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

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

res.send('<h1>hello router</h1>, <img src="/router.png">');

});

app.listen(3000, function(){

console.log('connected 3000 port');

});

============================================================================================

먼저 command창에서 node app.js 를 입력하여 express에 구현된 서버를 실행시켜줘야 한다. 

127.0.0.1:3000/rout 로 접근해보자. 

127.0.0.1:3000/'파일명'   으로 접근하면 정적파일을 모아둔 public 안의 원하는 파일의 내용을 화면에 뿌려줄 수 있다.  

// 127.0.0.1:3000/sapmle.txt 로 접근해보자. 

지금 만드는 app.js 파일을 main파일, main애플리케이션, entry 파일, entry 애플리케이션이라고 한다. 

프로젝트의 규모가 커지면 여러 개의 파일이 하나의 애플리케이션을 구동하게끔 한다. 가장 최초의 진입점이 되는 파일(어떠한 파일을 실행시켜야만 해당 애플리케이션이 실행될까?)이 entry 파일이다.

엔트리파일은 관습적으로 app.js 라는 이름을 가진 js 파일을 만들어 사용한다.

const express =require('express');    // 모듈을 가져오자.

var app= express();   //express().get 이런식으로 사용해도 되지만! 가독성을 높여주기 위하여 app이라는 변수에 담아주자.

app.get('/', function(request, response){     // get 방식  // get을 라우터(길 안내자)로 생각하자.

response.send('hello world');

});

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

res.send('hello router, <img src="/seagate.jpg">');

});

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

res.send('Login please');

});

app.listen(3000, function(){

console.log('connected 3000 port');

});

// 통신에서의 라우터: 서로 다른 네트워크를 중계해주는 장치. 보내지는 송신정보에서 수신처 주소를 읽어 가장 적절한 통신통로를 지정하고, 다른 통신망으로 전송하는 장치를 말한다.

라우터 이해 

command창에서 원하는 위치로 들어가서 md use_express 를 입력하여 use_express폴더를 생성해주자.

use_express 폴더로 들어가서 nodejs가 기본적으로 제공하는 모듈이 아닌, 외부의 모듈 express를 사용하기 위해 npm을 이용해야한다. 

1. 먼저 npm init 으로 해당 디렉토리(use_express)를 패키지로 지정해줘야한다. 

해당 디렉토리에 package.json 파일이 생성된다. 

이렇게 package.json 파일이 생성된 디렉터리는 npm을 사용하여 패키지로 선언하게 되는것이다. 열어보면 패키지에 대한 정보임을 알 수 있다. 

2. npm install express --save 

(※--save 를 해줄 경우에는 package.json 파일만 있다면 언제든지 자신의 프로젝트(패키지)에 해당 설치 모듈을 포함시킬 수 있다는 의미가 된다.)

이로써 express 모듈을 사용할 준비가 끝난다. 

package.json : npm init을 입력하여 패키지로 만들어줄경우 생성되는 파일

node_modules : 모듈을 로드 해올 때 생성되는 디렉토리

// 1. test_server.js

const http = require('http');

const hostname = '127.0.0.1';

const port = 1337;

// 서버가 특정 포트:1337을 바라보게끔 설정!

// 전체가  비동기적 방식

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

res.writeHead(200, {'Content-type': 'text/plain'});

res.end('Hello World');

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

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

});

============================================================================

// 2. test_server2.js 

const http = require('http');

const hostname = '127.0.0.1';

const port = '2000';

// 동기적 방식 + 비동기적 방식  

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

res.writeHead(200, {'Content-type': 'text/plain'});

res.end('Hello World');

});

// server를 create하고난 후에 

// listen 작업은 시간이 다소 오래걸릴 수 있으므로 콜백함수를 사용하여 비동기적 방식으로 작동하게끔 처리해주자. 

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

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

});

============================================================================

cmd 창에서 node test_server.js 를 입력하여 파일을 실행시켜줘보자. 

1.  node test_server.js

2. node test_server2.js