express 에서 웹상의 데이터 get / post 로 서버로 보내진 데이터를 처리 하는 방식입니다. 


express_ejs.zip


혹시 포스팅을 보시고 이해가 안되신다면 위의 예제를 보시면 구조와 방식을 이해하실수 있을 겁니다. 


1. 먼저 서버로 돌아가는 app.js  에 다음을 추가해 줍니다. app.use() 부분은 데이터를 json 과 urlencode로 처리 하기 위해 선언부입니다. app.get() app.post() 부분은 함수이름에서 알수 있듯이 url 경로가 /test로 들어오는 데이터 값중 get() 은 /routes/test.js 의 get 함수를 post 일 경우 post 함수를 사용해라~ 라는 선언분입니다. 

app.use(express.json());
app.use(express.urlencoded());

app.get('/test', require('./routes/test').get);
app.post('/test', require('./routes/test').post);

2. 다음 routes 의 폴더에 test.js 파일을 만들어 주고 아래의 소스를 넣어줍니다. 소스는 get/post 로 온 데이터를 콘솔창에 찍는 간단한 소스 입니다. get 의 경우 파라미터가 id 로 들어왔을 경우 해당 데이터를 콘솔창에 출력합니다. 



exports.get = function(req, res){
	console.log(req.param("id"));
	res.render('test');
};

exports.post = function(req, res){
			console.log(req.body);
			res.render('test');
};

3. 마지막으로 views부분에 test.ejs 파일을 만들어 준다음 아래의 소스를 넣어줍니다. 


<!doctype html>

<html>

  <body>

<form id="myform" action="/test" method="post" enctype="application/x-www-form-urlencoded">

  <input type="text" name="user_id" id="mytext" />

  <input type="submit" id="mysubmit" />

</form>

  </body>

</html>


4. 이제 서버를 실행시켜 준다음 다음과 같은 url 주소로 들어갑니다. http://127.0.0.1:8080/test?id=uiandwe

get의 경우 url 에서 ? 다음으로 오는 데이터 만을 처리해 줍니다. 아래의 url 로 들어간 다음 콘솔 창을 확인해 보면 id 값을 출력하는것을 확인할수 있습니다. 





5. 이번엔 post 입니다. 브라우저의 input 란에 아무 데이터나 입력한 다음 버튼을 눌러 보면 콘솔창에 해당 데이터가 출력되는 것을 확인할수 있습니다. 출력된 데이터의 변수부분은 test.ejs 소스 부분중  input 의 name 에 해당합니다. 





이렇게 간단하게 express 에서 get/post 로 오는 데이터를 확인할수 있습니다. 이제 이 데이터를 가지고 스위칭/컨트롤 를 하면 원하시는 웹사이트를 개발할수 있습니다. 



저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

메인 화면 만큼 가장 중요한 페이지가 바로 404 페이지 입니다!!

저의 경우 웹싸이트의 404 페이지가 웹싸이트의 개성을 가장 잘 살린다고 생각합니다.(가장 사소할지도 모르는 페이지를  어떻게 꾸미느냐에 따라서 깊이 있는 개발이라고 생각합니다.)

쨋든! express 에서 404 페이지 핸들링(은 다른 페이지들도 똑같은 방법으로 핸들링 가능합니다.)은 간단합니다!!


1. 먼저 서버실행.js 부분에 다음의 소스를 추가 합니다. 저의 경우 랜더링을 ejs로 설정했기 때문에 페이지를 ejs로 했습니다. 만일 jade 나 html 일 경우 확장자를 바꾼다음 2번의 파일새성부분에서 각자의 랜더링에  맞는 페이지를 생성하시면 됩니다. 

app.use(function(req,res){
    res.render('404.ejs');
});



2. view 폴더에 404.(확장자는 렌더링에 맞게! 저의 경우엔 ejs) 페이지를 추가 합니다. 



3. 해당 페이지 내용을 넣어준다.



4. 서버 실행후 없는 페이지를 접속후 확인!

이렇듯 서버단에 한줄만 추가 해주면 간단하게 랜더링이 됩니다. 


저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

express --ejs express_ejs


cd express_ejs

npm install



ejs는 기본적인 문법이 jsp 와 같습니다. html 태그를 그대로 사용하면서 <%=%> 를 써서 해당 하는 데이터를 받아서 출력합니다. index.ejs 를 보면 쉽게 알수 있습니다. 

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <h1><%= title %></h1>

    <p>Welcome to <%= title %></p>

  </body>

