[MongoDB] 카테고리별로 필터링하기

이전 시간에는 Mongoose와 Express를 사용하여 기본적인 CRUD 기능을 구현하는 방법을 살펴보았습니다. 이번 시간에는 더 나아가 상품을 카테고리로 필터링하는 기능을 추가해보겠습니다. 사용자가 카테고리를 선택하면 해당 카테고리에 속한 상품만 보여지도록 만들어 보겠습니다. 1. 카테고리별 링크 생성 먼저, 각 상품의 카테고리에 해당하는 링크를 생성하여 사용자가 클릭할 수 있도록 만들겠습니다. show.ejs 파일에서 해당 링크를 추가합니다. Price: Category: 위 코드에서는 각 상품의 카테고리에 해당하는 링크를 생성하고 있습니다. 이 링크를 클릭하면 해당 카테고리의 상품만 보여지는 페이지로 이동할 것입니다. 2. 카테고리에 따른 상품 필터링 이제 Express 서버에서는 해당 카테고리에..

[MongoDB] 프로덕트 삭제하기

CRUD의 마지막 단계, 삭제(Delete) 기능을 구현해보겠습니다. 상품을 삭제하기 위한 버튼을 추가하고, 해당 버튼을 클릭하면 서버로 Delete 요청을 보내어 상품을 삭제할 것입니다. 이를 위해 적절한 라우트를 설정하고, 삭제된 상품에 대한 확인 및 리다이렉션을 구현하겠습니다. 1. 삭제 버튼 및 폼 생성 먼저, show.ejs 파일에서 삭제 버튼과 해당 기능을 수행할 폼을 생성합니다. Delete 위 코드에서는 폼을 통해 /products/:id 라우트에 Delete 요청을 보내고 있습니다. 2. Delete 라우트 설정 Express 서버에서는 해당 Delete 요청을 처리할 라우트를 설정합니다. // index.js app.delete('/products/:id', async (req, res..

[MongoDB] 카테고리 셀렉터 위의 탄젠트

이번 글에서는 편집용 폼의 Select Category에 설정된 값을 디폴트로 표시하여, 값을 편집하지 않아도 일일이 수정할 필요가 없도록 하는 방법을 알아보겠습니다. 1. 선택 옵션 동적으로 설정하기 Express를 사용하지 않는 경우, 일반적으로 태그에 불리언 속성인 selected를 추가하여 디폴트 값을 설정합니다. 이를 통해 옵션이 제공되면 해당 옵션을 선택하게 됩니다. fruit vegetable dairy 위 코드에서는 카테고리 값이 product.category와 같으면 selected 속성을 추가하여 해당 옵션을 선택하도록 동적으로 설정합니다. 2. 카테고리 목록 동적 생성 index.js 파일에서 카테고리 목록을 동적으로 생성하는 루프를 사용하여 옵션을 생성합니다. // index.js ..

[MongoDB] 프로덕트 업데이트하기

이번 시간에는 개별 상품을 업데이트하는 방법에 대해 알아보겠습니다. 1. Get 요청 라우트 생성 개별 상품을 업데이트하기 위해 편집용 폼을 처리하는 Get 요청 라우트를 만들어야 합니다. 아래 코드와 비슷한 코드를 사용합니다. app.get('/products/:id/edit', async (req, res) => { const { id } = req.params; const product = await Product.findById(id); res.render('products/edit', { product }) }) 2. Edit.ejs 파일 생성 Edit 페이지를 위한 폼을 만들기 위해 edit.ejs 파일을 생성합니다. New Product 폼을 복사하되, action에는 /products/를 ..

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

새로운 상품을 추가하는 방법을 배워보도록 합시다. 이를 위해 폼과 폼을 제출할 두 개의 라우트가 필요합니다. 먼저, '/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' 템플릿 Add A p..