기본 콘텐츠로 건너뛰기

[node.js] Jade Template Engine을 활용한 효율적 관리

node.js에서는 jade와 ejs라는 템플릿 엔진을 이용하여 html파일로 렌더링을 할 수 있습니다. 블로그 주인은 ejs보다 jade를 애용합니다. 이유는 {/% /%}, <>와 같은 특수 문자를 조금 덜 사용하는 jade를 선호합니다. 하지만 jade는 tab과 space로 구문을 해석하는 단점이 있습니다.
이번 시간에는 어떻게 하면 효율적인 html파일 관리를 할 수 있을지 설명을 해보도록 하겠습니다. (아래 내용은 100% 정답이 아니라 다양한 방식으로 사용해오면서 발전된 방법입니다. 앞으로도 계속 변할 것이고, 추후에 추가되거나 바뀌는 부분에 대해서는 추가적으로 포스팅을 하겠습니다.)
jade의 문법적인 내용을 다루지 않습니다.
express를 활용하여 프로젝트를 생성을 해보도록 하겠습니다.
  • project create
$ express helloWorld  # CREATED helloWorld Directory
$ cd helloWorld       # MOVED helloWorld
  • project structure
+-- app.js
+-- bin
|   +-- www
+-- package.json
+-- public
|   +-- javascript
|   +-- css
|   +-- images
+-- routes
|   +-- user.js
|   +-- indexs.js
+-- views
|   +-- error.jade
|   +-- index.jade
|   +-- layout.jade
views를 집중적으로 탐구를 해 볼 것이다.
  • error.jade
extends layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}
  • index.jade
extends layout

block content
  h1= title
  p Welcome to #{title}
error.jade, index.jade파일에서 layout을 extends하고 있다. 또한 block content가 보입니다. 다른 프로그래밍 언어에서 extends가 대충 어떤 느낌으로 작동하는지 감이 오셨을 겁니다.
아래의 layout.jade코드를 살펴 보도록 하겠습니다.
  • layout.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
기본적인 html구조가 보입니다. 그런데 user.jade와 error.jade에서 보았던 block content가 보이는 군요 이 부분이 바로 해당 소스 코드를 붙여서 만들어 주는 부분입니다.
index.jade파일을 랜더링을 시도를 하게 되면 우선 extent layout을 했기 때문에 layout.jade파일을 읽어 드립니다.
그리고 block content를 index.jade에 있는 block content 이하 부분으로 채우게 됩니다. 최종적으로는 아래와 같은 코드가 만들어 질겁니다.
  • index.jade 렌더링시 만들어지는 중간 결과물
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p Welcome to #{title}
content부분을 그대로 옮기게 됩니다.
여기까지 extends의 사용 방법에 대해서 알아 보았습니다.
여기까지 보고 첫번째로 왜 굳이 이렇게 layout을 나누는 것일지 의문을 가질 수 있습니다.
이유는 반복되는 코드(dry한 코드 작성)를 줄이기 위해서 입니다. 이는 매우 중요한 이론입니다.
하나가 수정이 이루어져야 하면 반드시 하나만 수정이 일어나야 합니다.
우리가 보는 웹 사이트들을 잘 살펴보면 상단에 위차한 header, 하단에 위치한 footer와 같은 것들은 고정이 되어있는것을 확인을 할 수 있을겁니다.
만약 html로 페이지를 만들게 되면 모든 페이지의 header, footer가 같은 코드로 반복적으로 작성이 이루어지게 될 것입니다.
하지만 jade와 같은 템플릿 엔진을 활용하면 이러한 반복된 코드 작성을 줄여줍니다.
  • layout.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    header
        // header 관련 코드

    block content

    footer
        // footer 관련 코드
  • business_logic1.jade
extends layout

block content
    // logic code1
  • business_logic2.jade
extends layout

block content
    // logic code2
이러한 형태로 header와 footer를 layout에 넣어 줌으로써 서로 다른 부분의 영역만 집중적으로 관리가 가능해집니다.
하지만 이러한 형태도 아직은 불안정 합니다. header와 footer또한 각각의 기능이 뚜렷하고 기능이 추가되어 무거워 질 수 있습니다. 즉 독립적인 파일로 관리를 하는 것이 추후 유지 보수에 좀더 좋을 것 같습니다.
header와 footer도 layout파일과 분리를 해보도록 하겠습니다.
그전에 views의 내부를 좀 수정을 해보도록 하겠습니다.
  • views directory
+-- layouts
+-- business
+-- components
layouts, business, components로 디렉토리를 재 구성 해줍니다.
  • components : 위에서 언급한 header, footer같이 부품처럼 쓰이는 존재
  • layouts : components를 활용하여 반복되는 코드를 미리 만들어 둠
  • business : 실제 로직이 들어가는 부분
디렉토리를 재 구성했으니 각각의 필요한 파일을 재 구성을 해보도록 하겠습니다.
+-- layouts
|   +-- business_logic1_layout.jade
|   +-- business_logic2_layout.jade
+-- business
|   +-- business_logic1
|       +-- index.jade
|       +-- error.jade
|   +-- business_logic2
|       +-- index.jade
|       +-- error.jade
+-- components
|   +-- header.jade
|   +-- footer.jade
우선 위에서 언급한 header, footer를 compoenets에 추가를 해주었습니다.
include를 활용하여 layout에서 해당 파일을 불러와 사용을 해보도록 하겠습니다.
  • ./components/header.jade
header
    // header 관련 코드
  • ./components/footer.jade
footer
    // footer 관련 코드
