Node.JS : 블로그 구현하기_View 작성

C_Mungi·2025년 6월 8일
ejsexpressnode.js

Node.JS 학습

목록 보기
4/6

1.시작

이번 포스트에서는 View를 작성하고자 한다.
인프런의 Do it! Node.js 프로그래밍 입문 강의에서 제공하는 HTML를 EJS로 변환해 View를 작성되었다.

2. EJS란

EJS는 Embedded JavaScript Template의 약어로 템플릿 엔진 모듈이다. 템플릿 엔진 모듈은 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 맞춰 대입하고, html를 랜더링해 클라이언트에 원하는 정보를 전달해주는 역할을 한다.

3. Layout 작성

메인 페이지, 관리자 페이지의 Header와 Footer를 보여줄 레이아웃을 views/layouts 폴더에 작성한다.
작성해야할 레이아웃의 목록은 다음과 같다.

  • main.ejs : 메인 페이지의 레이아웃
  • admin-login.ejs : 관리자 페이지의 레이아웃
  • admin-nologin.ejs : 로그인 페이지의 레이아웃

3-1. main.ejs

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= locals.title %></title>
    <meta name="description" content="My first application using Node.js, Express and MongoDB">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>

    <div class="container">

        <!-- 헤더 : 로고, 상단 메뉴, 로그인 -->
        <header class="header">
            <!-- 로고 -->
            <a href="/" class="header-logo">c.mungi의 블로그</a>

            <!-- 상단 메뉴 -->
            <nav class="header-nav">
                <ul>
                    <li>
                        <a href="/home">Home</a>
                    </li>
                    <li>
                        <a href="/about">About</a>
                    </li>
                </ul>
            </nav>

            <!-- 관리자 로그인 -->
            <div class="header-button">
                <a href="/admin">관리자 로그인</a>
            </div>
        </header>

        <!-- 메인 : 실제 내용이 들어갈 부분 -->
        <main class="main">
            <%- body %>
        </main>
    </div>

</body>

</html>

3-2. admin-login.ejs

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= locals.title %></title>
    <meta name="description" content="My first application using Node.js, Express and MongoDB">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>

    <div class="container">

        <!-- 헤더 : 로고, 상단 메뉴, 로그인 -->
        <header class="header">
            <!-- 로고 -->
            <a href="/" class="header-logo">Admin Page</a>

            <!-- 상단 메뉴 -->
            <nav class="header-nav">
                <ul>
                    <li>
                        <a href="/home">Home</a>
                    </li>
                    <li>
                        <a href="/about">About</a>
                    </li>
                    <li>
                        <a href="/allPosts">Admin</a>
                    </li>
                </ul>
            </nav>

            <!-- 관리자 로그아웃 -->
            <div class="header-button">
                <a href="/logout">관리자 로그아웃</a>
            </div>
        </header>

        <!-- 메인 : 실제 내용이 들어갈 부분 -->
        <main class="main">
            <%- body %>
        </main>
    </div>

</body>

</html>

3-3. admin-nologin.ejs

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= locals.title %></title>
    <meta name="description" content="My first application using Node.js, Express and MongoDB">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>

    <div class="container">

        <!-- 헤더 : 로고, 상단 메뉴, 로그인 -->
        <header class="header">
            <!-- 로고 -->
            <a href="/" class="header-logo">Admin Page</a>

            <!-- 상단 메뉴 -->
            <nav class="header-nav">
                <ul>
                    <li>
                        <a href="/home">Home</a>
                    </li>
                    <li>
                        <a href="/about">About</a>
                    </li>
                </ul>
            </nav>
        </header>

        <!-- 메인 : 실제 내용이 들어갈 부분 -->
        <main class="main">
            <%- body %>
        </main>
    </div>

</body>

</html>

4. View 작성

View들은 각 views/post, views/admin에 다음과 같이 작성한다.

  • views/post
    • index.ejs : 메인 페이지
    • post.ejs : 상세 페이지
  • views/admin
    • login.ejs : 로그인 페이지
    • allPosts.ejs : 관리자 페이지
    • add.ejs : 게시글 작성 페이지
    • edit.ejs : 게시글 수정 페이지
    • about.ejs : About 페이지

