👉 라우트 shop.js

const express = require("express");

const shopController = require("../controllers/shop");

const router = express.Router();

...

router.get("/products/:productId", shopController.getProduct); // #1

...

module.exports = router;

🧐 express 콜론

• Express 라우터는 콜론을 추가하고 productId와 같이 원하는 이름을 입력해서 변수 세그먼트가 있음을 Express 라우터에 알릴 수 있다.


• 나중에 이 이름으로 정보를 추출할 수 있게 되는데 이는 Express에게 productId와 같은 라우트를 탐색하지 말라는 신호를 보내는 것이다.


• 동적 세그먼트와 delete같은 특정 라우트가 있으면 더 구체적인 라우트를 앞에 두어야 라우트가 정상작동 하는걸 주의하자.

👉 C shop.js

const Product = require("../models/product");
const Cart = require("../models/cart");

...

exports.getProduct = (req, res, next) => {
  const prodId = req.params.productId;
  Product.findById(prodId, (product) => {
    res.render("shop/product-detail", {
      product: product,
      pageTitle: product.title,
      path: "/products",
    });
  });
};

...

🧐 params

productId에 액세스할 수 있는 이유는 shop.js 라우트 파일에서 콜론 후에 오는 이름으로 productId를 사용했기 때문이다. 콜론 다음에 사용하는 이름이 params 객체에서 데이터를 추출할 사용하는 이름이 된다.

👉 V product-list.ejs

    <% if (prods.length > 0) { %>
                    <div class="grid">
                        <% for (let product of prods) { %>
                            <article class="card product-item">
                                <header class="card__header">
                                    <h1 class="product__title">
                                        <%= product.title %>
                                    </h1>
                                </header>
                                <div class="card__image">
                                    <img src="<%= product.imageUrl %>" alt="<%= product.title %>">
                                </div>
                                <div class="card__content">
                                    <h2 class="product__price">$
                                        <%= product.price %>
                                    </h2>
                                    <p class="product__description">
                                        <%= product.description %>
                                    </p>
                                </div>
                                <div class="card__actions">
                                    <a href="/products/<%= product.id%>" class="btn">Details</a>
                                    <%- include('../includes/add-to-cart.ejs', {product: product})%>
                                </div>
                            </article>
                            <% } %>
                    </div>
                    <% } else { %>
                        <h1>No Products Found!</h1>
                        <% } %>
            </main>

🧐 include 유의하기

• for 루프 또는 일반적인 루프 안에 include가 들어있는 경우 모든 product를 거쳐 루핑하게 된다.


• 그런데 product는 해당 루프에서만 사용 가능한 로컬 변수다.


• 따라서 루프에 포함된 include에서는 기본적으로 이 변수를 받지 못하게 된다. {product: product}를 사용해서 루프마다 받을 수 있게 해주자