[Node.js] 2. Express 프레임워크
노드보다 더 적은 코드로 많은 일을 해주는 프레임워크들이 존재한다.
노드를 이용한 프레임워크 중 하나인 Express에 대해 알아보자
Express 사이트 : http://expressjs.com/ko/starter/installing.html
- Express 설치
우리 프로젝트 경로에서 npm으로 설치해보자
1 | npm install express --save | cs |
간단한 웹 애플리케이션 만들기
해당 예제는 Express 사이트에서 시작히기 메뉴에 'Hello World'를 통해서도 볼 수 있다.
app.js라는 파일을 만들고 express를 이용해 코드를 작성해보자
지금 할 파일에서는, 앞으로 우리가 만들어갈 프로젝트 내에서 main 파일에 해당하는 내용이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | //app.js var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World!'); }); app.listen(3000, function () { console.log('Example app listening on port 3000!'); }); | cs |
app.js 내용의 의미에 대해 생각해보자
1 | var express = require('express'); | cs |
우선 앞으로 학습해나갈 express를 사용하기 위해서 express 모듈을 요구(require)해야 한다. 그리고 프로젝트 내에서 로드해서 사용하기 위해서는, require 리턴 값을 담아서 사용해야 한다. 따라서 express라는 변수를 통해 저장한다.
1 | var app = express(); | cs |
우리가 가져온 모듈은 함수에 속한다. 따라서 app이라는 변수에 함수 값을 저장하고, 앞으로 이 app을 통해 여러가지를 활용할 것이다.
지금까지 이 2줄은 기본 형식과도 같다. express 제작자가 만든 구조이니 이 형식을 앞으로도 이용하도록 하자
1 2 3 | app.listen(3000, function () { console.log('Example app listening on port 3000!'); | cs |
listen함수를 이용한 내용이다. app.listen(3000)은 3000포트로 리스닝하겠다는 말이다. 3000포트로 접속이 성공한다면, 콜백 함수를 사용해 해당 console 내용을 출력을 해준다는 걸 의미한다. 이제 내가 정한 포트로 접속이 가능하다.
이제 해당 포트를 통해 홈페이지에 접속했을 때 원하는 내용을 보여주어야 한다.
app.get() 함수를 사용하자.(get과 host방식 두 가지가 있다. 하지만 직접 url을 써서 접속하는 방식은 get방식에 속한다.)
1 2 3 | app.get('/', function (req, res) { res.send('Hello World!'); }); | cs |
여기서 '/'는 메인 홈페이지를 말하는 것이다. 만약 홈페이지 내의 다른 경로를 설정해줘야 한다면, '/해당경로 이름' 으로 작성해주면 된다.
이제 get으로 들어오는 사용자에게 콜백 함수를 이용해서 내용을 보여줘야 한다. function의 인자로는 req와 res가 있다. (req : 사용자가 요청한 정보, res : 응답에 대한 객체 전달 정보)
응답을 해주려면, response에 해당하는 res를 이용해야한다.
res에는 보낸다는 뜻의 send라는 메소드가 있다. 따라서 위처럼 send 메소드를 사용해 내가 원하는 내용을 쓰고 출력한다.
이해가 안가면, 아래 요약본을 통해 다시한번 생각해보자
- 요약
1 2 3 | app.listen(3000, function () { console.log('Example app listening on port 3000!'); | cs |
3000번 포트로 접속을 시켜주는 메소드. app.js를 노드로 실행하면
'Example app listening on port 3000!'라는 메시지가 출력된다.
1 2 3 | app.get('/', function (req, res) { res.send('Hello World!'); }); | cs |
localhost:3000/ 으로 사용자가 접속하면, 함수가 실행되면서 response.send로 'Hello World!'가 출력된다.
(+경로설정 시)
1 2 3 | app.get('/login', function (req, res) { res.send('Login please'); }); |
localhost:3000/login에 접속하면 'Login please'라는 출력을 볼 수 있다. 이처럼 경로마다 다른 출력물을 입력시켜놓고 사용자가 가는 곳마다 다른 화면을 볼 수 있도록 만들 수 있는 것이다. 경로에 해당하는 것은 앞으로 배울 '라우터' 역할을 하는 곳이니 알아두고 가자.
라우터란?
길을 찾을 수 있도록, 연결시켜주는 역할을 한다.
- 동작 순서
그리고 자신이 원하는 사진을 하나 그 안에 저장시켜두자. (저는 route.jpg라는 이름을 가진 이미지를 저장했습니다.)
이제 app.js에 정적인 파일 서비스를 할 수 있도록 코드를 추가해야 한다.
1 | app.use(express.static('public')); | cs |
public이라는 디렉토리명을 가진 폴더 안에 정적인 파일에 접근할 때, 정확한 경로 없이도 루트경로로 인식시켜주는 기능을 한다.
이를 추가한 app.js는 아래와 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var express = require('express'); var app = express(); app.use(express.static('public')); // 정적 파일 서비스 기능 app.get('/', function(req, res){ res.send('Hello home page');; }); app.get('/route', function(req, res){ res.send('Hello Router, <img src="/route.jpg">') }) app.get('/login', function(req, res){ res.send('<h1>Login please</h1>'); }); app.listen(3000, function(){ console.log('Conneted 3000 port!'); }); | cs |
이제 node를 통해 다시한번 app.js를 실행시켜보고, 여러 경로로 잘 나오는지 확인해보자. 현재 route.jpg는 public이라는 폴더에 있어서 /public/route.jpg로 접근해야 할 것 같지만, 정적 파일 서비스 기능을 통해 그냥 /route.jpg로 접근이 가능한 상황이다.
정적 처리 서비스와 동적 처리 서비스의 장단점
두가지 처리 서비스 방식의 장단점을 알아볼 것이다.
우선, 위에서 작성했던 정적 처리에서 추가로 이번에는 html 파일을 만들어 한번 더 정적 서비스에 대해서 보도록 하자.
public 폴더 안에 static.html을 만들고 아래와 같이 코드를 작성하자.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> Hello, Static! </body> </html> | cs |
저장 후, node를 이용해 app.js를 실행하고 localhost:3000/static.html로 접속하면 작성한 Hello, Static!이 잘 출력되는 모습을 볼 수 있다.
또한 현재 body 값 안에 있는 출력문을 수정한 이후에, 다시 node를 껐다 키지 않고 해당 주소에서 새로고침만 하면 바로 변하는 모습을 볼 수 있다.
이번에는 동적 처리 서비스를 연습해보자.
app.get 메소드를 이용해 동적 처리로 /dynamic 경로에 html을 작성할 것이다.
output이라는 변수 안에 static.html과 똑같은 구조를 가진 코드를 작성하자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | app.get('/dynamic', function (req, res) { var output = ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> Hello, Dynamic!! </body> </html> `; res.send(output); } | cs |
- 한줄 이상인 html코드를 저장할 때는 ` `(물결 무늬에 있는 기호)를 이용한다.
node를 통해 app.js를 실행시키고, /dynamic 주소로 접속하면 제대로 출력되는 것을 볼 수 있다. 하지만 이전의 정적 서비스와는 다르게 여기서 출력문의 내용을 바꾸고 주소를 새로고침해도 내용이 변하지 않는다. 다시 node를 껐다 켜줘야 수정되는 것을 확인할 수 있다.
그렇다면 동적 처리보다 정적 처리가 좋은거 아닌가요?
지금 실습한 결과로는 정적 처리가 훨씬 좋아보인다. 하지만, 우리가 반복적인 코드를 작성해야 할 때가 있다.
만약 어떠한 정보를 1000번 반복해야한다고 가정해보자.
정적 처리에서는 html문에서 똑같은 내용을 1000번 복사해서 저장시켜야 하는 문제가 발생한다.
하지만 동적 처리에서는 for문을 사용해서 1000번 반복을 간단히 표현시킬 수 있다.
아래 코드는, for문을 사용해 반복된 코드를 출력하고, Date()메소드를 이용해서 시간을 불러오는 동적 처리를 활용한 코드다.
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 | app.get('/dynamic', function (req, res) { var lis = ''; for(var i=0; i<5; i++){ lis = lis + '<li>coding~</li>' } var time = Date(); 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); }) | cs |
lis라는 변수 안에 for문을 돌려서 coding~이라는 출력문을 5번 반복했다.
이를 저장시키기 위해서는 $를 사용하고 { }에 변수를 넣으면 출력값을 불러올 수 있다. 시간을 나타내는 Date() 메소드도 time 변수에 저장해서 불러왔다.
궁금한 점 : 정적 처리 서비스에서는 노드를 껐다 키지 않고 해당 경로에서 새로고침만 해도 출력문이 바뀐다고 했고, 동적 처리 서비스에서는 출력문의 값을 변경하면 노드를 껐다 켜야 변경된 값을 확인할 수 있다고 했다. 그런데 동적 처리 서비스를 실습하면서 진행한 Date() 메소드를 활용해 시간을 출력해주는 것은, 노드를 재실행하지 않고도 새로고침만으로 시간이 변경되는 점을 확인했다. 이것은 동적인 것과 상관이 없는 일인가?
- Date()는 현재 시간을 문자열로 가져오는 과정이다. 노드는 html 파일 내부를 건드려주는 것이 아니라, 그냥 요청올 때마다 파일을 읽어서 보내주는 방식이기 때문에 '정적'인 것에 해당한다. 따로 노드(서버)의 코드가 바뀌지 않기 때문에 서버를 재시작하지 않고도 새로고침으로 값이 변하는 것이다.
'Node.js' 카테고리의 다른 글
| [Node.js] 6. 파일 업로드 (0) | 2018.04.04 |
|---|---|
| [Node.js] 5. 웹 애플리케이션 만들기 (0) | 2018.04.03 |
| [Node.js] 4. Express 프레임워크 (get과 post) (0) | 2018.04.02 |
| [Node.js] 3. Express 프레임워크(템플릿, URL) (0) | 2018.04.02 |
| [Node.js] 1. 시작 및 주요개념 정리 (0) | 2018.03.26 |
