티스토리 뷰

Web 개발/javaScript & Node.js

Express

Hula_Hula 2018. 12. 7. 16:27

[ Express란 ]


express는 서버를 더 쉽게 구축할 수 있게 도와주는 프레임워크입니다. express를 기반으로 작업할 환경(폴더)로 이동해서 express를 설치해줍니다. (만약 npm 디렉토리로 설정이 되어 있는 상황이면 npm init을 건너 뜁니다.)


$ npm init

$ npm install express --save


자, 이제 node_module 폴더로 들어가면 express가 설치되어 있는 것을 확인할 수 있습니다. 그리고 패키지를 사용하고자 하는 폴더에 있는 package.js 파일 하단, dependencies 부분에 express 버전이 추가되어 있습니다.

설치가 끝났다면 main file(= main application, entry file)을 만들어 보겠습니다. main file의 이름은 "app.js"라는 이름을 관습적으로 사용합니다. 


const express = require('express');
const app = express();

//webpage 접속(web page에 접속하는 방법은 get/post = url은 get 방식을 사용, '/'은 Home으로 접속)
//get함수를 실행한 뒤, callback function 실행(get함수의 callback f는 res,req을 매개변수로 받는다고 약속되어 있다.)
app.get('/',function(req,res){
res.send('This is Home page');
});

//login페이지 설정
app.get('/login', function(req,res){
res.send('This is login page');
})

//port listen
app.listen(3000, function(){
console.log('Connected 3000 port');
})

(express를 이용해 port listener을 설정해두고, 비동기 함수 get을 이용해 page의 내용을 담을 수 있다. /로 들어가면 'This is Home page'가 보이도록 미리 작업해둔 홈화면이 보이고, /login로 들어가면 'This is login page'가 보이도록 미리 작업해둔 로그인 페이지가 보인다.)


위 코드에서 get 메서드가 하는 역할은 어떠한 경로로 접근했을 때 어떠한 작업이 보여지도록(실행하도록) "연결"하는 역할을 합니다.

그리고 이러한 역할을 하는 것을 라우터(router)라고 합니다. 



[ Express - 파일 제공(정적파일) ]


페이지에 다양한 파일을 제공할 수 있도록 해보겠습니다. 파일이라 함은 이미지가 될 수 도 있고 텍스트가 될 수도 있고 비디오가 될 수도 있습니다. 먼저 정적인 파일(코드로 작성된 것이 아닌 이미 만들어져 있는 파일, 이미지...)을 제공 해보겠습니다. 정적인 파일을 제공하기 위해 먼저 로컬에 디렉토리와 파일경로를 획득합니다. 저는 public이라는 폴더를 만들어 사진파일을 넣어 두겠습니다.


const express = require('express');
const app = express();

//정적인 파일을 받을 경로설정 ('public 폴더에서 정적인 파일을 끌어 쓰겠다')
app.use(express.static('./public'));

//webpage 접속(web page에 접속하는 방법은 get/post = url은 get 방식을 사용, '/'은 Home으로 접속)
//get함수를 실행한 뒤, callback function 실행(get함수의 callback f는 res,req을 매개변수로 받는다고 약속되어 있다.)
app.get('/',function(req,res){
res.send('This is Home page');
});

//login페이지 설정
app.get('/login', function(req,res){
res.send('This is login page');
})

//port listen
app.listen(3000, function(){
console.log('Connected 3000 port');
})


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


다음과 같은 메서드를 사용하면 정적인 파일을 받을 폴더를 사용할 수 있게 됩니다. 이제 public폴더 안에 있는 사진,텍스트와 같은 파일을 webpage에서 사용할 수 있는거죠.

우리는 express를 설치할 때, 지정한 작업폴더를 작업환경으로 설정했습니다. 그렇기 때문에 그 안에 있는 폴더들과 파일들을 express의 메서드를 통해 접근하고 사용할 수 있는 것이죠. 다만 아무런 조치를 취하지 않고 접근할 수는 없습니다. 지금과 같은 정적파일을 받기 위해서는 app.use라는 메서드를 사용해서 파일에 접근하는 것입니다. localhost:3000/1.jpg로 접속해보면 public 폴더 안에 있는 1.jpg 사진이 브라우저에 뜹니다. 이제 페이지를 따로 만들어 그 페이지에 (root 경로)에 사진을 띄워보겠습니다. 


const express = require('express');
const app = express();

//정적인 파일을 받을 경로설정 ('public 폴더에서 정적인 파일을 끌어 쓰겠다')
app.use(express.static('./public'));

