페이팔기반, e커머스 플랫폼 제작하기 [7편. 메인 페이지 구현]

 

 

---

1 메인 페이지 미들웨어

메인 페이지에 접속했을 때 보여줄 제품 페이지를 위해서 라우팅을 연결한다. 라우팅을 미들웨어로 구현할 때는 순서가 중요하다. app.use()미들웨어는 아래와 같은 순서대로 실행되는데, 겹치는 라우터가 있다면 위의 미들웨어가 먼저 실행된다. 

 

// 중략...   //라우팅     let pages = require('./routes/pages.js');     let products = require('./routes/products.js');    // products.js 작성     let adminPages = require('./routes/admin_pages.js');     let adminCategories = require('./routes/admin_categories.js');     let adminProducts = require('./routes/admin_products.js');     app.use('/admin/pages', adminPages);     app.use('/admin/categories', adminCategories);     app.use('/admin/products', adminProducts);     app.use('/products', products);     app.use('/', pages);   //https 서버연결     app.listen(3005);

[ index.js ]

 

 

'/products'접속경로는 index.js에서 연결된 products.js모듈로 연결된다.

 

let express = require('express');     let router = express.Router();     let Page = require('../models/pageSchema');   // Get Product model     let Product = require('../models/product');   // Get all products     router.get('/', (req, res)=>{         Product.find((req, products)=>{             if(err) console.log(err);             res.render('all_products', {                 title : All_products,                 products : products             });         });     });   //Exports     module.exports = router;

[ routes/ products.js ]

 

products.js는 Product데이터를 'all_products.ejs'파일에 전달한다. 그리고 카테고리를 클릭했을 때마다 관련된 제품이 구현될 수 있는 (/:category)라우터를 연결한다.

 

// 중략...   // Get all products by category     router.get('/:category', (req, res)=>{         let categorySlug = req.params.category;         Category.findOne({slug:categorySlug}, (err, c)=>{             Product.find({category:categorySlug}, (err,products)=>{                 if(err) console.log(err);                 res.render('cat_products', {                     title : c.title,                     products : products                 });             });         })     });   // 중략...

[ routes/products.js ]

 

 

 

 

 

 

 

---

2 뷰 :: all_products.ejs

'app_products.ejs'는 이름 그대로 모든 제품을 화면에 표현한다. products객체의 배열을 forEach()구문으로 정리해준다.

 

<%- include('./layouts/header.ejs') %>     <div class="row products">     <% products.forEach((p)=>{ %>         <div class="col-xs-12 col-md-4 p">             <a class="pa" href="/products/<%= p.category %>/<%= p.slug%>">                 <img class="pimage" src="/product_images/<%=p.id%>/<%=p.image%>" alt="">             </a>             <h3><%= p.title %></h3>             <h4>$<%= parseFloat(p.price).toFixed(2) %></h4>             <a href="/products/<%= p.category %>/<%= p.slug %>" class="vd">View</a>         </div>     <% }) %>     </div>     <%- include('./layouts/footer.ejs') %>

[ views/all_products.ejs ]

 

 

제품의 여백과 크기는 style.css에서 임의로 조절한다.

 

img.pimage{       width: 150px;   }   a.pa{       display:inline-block;       height:160px;   }   .row.products .p{       margin-top:20px;        margin-bottom:20px;   }

[ style.css ]

 

그리고 카테고리 항목을 클릭했을 때 랜더링되는 cat_product.ejs는 사실상 all_product.ejs와 같다. 

 

<%- include('./layouts/header.ejs') %>     <div class="row products">     <% products.forEach((p)=>{ %>         <div class="col-xs-12 col-md-4 p">             <a class="pa" href="/products/<%= p.category %>/<%= p.slug%>">                 <img class="pimage" src="/product_images/<%=p.id%>/<%=p.image%>" alt="">             </a>             <h3><%= p.title %></h3>             <h4>$<%= parseFloat(p.price).toFixed(2) %></h4>             <a href="/products/<%= p.category %>/<%= p.slug %>" class="vd">View</a>         </div>     <% }) %>     </div>     <%- include('./layouts/footer.ejs') %>

[ views/cat_product.ejs]

 

 

 

 

 

 

---

3 정리

메인 페이지 구현은 서버쪽보다 웹 디자인에 좀더 무게중심이 놓여있다. 그리드 레이아웃, 페이지 레이아웃, 전체 면적 사용, 등... 어떠한 디자인과 구현하는지가 무엇보다 사용자에게 중요한 부분이다. 위에서는 CSS를 가볍게 처리했지만 실제 프로젝트라면 꽤 시간을 들여야한다.