</html>

<%=title%> 이것을 받아서 출력하게 되는데 해당 데이터를 전해주는곳은 routes폴더 안의 index.js 입니다.(이곳이 모델이 됩니다.)


전달되는 데이터 내용을 추가해 봅시다. 

먼저 routes 폴더내의 index.js 파일 입니다. name 과 출력될 데이터를 가 하였습니다.

exports.index = function(req, res){

  res.render('index', { title: 'Express' , name:'uiandwe'});

};


그리고 views 폴더의  index.ejs 파일을 수정합니다.

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <h1><%= title %></h1>

    <p>Welcome to <%= title %></p>

<p> name : <%=name%></p>

  </body>

</html>


실행화면. name 데이터가 추가된것을 확인할수 있습니다.





템플릿을 사용하기 위해서 다음의 모듈을 추가 설치 합니다.

npm install ejs-locals


이제 app.js 파일의 내용을 아래의 소스로 교체 합니다. 

app.js 소스 

var express = require('express')  

  , app = express()

  , engine = require('ejs-locals')

  , routes = require('./routes');


app.engine('ejs', engine);

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

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

app.set('port', process.env.PORT || 8080);



app.get('/', routes.index);

app.listen(app.get('port'), function(){

  console.log('Express server listening on port ' + app.get('port'));

});

index.ejs 파일 소스

<%layout('layout')%>

<div class="title">

    <%= title %>

    <p>name : <%=name%></p>

</div>


layout.ejs 파일 생성후 아래의 소스를 넣어줍니다.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Pivotal Search</title>

    <meta name="description" content="">

    <meta name="author" content="">


    <!-- HTML5 shim, for IE6-8 support of HTML elements -->

    <!--[if lt IE 9]>

      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->


    <!-- styles -->

    <link href="stylesheets/style.css" rel="stylesheet">


  </head>

  <body>

    <%- partial('header.ejs') %>

    <%- body %>

  </body>

</html>


header.ejs 파일 생성후 아래의 소스를 넣어 줍니다.

<header>

    My awesome header!

</header>

<hr>


실행 화면!탭플릿모듈처럼 header.ejs 과 layout.ejs 그리고 index.ejs 파일이 정상적으로 출력됩니다. 



저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글 하나 달렸습니다.
  1. 아이구 감사합니다 ㅠㅠㅠㅠ

    뉴비라서 한참 헤메었는뎅

    요고 보구서 했더니 잘 되네용 ㅠㅠ

secret

express 의 경우 기본 템플릿은 jade 로 설정되어 있습니다. 기본인 만큼 간편하면서 강력한 템플릿 엔진인 jade!

간단한 예제로 쭈욱! 살펴 보겠습니다. 


1. 먼저 express 명령어를 이용하여 jade 프로젝트를 생성합니다. 아래의 명령어를 실행면 express_jade 폴더가 생성됩니다. 

express express_jade


2. 생성된 express_jade 폴더로 이동후

cd express_jade

npm 명령어를 통해 관련 모듈을 설치해 줍니다.

npm install


3. 실행! 참고로 기본 포트가 3000으로 되어 있습니다.(이경우 당연히 app.js 에서 바꿔주면 되겠지요?)


http://127.0.0.1:3000



express의 구조는 다음과 같습니다. 

   + node_moudles : 이 프로젝트용 모듈 설치 디렉 토리

   + public : 이미지, css , javascript 파일

   + routes : 페이지 모델 부분 소스들 

   + views : view 소스들 

   app.js : 서버 소스

으로 되어 있습니다. 



3. 먼저 routes 폴더를 보시면 해당 페이지가 로드 될때 넘겨 주는 데이터 부분을 관장합니다.

현재 디폴트로 생성된 routes 의 파일은 index.js 와 uers.js  입니다. 여기서 index.js 를 열어 봅니다. 

기본소스는 다음과 같습니다. 

여기서 title 의 'Express' 데이터가 화면에 출력되는것입니다. 여기서 추가로 name:'uiandwe' 을 한다음 view 부분을 고쳐 봅니다. (소스 수정후 는 아래)

exports.index = function(req, res){
  res.render('index', { title: 'Express' , name:'uiandwe'});
};

4.  views 폴더의  index.jade 을 열어 봅니다. 아래와 같이 소스가 되어 있을 겁니다. extends 는 layout.jade 의 확장을 block 는 layout 에서의 content 부분의 연결을 의미합니다. (이부분은 아래에 설명하겠습니다.)