//webpage 접속(web page에 접속하는 방법은 get/post = url은 get 방식을 사용, '/'은 Home으로 접속)
//get함수를 실행한 뒤, callback function 실행(get함수의 callback f는 res,req을 매개변수로 받는다고 약속되어 있다.)
app.get('/',function(req,res){
res.send('This is Home page');
});

//img 페이지를 만들어 1.jpg 파일을 띄운다
app.get('/img', function(req,res){
res.send('This is Image page <img src = "/1.jpg"></img>');
})

//port listen
app.listen(3000, function(){
console.log('Connected 3000 port');
})

(경로를 지정해줄 때는 최하위 폴더까지 지정해줘야 한다. 예를들어 public폴더를 포함하고 있는 상위폴더를 지정하면 public폴더 안에 있는 파일을 불러올 수 없다. 그리고 ./public(현재dir/public)이 아닌 public만 써줘도 무방하다. 또한 동영상도 같은 방법으로 올릴 수 있다.)



[ 정적 / 동적 페이지 ]


정적 페이지는 이미 만들어져 있는 파일을 페이지에서 제공하는 것을 의미한다고 했습니다. 동적 페이지는 서버에 있는 데이터를 "가공처리" 한 후 페이지에서 내용을 제공합니다. 먼저 정적페이지를 통해 public 폴더에 html 파일을 만들어서 페이지에 띄워 보겠습니다.


<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
This is HTML file.
</body>
</html>


다음과 같은 html 파일을 만들어서 public 폴더에 넣어뒀습니다. 그리고 이미지 파일을 불러오는 것처럼 localhost:3000/"html파일" 의 주소로 들어가면 html파일의 내용이 제공됩니다. 


이번에는 동적페이지를 만들어 보겠습니다. 위 스크립트의 내용을 서버가 직접 가공처리해서 띄울 수 있도록 만듭니다.


const express = require('express');
const app = express();

//정적인 파일을 받을 경로설정 ('public 폴더에서 정적인 파일을 끌어 쓰겠다')
app.use(express.static('./public'));

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

res.send('This is Home page');
});

//img 페이지를 만들어 1.jpg 파일을 띄운다
app.get('/img', function(req,res){
res.send('This is Image page <img src = "/1.jpg"></img>');
})

//동적 페이지
app.get('/dynamic',function(req,res){
const contents = 'This is HTML Contents';
const tag = `
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
${contents}
</body>
</html>
`
res.send(tag);
})

//port listen
app.listen(3000, function(){
console.log('Connected 3000 port');
})


서버를 실행시키고 localhost:3000/dynamic에 위 정적페이지와 같이 html 내용이 들어가있습니다. 그리고 화면에 나타나죠. 그렇다면 이 둘의 차이점은 무엇일까요?


정적페이지는 "정적파일"을 따로 만들어 그 파일을 불러왔고 동적페이지는 서버가 구동되기 시작할 때, html 내용을 랜더링(가공처리)해서 우리에게 보여주고 있습니다.


잘 생각해봅시다.

다시, 동적페이지는 서버가 "구동"될 때, html의 내용을 랜더링해서 우리에게 보여준다고 했습니다. 그 얘기는 서버가 열려있는 상태에서 내용을 바꾸어도 반영되지 않는다는 뜻입니다. 바뀐 내용을 보여주려면 서버를 "재시작" 해야합니다. 이게 동적페이지의 단점이죠.

반면, 정적페이지는 서버가 "구동"되는 중에도 "정적파일"만 바꿔준 뒤 다시 request(새로고침)을 하면 서버를 재시작하지 않아도 수정사항이 반영됩니다. 페이지의 성격에 따라서 큰 차이를 갖고 있죠. 

그렇다면 동적페이지의 이름은 왜 동적페이지일까요?


위 코드를 보면 서버를 구동시킬 때 표시할 내용을 "변수"에 담아서 출력했습니다. 다시 생각해보면 동적페이지는 변수와 구문(조건문, 반복문...)을 사용할 수 있기 때문에 다이나믹한 페이지를 만들 수 있는 것이죠.


이 두 방식은 서로 장단점이 있습니다. 그래서 이 둘을 모두 보완할 수 있는 방식이 나왔습니다.

바로 Jade입니다.




'Web 개발 > javaScript & Node.js' 카테고리의 다른 글

Express - File System  (0) 2018.12.10
Express - Post  (0) 2018.12.09
Express - Query String  (0) 2018.12.07
Express - Jade  (0) 2018.12.07
JavaScript와 Node.js 시작하기  (0) 2018.12.05
댓글
최근에 올라온 글
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
공지사항
최근에 달린 댓글