백엔드(Backend)/데이터베이스

[MongoDB] 프로덕트 만들기: 새로운 상품 추가하기

jjinny_0609 2023. 12. 13. 10:12
728x90

새로운 상품을 추가하는 방법을 배워보도록 합시다. 이를 위해 폼과 폼을 제출할 두 개의 라우트가 필요합니다. 먼저, '/products/new' 경로로 GET 요청이 들어왔을 때 폼을 렌더링하고, '/products'로 POST 요청이 들어왔을 때 새로운 상품을 생성하는 라우트를 만들어보겠습니다.

GET 라우트: '/products/new'

app.get('/products/new', (req, res) => {
  res.render('products/new');
});

이 코드에서는 '/products/new' 라우트를 설정하고, 해당 경로로 GET 요청이 오면 'products/new' 템플릿을 렌더링하여 새 상품 추가 폼을 사용자에게 보여줍니다.

 

'products/new.ejs' 템플릿

<!-- products/new.ejs -->
<h1>Add A product</h1>
<form action="/products" method="POST">
  <label for="name">Product Name:</label>
  <input type="text" id="name" name="name" placeholder="Product name" required>

  <label for="price">Price (Unit):</label>
  <input type="number" id="price" name="price" placeholder="Price" required>

  <label for="category">Category:</label>
  <select id="category" name="category" required>
    <option value="fruit">Fruit</option>
    <option value="vegetable">Vegetable</option>
    <option value="dairy">Dairy</option>
  </select>

  <button type="submit">Submit</button>
</form>

이 템플릿에서는 상품 정보를 입력받는 폼을 작성합니다. 사용자는 제품명, 가격, 카테고리를 입력하고 제출 버튼을 클릭하여 새로운 상품을 생성할 수 있습니다.

 

POST 라우트: '/products'

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.urlencoded({extended: true})) //추가

app.post('/products', (req, res) => {
  console.log(req.body) // 생성된 상품 정보를 콘솔에 출력
  res.send('making your product!')
})

express.urlencoded({ extended: true }) 미들웨어가 Express 애플리케이션에 추가되었습니다. 이 미들웨어는 POST 요청에 대한 폼 데이터를 해석하여 req.body 객체에 넣어줍니다. 이를 통해 우리는 POST 라우트에서 사용자가 입력한 상품 정보를 편리하게 얻을 수 있게 됩니다.

이 요청을 통해 새로운 상품을 생성할 예정 입니다.
console로 확인한 물품 정보

 

 

app.post('/products', async (req, res) => {
  // console.log(req.body) // 생성된 상품 정보를 콘솔에 출력
  const newProduct = new Product(req.body);
  await newProduct.save();
  console.log(newProduct);  // 작업을 알기위해서 콘솔에 출력
  res.send('making your product!')
})

다시 상품 정보가 전달되는지 확인해보겠습니다.
정보가 잘 전달된것 같네요.

이게 출력 결과지만 엄밀히 따지면 성공적으로 출력된 건진 알 수 없습니다. 왜냐하면 Mongo에 무언가가 생성되기전에 ID를 가져왔기 때문입니다. 잘 작동한 건지 확신할 수 없죠. 유효하지 않은 걸로 테스트 해보면 됩니다.

예를 들어 price같이 숫자로 바뀔 수 없는 문자열을 보낸다면 우리가 상품 값에 대해 설정한 스키마가 price로 전달한 값을 받아서 숫자로 변환하겠죠. 문제가 발생하더라도 지금 우린 오류를 처리하지 않아요

 

res.redirect() 

app.post('/products', async (req, res) => {
  // console.log(req.body) // 생성된 상품 정보를 콘솔에 출력
  const newProduct = new Product(req.body); // 새 상품 만들기
  await newProduct.save(); 
  console.log(newProduct);  // 작업을 알기위해서 콘솔에 출력
  // res.send('making your product!')
  res.redirect(`/products/${newProduct._id}`)
})

 

이 코드에서는 '/products' 라우트를 설정하고, 해당 경로로 POST 요청이 오면 req.body를 사용하여 새로운 상품 정보를 받아와 MongoDB에 저장합니다. 저장된 상품 정보를 콘솔에 출력하고, 생성된 상품의 상세 페이지로 리다이렉트합니다.

이때 res.redirect()는 Post 요청이나 Delete Update 요청에 쓰는 이유는 페이지에서 새로고침을 누르면 상품이 계속 생성되어 POST 요청을 계속 보내는걸 방지하기 위해서 사용합니다.

URL에서 ID 확인
가격과 카테고리도 정상적으로 반영
콘솔에서 값 확인

 

이제 서버를 완전히 닫고 실행해도 데이터는 DB에 저장되어서 값을 확인할 수 있습니다.

 

이제 '/products/new' 경로로 이동하여 폼에 새로운 상품 정보를 입력하고 제출하면, 해당 정보로 새로운 상품이 생성됩니다. 생성된 상품의 상세 페이지로 자동으로 이동하며, 데이터베이스에도 새로운 상품이 저장되어 있습니다.

기본적인 상품 추가 흐름을 살펴보았으며, 다음 단계에서는 유효성 검사와 오류 처리를 포함한 더 많은 기능을 추가해 보겠습니다. 함께 계속해서 공부해요!

 
728x90