먼저 우리는 파라미터로 데이터를  하나더 받기로 했습니다. name 의 uiandwe 데이터 이지요?

아래의 소스에선 p Welcom to #{title} 부분이 바로 데이터를 받는 부분인것을 쉽게 알수 있습니다. 아래에 소스를 추가해 보도록 하겠습니다. 


extends layout

block content
  	h1= title
  	p Welcome to #{title}
	hr
	p user: #{name}


5. 실행 해볼까요? 따란~ 우리가 원하던 데이터(name:uiandwe)가 정상적으로 출력됩니다. 


jade 의 문법은 하위 구조가 탭으로 계층이 구분됩니다. 처음엔 어색할지 몰라도 view 소스가 간단해 집니다.

(단 jade 파일 내의 javascript 의 경우 계층이 아닌 문법은 오직 한줄안에서 표현되어야 합니다!! 아니면 에러가 납니다!)

jade 의 기본적인 문법과 설명은 여기를 참조 하시기 바랍니다. http://jade-lang.com



6. jade가 탬플릿 엔진인 만큼 layout.jade 와 index.jade 에서 확장하여 footer.jade 를 더한 예제를 보겠습니다. 

아래의 소스들은 views폴더의 파일을 수정하거나  새로 생성하시면 됩니다. 

layout.jade 소스

doctype html
html
	head
		title= title
		link(rel='stylesheet', href='/stylesheets/style.css')
	body
		
		block content
		include footer


footer.jade 소스

hr
p This is footer.jade file data.
hr


7. 해당 화면으로 들어가 보면 footer.jade 파일이 하단에 붙어서 출력되는것을 확인할수 있습니다. 

8. header.jade 도 넣어볼까요? 이번엔 index.jade 파일에 넣어 보겠습니다. 

index.jade 소스

extends layout

block content
	include header
	h1= title
	p Welcome to #{title}
	hr
	p user: #{name}


header.jade 파일 소스

hr
p This is header.jade!!!
hr


9. 해당 소스를 실행 해보면 아래와 같이 화면이 나오게 됩니다. 탬플릿모듈인 만큼 반복되는 페이지들은 이처럼 쉽고 간편하게 넣을수 있습니다. 여기에 javascript 로 경우에 따라 페이지들을 조절하면 우리가 보는 웹페이지를 만들수 있습니다. 



 - 혹시 jade 문법이 어려울 경우 html 로 먼저 완성뒤 http://html2jade.aaron-powell.com 에서 변환하셔도 됩니다. 




저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

Express 는 노드기반의 웹 개발 프레임워크입니다. 앞써 node의 기본 http 모듈 만으로도 기초적인 웹은 제작 가능합니다. 단순히 몇페이지의 웹이라면 말이죠. 프레임워크의 쓰임새는 반복되는 작업의 최소화라고 생각합니다. 웹개발에선 반복되는 작업이 무수하게 많습니다. 그작업을 조금이라도 줄이기 위해선 우린 프레임워크를 써야하죠. 이번장은 간단하게 express 의 간단한 화면 띄우기로 부터 ejs , jade까지 외부모듈을 사용한 웹 개발장입니다.  

express 의 공식 홈페이지는 http://expressjs.com 입니다. 가이드라인과 API들을 둘러보시면 더욱 좋습니다. 


1. 먼저 express 를 설치 합니다. 제가 설치한 버전은 express@3.4.8 버전이군요.

sudo npm install -g express


2. 기본적인 서버 실행입니다. 

var express = require('express');
var app = express();
 
app.get('/', function(req, res){ 
    res.send('Hello World'); 
}); 
 
app.listen(8080); 





3. 파라미터에 따른 라우팅입니다. 해당 파라미터를 받고 화면에 뿌려주는 기능입니다. 이것을 응용하면 파라미터에 따라 CURD도 가능해 지겠지요?

var express = require('express');
var app = express();
 
app.get('/', function(req, res){ 
    res.send('Hello World'); 
}); 

 app.get('/user/:id', function(req, res){
    res.send('user ' + req.params.id);
});

app.listen(8080); 

해당소스를 실행 시킨후 http://127.0.0.1:8080/user/원하는문장 을 써주시면 화면에 출력됩니다. 




여기까진 http 모듈보다 뭐가 좋은거지? 라고 생각하실수 있습니다. 기본적인것은 http 모도 다 할수 있기 때문이지요. 아마 다음장부터 express의 진가를 볼수 있을겁니다. 




저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret