Node.js

[Node.js] 3. Express 프레임워크(템플릿, URL)

반응형

템플릿 엔진


npm 패키지를 통해 jade(현재는 pug로 바뀜)를 설치한다.


1
npm install pug --save
cs


이제 app.js에 연결시켜줘야 한다.


1
app.set('view engine', 'pug');
cs


템플릿 pug 파일을 저장시킬 views 폴더를 하나 생성하고, app.js에 경로를 설정한다.


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


views 폴더에 템플릿 파일을 작성해보자. 우리는 pug를 이용하고 있으므로 temp.pug라고 만든다.


temp.pug를 작성하기 전에, app.js에서 이 파일을 불러오도록 만들어야 한다.


1
2
3
4
5
 
app.get('/template', function(req, res){
  res.render('temp');
})
 

cs


이는, template라는 경로를 통해 들어오는 사용자에게 temp라는 파일을 웹페이지로 렌더링해서 전송하는 뜻이다.

여기서 렌더링은 response에 있는 기능 중 하나로, template경로에 temp라는 파일을 불러와서 html로 나타내는 것을 말한다.


이제 temp.pug를 작성해보자.


템플릿은 기존의 html보다 더 간단하게 코드를 작성할 수 있다. tap으로 들여쓰기를 하는 것을 통해서 자동으로 html화 시켜주는 기능을 보여준다.


1
2
3
4
5
6
7
8
9
html
    head
      title= _title
    body
        h1 Hello Jade
        ul
          -for(var i=0; i<5; i++)
            li coding
        div= time
cs

temp.pug의 코드 내용이다. 처음 시작인 html을 작성해주면, 
이는 <html></html>로 인식된다.

들여쓰기 후 head를 작성하면 <html>코드 안에 <head></head>로 내용이 포함돼서 들어간다.

위의 코드를 소스보기로 확인하면 아래와 같이 나타난다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
  <head>
    <title>Jade(pug)</title>
  </head>
  <body>
    <h1>Hello Jade(pug)</h1>
    <ul>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
    </ul>
    <div>Mon Apr 02 2018 15:06:59 GMT+0900 (대한민국 표준시)</div>
  </body>
</html>
cs

 

이처럼 템플릿을 이용하면 간단하게 html 코드를 작성할 수 있다.







URL 정보전달


이번에는 url을 통해서 정보를 전달하는 연습을 해보자.


topic이라는 경로에 url을 통해서 값을 입력받는 것을 해볼 것이다.


우선 쿼리 스트링에 대해서 알아보도록 하자.


'http://a.com/topic?id=1'


위와 같은 홈페이지 url이 존재한다고 가정해본다.


http://a.com은 우리가 알고 있던 홈페이지 주소를 나타낸다. 그리고 /topic을 통해 경로(path)에 들어간 모습까지도 지금까지 배운 것을 통해 알 수 있다.


?id=1은 무엇일까? 이 부분이 바로 쿼리 스트링이다.

id값을 1로 줬을 때 입력해둔 출력값을 보여주는 화면이 된다.


실제로 화면에서 확인해보기 위해, 배열을 하나 만들어보자.


1
2
3
4
5
  var topics = [
    'Javascript is...',
    'Nodejs is...',
    'Express is...'
  ];
cs


3가지는 순서대로 topics[0], topics[1], topics[2]에 해당하는 값이다.


이제 배열의 0,1,2에 해당하는 값을 id 값으로 둔다면 위와 같은 주소를 통해 배열 값마다 해당하는 문자열을 출력할 수 있을 것이다.


request의 쿼리 객체에 id라는 프로퍼티 값으로 전달 받을 수 있다.


1
${topics[req.query.id]}
cs


node를 통해 app.js를 실행한 후, 아래에 id 값을 0,1,2로 주면 기존에 입력한 topics배열이 차례대로 다르게 출력되는 것을 볼 수 있다.


1
2
3
http://localhost:3000/topic?id=0
http://localhost:3000/topic?id=1
http://localhost:3000/topic?id=2
cs

하이퍼링크 기능을 통해 좀 더 보기 좋게 나타내보자.
output 변수를 만들어 각 id값에 따른 하이퍼링크를 주고, response의 send로 값을 바로 보여주는 코드다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
app.get('/topic', function (req, res) {
  var topics = [
    'Javascript is...',
    'Nodejs is...',
    'Express is...'
  ];
  var output = `
    <a href="/topic?id=0">JavaScript</a><br>
    <a href="/topic?id=1">Nodejs</a><br>
    <a href="/topic?id=2">Express</a><br><br>
    ${topics[req.query.id]}
  `
  res.send(output);
})
cs

node로 app.js를 다시 재실행하면 /topic 경로에서 잘 진행되는 걸 확인할 수 있다. 

이상 id값의 쿼리 스트링을 이용한 url 실습이었다.





좀 더 깔끔한 url을 통해서 나타내고 싶다면?



'시멘틱 url'을 사용한다.


지금은 url에 id=1처럼 쿼리스트링이 그대로 주소에 보이고 있는데, 이를 그냥 숫자 1로만 깔끔한 주소로 나타내도록 해보자


쿼리 스트링에서 path 방식으로 바꾸는 것이다.


기존의 app.get의 /topic 경로에서 id값을 path로 가져오기 위해서 /topic/:id로 바꾼다.


그리고 request의 query부분을 params으로 바꾸자.


이제 node를 재시작하고 보면, 각 하이퍼링크를 눌렀을 때 주소가 id=1이 아닌 1로 나타나는걸 확인할 수 있다.



큰 차이가 없다고 볼 수 있지만, 점점 다양하고 큰 프로그램을 구축하면서 시각적으로 보기 편한 url을 만들기 위해서 많이 사용하고 있는 방식이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
app.get('/topic/:id', function (req, res) {
  var topics = [
    'Javascript is...',
    'Nodejs is...',
    'Express is...'
  ];
  var output = `
    <a href="/topic/0">JavaScript</a><br>
    <a href="/topic/1">Nodejs</a><br>
    <a href="/topic/2">Express</a><br><br>
    ${topics[req.params.id]}
  `
  res.send(output);
})
cs



해당 path에 추가 경로 설정


1
2
3
app.get('/topic/:id/:mode', function(req, res){
  res.send(req.params.id+','+req.params.mode)
})
cs




반응형
저작자표시

'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] 2. Express 프레임워크  (0) 2018.03.27
[Node.js] 1. 시작 및 주요개념 정리  (0) 2018.03.26

    티스토리툴바