서두

E-book 대여 웹 페이지를 시작한다. 본격적인 시작에 들어가기 전에 설명과 셋팅을 기록한다. 우선은 기본적인 틀만이며 나머지는 차차 추가될 예정이다.

---

환경설정

E-book 토이 프로젝트의 환경설정은 다음과 같다.

백엔드: Node js
프론트엔드: bootstrap
(출처: https://startbootstrap.com/template/small-business)
(필요에 따라 Typescript로 기능 추가할 예정)
DB: MySQL

파일구성

+) 파일이 여러 개이기 때문에 복수를 붙였다.

1. Controllers

(1) 역할

사용자의 요청에 따라 Model에서 데이터를 가져오거나 View를 제공하는 역할이다.

(2) 현재 코드

index.js

exports.getIndex = (req, res, next) => {
  res.render("index", { pageTitle: "Welcome E-Book" });
};

Controller는 getIndex라는 함수를 갖고 있다. 메인페이지를 담당할 부분이며 사용자는 바로 이 함수를 호출하여 index로 접속할 예정이다.

그리고 함수 안에는 Response에서 render 함수를 활용했다. 이 코드는 views에 있는 index 파일을 찾아서 사용자에게 보여준다. 추가적으로 Json 데이터를 갖고 있어 index 파일에 pageTitle이라는 이름으로 "Welcome E-Book"의 값을 넣어줄 수 있다.

2. Models

(1) 역할

데이터를 관리하는 부분이다. 아직은 없지만 앞으로 MySQL을 연결하여 DB를 이용할 것이다.

3. Routes

(1) 역할

경로를 설정하는 역할이다. 코드를 깔끔하게 정리해주어 콜백의 늪에 빠지지 않게 해준다.

(2) 현재 코드

homeRoutes.js

const express = require('express');

const indexController = require('../controllers/index');

const routes = express.Router();

routes.get('/', indexController.getIndex);

module.exports = routes;

우선 express 모듈과 만든 Controller를 호출해준다. routes 상수는 Router역할을 하여 express의 app과 같은 역할을 한다.

그리고 get으로 호출할 때의 상황을 만들었다. 첫 번째 인수는 '/' 즉 index를 호출할 때, 두 번째 인수 위에서 만든 Controller가 움직인다.

그러면 Controller에 있는 render가 index파일을 사용자에게 보여주는 식으로 흘러가는 것이다.

마지막으로 이를 내보내여 메인 애플리케이션인 app.js에서 사용할 것이다.

4. static

(1) 역할

static파일은 정적인 파일들을 보관하는 파일이다. 예를 들면 css나 image같은 파일들은 이곳에 저장된다.

5. views

(1) 역할

사용자에게 보여줄 화면 파일들을 보관/정리한다. ejs 파일들이 주로 저장된다. include 파일은 레이아웃을 파일들을 저장하는 곳이다.

(2) 현재 코드

index.ejs

<%- include('includes/head-nav.ejs')%>
    <!-- Page Content-->
    <div class="container px-4 px-lg-5">
        <!-- Heading Row-->
        <div class="row gx-4 gx-lg-5 align-items-center my-5">
            <div class="col-lg-7"><img class="img-fluid rounded mb-4 mb-lg-0" src="https://dummyimage.com/900x400/dee2e6/6c757d.jpg" alt="..." /></div>
            <div class="col-lg-5">
                <h1 class="font-weight-light">Business Name or Tagline</h1>
                <p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
                <a class="btn btn-primary" href="#!">Call to Action!</a>
            </div>
        </div>
        <!-- Call to Action-->
        <div class="card text-white bg-secondary my-5 py-4 text-center">
            <div class="card-body"><p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p></div>
        </div>
        <!-- Content Row-->
        <div class="row gx-4 gx-lg-5">
            <div class="col-md-4 mb-5">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title">Card One</h2>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
                    </div>
                    <div class="card-footer"><a class="btn btn-primary btn-sm" href="#!">More Info</a></div>
                </div>
            </div>
            <div class="col-md-4 mb-5">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title">Card Two</h2>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
                    </div>
                    <div class="card-footer"><a class="btn btn-primary btn-sm" href="#!">More Info</a></div>
                </div>
            </div>
            <div class="col-md-4 mb-5">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title">Card Three</h2>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
                    </div>
                    <div class="card-footer"><a class="btn btn-primary btn-sm" href="#!">More Info</a></div>
                </div>
            </div>
        </div>
    </div>
<%- include('includes/footer.ejs')%>        

중요한 부분은 맨앞과 뒷줄에 있는 ejs 구문이며 레이아웃을 나타낸다.

6. app.js

(1) 역할

프로그램의 머리를 담당하는 역할이다. 핵심으로 모든 코드들이 app.js를 중심으로 돌아간다고 할 수 있다.

(2) 현재 코드

app.js

const path = require('path');

const express = require('express');
const bodyParser = require('body-parser');

const indexRoutes = require('./routes/homeRoutes');

const app = express();

app.set('view engine', 'ejs');
app.set('views', 'views');

app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(path.join(__dirname, 'static')));

app.use(indexRoutes);

app.listen(3000);

우선 상수들을 설명하면 path는 node js의 코어 모듈이다. 이번 코드에서는 ejs 파일에 css파일을 연결시켜주기 위해 path를 연결했다. express의 static함수를 사용했고 이 안에서 path의 join함수로 '절대경로 + css를 갖고 있는 폴더명'을 넣어주었다.

그리고 express는 꼭 필요한 것이고, body-parser은 아직 사용하지 않았지만, 앞으로 사용될 것이다. body-parser은 사용자가 보낸 데이터를 서버가 받기 쉽게 해주는 역할을 한다. urlencoded함수는 url형식으로 데이터를 받는다는 의미이다. 이 함수는 필수이다.

예시 'age=26&name=yulgok'의 url형식을 =>
{'age': 26, 'name': yulgok}으로 값을 받을 수 있다는 것

indexRoutes는 위에서 설정한 경로를 가져와 요청이 왔을 때 작동할 수 있도록 한다.

최종 작동 순서

사용자 요청 -> app.js -> homeRoutes -> indexController -> index.ejs -> 사용자에게 반환

app은 웹 서비스가 돌아가게 해주는 가장 중요한 핵심이다. 그 후로 app.set을 통해 ejs 템플릿을 설정해주고, listen을 통해 사용할 포트번호를 넣어 웹을 작동할 수 있게 했다.

마치며

큰 한걸음이 아니라 정말 작은 한 걸음이라 생각한다. 하지만 이 작은 걸음을 내딛기 위해 열흘 정도의 시간이 걸렸다. 아직도 충분한 공부를 하지 못했지만 최선을 다 할 자신은 있다. 할 수 있다.