동적페이지


동적페이지는
변수안에 코드를 담아 response의 매개변수로 전달한다.
탭키 위의 특수한 기호인 `키 안에 코드를 작성하게되면 보기좋게 코드를 작성이 가능하다.
이 기능은 formatted text 라고한다.
${변수명} 은 동적페이지 코드 안에서 변수를 나타날수 있게 한다.
동적페이지는 변경될 때마다 노드 애플리케이션을 재부팅 해야한다.

 

var express = require('express');//익스프레스 모듈 로드해 변수에 저장 var app = express(); //애플리케이션이라는 객체를 리턴한다. app.use(express.static('public')); // 정적인 파일이 위치할 디렉터리를 지정하는 코드 app.get('/', function(req,res){ // 페이지 요청시 res.send('Hello World'); //화면에 출력 }); app.get('/dynamic', function(req, res){ var lis = ''; for(var i=0; i<5; i++){ lis = lis + '<li>coding</li>'; //lis 변수에 문자열 5번 저장 } var time = Date(); //현재 날짜 ,시간 //formatted text var output = ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> Hello, Dynamic! <ul> ${lis} </ul> ${time} </body> </html>`; res.send(output); }); app.listen(3000,function(){ //3000번 포트 리스닝 console.log('Connected 3000 port'); //리스닝이 실행되면 콘솔에 출력 });

 ​



정적페이지


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

위 코드로 public 폴더를 정적 파일로 지정한 뒤 
public 폴더에 html 파일을 위치시키고 /파일명 으로 요청하게되면 
요청한 html파일이 브라우저에 나타나게된다.




정적인 파일은 수정시 서버에 바로 반영이된다. 요청이 들어올 때마다 노드 애플리케이션이 잡아주기때문에
서버를 리부팅할 필요가 없다.

 


저작자표시

'Node.js' 카테고리의 다른 글

post 방식 데이터 전달 / 사용  (0) 2017.02.26
URL을 이용한 get방식 데이터 전달 / 사용  (0) 2017.02.26
jade 템플릿 엔진  (0) 2017.02.26
Express 로 웹 애플리케이션 만들기  (0) 2017.02.26
모듈  (0) 2017.02.26

Express 는 node.js 로만들어진 웹 프레임워크이다.


설치방법은 커맨드창에서 프로젝트 폴더로 들어가  npm init 명령어를 통해 npm 프로젝트로 선언후 

npm install --save express 명령어를 실행하면 설치된다.



프로젝트 디렉터리에 app.js 라는 파일을 생성한다 이파일은 

메인파일 또는 메인애플리케이션 또는 엔트리애플리케이션 이라 부른다.

애플리케이션을 동작하게하고 가장 최초로 실행되는 파일이다.

관습적으로 app.js 라는 이름을 많이 사용한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
var express = require('express');//익스프레스 모듈 로드해 변수에 저장
 
var app = express(); //애플리케이션이라는 객체를 리턴한다.
app.get('/', function(req,res){ // 페이지 요청시
res.send('Hello World');  //화면에 출력
});
app.get('/login', function(req,res){ //login 이라는 요청시
res.send('login please'); 
});
 
app.listen(3000,function(){ //3000번 포트 리스닝
  console.log('Connected 3000 port'); //리스닝이 실행되면 콘솔에 출력
});
 
cs


익스프레스로만들 애플리케이션을 제어하기 위해서는 익스프레스 모듈을 통해서

애플리케이션이라는 객체를 만들어야 한다.


사용자가 접속했다는 화면을 보여주려면 get 함수를 호출한다.

사용자가 get방식으로 접속한 사용자를 받기위한 함수이다.

첫번째 매개변수인 /는 홈이라는 뜻이다. 두번째 매개변수인 함수는

사용자가 get 함수를 통해 홈으로 접속하면 실행된다.

함수는 형태가 약속되어있다. 첫번째 매개변수는 request 두번째 매개변수는 response 이다.

res 의 send 함수는 인자로 전달된 값을 응답한다.


app객체는 listen이라는 메서드가 있다.

이메서드에 포트번호를 지정해주면 웹 애플리케이션이 해당 포트번호를 리스닝할수있게된다.

리스닝이 성공하게되면 콜백함수가 실행되면서 화면에 Conneted 3000 port 라고 출력된다.


리스닝 실행후 콘솔에 출력된 메세지



get방식으로 페이지 요청시에 화면에 나타난 메세지



/login 페이지 요청시 화면에 나타난 메세지



정적파일 서비스 방법





 

var express = require('express');//익스프레스 모듈 로드해 변수에 저장

var app = express(); //애플리케이션이라는 객체를 리턴한다. app.use(express.static('public')); // 정적인 파일이 위치할 디렉터리를 지정하는 코드 app.get('/', function(req,res){ // 페이지 요청시 res.send('Hello World'); //화면에 출력 }); app.get('/login', function(req,res){ // /login 이라는 요청시 res.send('login please'); //로그인 요청 메시지 출력 }); app.get('/image', function(req,res) {// /image 라고 요청시 res.send('<img src= "/BruceLee.jpg">'); //이미지태그 }); app.listen(3000,function(){ //3000번 포트 리스닝 console.log('Connected 3000 port'); //리스닝이 실행되면 콘솔에 출력 });


app.use(express.static('public')); 이코드는 정적인 파일이 위치할 디렉터리를 지정한다.

관습적으로 public 이라는 폴더명을 사용한다.

폴더명이 public 인 디렉터리안의 파일을 제공할수 있게된다.


/image 로 요청하면 이미지가 나올수있게 소스를 작성하고 실행하면 이미지가 나오게 된다.




저작자표시

'Node.js' 카테고리의 다른 글

post 방식 데이터 전달 / 사용  (0) 2017.02.26
URL을 이용한 get방식 데이터 전달 / 사용  (0) 2017.02.26
jade 템플릿 엔진  (0) 2017.02.26
정적페이지 / 동적페이지 표현  (0) 2017.02.26
모듈  (0) 2017.02.26

모듈

모듈은 부품이다. 모듈을 가져다 사용할 때에는 require라는 함수를호출한다.

node.js는 애플리케이션을 만드는데 필요한 여러가지 모듈을 기본적으로 제공한다.


NPM(Node Packae Manager)

node.js가 제공하는 모듈이다.



다른사람이 만든 모듈 사용하기


모듈 설치

모듈을 설치하려면 먼저 프로젝트 디렉토리를 npm의 패키지로 지정을 해야한다.

cmd창에서 현재 디렉토리를 npm 패키지로 지정하는 명령어인 npm init 를 입력한다.

npm init 명령어는 package.json 이라는 파일을 생성해준다. 이파일에는 패키지의 여러가지 정보를 기록한다.

name은 프로젝트의 이름을 지정하는 것이다.

descripton은 직접 기술하는것을 권장한다.

entry point는 이패키지를 구동시키는 자바스크립트파일을 지정하는것이다 나중에 변경이가능하다.

test command는 어떤 명령을 실행하면 테스트를 실행시킬수있는지

git repository는 git hub에 올라간다면 그 저장소의 주소를 적는것이다.

여기까지 한다면 다른사람이 만든 모듈을 내 프로젝트에 포함시킬수 있다.








생성된 json 파일


설치는 npm install 명령어로 설치한다. underscore 라는 모듈을 인스톨한다.

설치시 --save 를 붙이게되면 dependencies에 포함이된다.

모듈을 일시적으로 사용하는경우에는 --save를 붙이지않고 설치한다.






모듈 사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
var _ = require('underscore');
 //require함수는 모듈을 가져오고 그 모듈을 사용할수있는 객체를 리턴한다.
 //underscore 는 _ 라는 이름의 변수를 쓰는 관습이 있다.
var arr = [3,6,9,1,12] //배열 생성
/*
underscore가 제공하는 기능중에는 자바스크립트의
배열의 기능중 빈약한부분을 채워주는 여러가지 기능을 가지고 있다.
*/
console.log(arr[0]); //배열의 첫번째 원소 출력
console.log(_.first(arr)); //underscore 모듈의 배열의 첫번째 원소를 가져오는 함수
console.log(arr[arr.length-1]); //배열의 마지막 원소 출력
console.log(_.last(arr)); //underscore 모듈의 배열의 마지막 원소를 가져오는 함수
 
cs


저작자표시

'Node.js' 카테고리의 다른 글

post 방식 데이터 전달 / 사용  (0) 2017.02.26
URL을 이용한 get방식 데이터 전달 / 사용  (0) 2017.02.26
jade 템플릿 엔진  (0) 2017.02.26
정적페이지 / 동적페이지 표현  (0) 2017.02.26
Express 로 웹 애플리케이션 만들기  (0) 2017.02.26

https://git-scm.com/downloads 

https://www.sourcetreeapp.com/ sourcetree - git을 gui로 사용하게해주는 애플리케이션


git과 sourcetree 설치후 


sourcetree 실행 - 도구 - 옵션 - 언어 - english 로 설정후 재시작



commit & push 방법

Clone/New 창에서 Create 로 로컬 깃 저장소 생성




 좌측상단 Commit 클릭후 Stage ALL 또는 Stage Selected 를 선택해 커밋할 파일은 Stage file로 보낸다.





커밋메세지 작성후 우측하단 commit 버튼 클릭




우측상단 Settings - Remotes 탭 - Add 에서 github repository 주소 추가




push



저작자표시

'Etc' 카테고리의 다른 글

하나의 페이지에 여러개의 구글차트 그리기  (0) 2017.03.03
gitignore.io  (0) 2017.02.26

gitignore는 Git으로 관리하지 않아도 되는 파일을 무시하게 해준다.


gitignore.io 에서 windows , java , eclipse 입력 후 generate 클릭



1




결과로 출력된 텍스트 복사 





Git Repositories 에서 .girignore 파일에 붙여넣기











저작자표시

'Etc' 카테고리의 다른 글

하나의 페이지에 여러개의 구글차트 그리기  (0) 2017.03.03
git / sourcetree commit & push 사용법  (0) 2017.02.26

YYYY-MM-DD 변환


1
2
3
4
5
6
7
8
//date객체 YYYY-MM-DD 변환함수
function dateToYYYYMMDD(date){
    function pad(num) {
        num = num + '';
        return num.length < 2 ? '0' + num : num;
    }
    return date.getFullYear() + '-' + pad(date.getMonth()+1) + '-' + pad(date.getDate());
}
cs


저작자표시

'JavaScript' 카테고리의 다른 글

자바스크립트 분 -> 일, 시간 변환 함수  (0) 2018.07.11
자바스크립트 Date 에 일, 시간, 분 더하기  (0) 2018.07.10
자바스크립트 Date to YYYY-MM-DD HH24 MI변환  (0) 2018.07.09
자바스크립트 날짜 차이 구하기  (0) 2017.02.26

날짜 - 날짜 일 차이 구하기


1
2
3
4
5
var now_Date = new Date();     //현재날짜
var returnExpectDay = new Date($("#returnExpectDay").val()); //비교날짜
var btMs = returnExpectDay.getTime() - now_Date.getTime() ; //밀리세컨드단위변환한후 연산
var btDay = btMs / (1000*60*60*24) ; //밀리세컨*초*분*시 일로 변환
var btDayResult = Math.floor(btDay); //소수점 제거
cs


저작자표시

'JavaScript' 카테고리의 다른 글

자바스크립트 분 -> 일, 시간 변환 함수  (0) 2018.07.11
자바스크립트 Date 에 일, 시간, 분 더하기  (0) 2018.07.10
자바스크립트 Date to YYYY-MM-DD HH24 MI변환  (0) 2018.07.09
자바스크립트 date 날짜형식 YYYY-MM-DD 변환  (0) 2017.02.26

텍스트 수직 가운데 정렬


1
p {line-height:14px;}
cs




요소 수직 가운데 정렬


1
2
3
4
5
6
7
8
9
10
.wrapper {
    display: table;
    width: 500px;
    height: 500px;
}
 
.cell{
    display: table-cell; 
    vertical-align: middle;
}
cs
 

정렬할 블럭의 바깥에 display :table 속성을 주고 크기를 정한후

정렬할 블럭에 .cell의 속성을 준다.


저작자표시

'HTML&CSS' 카테고리의 다른 글

반응형 background-image  (0) 2017.03.30

+ Recent posts

티스토리툴바