자바스크립트(Javascript)13 데이터 검색 화면 만들기(mongoDB) MongoDB 데이터베이스를 이용하고 Node.js-express 이용하여 데이터를 조회하는 화면을 만들어 보겠습니다. 예시 화면은 관광지명을 검색하여 조회하는 화면입니다. 1. MongoDB 여행지 정보 데이터 구성 관광지 정보는 공공데이터포탈의 전국관광지정보표준데이터를 활용하였습니다. https://www.data.go.kr/data/15021141/standard.do MongoDB에 tourinfo Schema를 아래와 같이 만듭니다. models>campgroud.js - 기본적인 관광지 정보외 경위도 위치, 이미지 데이터 정보도 같이 관리하는데 이번은 검색 기능에 대한 설명으로 제한하고자 합니다. - 검색은 관광지명칭(trrsrNm) 기준으로 검색하겠습니다. const mongoose = re.. 2023. 10. 20. 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. 이미지 파일 저장하기 - multer 서비스를 제공하는 웹애플리케이션에서 사용자가 이미지파일을 등록하여 서비스를 제공하기 위해서는 이미지 파일을 불러와서 서버에 저장해야 합니다. express와 multer를 이용하여 이미지 파일의 정보를 파싱하여 저장하는 방법에 대해 알아보겠습니다. 1. multer 란? multer 는 파일 업로드를 위해 사용되는 multipart/form-data를 다루기 위한 node.js의 미들웨어 입니다. 효율성을 최대화 하기 위해 busboy를 기반으로 하고 있습니다. https://github.com/mscdex/busboy 2. multer 설치하기 $npm install multer multer는 body객체와 한 개 file또는 여러 개의 files객체를 request 객체에 추가합니다. body객체는 .. 2023. 9. 23. 평점 표현 하기 - Starability 라이브러리 블로그나 영화, 음악 등 정보를 보고 가입자가 평가하는 방법으로 댓글을 남기거나 평점을 매깁니다. 평점의 스케일을 표현하는 방법은 다양하지만 가장 일반적인 방법으로 별(star) 표시를 하는 라이브러리를 소개하고자 합니다. starability.css - Accessible rating with animations on top https://github.com/LunarLogic/starability GitHub - LunarLogic/starability: Accessible rating forms with cute animations on top. Accessible rating forms with cute animations on top. - GitHub - LunarLogic/starability.. 2023. 9. 18. 유효성 검증 - Joi 자바스크립트에서 사용자가 입력한 데이터의 유효성을 검증하는 라이브러리인 Joi 에 대해 사용방법에 대해 알아보겠습니다. 자세한 사용법은 아래의 Joi 사이트를 참고 https://joi.dev/ joi.dev address formula joi-date pinpoint joi.dev 1. Joi 특성 단순하게 보면 입력한 데이터의 검증은 if 문을 사용하여 값이 유효한지 판단할 수 있지만 입력한 데이터가 많을 경우 모든 값을 if 문으로 검증하기 어렵습니다. Joi 는 스키마 기반으로 사전에 각 필드별 유효한 데이터의 기준을 정해주고, 필요한 곳에 함수 형태로 불러서 사용할 수 있어 데이터 유효성 검증에 편하게 사용할 수 있는 라이브러리 입니다. 2. Joi 설치 및 셋팅 https://www.npmjs.. 2023. 9. 2. bootstrap validation 폼(form) 태그에 적용하기 데이터를 신규 입력하거나 수정하기 위해 이용하는 폼(form) 태그 사용시 입력하는 데이터의 유효성 검증을 부트스트랩에서 제공하는 기능을 사용하는 방법에 대해 알아 보고자 합니다. Bootstrap form validation 적용 매뉴얼 https://getbootstrap.com/docs/5.3/forms/validation/ Validation Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript. getbootstrap.com 1. html form 양식에 적용 브라우저에서 제공되는 기본 valida.. 2023. 8. 29. 이전 1 2 3 다음 반응형
