렌더링이란 무엇일까?
사전의 뜻은 평면인 그림에 형태, 위치, 조명 등 외부의 정보에 따라 다르게 나타나는 그림자 색상 농도 등을 고려하면서 실감나는 3차원 화상을 만들어내는 과정 또는 그러한 기법을 일컫는다.
웹문서는 고정된 html파일이 존재하는게 아니고 매번 동적으로 만들어지는 것이다. 웹 문서를 서버에서 다 만들어서 내려주면 서버사이드 렌더링, 그 프로그램 코드가 유저의 브라우저에서 돌아가고 있으면(서버에서 데이터를 받아다가 이 데이터들을 화면에 잘 뿌려주는 프로그램 코드) 클라이언트 사이드 렌더링 이라고 한다.
여기서는 그 용어보다는 그냥 렌더링이란 이런 것을 의미한다라고만 !
먼저 res.render()를 이용하여 각 파일에서 다시 보내도록 렌더링하는 것
지난 번과 마찬가지로 express() 객체를 생성하고, 기본 페이지를 만드는데
Colt님은 rendering할 파일을 HTML이 아닌 EJS로 하셨다.
EJS란 무엇일까?
EJS(임베디드 자바스크립트)는 템플릿 엔진이다. Node.js는 다양한 템플릿 엔진을 사용할 수 있지만 가장 일반적으로 사용하는 것이 EJS라는 것이다.
왜 HTML 대신 EJS를 선택했는지(혹은 어떤 점이 불편해서 이것(템플릿 엔진)이 탄생했는 지는)는 다음번에 알아보도록 한다.
EJS파일을 만들었는데 별반 다를 것이 없다.
기본 루트에 도달하면 렌더링 되는 문서로 텍스트와 이미지를 띄우는 것인데...
나를 기다리고 있던 것은 에러ㅠ
express가 EJS파일을 렌더링하고 이 파일을 사용하기 위한 패키지를 찾고 있다는 뜻이다.
그럼 설치를 하자 [npm install ejs --save]
설치가 완료되고 다시 서버를 가동해서 들어가 보면
에러가 사라진다!!.!
그럼 또 다른 페이지를 렌더링 해보자.
res.render()의 두번째 매개변수에는 이렇게 js object형태로 받고 그것의 key가 EJS파일로 전달되는데
EJS파일 내부는 이렇게 <%=, %> 등과 같은 태그들로 자바스크립트 코드를 자유롭게 사용할 수 있다.
express에서 전달된 thingVar에 toUpperCase()를 할 수 있다는 것을 확인 할 수 있다.
EJS파일에서는 조건문이나 반복문을 사용하여 로직을 제어할 수도 있다.
이렇게 <%, %> 태그를 이용하여 분기를 나눴다. 그렇게 하면,
파라미터에 따라 다른 결과를 렌더링 할 수가 있다.