4-1. 게시글 페이지 관련 View

4-1-1. index.ejs

<!-- 상단 소개글, 히어로 이미지 -->
<div class="top">
    <h1 class="top-heading">하루하루 스터디</h1>
    <p class="top-body">매일 1시간씩 공부한 내용을 기록하고 있습니다.</p>
</div>

<img src="/img/top-hero.jpg" alt="노트에 기록하는 모습" class="hero-image" width="840" height="400">

<!-- 최근 게시물 -->
<section class="articles">
    <h2 class="articles-heading">최근 게시물</h2>
    <ul class="article-ul">
        <% data.forEach( post => { %>
        <li>
            <a href="/posts/<%= post._id %>"> 
                <span><%= post.title %></span>
                <span class="article-list-date"><%= post.createdAt.toDateString()%></span>
            </a>
        </li>
        <% }) %>
    </ul>
</section>

4-1-2. post.ejs

<h1><%= data.title%></h1>
<article class="article">
    <%= data.body %>
</article>

4-2. 관리자 페이지 관련 View

4-2-1. login.ejs

<h3>로그인</h3>
<form action="/admin" method="POST">
    <label for="username"><b>사용자 이름</b></label>
    <input type="text" name="username" id="username">

    <label for="password"><b>비밀번호</b></label>
    <input type="password" name="password" id="password">

    <input type="submit" value="로그인" class="btn">
</form>

4-2-2. allPosts.ejs

<div class="admin-title">
    <h2><%= locals.title%></h2>
    <a href="/add" class="button">+ 새 게시물</a>
</div>

<ul class="admin-posts">
    <% data.forEach(post => { %>  <!-- Post 데이터들을 표시 -->
        <li>
            <a href="/posts/<%=post._id%>">
                <%= post.title %>
            </a>
            <label><%= post.formattedDate %></label>
            <div class="admin-post-controls">
                <a href="/edit/<%=post._id%>" class="btn">편집</a>
                <form action="/delete/<%=post._id%>?_method=DELETE" method="POST">
                    <input type="submit" value="삭제" class="btn-delete btn">
                </form>
            </div>
        </li>
    <% }) %> <!-- 여기 까지 -->
</ul>

4-2-3. add.ejs

<a href="/allPosts">&larr; 뒤로</a>
<div class="admin-title">
    <h2><%= locals.title %></h2>
</div>

<form action="/add" method="POST">
    <label for="title"><b>제목</b></label>
    <input type="text" placeholder="게시물 제목" name="title" id="title">
    
    <label for="body"><b>내용</b></label>
    <textarea placeholder="게시물 내용" name="body" id="body" cols="50" rows="10"></textarea>

    <input type="submit" value="등록" class="btn">
</form>

4-2-4. edit.ejs

<a href="/allPosts">&larr; 뒤로</a>
<div class="admin-title">
    <h2><%= locals.title %></h2>
    <form action="/delete/<%=data._id%>?_method=DELETE" method="POST">
        <input type="submit" value="삭제" class="btn btn-delete">
    </form>
</div>

<form action="/edit/<%= data._id %>?_method=PUT" method="POST">
    <label for="title"><b>제목</b></label>
    <input type="text" name="title" id="title" value="<%=data.title%>">

    <label for="body"><b>내용</b></label>
    <textarea name="body" id="body" cols="50" rows="10">
        <%=data.body %>
    </textarea>

    <input type="submit" value="수정" class="btn">
</form>

4-2-5. about.ejs

<h1>About</h1>

<b>이 블로그는 Node.JS 학습을 위해 제작되었습니다.</b>
profile
C_Mungi
백엔드 개발자의 수집상자
이전 포스트

Node.JS : 블로그 구현하기_DB연결

다음 포스트

Node.JS : 블로그 구현하기_Router 작성

0개의 댓글