express8 Pagination 기능 만들기 대용량의 데이터를 한꺼번에 화면에 표출하게 되면 데이터를 로딩하는 시간도 많이 소요되고, 사용자가 보기에도 불편함이 많이 존재하게 됩니다. 사용자 편의성을 위해 일반적으로 사용하는 페이지를 나눠서 보여주는 pagination 기능을 아래의 예시를 통해 적용해보겠습니다. 페이지를 나눠서 표출하는 방법에는 다양한 방법이 있겠으나 이번 예시에서는 Node.js, Express, MongoDB 환경에서 기능을 구현하였습니다. 1. 기능 정의 - 표출할 전체 데이터 수를 확인하기 - 한 페이지에 표출할 목록 갯수 정하기 - 페이지당 목록 개수에 따른 페이지수 확정 - 페이지 이동시 해당 페이지 목록에 해당되는 데이터만 불러오기 - 페이지 목록 표출은 Bootstrap 적용 2. 페이지 생성 함수 정의 utils>.. 2023. 11. 3. 회원가입시 패스워드 유효성(Validation) 검사하기 웹사이트 개발시 회원가입 기능을 구현하는데 기본적인 패스워드 등록하기 위해 패스워드 유효성에 대해 설정 및 확인하는 방법에 대해 실제 예시를 통해 설명하고자 합니다. 기본적인 사용 프로그램은 Node.js, Express, Passport, Helmet 입니다. 1. 패스워드 기본 설정 만들기 패스워드 입력 폼의 pattern에 정규식을 지정하여 입력방식을 제한할 수 있습니다. 정규식 구성 예시 (?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,} - 대문자, 소문자, 숫자, 특수문자 포함 - 8글자 이상 아래는 입력창의 예시화면으로 ?=.*\d 는 숫자가 일치하는지 확인, 소문자, 8자 이상 입력해야 하도록 구성하였습니다. 비밀번호 Looks go.. 2023. 10. 28. Express 보안 - Helmet 사용하기 웹애플리케이션 개발시 보안 패키지로 Helmet에 대해 알아 보고자 합니다. Helmet은 인기 많은 보안 패키지로 13개 미들웨어로 구성되어 있습니다. 모두 HTTP 헤더와 관련된 것들 로써 헤더의 동작을 바꾸거나 켜고 끄고 또는 조작하는 것들에 해당됩니다. 1. 사용법 설치하기 : npm install helmet app.js 파일에 helmet 불러와 사용하기 const helmet = require('helmet'); app.use(helmet()); 상기와 같이 사용등록을 하면 helmet 패기키 13개 미들웨어를 모두 사용 가능합니다. 미들웨어 종류는 다음과 같습니다. 세부 사항은 아래 사이트에서 제공하는 설명서를 참조바랍니다. https://www.npmjs.com/package/helmet.. 2023. 10. 2. mongoose-express 신규데이터 입력폼 만들기 이전 블로그에서 데이터베이스에 저장된 데이터에 대한 상세 화면을 만들어 보았습니다. 2023.08.12 - [데이터베이스] - mongoose-express 상세페이지 만들기 이제 신규 product를 입력하고 데이터베이스에 저장하는 기능을 만들어 보겠습니다. 우선 입력 폼과 그 폼을 제출할 두 개의 라우트가 필요합니다. 기존 index.js 에서 신규 상품을 입력하는 라우트로 app.get 으로 products/new 를 추가하고, 입력한 폼을 제출하기 위한 라우트로 app.post 로 products 에 신규 상품을 추가합니다. (...) app.get("/products", async (req, res) => { const products = await Product.find({}); res.ren.. 2023. 8. 12. mongoose-express 상세페이지 만들기 앞서서 mongose와 express를 통해서 기본적인 CRUD 기능을 만들어 볼 수 있습니다. 일반적인 커머스 사이트에서 상품 목록을 선택하면 상세 페이지에서 해당 상품의 세부 내용을 확인할 수 있습니다. 이제 데이터베이스에 등록한 Product 리스트를 조회하는 페이지를 만들었고, 이제 단일 Product의 상세 페이지를 만들어 보겠습니다. Product를 조회하기 위해 URI에 Product 이름의 경우 중복이 될 수 있으므로 중복되지 않는 mongoDB의 id 를 사용하도록 합니다. Product 이름의 중복, 띄어 쓰기 등 여러가지 문제 발생 사항을 고려하여 고유값인 URL Slugs 를 이용하면 됩니다. What is URL slug ? 더보기 A URL slug is a part that c.. 2023. 8. 12. mongoose-express 데이터 조회 페이지 mongo DB에 저장된 데이터를 조회하여 웹페이지에 간단하게 표출해 봅니다. 라우트를 적용 (url : localhost:3000/products)하여 콜백을 이용해서 데이터 조회되도록 아래와 같이 작성합니다. 데이터베이스에서 조회하기 때문에 조회시간을 고려하여 비동기 조회로 async /await 을 사용합니다. const express = require("express"); const app = express(); const path = require("path"); const Product = require("./models/product"); const mongoose = require("mongoose"); mongoose .connect("mongodb://127.0.0.1:27017/far.. 2023. 8. 5. 이전 1 2 다음 반응형