layout에서 작성했던 header와 footer부분의 코드를 그대로 빼줍니다.
그리고 layouts/business_logic1_layout에서 해당 파일을 include를 해주면 됩니다.
  • ./layouts/business_logic1_layout.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    include '../components/header'

    block content

    include '../components/footer'
business/business_logic1/error.jade와 business/business_logic1/index.jade에서 layout 호출 부분을 수정을 해보도록 하겠습니다. (디렉토리 생성을 하였기 때문에 경로를 바꾸어 주어야 합니다.)
  • error.jade
extends ../../layouts/business_logic1_layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}
  • index.jade
extends ../../layouts/business_logic1_layout

block content
  h1= title
  p Welcome to #{title}
components, layouts, business의 형태로 좀더 효율적인 구조를 만들었습니다.
각 비지니스 로직이 다른 레이아웃을 사용 할 수 있기 때문에 레이아웃 사용여부에 따라 business내부를 디렉토리를 나누었습니다. 물론 이 부분은 해당 프로젝트에 맞추어 더 세분화 시켜도 되고 굳이 세분화 할 필요는 없습니다. 간단한 대규모가 아닌 이상 레이아웃 하나 만으로도 충분할거거든요 ㅎㅎㅎ
만약 관리자 페이지가 있다면 관리자에 대한 레이아웃을 추가시켜주면 됩니다. 해당 로직 부분을 business에 추가를 시켜주어 만들어 주면 됩니다.
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

[kali linux] sqlmap - post요청 injection 시도

아래 내용은 직접 테스트 서버를 구축하여 테스트 함을 알립니다.  실 서버에 사용하여 얻는 불이익에는 책임을 지지 않음을 알립니다. sqlmap을 이용하여 get요청이 아닌 post요청에 대해서 injection공격을 시도하자. 뚀한 다양한 플래그를 이용하여 DB 취약점 테스트를 진행을 해보려고 한다. 서버  OS : windows 7 64bit Web server : X Server engine : node.js Framework : expresss Use modules : mysql Address : 172.30.1.30 Open port : 6000번 공격자 OS : kali linux 64bit use tools : sqlmap Address : 172.30.1.57 우선 서버측 부터  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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 var  express  =  require( 'express' ); var  app  =  express(); var  mysql  =  require( 'mysql' ); var  ccc  =  mysql.createConnection({     host: '127.0.0.1' ,     user: 'root' ,     pos...
댓글 쓰기
자세한 내용 보기

[git] git log 확인하기

git log를 통해서 커밋 이력과 해당 커밋에서 어떤 작업이 있었는지에 대해 조회를 할 수 있다. 우선 git에서의 주요 명령어부터 알아보겠다. $ git push [branch name] $ git pull [branch name] 여기서 branch name은 로컬일 경우 해당 브런치 이름만 적으면 되지만 깃허브 원격 저장소로 연결을 원할 경우는 해당 브런치 이름 앞에 꼭 origin을 붙이도록 한다. $ git brnch [branch name] $ git checkout [branch name] branch일경우 해당 브런치를 생성을 한다. 여기서 현재의 브런치를 기준으로 브런치를 따는것이다. checkout은 브런치를 바꾸는 것이다.(HEAD~[숫자]를 이용하면 해당 커밋으로 움직일수 있다.. 아니면 해당 커밋 번호를 통해 직접 옮기는것도 가능하다.) -> 해당 커밋으로 옮기는 것일뿐 실질적으로 바뀌는 것은 없다. 해당 커밋으로 완전히 되돌리려면 reset이라는 명령어를 써야한다. 처음 checkout을 쓰면 매우 신기하게 느껴진다. 막 폴더가 생겼다가 지워졌다가 ㅋㅋㅋㅋㅋ  master 브런치에서는 ht.html파일이 존재하지만 a브런치에서는 존재하지않는다. checkout 으로 변경을 하면 D 로 명시를 해준다.  $ git log 해당 브런치의 커밋 내역을 보여준다. a 브런치의 커밋 내역들이다. (머지 테스트를 하느라 커밋 내용이 거의 비슷하다 ㅋㅋ) master 브런치의 커밋 내역들이다. 커밋 번호, 사용자, 날짜, 내용순으로 등장을 한다. 이건 단순히 지금까지의 내역을 훑어보기 좋다. 좀더 세밀한 내용을 봐보자. $ git log --stat --stat을 붙이면 기존의 로그에서 간략하게...
댓글 쓰기
자세한 내용 보기

[git] pull을 하여 최신코드를 내려받자

보면 먼가 로고가 다르게 뜨는것을 확인을 할 수가있다. C:\Users\mung\Desktop\etc\study\python-gene>git checkout remotes/origin/master Note: checking out 'remotes/origin/master'. You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by performing another checkout. If you want to create a new branch to retain commits you create, you may do so (now or later) by using -b with the checkout command again. Example:   git checkout -b HEAD is now at 29e282a... fetch test C:\Users\mung\Desktop\etc\study\python-gene>git branch * (HEAD detached at origin/master)   master   test1   test2 깃이 잘 쓰면 참 좋은놈인데 어지간히 쓰기가 까다롭다. 처음에 깃을 푸시 성공하는데만 한달정도 걸렸던걸로 기억이 난다.. ㅋㅋㅋ 여담으로  깃 프로필을 가면 아래사진 처럼 보인다. 기여도에 따라서 초록색으로 작은 박스가 채워지는데 저걸 잔디라고 표현을 한다고 합니다 ㅎ 저 사진은 제 깃 기여도 사진입니당 ㅋㅋㅋㅋ 다시 본론으로 돌아와서 ㅋㅋ pull을 하면...
댓글 쓰기
자세한 내용 보기