[project]_3
나의 사이트 만들기
이번 프로젝트의 이름은 Duck-Craft이다.
프로젝트 설명
HTML,CSS를 이해한후 Bootstrap을 활용하여 웹페이지를 만든다. EJS Template Engine을 사용하여 Nodejs server에서 보내준 데이터를 활용한다.
사용자 인증을 위해서 cookie를 사용하고 로그인은 firebase UI를 사용한다.사용자가 작성한 post data를 firebase store에 저장하거나 불러온다.
EJS TEMPLATE 설정
EJS layout은 REST API를 활용하여 페이지를 rendering할때 layout.ejs를 거친 후에 특정 page를 rendering 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<%- include ('../components/head') %>
</head>
<body>
<header>
<%- include ('../components/nav') %> <%- include
('../components/jumbotron') %>
</header>
<div class="container">
<%- body %>
</div>
<footer
class="d-flex text-center justify-content-center align-items-end"
style="height: 10em;"
>
<%- include ('../components/footer') %>
</footer>
<%- include('../components/script') %> <%-defineContent('account')%>
</body>
</html>
layout.ejs를 오면 상위폴더 components폴더에 있는 head,nav,jumbotron,footer,script.ejs파일을 불러온다. 그리고 특정 page를 <%- body%>에 렌더링하게 된다.
<%-defineContent('account')%>은 router가 특정페이지인 account.ejs를 렌더링할때만 이부분을 렌더링한다. 예를 들면 index.ejs를 렌더링할때는 defineContent('account')부분은 무시하게 된다.
상단
- head
<script>
initApp = function () {
setCookie("userName", "");
setCookie("userEmail", "");
setCookie("userUid", "");
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
user.getIdToken().then(function (idToken) {
setCookie("userName", user.displayName);
setCookie("userEmail", user.email);
setCookie("userUid", user.uid);
});
}
});
};
window.addEventListener("load", function () {
initApp();
});
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function signOut() {
alert("logout!!");
firebase.auth().signOut();
window.location.reload();
}
</script>
<title><%= titleName%></title>
firebase.auth().onAuthStateChanged를 통해서 웹페이지가 load될때 마다 사용자의 login유무를 체크한다. 만약 로그인한 상태이면 cookie에 로그인한 유저의 displayName,email,uid를 작성한다.
- Nav bar
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-info">
<a class="navbar-brand" href="/">Home</a>
<button
class="navbar-toggler collapsed"
aria-expanded="false"
aria-controls="navbarCollapse"
aria-label="Toggle navigation"
type="button"
data-toggle="collapse"
data-target="#navbarCollapse"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="navHumor">
<a class="nav-link" href="/boards/humor">Humor</a>
</li>
<li class="nav-item" id="navGossip">
<a class="nav-link" href="/boards/gossip">Gossip</a>
</li>
</ul>
<div id="account">
<% if(userName) { %>
<div id="loginUser">
<span id="user" style="font-weight: bold; font-size: 14px;">
<%= userName %>
</span>
<div
id="logoutButton"
class="btn btn-sm btn-danger my-sm-0"
onclick="signOut();"
type="button"
>
LOGOUT
</div>
</div>
<% } else{ %>
<div
id="accountButton"
class="btn btn-sm btn-danger my-sm-0"
onclick="location.href='/account'"
type="button"
>
ACCOUNT
</div>
<% } %>
</div>
</div>
</nav>
</div>
<div class="forSpace" style="height: 10px;"></div>
<div class="forSpace" style="height: 10px;"></div>
Nav Bar에는 홈페이지,2개의 Category에 대한 Link item이 있는 부분(1)과 로그인한 유저의 displayName과 logout버튼, 또는 account 버튼을 보여준다(2). (2)부분은 viewport의 크기에 따라 collapse,toggle을 적용하게 된다. 그리고 EJS을 활용하여 if문을 적용할 수 있다. head에서 로그인이 되었을 때 작성된 cookie의 userName이 있다면 userName과 logout버튼이 적용이 되고 , logout상태이면 account버튼이 생성이 된다.
- jumbotron
<div
class="jumbotron mb-2"
style="
background-image: url('/public/img/mountains.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-top: 50px;
min-height: 100px;
"
></div>
jumbotron은 딱히 특별한 부분은 없고, background image를 url로 가져와서 보여주는 부분이다.
중단부분은 다음 포스트에 올리겠다.