본문 바로가기

전체 글85

평점 표현 하기 - 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.
리액트 - Netlify 배포하는 방법 및 주의사항 리액트 개발 공부를 하면서 실제 외부에서 접근 가능하도록 무료 호스팅(hosting) 방법중에서 정적 컨텐츠를 호스팅해주는 Netlify 를 사용하는 방법과 주의사항에 대해 알아 보겠습니다. 1. Netlify 와 github pages 차이점 github pages Netlify Netlify가 전반적으로 사이트 배포 관리 기능이 gitub pages에 비해 훨씬 다양하고, 도메인 비교 github pages - https://계정명.github.io/리포지토리명 으로 구성 : 명칭 변경 불가 netlify - https://프로젝트명.netlify.app 으로 구성 : 임의로 생성된 프로젝트명 대신 사용자가 임의 변경 가능 Deploy github pages - github repository에 pu.. 2023. 9. 7.
유효성 검증 - 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.
[Node.js] ejs-mate 사용하여 템플릿(template) 화면 만들기 node.js 를 통해 웹어플리케이션 만들 때 express 에서 제공하는 기본 템플릿 엔진대신 ejs-mate를 사용하면 각 화면에서 내비게이션바 같이 boilerplate(상용구) 같이 반복적인 기능을 효율적으로 구성할 수 있는 layout 템플릿 기능을 사용할 수 있습니다. 다음과 같이 예시를 들어 어떻게 효율적으로 화면을 구성할 수 있는지 알아보겠습니다. ejs-mate 설치 및 사용환경 구성 boilerplate 화면 만들기 다른 화면에 적용하기 https://www.npmjs.com/package/ejs-mate ejs-mate Express 4.x locals for layout, partial.. Latest version: 4.0.0, last published: a year ago. S.. 2023. 8. 27.
mongoose-express 데이터 필터링 이전까지 CRUD 기능을 단계별로 만들어 보았습니다. 이번에는 활용성이 높은 데이터 필터링 기능을 어떻게 만들면 되는지 직접 구현해 보겠습니다. Product 데이터 항목중 카테고리별 데이터 조회기능을 다음과 같이 단계적으로 만들어 봅니다. show.ejs에서 카테고리에 링크 추가하기 index.js 에서 카테고리 선택시 해당 카테고리 데이터만 필터링 기능 만들기 카테고리별 리스트에서 전체 Product 페이지로 돌아가기 1. 카테고리 링크 추가 및 필터링 라우트 설정 상세페이지의 category 데이터에 tag 통해서 이동할 라우터를 설정합니다. 라우터는 다음과 같이 두가지로 만들 수 있습니다. /categories/vegetable : 카테고리명으로 라우터 적용 /products?category=ve.. 2023. 8. 23.
반응형

티스토리툴바