- MVC란 Model, View, Controller로서 눈에 보이는 부분은 뷰로, 뷰로 표현되는 데이터를 제공하는 것은 모델로, 처리되는 과정을 담당하는 것은 컨트롤러로 구분하여 구성하는 것을 의미한다.
- 노드와 익스프레스도 마찬가지의 구성을 보이며 사용자 요청을 처리하는라우팅 함수는 컨트롤러, 데이터베이스에데이터를 저장하거나 조회하는 함수를 모델, 사용자에게결과를 보여 주기 위해 만든 파일을 뷰라고 할 수 있다.
- 뷰를 보자면 여태까지 결과를 사용자에게 응답으로 보낼 때 자바스크립트 코드를 직접 입력하는 방식을 사용했다. 하지만 이는 각 요청을 처리하는 함수마다 응답 코드를 문자열로 일일히 넣어야 하기 때문에 오탈자가 생기기 쉽다.
- 오탈자 등의 오류를 줄이기 위해서는 웹 문서의 기본 형태를 별도의 파일로 미리 만들고 사용하는 것이 권장된다.
- 미리 만든 웹 문서를 뷰 템플릿이라고 할 수 있으며 이를 사용해 웹 문서를 자동으로 생성하고 응답을 보내는 역할을 뷰 엔진이 수행하게 된다.
뷰 템플릿으로 로그인 웹 문서 만들기
- app.set을 통해 뷰 엔진을 ejs로 지정한다.
- set() 메소드는 속성을 설정하는 역할을 한다.
- 뷰 템플릿을 위해 코드를 작성하던 중 이전에 발생했던 데이터베이스 연결 문제에 대한 해결을 찾을 수 있었다.
- 이전에는 데이터베이스 객체를 참조하는 부분이 존재하지 않았기 때문에 database변수의 값이 undefined가 되어 데이터베이스에 제대로 데이터가 저장되지 못했으나, 이번 예제에서 해당 객체를 참조할 수 있는 방법에 대해 설명되어 있어 무사히 데이터를 읽어들일 수 있게 되었다.
- 중간의 <%%>는 자바스크립트 코드를 넣어 주는 기호로서 웹 문서 안에 변수 값을 넣어주고자 할 때 사용하는 기호다. 앞 %기호 뒤에 =가 붙으면 바로 뒤에 변수를 넣을 수 있으며 해당 값을 웹 문서에 출력할 수 있게 된다.
뷰 템플릿으로 사용자 리스트 웹 문서 만들기
- 역시 user.js에 정의되어있던 usersList 함수를 수정하게 된다.
- ejs에서도 for문 등의 반복문을 사용할 수 있다. 이 때는 화면에 보이는 부분을 제외하고 전부 <%%>로 감싸주어야 한다.
뷰 템플릿으로 사용자 추가 웹 문서 만들기
- 헤더와 바디에도 각각 따로 ejs를 만들어 include를 통해 불러오기가 가능하다.
08-2 pug 뷰 템플릿 사용하기
- pug 포맷은 태그를 그대로 사용하는 대신에 최대한 간단한 형태로 입력하기 때문에 공백과 들여쓰기를 기준으로 태그 구조가 결정된다. 그렇기 때문에 HTML 태그를 사용하는 것보다 훨씬 적은 내용으로도 웹 문서를 만들 수 있게 된다.
- pug를 사용할 때는 들여쓰기에 유의해야 한다. 들여쓰기 구조가 달라지면 의도했던 것과는 다른 웹 페이지가 만들어지거나 아예 웹 페이지가 동작하지 않게 된다.
- 다른 주의사항으로는 들여쓰기를 수행할 때 tab이나 공백 둘 중 하나만 활용해야 한다는 것이다. 둘을 혼용하게 되면 오류가 발생할 수 있다.
- 웹 서버에 적용하기 전에 pug의 결과물을 미리 확인해보고자 한다면 명령 프롬프트에서 pug명령을 사용해 HTML 결과 문서를 미리 변환해 볼 수도 있다.
pug 템플릿으로 로그인 웹 문서 만들기
- 위 코드는 ejs와 같은 기능을 하며 #과 중괄호 사이에 변수를 넣어 원하는 값을 넣어줄 수 있다.
pug 템플릿으로 사용자 리스트 웹 문서 만들기
- pug 템플릿 파일 내에서 자바스크립트 코드를 사용하고자 한다면 ejs에서의 <%%>와는 달리 문장 제일 앞에 - 기호를 붙여야 한다.
- "-" 기호가 붙어 있는 부분은 웹 문서가 아닌 자바스크립트 코드로 인식되기 때문에 출력해야 할 li태그의 앞에는 붙여서는 안된다.
pug 템플릿으로 사용자 추가 웹 문서 만들기
- layout.pug 파일로서 공통적으로 사용하는 부분에 대해 작성 후 최종적으로 createUser.pug에서 이 파일을 상속받도록 만든다.
- script 태그를 통해 외부 자바스크립트 파일을 링크할 수 있다.
- block 코드 부분을 통해 이 파일을 상속받는 파일에서 이 부분은 대체할 수 있는 부분이라는 것을 알리게 된다. block 키워드 뒤에 붙는 content가 이 block의 이름이 된다.
- include 키워드를 통해 다른 pug파일로부터 템플릿을 불러와 붙여주게 된다.
- extends 키워드를 통해 다른 pug 파일을 상속할 수 있으며 이 파일에서는 layout.pug로부터 상속받는다는 것을 표시했다.
- block 키워드를 상속받는 파일에서 재입력함으로서 해당 부분을 수정하겠다고 선언할 수 있다.
