본문 바로가기
개발

jade와 pug의 사소한 차이점

by 실버김 2018. 11. 16.

jade가 저작권 문제로 인해 pug로 변경됐다는 것은 알고 있었으나, 이름만 바뀌었을 뿐 문법은 똑같다고 생각했다.

그러나 node.js로 간단한 예제를 만들던 도중, 같은 코드인데 jade로 쓸 때는 제대로 돌아가던 페이지가 pug로 변경했더니 제대로 값이 들어오지 않는 것을 발견했다.

pug로 이름이 바뀌면서 jade보다 최신이기 때문에 버전의 문제일 수도 있겠지만, 혹시 같은 문제로 헤매는 분들을 위해 정리해두려 한다.

아주 사소한 문제인데 아까운 시간을 잡아 먹었다 ㅠㅠ

 

먼저 jade일때의 코드.

jade의 경우, 속성에 변수 값을 넣을 때 #{}을 이용해도 되고 변수 그대로 사용해도 된다. 제가 맨 처음 사용했던 코드는 #{variable}을 이용한 코드로 바로 아래와 같다.

 

1
2
3
4
5
   #user
    #list
    #logs
    input#start_button(type='button', value='Game Start!')
    input#username(type='hidden', value= '#{username}')
cs

 

이 코드를 jade로 작성했을 경우, 값이 없을 때는 undefined로 뜨다가 값이 들어오게 되면 정상적으로 출력하게 된다.

 

값이 들어오지 않았을 경우(jade)
값이 들어왔을 경우(jade)

 

그러나 위의 코드를 그대로 pug로 작성했을 때는 제대로 값을 인식하는 것이 아니라, 문자열 #{username} 로 인식을 해 버린다.

 

값이 들어오지 않았을 경우(pug)
값이 들어왔을 경우(pug)

 

 

그래서 코드를 아래와 같이 변수 그대로 사용해 주었더니 정상적으로 값이 들어오는 것을 볼 수 있었다.

 

1
2
3
4
5
   #user
    #list
    #logs
    input#start_button(type='button', value='Game Start!')
    input#username(type='hidden', value= username)
cs

 

 

이렇게 바꿔주면, 값이 들어오지 않았을 경우는 빈칸으로 보인다.

 

값이 들어오지 않았을 경우(pug) - 정상
값이 들어왔을 경우(pug) - 정상

 

위 코드의 경우 jade에서도 정상적으로 작동하므로, 속성에 값을 넣을 때는 변수 그대로 써주는 것이 더 바람직해 보인다.

'개발' 카테고리의 다른 글

git 명령어 정리  (0) 2019.01.03