[Node.js]01-1 ejs 템플릿 base (express-ejs-layouts)

안녕하세요 Web 개발자 Jji_ni 입니다.

오늘은 Node.js ejs base 템플릿의 두번째 파일 입니다.

1. 에서는 Node.js의 웹서버를 만드는 것을 했습니다.

오늘은 실질적으로 base를 만드는 작업을 해보려고 합니다.

 

1.  폴더 구성

저는 폴더 구성을 크게 4가지로 만들어 주었습니다.

그중 이번 프로젝트에서 크게 사용 될 views안에는 우선 적으로 base가 될 layout.ejs가 있고 

login페이지에는 base파일의 body안에 들어갈 각각의 템플릿 파일들이 들어 가 있습니다.

이렇게 폴더 구성을 마쳤으면 어떻게 base를 사용하고 템플릿 화를 했는지 한번 보겠습니다.

 

2. layout.ejs

 

express-ejs-layouts는 express에서 ejs의 다양한 layout 기능을 추가적으로 제공해줍니다.

layout 페이지는 클라이언트의 base가 되는 페이지 입니다.

클라이언트 페이지를 개발을 할때 보면 매번 같은 부분을 다시 코딩을 해주고 다시 디자인을 하고 하는것이

엄청 번거롭기 때문에 base페이지를 만들어 주어 그 작업을 한번에 마무리를 지어 줄수 있게 해주는 작업입니다.

 

<%- body%> 라는 문법이 보일 것입니다.

<%- body%> 에는 각 페이지의 템플릿 파일 들을 넣어 줄수 있습니다.

그럼 템플릿 파일은 어떻게 구성이 되는지 알아 볼까요?!

 

3. 템플릿 파일

템플릿 파일들의 모아둔 곳은 위 폴더 구성에서도 말했지만 login파일에 login에 해당하는 템플릿 파일들을 

넣어서 보관 합니다.

뭐 로그인에서도 회원가입 부분도 있고 진짜 login하는 페이지도 있으니까요 저는 그럼 회원가입 하는 템플릿 파일과

login 하는 페이지를 만들어 보았습니다.

 

먼저 라우터에서 두가지의 페이지를 설정을 해주었습니다.

첫번째 페이지는 login 페이지

두번째 페이지는 회원가입 페이지로 설정을 해주었습니다.

 

먼저 로그인 페이지의 코드는 이러합니다.

<%- contentFor('body') %>

<div style="width: 40%; margin: 0 auto;">
	<form class="form-horizontal" method="post" action="/login/signin">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id='userId' name="userId" placeholder="Email">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" id='pwd' name="password" placeholder="Password">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-default">Sign in</button>
			</div>
		</div>
	</form>
</div>

로그인을 하는 페이지를 보시면 body가 보입니다. 

 

어? body아까 어디서 확인을 할수 있었죠? 

layout.ejs 에서 확인을 할수 있었습니다. layout.ejs에서의 body 부분에 아까 만들어져 있는것을 확인 할수 있습니다.

layout.ejs

<%- contentFor('body') %>라는 문법을 사용하여 index.ejs의 코드들이

layout.ejs의 body안에 들어 간다는 것을 확인 할수 있습니다.

 

그럼 회원 가입 페이지는 똑같은 방법으로 만들어 주면 되겠죠?

<%- contentFor('body') %>
<div>
	<div>id</div>
	<input type="text" id='id'>
</div>
<div>
	<div>pw</div>
	<input type="password" id='pw'>
</div>
<div>
	<div>name</div>
	<input type="text" id='name'>
</div>
<div>
	<div>회원가입</div>
	<input type="button" id='btn_add' value='회원가입'>
</div>

 

이런식으로 말이죠 

 

그렇게 하여 서버를 켜서 페이지들을 확인 하면 

 

로그인 페이지

회원 가입 페이지

각 두가지의 페이지가 같은 base를 사용을 하고 있는 각각의 페이지가 완성 된것을 확인 할수 있습니다.